Problem

Data in dense information arrays, such as charts, graphs and maps, must be able to change the level of detail presented by a zooming function or metaphor.

Solution

High density information, such as that in charts, graphs and maps, can be especially difficult to use on small screen devices. Showing a sense of the whole space can preclude viewing sufficient details for analysis and other uses.

Zooming into (and out of) the information is the general solution. As this is similar to changing the depth of view, it is a different axis than scrolling, so requires a unique control set.

Coordinated with changing the zoom level is communicating a sense of scale, whether relative or absolute.

Variations

Additional methods may emerge in the future, such as the use of sensors to change detail level as the device is moved towards the viewer's eye.

Some or all of these may be combined, for interfaces that work on multiple devices without change, to appeal to different user types, or to surmount lack of affordance in screen gestures.

For controls that do not integrate a scale, some sense of scale must be provided. This may be an explicit scale (labeling axes or a bar of distances) or implicit, by showing items of a well-understood size.

Interaction Details

Interaction methods vary widely depending on the variation used. See the above section for such details.

Any effect requested should show an effect immediately. Whenever possible, load additional zoom levels in advance, in much the manner as described in the Infinite Area pattern.

For devices with keyboards, and without dedicated zoom keys, Accesskey functions (and their corresponding labels) should be provided for at least the zoom in and out controls.

Presentation Details

Regardless of the interaction variation, a zoom indicator like the Interactive Scale, should be displayed on the screen at all times while the zoom level is changing. This indicator must immediately reflect the current zoom level setting; if there is a delay in loading the new data, display the requested setting, not the previous one. The indicator should remain visible for a short time after the zoom level has completed loading.

Whenever practical, display a scale on top of the displayed information. For maps, this is a simple distance scale. The scale must automatically adjust to fit the available space, both in size and units used. On maps, you may switch from hundreds of miles to hundreds of feet as the zoom rate increases.

When there is a choice (such as on maps, vs. labeling individual axes of a graph) the scale bar should be horizontal. The scale bar should be large enough to be easily visible, so that numeric labels are readable, and small enough that it takes up no more than about 1/3rd of the width of the screen.

Label units of measure, and use standard abbreviations to label them. See the Ordered Data pattern for more discussion along these lines.

Antipatterns

Avoid delays in loading new zoom levels. Do not assume Wait Indicators will solve the issue, but if needed use them as the Infinite Area pattern does when loading new data.

Don't use a toggle between two levels of zoom because your only convenient interaction does not support steps or graduations. Zooming via double-tap, for example, has value in some cases but is not a typical zoom and does not cover the majority of the needs for zooming into data.

Examples