Local Zooming

Problem

People want details when they want them without losing context.

Solution

Show an overview of your information with the ability to select specific points to see more details without losing the context.

Context

• The application displays too much information to effectively show in a single view in any layout (a map, table, etc).
• Your layout can adjust to show more detail for particular points of interest without losing or terribly distorting the context.

Rationale

Local Zooming lets the user know the data details without losing the surrounding context.

Another similar approach is Data Tips, which overlays the details rather than modifying the surrounding layout. Data tips obscure the immediate context, though, so using them when that’s okay. If you need the immediate context more than the edge context (i.e., that which will probably flow off the screen when the layout expands), local zooming is probably better. Overview Plus Detail is another viable alternative, though generally speaking the overviews in that pattern have less detail and are meant more as an orienting and navigational device.

This pattern shines when you have local, contextual higher level detail that you don’t want to lose.

Implementation

You need to think about two core things—what to show at each level of detail and how to show it, especially how you will change the layout to show the extra details. For the higher-level view, you should still try to show as much as you can, at least of the salient information that people will use to disambiguate items and make decisions on items as they are perceived in relation to each other.

The local zooming should not be required to effectively use your higher level of information, at least it the higher level should help people hone in on the most likely candidates they are interested in so that they only have to zoom one or a few items to achieve their goals.

Probably the simplest way to implement the local zoom is to expand a row vertically and push surrounding rows down. This assumes a row-based layout. If you have columns, it could expand horizontally, both for rectangles, or even circularly for circular items. If you can, it’s probably best to have a transition that animates so that the change in layout is gradual and not surprising or disorienting to people.

When the selection expands, you have to decide what to do with surrounding content. The simplest thing is to let it fall off the viewable area. Another option would be to condense surrounding information either for all surrounding or only for edge information; fisheye is one way to do this condensing, but it usually comes at the cost of distorting the immediately surrounding information to the point where it is unintelligible. [This author thinks fisheye is more gimmicky than valuable and usable, at least in the context of this pattern.]

You need to determine how people will select information. Depending on the effect on surrounding information, i.e., if it isn’t dramatic, hover might be a good, light-feeling option to let people easily explore more details. If the effect is dramatic or takes more than little to no perceivable time to execute, a user action that is proportionate should be considered. This could be as simple as a wait hover or, more likely, involve clicking or double-clicking. If the items in the view are difficult to select, you can use Magnetism to help users select the desired one.

Sources

Jennifer Tidwell, Designing Interfaces

University of Maryland, About Datelens

Tags

Map, Displaying Complex Data, Grid.