Zoom behavior - can you recommend websites with good zooming experience (not maps)

Question

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?

Answer 1

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.

Answer 2

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.