2

I am facing a 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 in both master and detail.

Can anyone suggest a better approach?

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

The screen displays search results over large data. The screen acts as a browse screen if the 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.

10
  • 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
    Commented Feb 23, 2013 at 20:49
  • 2
    Who exactly is going to VIEW a million rows? Commented Feb 23, 2013 at 21:25
  • @All : Edited post
    – Apurv
    Commented Feb 23, 2013 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
    Commented Feb 23, 2013 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
    Commented Feb 23, 2013 at 21:39

3 Answers 3

4

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.
5
  • 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.
    – Apurv
    Commented Feb 23, 2013 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.
    – Apurv
    Commented Feb 23, 2013 at 22:14
  • Got it. I added more details. See my edit above.
    – Noah C
    Commented Feb 23, 2013 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
    – Apurv
    Commented Feb 24, 2013 at 8:42
  • I will share with you guys a prototype if I build one
    – Apurv
    Commented Feb 24, 2013 at 8:48
1

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.
0

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.

1
  • Challenge is providing infinity scroll in a three level master-detail
    – Apurv
    Commented Feb 24, 2013 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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