Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am facing a design and UX issue while creating a master detail grid in which both master and detail can have over a million rows.

The simplest solution would be to enable paging (click) in both master and detail.

Can anyone suggest a better UI/UX design?

Edit: Some more detail on why I need sm1 to view a million records:

The screen displays searched result over a large data. The screen acts as a browse screen if user does not enter any search string. I need to handle that. Though my next expectation definitely is that user will apply more filters in search. Still, I need to handle the initial scenario. I don't want the web page to crash.

share|improve this question
2  
You haven't given your goals, or any information on your constraints. That makes it impossible to give a better design, and any suggestion will just be a different design. –  JohnGB Feb 23 '13 at 20:49
2  
Who exactly is going to VIEW a million rows? –  Roger Attrill Feb 23 '13 at 21:25
    
@All : Edited post –  skywalker_7421 Feb 23 '13 at 21:32
    
If can break down the problem a little more we can probably help with some guidelines. But like JohnGB pointed out, without some insight into the project, any suggestions you get will be too general to actually be applied. –  Noah C Feb 23 '13 at 21:33
1  
An initial load of that many records is essentially meaningless - it's akin to Google loading every page on the internet before you entered a search term. –  steveax Feb 23 '13 at 21:39
show 4 more comments

3 Answers

It sounds like you want to give users an overview of a search result before they begin filtering. You might want to think about the problem you're trying to solve before focusing on technical challenge of presenting millions of rows.

User Goals

What are your users' goals? What tasks are they performing? Is searching, then sorting and filtering a large set of data the ultimate goal or a means to an end?

  • If sorting/filtering is the goal: then you're on the right track and you just need to look into smart ways to asynchronously load the data and manage the search filters, which is definitely a technical question that involves front-end and server work.
  • If the goal is finding a single data point or small data set: Invest time finding ways to providing better / more relevant results. What signals can you gather from the user to anticipate their needs a little better thereby predict what part of the data set they need? Even reducing the result set by a fraction is a huge improvement.

Bottom line

If displaying a data set with millions of rows to a user has no immediate utility (it probably doesn't), then don't present it at all.

Do users need to get the gist of their search they just performed? Then summarize the results. Break the millions of results into meaningful chunks and use design cues to reduce the cognitive load:

  • Build a summary UI that gives users a good way to dive into the details of the data set.
  • Add meaning through charts, stats, highlights.

Going for it

That said, if you're sure you'll need to present several thousand results to the user, then here's what I'd do. Load the data asynchronously using a front-end framework to keep the UI responsive while data is streaming in.

  • Load a handful of masters initially, enough to fill a couple pages.
  • Then load the details you expect will be viewed first.
  • When users are ready for more results, use pagination or infinite scroll. As users scroll down, the browser can asynchronously load more masters and lazy load their details. The combination of infinite scroll and faceted search can be great, but it's more technically demanding than pagination.
  • If you have multiple details per master, you can use the same pagination or infinite scroll to show additional details.

This requires skill

  • The more font-end and server skills involved, the better. This isn't going to be an off the shelf solution, as the app needs to balance UI responsiveness with network performance with memory overhead.
  • For transit: JSON will likely cut it, but a more sparse purpose-built data format will reduce overhead across the wire.

An example

Vimeo's faceted search. In this example the "detail" is a video and it's therefore loaded in a new page, but the concept holds true - there's no technical reason they couldn't show the video inline on the same page as the search results.

  • Results are pulled in asynchronously as you manipulate the search filters.
  • The first few results are shown, then the rest are paginated.
  • There's no reason you can't switch from pagination to an infinite scroll pattern. But make sure you have the required skills on board or it won't pan out.
  • Bonus: Note how even though the data is being loaded async, the URL in the address bar updates in real time as you change the search facets. It makes bookmarking, saving, and sharing searches a snap. This is a big win; one drawback of early async implementations was no reflection of query or UI state in the URL.
share|improve this answer
1  
I totally agree with you. Suppose there are not millions of rows, but there are 10-15k search results (Maybe more but just enough to crash a good enough modern browser). We solve this problem in a single grid using paging. How do we do the same in a Master Detail grid. –  skywalker_7421 Feb 23 '13 at 22:13
1  
Basically I want to find out a way of using paging in master detail grid for both master grid and detail grid. –  skywalker_7421 Feb 23 '13 at 22:14
    
Got it. I added more details. See my edit above. –  Noah C Feb 23 '13 at 22:37
    
There are few more concerns. I have already considered infinite scroll. But I am unable to visualize how it can be provided to the user in three levels (my master-detail has 3 levels), where each level can contain many results. Providing pagination by clicking page numbers is always an option, but providing this using infinite scroll at all levels is a challenge. I am working on it. Do post if u come with a good UI presentation –  skywalker_7421 Feb 24 '13 at 8:42
    
I will share with you guys a prototype if I build one –  skywalker_7421 Feb 24 '13 at 8:48
add comment

I'm assuming (see next paragraph if my assumption is wrong) that it's a 1-1 relationship between master and detail ie you don't really have a trillion detail rows. In which case you seem to have exactly the same case as with Google search. They for one do not allow you to search for a blank string, but beyond that it seems like you just need to copy what they do with displaying the page detail to the right when you click on one of the rows, plus the pagination as you planned.

If you do have that many detail rows, then either:

  1. think of the concept of drilling down from an excel pivot table where double clicking on a master row brings up all the detail rows.
  2. follow the Google path of 'search within these results' so you have a link below the master row that would bring up the paginated detail results rather than double click.
share|improve this answer
add comment

How about infinity scroll ?

Example :

http://www.datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html

Initially load 10/50 items. Load more if scroll end is reached. Also you can cache some additional pages if user reaches n th item.

share|improve this answer
    
Challenge is providing infinity scroll in a three level master-detail –  skywalker_7421 Feb 24 '13 at 8:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.