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:

Problems with conventional controls

Conventional panning controls:

Conventional zooming controls:

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.