What should be the default view of a large collection of data (that can be filtered) on a web page?

Question

I have a web page that shows projects (but it could be anything) in an html table (one row per project). There is a filter button at the top that allows users to can filter by a number of different fields to shorten the list.

Right now the default page shows all projects (which can be thousands). The issue here is that:

1. This makes the page slow loading all of the data
2. It shows too much data so I can't imagine anyone wanting to see everything at once

I was thinking about changing it so the default page shows nothing and the user has to choose a filter but then this seems like you still have to do multiple steps to get to the screen you want.

I wanted to get feedback on how similar people have dealt with this challenge?

Answer 1

I would agree with you that in general having the default page show absolutely nothing isn't the best choice. I think you have a couple of options here to solve your slow loading problem. All of these patterns below assume that even if you apply some filters, you may end up with a list as big as the default page anyways.

• Implement Continuous Scrolling. Therefore you would not load all the data up front, just the first screen or two's worth of data. An example of this being Google's image search.
• Implement pagination of your data. This is the most common pattern for controlling how much data is loaded at any one time. An example of this being Google's default web search.

Either choice should solve your problem pretty readily as it will reduce the amount of data being pulled on load of the page.

Answer 2

Can defiantly see your issue, and I also agree with what GotDibbs response with not showing anything to the user when the page first loads is a bad idea. I would suggest getting some end user feedback on what they commonly look for to build the initial data table contents. While having the ability to slowly bring data in as the user request it is great, but it would be much better if the user can just land on the page and find what they need 90% of the time is even better. (Not sure if this is possible based on how the data you currently have is being used by your users).

To help cut down on your initial load problem I would like to add another possible (implementation) solution with the use of the DataTable jQuery Plugin. The plugin has a lot of the filtering features built right in and also has a way to Ajax in some of your data to help cut down on initial page load. Depending on how you want to setup the plugin; data can be pulled in as user use the pagination feature or change filtering options/values.

This plugin is defiantly a top pick with our end user as it provides a super intuitive interface. The response time seems to be instantaneous when filter/search for contents already in the table. Development teams also like it as the API is well written and easy to customize the implementation needed. I will have to admit we have never thrown the plugin a data table with over 1000+ records on load through. We have done around 300 hundred and the plugin took it like a champ.