Image Zoom (Desktop)

Allow user to zoom in and out of a single displayed image, using mouse or keyboard.

(This semi-fictional pattern is based on User Interface Patterns/Zooming)

Tags

zoom, scale, image

Status

Experimental : If you use this pattern, you may have to remove or replace it in a future release of your software to remain consistent with other GNOME applications.

Description

+---+ +------+---+ +---+
| - | | 100% | v | | + |
+---+ +------+---+ +---+

Plus and Minus buttons multiply the zoom factor by a constant value (see Discussion).

Combo box allows user to type in a percentage value, or select from a list of predefined values on a dropdown menu. The list of values always includes (at least) '50%','100%','200%', 'Fit to window', 'Fit width' and 'Fit height'.

When to Use

To allow the user to zoom in or out of a single image or page, such as in a photo viewer or editor.

Current Usage

Nautilus, EOG, F-spot.

User Guide

To zoom in or out of the image using the toolbar, do one of the following:

• Click the 'plus' button once to zoom in one step, or click the 'minus' button once to zoom out one step.
• Type a percentage into the text field, and press Return. For example, type '100%' to see the image actual size, or '50%' for half size.
• Click the drop-down button beside the text field, and select a pre-defined zoom value from the drop-down list that appears.

To zoom in or out of the image using the mouse, move the mouse pointer to the area of the image on which you wish to zoom. Then:

• Move the scrollwheel upwards to zoom in
• Rotate the scrollwheel downwards to zoom out

Keyboard Navigation

To zoom in our out of the image using the keyboard, do one of the following:

• Press Ctrl-Equals once to zoom in one step, or press Ctrl-Minus once to zoom out one step.
• Press Ctrl-0 to set the zoom level to 100%
• Press Shift-Ctrl-0 to adjust the zoom level so that the entire image is visible in the window.

Related Guidelines

Link to any guidelines in the latest version of the HIG that the developer may need to bear in mind when implementing this pattern. Also link to any guidelines that the pattern deliberately flaunts, if any, and explain why.

Specification

Implementation details for developers, including items such as any dimensions, text sizes, specific wording for labels and messages, colours, and line widths.

Change the zoom level gradually by multiplying or dividing the current zoom level by a constant factor. Don't use a fixed set of available zoom factors.

When zooming with the mouse, make sure the fixed point of the transformation is at the mouse cursor, so the user can retain his point of focus on the zoomed image.

Source Code

Sample implementation in Eye of Gnome's eog/src/eog-scroll-view.c:compute_center_zoom_offsets().

See Also

Co-Requirements

Other patterns that will likely be required in the same context. For example, a 'login dialog' pattern might need to be supported by a 'create new account' pattern.

Related Patterns

Image Zoom (Touchscreen)

Competitive Approaches

Interesting alternatives that have been implemented elsewhere.

Feedback

Usability Results and Feedback

All usability feedback about the pattern received from users, good or bad :)

Discussion

Some programs offer sliders, spinboxes or dropdown lists for choosing the zoom factor. These ways of setting the zoom factor have problems. With the spin button and the combo box, it is hard or impossible to make gradual changes in the zoom level. One ends up compromising between a somewhat-too-big factor and a somewhat-too-small one. With the spin button and the slider, changes in the zoom factor are linear, which leads to uneven zooming.

In the following example, we start at 50% zoom. Then for each step we increment the zoom by another 50%, until we reach 200%. You can see how the "jump" between 50% and 100% seems much bigger than the jump between 150% and 200%.

This happens because changing the zoom factor linearly causes the total area to change non-linearly, as it is proportional to the square of the zoom factor.

We can get a better effect by multiplying the zoom level by a constant factor. If you start at 1.0x and make the constant factor be 1.05, then your successive zoom levels would be:

1.05^1
1.05^2
1.05^3
1.05^4
etc.

To zoom up you multiply by a constant factor, and to zoom down you divide by the same factor.

Choosing the correct factor is a matter of experimentation. Eye of Gnome uses a factor of 1.05, which is comfortable when a mouse's scrollwheel is used to zoom up and down. This factor should be chosen so that the change between successive levels is not too big nor too small.

The following example shows successive zoom levels, each with 1.2x multiplication. Note how each level appears to "zoom in the same amount", instead of some steps seeming bigger than others.

When people view an image onscreen, they subconsciously move the mouse cursor near their focal point. This is the small area in which their eyes are focused. Zooming should preserve the focal point so that people do not have to re-center their eyes or the image within the viewing area.

Trivial implementations of zooming make the image zoom in or out of its upper-left corner, or the image's center. To maintain the focus point fixed, the image should appear to zoom in or out of the cursor.

Change Log

CategoryUsability