I am working on a system that presents a hierarchial organizational tree. Each node can potentially have 10 children. The tree has about 10 levels. I want to present information on each node when shown. Zooming out will show higher level organizations and the more you zoom in, the more sub-groups you see.

I thought about Google Maps type of behavior but it does not fit my needs to zoom in an organizational context. MyHeritage.com presents a closer solution to what I need.

What pattern can be used in such a context?

  • I can give counter examples of bad zooming experiences in which the margins are correctly reduced along with growth of the content however the tool-tip like images pop-ups do not re-position themselves accordingly (are cropped since they are rendered outside window). Mar 12 '12 at 12:57

Asking for patterns and precedents to emulate is going to be quite hit and miss, because there is no universal pattern for zooming. There are many different ways of implementing this sort of behaviour, each with advantages and disadvantages for different use-cases. Without knowing what sorts of information you present, how your users expect to navigate it and how they intend to consume it, it's impossible to tell you what interface to use.

That being said, some questions to ask yourself are:

  1. Does a user, looking at a node, need to know where they are within the 'overall' structure? If so, they might need to see both the 'zoomed' and 'overall' view simultaneously.
  2. Does a user, looking at a node, need to know how far deep within a structure they are? You can signify level and hierarchy with font-weight and other visual cues.
  3. What sort of data are users looking for, and how are they going to consume it? Depending on your information architecture, that might suggest that they need to quickly navigate in certain ways, or see some data outside their current node. That will inform your interface too.
  4. Are users navigating in such a way that they need to move not just between elements and parents / children, but elements and 'cousins'? That will affect the UI too.

I wish I could be more helpful, but unfortunately, pattern matching will only get a design so far. You need to think about what users are looking for and how they expect to look for it. Once you nail those questions, the rest of your UI decisions should become fairly straightforward.

  • Hi Jimmy, all your comments are well in place. I will try to answer what I can: 1. Yes, they need to know where they are and this issue was already addressed by adding a "small map" that indicates where they are in the tree. 2. How deep is not that important, the most important thing is the option to see different levels of details depending on the zoom level, without getting lost in details. 3. Users want to choose a node or compare nodes - the data is about BI - analyze data for each node. 4. No, users will probably not navigate between cousins.
    – Yair
    Mar 12 '12 at 8:21

Great Question! I think what you would like to see is a user not getting lost in a site with potentially 10 billion pages. To give you one example, the Microsoft Developer Network (MSDN) Library uses a specific technique to ensure users not getting lost (see image). To the right I’ve highlighted certain elements which could be called breadcrumbs, but are organized vertically to be clearer than standard breadcrumbs (horizontal style). This way the user can easily see parents, parents parent e t c and child pages in a massive hierarchical tree. From my view, as a developer, this is a very good and useful design.

MSDN bread crumbs on display


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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