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.

  • There're multiple versions of this same question in the Related section of the sidebar. For example, What's the best way to view a deep hierarchy?
    – dnbrv
    Mar 27, 2012 at 19:48
  • I have seen the question linked. They just cover different ways of showing hierarchical data. In my case i have to consider "delay" of loading leaf/child data and how to make a progress indicator of some kind flow with the layout and ux. I hope i make any sense here.
    – dzed
    Mar 27, 2012 at 20:34
  • You just add a visual indicator that content is loading. There're only so many ways of displaying hierarchical data.
    – dnbrv
    Mar 27, 2012 at 20:58
  • 1
    @dzed so is your question more about how to have meaningful transitions between layers when instant shifts aren't possible?
    – Ben Brocka
    Mar 27, 2012 at 21:27
  • @BenBrocka Yes partially it is, problem is when to start loading (click/double click) and how to display it. My main problem though is that alternative 1 in image above is easier to use you select a region and then you can load and work with the data. In alternative 2 i have a tree-view with all regions and its data where user can easily jump between data and have a more complete overview though the hierarchy will be way more deeper than in alternative 1. How do I make this complex data structure easy to use?
    – dzed
    Mar 28, 2012 at 12:06

2 Answers 2


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

  • +1 for a good answer. Especially "muliple nodes" reasoning. Apr 9, 2012 at 20:20
  • Thank, you for your reply i have done some user test and alternative 1 in my post was the way to go where we separated the region three and the data tree. I like the favourite functionallity that i am considering in adding to the region tree. I am marking your post as answer because of the "Make Favourite" suggestion.
    – dzed
    May 31, 2012 at 14:17
  • I like your favorites idea. Tree-hierarchy is just straight hell. I'm working on a project where a customer had got 33.000 nodes/folders in a tree. How can you do wayfinding?! It's a disaster. With bookmarking/favorites you can have shortcuts to the cumbersome task of finding the right entity.
    – myradon
    Oct 14, 2015 at 13:56

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.

  • You have some good point here, and tags are unfortunately not possible to use at the moment because we need to display the region tree and show the relationship between the "region" nodes.
    – dzed
    May 31, 2012 at 14:19

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.