2

I'm trying to show a master-detail view, where each cell in the master table (the one on the left) represents a list.
When Clicking a cell, the list is opened in the right panel.
The table and the list have pagination.
My problem is, in case the user selected a cell, (for example, Column 1, ID 6, as in the example), and then moves to a different page in the left table, what should I do with the contents of the right panel?
The possibilities as I see them, are:

  1. Hide the right panel. I'm not sure that this is a good option, because the user might want to keep seeing it, even after he moved to another page.
  2. Keep the right panel. This might be confusing, because the user will see in the right panel details about a row that doesn't appear in the left table.

Both of these options are not good, as each has its drawbacks.
I couldn't think, or find any other way, though it seem like a common problem for master-detail views, and I thought that I will find a solution quickly.
Infinite scroll isn't relevant, as the users said that it isn't comfortable for them.
So my question is, Is there a known pattern to handle pagination in master-detail view? and if there is non, have anyone experienced in such design and can add a better idea then the ones listed above?

enter image description here

Extra details about the usage of the table

  1. The user will explore the table, mostly by sorting it according to its columns, and inspecting the extreme values. Then after finding an interesting cell, he will click it and explore further.
  2. Occasionally, the user will know which cell he is looking for (i.e. a cell that he already saw in the past), and will search it explicitly, with the filter.

Related Question: Displaying million records in Master Detail Grid (Million in both master detail) I couldn't find what I was looking for here.

EDIT

as per @Luchadora 's answer:

  1. The user will occasionally want to make comparison between 2 cells in different pages, but it will be relatively rare
  2. I thought to leave the panel empty, and not tottaly collapse it, because it will make the screen "bounce", and I don't need this extra "real-estate"
2
  • What does prev and next buttons do in your grid? Is it left/right or up/down? Sep 6, 2016 at 12:47
  • @IliasBennani they show other items of the same list, i.e. for the lefthand table, clicking next will show items IDs 10-18 (now 1-9 are shown)
    – Hagai
    Sep 6, 2016 at 13:05

2 Answers 2

4

It does not have to be a problem if you think about the following additions to the design;

  • Mention the content of the cell in the detail pane (I now only see the column/ID but not the value)
  • Visually highlight the cell of the master page when selected for the detail view. If the user navigates to a next page, the missing highlighted cell already indicates that the detail list is from an off-page grid-cell.
  • Include a subtle dynamic quicklink back to the matching master-page from the detail-view. The quicklink will only be visible if the master view is on a different page. Very quick mockup
4
  • Actually, I have the highlights in my original design, but I didn't want to load the example with too many details, so I've omitted it, but you are right, the fact that there will be no highlighted cell will indeed indicate that the list is from an off-page cell. Regarding the quicklink, do you have an idea of how it can be shown?
    – Hagai
    Sep 6, 2016 at 13:03
  • See the edit for a link to a very quick mockup. I was wondering about the pagination in the detail pane...what does it do? I would expect a vertical scrolling list if the list was longer than the detail view.... Sep 6, 2016 at 13:12
  • the clients said that vertical scrolling isn't comfortable for them, they want pagination for both of the panels. Each of the lists might contain a lot of rows, and infinite scroll isn't comfortable for them, so both of the panels need pagination. About the mockup that you've uploaded, the quicklink makes me as a user feel that it will change something in the right panel, and not in the left panel, so I'm not comfortable with it. Do you have another idea? (and thanks a lot for the mockup!)
    – Hagai
    Sep 6, 2016 at 13:17
  • Fair enough with the pagination. You might add a clickable icon on the border between the two panes to indicate the connection of navigating the master pane back to the page containing the grid-cell. See updated mockup. A tooltip might help here. Otherwise you could just add a clickable link on the master page somewhere, perhaps next to the pagination. Sep 6, 2016 at 13:33
1

That would depend on the goal of the user.

Does the user want to compare the details of a cell? If so, I would keep the panel with the previous information (option 2 that you mentioned).

E.g.: I want to see the details of Column 1, ID 6. After seeing the details I want to compare the information with Column 2, ID 22 (which would be on the next page). In that case it's useful to keep the panel with the Column 1, ID 6 open, so I can compare easily when clicking on the Column 2, ID 22.

In other cases I would hide the panel or leave it empty when going to the next page. Will the left tabel scale to full width when the panel collapses?

2
  • 1. The user will occasionally want to make this comparison, but it will be relatively rare. So I'm not sure what's better - hide info that might be relevant occasionally, or show info that is confusing and not clear what is its origin. 2. I thought to leave the panel empty, and not totaly collapse it, because it will make the screen "bounce", and I don't need this extraa "real-estate"
    – Hagai
    Sep 6, 2016 at 12:55
  • Yes, I agree we shouldn't want a bouncing screen and also leaving the panel empty feels a bit weird (like something is wrong). Maybe you can still keep the previous information, combined with the tips Dave Senden mentioned above, like highlighting cells and adding a link back.
    – Luchadora
    Sep 6, 2016 at 12:56

Your Answer

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

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