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 have a large tree data structure that might be up to 10 levels deep.

I need to design a control for a Windows 8 store app that will allow the user to select an element from each level from this tree.

For example, the user needs to first pick from {mammal, reptile}, then if mammal is selected, pick from {Aardvark, Bear, ..., Zebra} then if Bear is selected, pick from {Polar, Brown, Black}.

It seems that on the web, you see this type of data represented often as a set of dynamically generated dropdowns. My client believes that there might be a more intuitive or user friendly way to browse and select levels of the tree. Is there another UI pattern that might be useful here?

share|improve this question
    
Do you how many items you'll have at each level? Will it be changing dynamically? –  bendataclear Oct 23 '13 at 16:26
    
There could be as many as 50 items at each level, as few as only 2-3. They will change dynamically in the sense that if you pick "Bear" you can only pick different types of bears at the next level. –  Josh Oct 23 '13 at 21:09
add comment

2 Answers

up vote 1 down vote accepted

Having too many levels in a treeview could bring bad UX. The possible issues are:

  • Loosing hierarchy in deeper levels, it just dissapears within limited view.
  • High visual noise caused by nodes from previous levels.
  • Much space is occupied by non-relevant elements from previous levels.
  • Horizontal space growth.

An example of ten-deep treeview is shown on the image.

enter image description here

The best solution requires much task details, but general direction for solution is to limit information overload for data-heavy task. Examples of deep hierarchies pattern could be seen in many e-commerce sites which present sets of goods. They "rotate" the tree and display only relevant subset on each step. Using breadcrumbs could be difficult for deep hierarchy, so you could cut them in some way. enter image description here

share|improve this answer
    
Thanks for the suggestion. Can you suggest any ecommerce sites that do a rotating tree as you suggest? –  Josh Oct 24 '13 at 3:19
    
@Josh I meant nested categories, take a look at this page. Also pay attention of the menu organization, they have deep structure, up to 6 or 7 levels. Quelle –  Alexey Kolchenko Oct 24 '13 at 17:41
add comment

I find the Mac Finder window, configured in the multicolumn format below, to be one of the better ways to browse into deep tree structures. As you select folders in the right most column a new column is added to show the contents. When there are more columns than will fit in the window, the whole thing becomes horizontally scrollable.

Mac Finder Window

If there's anything similar to this on Windows 8 (or even an earlier version of Windows) I'd borrow from that design.

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.