How can I show deep level hierarchical data with different types of data?

Question

Is there a best practice or pattern that resolves this potential issue? I have a tree that could be pretty large but also ti could contain few children/leafs.

One important aspect is that some children contains data that takes time to load. Therefore the tree is lazyloading that is it is loading data on demand.

Answer 1

One idea here comes from Windows Explorer where you can have a pretty deep hierarchy.

Assumptions I am making about your issue

1. You have to see all of the regions at once
2. You should be able to see multiple nodes at once

One solution is to allow users to make favourites or shortcuts to their favourite nodes. So this would be going with alternative 2 with lazy loading and if you right click on it you can say "Make Favourite" or "Create shortcut"

^{download bmml source – Wireframes created with Balsamiq Mockups}

This way users can go back to the node they want to in the future easily in one click once they have found it. This is analogous to a bookmark

Answer 2

You don't really need to lazy load the children. To display the tree all you need is header data for the nodes in the tree such as:

• name
• icon
• color

The rest of the data for a tree node could be lazy loaded when the user actually tries to do something with the node.

Which approach you should use I think depends on the number of nodes at each level. If there are a lot of nodes in the leafs then at Explorer approach would be useful: 2 columns, one for parent nodes and one for leaf nodes. Otherwise the user will end up scrolling a lot up and down.

If you have space available for it, the column mode of the Mac OS X Finder is probably the best approach. It is easy to navigate and gives a good overview. You avoid the awkward scrolling up and down that you get a lot of in trees with a lot of data.

But I think you should also ask yourself whether the data naturally fits into a hierarchy. Perhaps sets would be more useful. By that I mean using tags as commonly done on photo management applications such as iPhoto or Aperture and in some e-mail applications such as Gmail. Using the tag approach allows you to to have a more shallow hierarchy.