I have been given the following screen grab to comment on:

screen grab

I don't think there's an awful lot you can say aside from that the colors are wrong (they imply one is clickable while the other isn't; both are), and the arrows look a little messy. Aside from that, I don't really know what to add.

How can I redesign this layout so the parent child relationships are more obvious?

2 Answers 2


Normally it is considered fine to rely on indentation to indicate relatedness.

enter image description here

So why isn't indentation working well for your page?

I think your main problem is the length of the titles combined with repeated text. For example, every element starts with the word "company". By the time you have scanned along the title of an element to get to some distinguishing information (the code at the end), you are too far away from the indentation.

Shorten the titles / remove repeated text and, most importantly, put the most informative words first. You can also use icons to indicate different categories / kinds of items.


Treeviews have been widely used and Windows users know them well from using the file explorer :

enter image description here

An alternative suggestion is to emphasize the nesting by displaying a box around every element that makes the position of the left border more visible.

Using lines can emphasize the clarity of the hierarchy by making the relationships visible (and not only implied by the indentation).

Here is an example that combines both :

enter image description here

Another approach would consist of nesting the elements, as done here with parent elements' boxes containing the children's boxes :

enter image description here

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.