I'm trying to design a tabular view in which each item in a row contains about 5 pieces of basic information, the exact number doesn't matter. Some items will consist of multiple child items, which can be viewed by expanding the parent row. Each child has 3 of the 5 pieces of basic information. Some of the children will consist of multiple child items themselves, and so on. The depth of child items in practice probably won't exceed 3/4 but there's no hard limit.

My first basic design is here: enter image description here

Here's a slightly improved design, but is still confusing: enter image description here

Does anyone have any ideas on how the layout could be improved to make it more obvious what's going on in a manner that can go 4 levels deep or even more?

EDIT: To prevent the page from becoming too complicated in this solution only one sibling will be expanded at a time, so essentially meaning each level is an accordion.

  • Any reason why the user has to see the sub tables within the parent tables? What are the pros and cons?
    – Nicolas
    Dec 28, 2018 at 18:05
  • Are you suggesting a new page for the child items or a different table/layout within the expanded row? Dec 29, 2018 at 10:28
  • No, I’m asking for the pros and cons for your current design and your reasoning for choosing it.
    – Nicolas
    Dec 29, 2018 at 14:21
  • Pros - user can see the child items that make up the parent items without navigating to another page. Cons - could be confusing if layout not well designed. Dec 31, 2018 at 12:25

1 Answer 1


It seems the answer to this question could be highly dependent on the user's workflow and efficiency.

Common practice recommends opening each child in a separate page to avoid information overload. Just opening a few children in the same page will very quickly make your page super long and overwhelming.

I recommend you test both version (new page vs in-line expansion) with users performing the task they are expected to do.

  • To prevent the page from becoming too complicated, if I use the "same page solution", I will only allow one sibling to be expanded at a time, so essentially it will be an accordion at each level. Jan 2, 2019 at 1:00
  • What if you have a very extensive sibling and the user opens another parent? Wouldn’t the action of the sibling collapsing coupled with the parent opening mess with the page height and disorient the user?
    – Nicolas
    Jan 2, 2019 at 14:35

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.