How can I show a clear hierarchy in a small space?

Question

I'm making a thing that looks like this:

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

programming
|
\-> 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

?

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.