82

I've been pondering the best way to show a deep hierarchy for a desktop application I'm working on. Here are some alternative designs I'm considering...

Mac OSX Finder:

alt text

If you understand what you're seeing, the "Columns View" does a great job of showing context (where am I in this giant hierarchy?), and you can browse quickly through lists of folders to see what's in them...but it sure uses some screen real estate.

Microsoft's MSDN Navigator:

alt text

Basically, what's going on here is that you can see the "parents" of the page you're looking at, and you can see any "children". You give up on seeing the "siblings" at the different levels, but that saves you a bunch of screen space. So, you give up some context in exchange for compactness.

Windows Navigator:

alt text

This UI is decent at showing context right up until the point that you have to start vertically or horizontally scrolling. If you have lots of items and lots of levels, you'll be scrolling a lot. That said, you can pop open multiple folder branches at a time. This provides a sort of mini-history (what folders have I popped open so far?).

"Mega-Menus":

alt text

In this example, you're looking at about three levels of the hierarchy. If you're clever, I imagine you could show maybe a fourth of fifth level, but at some point, it's going to either break down or devolve into something more traditional (tree view, etc.).

Questions

Obviously, no one can answer for me which type of hierarchy UI I need unless you understand the task I'm trying to support, but I do have some specific questions:

  1. How prevalent are each of these alternatives? I haven't been a Mac user for a long time, and I really haven't seen a UI like the Finder's Columns View anywhere besides on a Mac. Does it exist anywhere else? Would you use it on a non-Mac interface? The "Mega-Menus", conversely, seem very prevalent. I see the tree-view (as in Windows Explorer) all over the place (in Windows apps, on the web, etc.). It's basically a standard GUI widget. I haven't seen the MSDN navigator anywhere else but on the MSDN site.

  2. Do users "get" these interfaces? This is probably highly correlated with the prevalence question, but if I put, say, the Columns View in front of non-Mac users, would they be completely stumped? Any data or experience with this? I would be very wary of using that MSDN one unless I had some data to prove that non-programmers would understand it.

  3. Am I missing any alternatives? What other hierarchy UI's or variations on these have you seen?

Improve this question
5
  • 1
    In regards to your application, if you mention your constraints, you might find more useful suggestions or creative ideas.
    – Virtuosi Media
    Commented Nov 3, 2010 at 7:22
  • For all you UX nerds... the OSX design is called "Miller Columns" and it's been around longer than any Mac OS.
    – Itumac
    Commented Jan 13, 2014 at 21:39
  • @itumac - can you give a reference for that?
    – virtualnobi
    Commented Jan 14, 2014 at 15:42
  • With love :) en.wikipedia.org/wiki/Miller_columns
    – Itumac
    Commented Jan 14, 2014 at 17:35
  • The average web user will probably never think of these structures, let alone see it in this kind of visualization. Nonetheless, they will feel it. Web content is easier to find when it’s not buried under multiple layers of categories, that means deep hierarchies have the short end of the stick.
    – user23590
    Commented Jun 13, 2014 at 8:51

8 Answers 8

Reset to default
16

A few considerations:

  1. What OS is this for (or is it for multiple)?
  2. Are there any constraints or known limits on your hierarchy?
  3. Is there a search option provided?

No. 1 is important as you noted... because the Mac Finder would be foreign to most Windows users.

No. 2 may provide assistance also. E.g. finder works good if you have a shallow tree, but if you have 15-20 levels of depth it suffers usability

No. 3 is a usability item. If I can't quickly view the entire tree in less than 5-10 seconds a search option is needed.

All in all, I find the standard "tree" to be the most obvious to users. The hierarchy is physically visible, and only the branch of interest need be opened/explored - but you can open more than one branch for comparisons or searching.

My only other suggestion was going to be if you have minimal space to work with, the iPod "drill-down" paradigm works really well.

alt text

Improve this answer
2
  • 5
    Try 15–20 levels of depth with a standard tree widget; it'll suffer usability as well. But, unless you're exploring the classification of animals or some other large data sets, the number of levels would be reasonable (I hope). I'm a little biased, but I generally prefer the Mac's column view over the tree view (also available on the Mac) because of it's context and easy navigation between siblings and parents.
    – Peter Frings
    Commented Mar 15, 2011 at 21:51
  • 6
    The iPod-style drill-down is conceptually very similar to Finder's column view, except that you can only see one column at a time...
    – martinpolley
    Commented Feb 5, 2012 at 6:56
14

Show only the current level of the hierarchy, and breadcrumbs

enter image description here

Improve this answer
1
  • 1
    Pwned.​​​​​​​​​
    – Pacerier
    Commented Apr 28, 2014 at 15:11
7

I think it depends on the typical tasks. For just seeing a hierarchy and clicking on links, I do agree with lucasrizoli, that tree is very similar.

If user have to go through folders a lot (forward and backward in hierarchy) I prefer the Mac OSX idea. It is very useful at work, where I have to find thinks in folders.

Why is it good? Firstly it uses much more of the space on the display by splitting the hierarchy into 2 dimensions. Secondly it very clearly shows which items are on the same level, deeper = horizontal, same = vertical.

Of course, if you just want the hierarchy-navigation to be part of an application you might not have the space for the Mac OSX way.

So it depends hugely on your design and on the typical tasks for the user. Also consider if your typical user would be a mac or windows user (if you can say anything about it at all).

Improve this answer
4

1) Tree widgets (as in Windows Explorer) and drop-down menus (mega or otherwise) I would say are the most familiar.

2) "Get" is vague, as are "users," really.

This is not an answer to your question, but is it necessary that the user see/navigate a deep hierarchy? Avoiding a hierarchy or simplifying it, making it shallower, I suspect it will be easier that presenting the hierarchy in any way.

3) Treemaps are used primarily in info visualization. Also, Dasher uses an interesting, zoomable means of navigating a deep tree of letter probabilities. Neither are particularly well-known or common.

Improve this answer
4

The best way do not do so deep hierarchy or use slices, shallow views (deep 2 max).

Improve this answer
6
  • 1
    Sometimes that's not an option.
    – Pacerier
    Commented Apr 28, 2014 at 15:11
  • @Pacerier when and where, please explain.
    – igor
    Commented Apr 28, 2014 at 18:35
  • When there is simply just too much data.
    – Pacerier
    Commented Apr 28, 2014 at 19:12
  • @Pacerier human brain cannot process, for example, page with 1000 more records. average human cannot remember more than 6 numbers. so be aware to change application's design to simplify UI interface and usability
    – igor
    Commented Apr 29, 2014 at 10:58
  • 1
    That's common knowledge. But it doesn't change the fact that there are times when there's too much data which you need to display. And your solution ("shallow views, deep 2 max") is not solving the problem.
    – Pacerier
    Commented Apr 30, 2014 at 11:34
2

Regular tree-view with drill-down on double-click and breadcrumbs. Check out Workflowy, it has the same behaviour.

Regular tree-view with drill-down on double-click and breadcrumbs

Improve this answer
1
  • This one's a really good option. Might be too complex for the demographic I'm working on currently but it's giving me ideas. Thank you so much!
    – CheeseCake
    Commented Apr 2, 2021 at 15:33
2

Mac OS column view is cool, but it takes huge screen space. iPhone and iPod hierarchical screens use the same concept, but split the columns across many screens because of the devices small size. They also take the whole screen, albeit one at a time.

Treeviews aren't so friendly to navigate horizontally if you you have many leaf nodes, or when you begin to have to scroll in two dimensions because of the amount of content. Navigate inside regedit to see what I mean.

If you wish to keep some context, a hybrid approach would be to combine a breadcrumb bar with a list showing only the leaf nodes for the current level. Something like a simplified version of Windows 7 explorer.

Improve this answer
0

One simple way to show a hierarchy is to combine a tree with 2 lists. One list shows just the leaf nodes for the selected tree node, the other shows all leaf nodes but grouped by their parent node.

It works quite well to add a search box to the filtered list so that it can either show the selected nodes contents or all leaf nodes that match a pattern:

enter image description here

Improve this answer
2
  • Would this hide the hierarchy of deeper leaves? This could especially be problematic is two or more branches with different parents have the same name or if the name of branches only has meaning under the context of their parent branch's name.
    – Danny Varod
    Commented Oct 18, 2012 at 11:14
  • You're right. I must admit I've fallen out of favour with the approach I took here, it was unnecessarily complex also - I can't even down-vote it now.
    – pgfearo
    Commented Oct 18, 2012 at 16:59

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.