1

In our current table displaying all clusters in a model, we have both list view and details view. We also allow the user to click on an arrow on the row when they want to see the full view of that particular cluster. However, this can be confusing when the user is in the details view page because the arrows make the users assume that when they click on another row's arrow, they would see that rows detail page (we've seen this error in usability testing). Below I have displayed where the arrow button is positioned. * and y represent buttons to click list view and details view.

enter image description here enter image description here

Currently, one of our solutions is to remove the button when they are on details view and have a seperate button which says "go to page" on the details section. However, this means we'll have two different tables when the front end is designing it. Which is extra work for them. Does anyone have any solutions on how else we could approach this? Thank you!

Improve this question

1 Answer 1

Reset to default
0

For implementing a Master-Detail view, the table contains the "Master" rows, while a separate panel contains the "Details" for the tapped "Master" Row.

When implemented vertically, this takes on an accordion behavior, with the Detail appearing just under the Master row that has been tapped. This expand/collapse behavior can be triggered by the clicking of the row, or by a rotating caret that points down when collapsed, and up when expanded. This gives the user feedback and a hint of how they will collapse the just expanded Details panel.

When implemented horizontally, the Details panel appears on the right side as you have drawn in your images. I ran into the same challenges with strengthening the visual relationship between Master and Detail panel once revealed.

Take a look at a codepen I created to test some visual queues, and see what you think. This design uses one table, and a div to display the Detail. I did not test different ways of hiding/showing the panel, but it would be straightforward. I would "show" on click of the Master Row, and then use a close button in the Detail panel to "hide".

https://codepen.io/cwcorbin/pen/BPJgzL

Feel free to copy any code with pride.

Improve this answer

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.