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?

  • Do you how many items you'll have at each level? Will it be changing dynamically? Oct 23, 2013 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, 2013 at 21:09

2 Answers 2


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

  • Thanks for the suggestion. Can you suggest any ecommerce sites that do a rotating tree as you suggest?
    – Josh
    Oct 24, 2013 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 Oct 24, 2013 at 17:41

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.

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.