We can show hierarchical relationship either using simple spaces, or using dash lines:




  --- child

I have seen both of them.

But now that I have to design a hierarchical UI in an application, I wonder if we have any standard or research on it. Which one is the better way to show it?

  • Do you wish to just showcase the nodes in a hierarchical fashion or would the user be able to interact with the nodes in your hierarchy, click to expand, for example?
    – ikartik90
    Aug 22 at 10:52
  • Both of them exists. In two different places.
    – AH Cloud
    Aug 22 at 11:59

You can take cues for presenting your information hierarchy from the four key components of any IA

Organization Scheme and Structure

Does the information hierarchy match your users' mental model?

Labelling System

Is the terminology appropriate for your target audience?

Navigation System

Can people find where they are and their way around your UI?

Search System

Do people know how to find what they're looking for in your UI?

As long as your UI has these four things appropriately catered to, it won't matter whether you use spaces or dashes, or any other approach, for that matter. The visual aspect is a subject of personal preference.

And this is precisely why there are so many different ways to represent directory structures within Finder on Mac and Explorer on Windows, just to name the two most commonly used operating systems. For that matter, even cloud applications such as Google Drive would offer you multiple options to choose from when navigating through your Drive's information hierarchy.

  • This is a good answer, even though it does not address the question. Thank you anyway.
    – Adriano
    Sep 22 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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