Zooming

Zooming allows the size and number of items being displayed to be adjusted.

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.

When to Use

Zooming can be used to enlarge images and documents to aid viewing or to increase the number of pages displayed when viewing a multi-page document. It can also be used in order to change the number of items displayed in a viewing area.

Description

Zoom controls can consist of menu items and/or graphical controls. They typically consist of actions to increase and decrease the zoom level as well as a number of automatically adjusted zoom levels, such as 'Best Fit' or 'Fit Page Width'. Zoom menu items should be placed in the View menu.

Guidelines

The number and variety of automatic zoom levels should be selected according to the kind of content being displayed. 'Fit Page Width' and 'Fit Page Height' may be more appropriate for a document viewer than 'Best Fit', for example.
Automatic zoom level controls should indicate whether they are active or not: 'Best Fit' buttons should toggle and their menu items should be check boxes.
Zoom in and zoom out buttons and menu items should become insensitive when the limit of a zoom range has been reached.
Graphical zoom controls:
- should only be used if modifying the zoom level is a common operation for your application
- can be placed either in the toolbar or status bar, but should be located close to or in alignment with the content display area
- can consist of buttons or a slider. Buttons should have a zoom in and zoom out button, with the zoom out button placed on the left. A combobox or best fit toggle buttons can be placed in between (see below).

This arrangement is excellent for a wide range of scenarios and is appropriate appropriate for cases where there is no maximum or minimum zoom level.

Sliders can enable finer grained control of the zoom level, though they need to be carefully implemented (see Specification) This kind of control is appropriate for cases where the zoom level has predefined maximum and minimum levels.

Displaying the zoom level as a percentage is appropriate for professional image editing software, but is otherwise not recommended.

Zoom menu entries should be placed within the View menu.

Current Usage

Nautilus, EOG, F-spot, Evince.

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 or 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

Toolbars

Specification

Set a useful default zoom level, such as Best Fit.

Zoom Factor

Do not use a fixed set of available zoom factors, since this causes the zoom level to "jump" in a dramatic and uneven fashion.

Instead, change the zoom level gradually by multiplying or dividing the current zoom level by a constant factor. For example, 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.

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.

Point of Transformation

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.