1. The problem

Programs to view or edit large graphical objects (photos, illustrations, maps, etc.) need to let the user change the magnification level of the display. These programs offer a way to change the zoom factor, or to select an area to magnify. However, while zooming feels very natural and comfortable in some programs, in others one seems to fight the program constantly just to reach the correct zoom level.

2. Discussion

Some programs offer linear or discrete choosers for 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, as discussed below.

2.1. Even 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.

2.2. Fixed point at cursor

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.

There is a sample implementation in Eye of Gnome's eog/src/eog-scroll-view.c:compute_center_zoom_offsets().

3. Summary

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.