What's the best way to view a deep hierarchy?

by devuxer   Last Updated May 11, 2018 15:16 PM

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 http://www.google.com/url?source=imgres&ct=img&q=http://www.informit.com/content/images/chap03_9780789742292/elementLinks/03fig06.jpg&sa=X&ei=Np_QTOyzFIKBlAemrNHvBQ&ved=0CAQQ8wc4Qg&usg=AFQjCNHUJc55AvHYbMaw_m9TrZfFoV_gDQ

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?



Answers 8


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.

lucasrizoli
lucasrizoli
November 03, 2010 05:37 AM

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

igor
igor
November 03, 2010 08:44 AM

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

Lukas Oppermann
Lukas Oppermann
November 03, 2010 08:52 AM

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

scunliffe
scunliffe
November 03, 2010 10:34 AM

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

pgfearo
pgfearo
June 08, 2011 18:01 PM

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.

facildelembrar
facildelembrar
February 04, 2012 21:20 PM

Show only the current level of the hierarchy, and breadcrumbs

enter image description here

Seder
Seder
October 18, 2012 10:59 AM

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

Nikita Dvornikov
Nikita Dvornikov
December 18, 2015 10:33 AM

Related Questions


Android Material Design paradigm for hierarchical data

Updated November 08, 2016 08:06 AM