I'm making a thing that looks like this:

screenshot of the thing

It's a list of pages which have tags. These tags can have a hierarchy, like this:

\-> perl
\-> python
|   |
|   \-> python 2
|   |
|   \-> python 3
\-> ruby
    \-> ruby on rails

I need a way to display this hierarchy in the limited space I have below each page. I can't use a one-tag-per-line format like the above, because that would take up too much space.

I also need it to be immediately clear which tag is a child of which parent. I was thinking of doing something like this:

{ programming } { > perl } { > python } { >> python 2 } { >> python 3 } { > ruby } { >> ruby on rails }

This does unambiguously identify which tag is which; however, it's hard to tell at a glance.

To further complicate things, this may be on a mobile device with a screen with a small width, so there's no guarantee that all the tags will fit on one line.

How can I format this tag hierarchy, while

  • keeping the space it takes up reasonably small (i.e. not one tag per line)
  • make it immediately clear which tag is a parent/child of which
  • still work on mobile devices with small screens


  • 1
    Several questions - Who are your users? (Their comfort w computers, especially w a variety of UI) Are they expert users of your system? (meaning they go there often) What do you mean by "reasonably small"?
    – Mayo
    Commented Nov 25, 2014 at 14:20
  • @Mayo I'm not sure how I can answer that. This is a new enough project that there are maybe two or three "users" at the most (for testing and whatnot), and since it's open source so that other people can use it, I'd like to make it reasonably user-friendly in terms of computer-literacy.
    – Doorknob
    Commented Nov 25, 2014 at 22:05
  • A key UX principle is identifying who is using your application. Are you targeting younger tech oriented people or older folks who are intimidated by computers? Judging by your posts I would say it leans to tech-oriented people. It's the phrase "reasonably small" that particularly intrigues me: what is reasonably small? 200px? 600px?
    – Mayo
    Commented Nov 26, 2014 at 14:17
  • @Mayo I'm using the project personally for a tech-oriented audience, but since it's open source, someone might use it for a completely different group of users. What I'm saying is that there's currently no way to definitively pinpoint the specific target group of users. I've already edited an explanation of "reasonably small" into the question.
    – Doorknob
    Commented Nov 26, 2014 at 14:20
  • Form follows Function, as Louis Sullivan said. The nav and other objects are designed in context of the complete project. My first thought would be to make the nav customizable - barring that a breadcrumb presentation or something derived from that would be my first thought.
    – Mayo
    Commented Nov 26, 2014 at 14:30

1 Answer 1


Keep DRY

With categorical information, you do not necessarily have to show the category label repeatedly. Use proximity to group the category and subject. My guess based on your img your users are very savvy and will recognize icons. Leverage them to save space. This way even if things are three or four levels deep you can still relate them with {icon} / {subject} or {icon} / ... / { subject } Slashes might also be appropriate for a savvy crowd to depict a hierarchy.

Know Your Neighbors

It is a good idea to get a feel for what other apps your users are familiar with. This could give you some ways to leverage recognizable patterns. People don't usually understand that one app doesn't share the same conventions as another. Leveraging complimentary or competitive sites can help make something more intuitive.

  • 1
    You say to "use proximity to group" and that "slashes might also be appropriate," but you never explain how exactly that would work. You also don't mention any examples of other apps that exist that use a similar hierarchical model. Could you provide a tangible example of what you're suggesting?
    – Doorknob
    Commented Nov 25, 2014 at 13:42
  • Yes, the answer is high-level because the question is not detailed enough to give a more specific answer. Design fundamentals are very important as they should guide just about any design decision. You need to get to know your users though. I think that is pretty clear. See @Mayo comment on your orig question.
    – Ken
    Commented Nov 25, 2014 at 18:44

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.