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

In my application, I need to design hierarchy of product.

i.e. Parent group, group, parts, subparts etc. ( add, remove , edit )

What should be the ideal way to do it in single page ? ( Tree comes to my mind but it is too vertical, my primary users will have wide screen monitors. )


One option that I can think of off the top of my head is a column based view similar to one of the view options available in Finder in OS X.

Mac OS X Finder in Column View

  • Nice solution. You can spare some additional space if, when a new selection is made in your hierarchy, you collapse the previous selections into a single column. In your example you would have a column with "Library / Documentation / Application" and a column with the last level expanded. – Mart Feb 1 '11 at 8:34

I think that the answer is "it depends" and can be domain-specific. For example, if you have only a few and a fixed number of top level groups, you can use a design like this:

enter image description here

The top-level groups can also be arrange horizontally.

If you have more than just 3-4 but still in the range of a dozen or two, you can use something like this:

enter image description here

  • Thanks for the answer. Which program did you use to create these screens ? – iamgopal Feb 1 '11 at 11:20
  • You're welcome. I used OmniGraffle. – Hisham Feb 1 '11 at 17:41

I've had good results using nested Definition lists.

They're easy to skin and generate using a library like RichFaces. You can code the levels using inheritance to allow the spacing you need (and they can be full screen width)

They're easy to add panels too, so they collapse down at various levels and because of all this, their easy to add an item to, even in the middle, in future releases/enhancements.

Been very successful when dealing with possible huge amount of data, and both the power user engineers and the small users were happy.

  • Can you give more details on this. I only see rudimentary information on Definition Lists and nothing for displaying hierarchical data using definition lists. – Amala Mar 6 '13 at 14:14
  • After researching I assume it is something like this: docs.kendoui.com/api/web/panelbar – Amala Mar 6 '13 at 14:26

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