interaction · touch
Pan
also called pan gesture (hig), drag to pan (community), grab and drag (community)
Moving the viewport across content in any direction while keeping contact, so the content feels anchored to the finger or cursor.
Panning comes from the camera, where a panorama head let an operator sweep across a scene too wide for the frame. Interfaces borrowed the word for the same relationship: the content is larger than the window onto it, and the gesture moves the window rather than the content. Material describes it as an omnidirectional one or two finger gesture that expands the field of view, and the omnidirectional part is the point. A map, a canvas, a photo at zoom, and a node graph all have to move diagonally, which is what separates panning from scrolling.
The three words get used loosely and they describe different things. Scrolling moves one axis at a time along a document, usually by proxy: a wheel, a scrollbar, a flick that keeps going after the finger leaves. A swipe is a quick directional stroke that means something (next photo, delete this row) and is judged on speed and distance rather than position. Panning is contact tracking: the point under the finger stays under the finger for as long as the finger is down, so the content reads as a physical sheet being pushed rather than as a document being advanced. When that mapping is one to one and immediate, readers stop noticing the mechanism entirely.
Which means the failure modes are all about breaking contact. Lag makes the sheet feel
wet, because the point under the finger visibly is not. Acceleration applied to a pan is
worse: the content arrives somewhere the hand did not put it. Panning past the edge needs
an answer too, either a hard clamp or the rubber band that stretches and returns, and the
choice tells the reader whether there is more content out there. On a desktop the cursor
carries the state, which is the whole convention of the open hand and the closed fist:
grab says this surface can be pushed, grabbing says you have it.
The parts that are easy to forget are the alternatives. A pan surface needs keyboard
equivalents (arrow keys move the viewport, Home returns to origin), it must not swallow
the page scroll when the reader means to scroll past it, and on touch it competes with
the browser’s own gestures, which is what touch-action exists to arbitrate. Anything
reachable only by dragging is unreachable to a reader who cannot drag, so a map with no
zoom controls and no keyboard panning has locked half its content behind a gesture.
Which word?
| If you want | say |
|---|---|
| moving the view over content rather than the content itself | pan |
| dragging to turn a 3D view around its subject | orbit |
| a fast directional stroke, not a controlled drag | swipe |
Related
See also: Infinite canvas
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Pan |