Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
In regards to your application, if you mention your constraints, you might find more useful suggestions or creative ideas. –  Virtuosi Media Nov 3 '10 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 Jan 13 at 21:39
    
@itumac - can you give a reference for that? –  virtualnobi Jan 14 at 15:42
    
With love :) lmgtfy.com/?q=miller+columns –  Itumac Jan 14 at 17:35
add comment

7 Answers

up vote 9 down vote accepted

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

share|improve this answer
1  
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 Mar 15 '11 at 21:51
2  
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 Feb 5 '12 at 6:56
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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).

share|improve this answer
add comment

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

share|improve this answer
    
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 Oct 18 '12 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 Oct 18 '12 at 16:59
add comment

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 horizontaly 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.

share|improve this answer
add comment

Show only the current level of the hierarchy, and breadcrumbs

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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