Differences between revisions 14 and 15
Revision 14 as of 2011-01-28 00:20:33
Size: 6467
Editor: shoobe01
Comment:
Revision 15 as of 2011-01-30 05:18:28
Size: 8259
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 15: Line 15:
 * '''On-screen buttons''' - plus/minus buttons (or +/- in a magnifier)  * '''On-screen buttons''' - plus/minus buttons (or +/- in a magnifier) XXXXXX ALSO MENTION THAT THESE MIGHT BE RELATED TO A SINGLE POINT, LIKE "ZOOM TO SEE MORE" ON an '''[[Annotation]]'''.
Line 32: Line 32:
Interaction methods vary widely depending on the variation used. See the above section for such details. Consider zoom to be a third axis of movement about the screen. Like the x- and y-axes are along the edges of the screen, the z-axis sticks straight out from the screen. Zoom moves to layers or levels along this axis.

The z-axis must be directly related to the request method. There are two basic categories:
 * '''View Center''' - The zoom axis is about the center of the displayed graphic, usually the center of the viewport.
 * '''Activity Centroid''' - The zoom axis is centered on the indicator, pointer or gesture used to indicate the zoom.

Zoom actions taken with no particular item in focus, without an on-screen cursor and without controls attached (visually or by use of gesture) to a specific point on the screen. All others use the "activity centroid" model, with the axis centered along the in focus item or the gesture centroid. Note that these are not fixed conditions based on the device hardware or the overall interaction model. They may be switched between conditionally. Zoom buttons (whether on screen or hardware) will use the "view center" method when nothing is in focus, and switch to the "activity centroid" method when a virtual cursor is moved onto the screen, or an item is in focus.
Line 53: Line 59:
For gestural actions, such as pinch to zoom, use live transitions so the user may see the effect of their gesture and adequately control the request.

For all zoom methods, if full-resolution imagery cannot be pre-loaded, a variation of the Ghost method described under the '''[[Wait Indicator]]''' should be used. The available imagery can be scaled to match the requested panel size, giving a sense of the requested scale and information.
Line 55: Line 65:
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. 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. Use the Ghost method instead of explicit indicators such as Short Wait, whenever delays cannot be avoided.

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.

The Interactive Scale combines the zoom control, and zoom indicators. Often, they are accompanied by scale limit indicator icons as shown here in the country map and house (meaning neighborhood level). The scale can be used by clicking a zoom level to jump to it or dragging the control to a specific level. When included, zoom in and out keys may be used to change one zoom level at a time.

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

  • On-screen buttons - plus/minus buttons (or +/- in a magnifier) XXXXXX ALSO MENTION THAT THESE MIGHT BE RELATED TO A SINGLE POINT, LIKE "ZOOM TO SEE MORE" ON an Annotation.

  • Interactive scale - A bar may be provided for direct control, that indicates the whole range of zoom; generally, icons are used at the top and bottom of the control that indicate the range of the control, such as (for a map) the country for the maximum zoom out, and a house to indicate block-level for zooming in. These controls may support direct selection of a zoom level, or direct control of the zoom level by moving the slider dynamically. They are also often combined with on-screen buttons to offer all options.

  • Screen gestures - The most common of these is the two-finger "pinch to zoom" gesture. Other on-screen gestures are also used, including single-finger spinning actions (clockwise to zoom in, counter-clockwise to zoom out). These may be useful for systems that cannot (for technical or user needs) support multi-touch.

  • Hardware buttons - devices that do this a lot, like GPS, might have dedicated zoom buttons... also, can repurpose unused hardware keys; if the 5-way pad is used to scroll along the x/y axes (and select points) the volume rocker can be repurposed to control the z-axis and be a zoom control.

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.

On-screen buttons may also have a permanently visible indicator of zoom level. If it is not interactive, as this one is not, then it does not become an Interactive Scale. Zoom may be for only one exis for some items, such as this one that zooms only the data. The scale indicators for graphs and charts will vary by axis. Make sure the scale is clear by providing all needed labels to understand the full context.

Interaction Details

Consider zoom to be a third axis of movement about the screen. Like the x- and y-axes are along the edges of the screen, the z-axis sticks straight out from the screen. Zoom moves to layers or levels along this axis.

The z-axis must be directly related to the request method. There are two basic categories:

  • View Center - The zoom axis is about the center of the displayed graphic, usually the center of the viewport.

  • Activity Centroid - The zoom axis is centered on the indicator, pointer or gesture used to indicate the zoom.

Zoom actions taken with no particular item in focus, without an on-screen cursor and without controls attached (visually or by use of gesture) to a specific point on the screen. All others use the "activity centroid" model, with the axis centered along the in focus item or the gesture centroid. Note that these are not fixed conditions based on the device hardware or the overall interaction model. They may be switched between conditionally. Zoom buttons (whether on screen or hardware) will use the "view center" method when nothing is in focus, and switch to the "activity centroid" method when a virtual cursor is moved onto the screen, or an item is in focus.

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.

Disregard input to zoom over the limits of the current information set, either too high or too low. Do not display errors that, for example, there is insufficient information available for the zoom level.

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.

Even if the screen is otherwise devoid of zoom control elements, as with this touchscreen example, display the current zoom level during a zoom change. Place the indicator so it is not occluded by the user’s hand or fingers. 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 a zoom level is unavailable, such as when the end of the range has been reached, "gray out" the control to make it clear it is inaccessible. This is generally preferable to simply suppressing the control, as it may be confusing if it is usually present.

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.

For gestural actions, such as pinch to zoom, use live transitions so the user may see the effect of their gesture and adequately control the request.

For all zoom methods, if full-resolution imagery cannot be pre-loaded, a variation of the Ghost method described under the Wait Indicator should be used. The available imagery can be scaled to match the requested panel size, giving a sense of the requested scale and information.

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. Use the Ghost method instead of explicit indicators such as Short Wait, whenever delays cannot be avoided.

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

Zoom & Scale (last edited 2011-07-31 21:57:31 by shoobe01)