Gestural Zoom and Pan

Bret Victor / May 21, 2007

This page presents an unconventional interface for zooming and panning. Applications include drawing tools (Photoshop, Illustrator, etc) and Zooming UIs (Google Maps, Archy, etc).

If you are impatient, scroll all the way to the end for the interactive demo.

Gestural controls

I believe that gestural controls -- controls that can be used with a minimum of conscious attention -- must be continuous in time and space:

Continuous in time means that the control does not “jump” discretely, but can be controlled smoothly. Dragging a scrollbar is continuous; hitting page-up/page-down buttons is discrete.
Continuous in space means that the user doesn't have to move the mouse to a remote target, but can perform the operation wherever the mouse happens to be. A context menu is continuous in space; a menu bar is remote.

Problems with conventional controls

Conventional panning controls:

Dragging a scrollbar is not continuous in space. The user has to leave the work area to acquire a remote target.
Clicking a compass rose is not continous in time nor space. It's a remote target, and operates discretely.
Dragging with a “hand” tool is continuous in both time and space. However, it requires dragging in the opposite of the direction to travel (i.e., to go right, you must drag left). This makes it awkward to use while manipulating content (e.g., while dragging an object on the canvas). Also, because of the physical metaphor, the pan distance is equal to the drag distance. This is rather slow, and leads to lots of dragging.

Conventional zooming controls:

Clicking a “zoom steps” control (as on Google Maps) is both discrete and remote.
A drop-down menu is just as bad.
Clicking with a magnifying glass tool is discrete. So is dragging a box with the magnifying glass tool.
Holding down a mouse button or key to smoothly zoom is sort of continuous, but it offers no direct control over the speed of zooming. The user must wait helplessly as the software zooms at its own pace.

Solution

On the canvas below, drag the objects around.

Hold “shift” and move the mouse up/down to zoom in/out. (Do not press the mouse button.)

Hold “control” and move the mouse around to pan. (Do not press the mouse button.)⌘

Once you get the hang of it, try zooming and panning while dragging an object. In particular, try keeping “control” held down while you work, and notice how it greatly exapnds your “working area” while keeping the zoomed-in level of detail.

Improvements

It might be better to use alphabetic keys as meta-keys. Instead of “shift” and “control”, one could hold “z” to zoom, and “a” to pan. (Flash doesn't allow this.)

It would also be better if the mouse pointer didn't move while zooming. Also better would be if the canvas continued to pan even after the mouse exited the work area. (Flash doesn't allow either of these.)

Demo

Scroll all the way down for a full-screen experience. You may download the OpenLaszlo source code.

Note: use control, not ⌘, to pan.