Users need a quick and intuitive way to move around large images or canvases. Ideally this should be readily apparent how to do, make sense to the user and not require much learning.
Rationale:
With images and canvases on the web increasingly becoming larger than screen sizes, it is imperative that we provide users methods of conveniently going from one place to another.
Variants:
Mouse move to pan: Simply moving your mouse (either around the edges of a canvas, or merely the act of movement itself) will move the viewport. Creates problems with the scene always being in motion both in the visual experience and in clicking other areas in the scene.
Arrow keys to pan: Use of arrow keys on the keyboard will move the viewport around the scene.
Directional Buttons to pan: Arrow buttons on the screen, either on the edges of the screen or in a central location (including a combo control with all directions) moves the viewport with a mouse interaction; this can either be a simple click, or a click and drag on the control (see Virtual Earth).
Overview pane: Mini-map located in a corner of the screen with a rectangular representation of the viewport. By clicking on it and moving the the small rectangle, the viewport is shifted to that subset of the canvas/image.
Scrollbars to pan: Mostly prevalent in non-ZUIs, simple scroll bars around the edges of the page pan the scene around. This is less than ideal as it makes the method of scrolling harder to hit and more costly to the user in terms of time. It may be easily discoverable as most users will be familiar with the scroll bar metaphor in addition to them being visible on the screen.
Scroll wheel to pan: Generally only a vertical pan in document centric experiences. Rarely (if ever) is the scroll wheel used for horizontal pan as it may cause users some cognitive dissonance.
Click to Center: Click somewhere in the view port and the click point moves to center (Example: Ahead).
Drag to pan: One of the more common navigation methods currently in use. On a mouse click and mouse move the scene moves in the opposite direction as the mouse movent with the area underneath the cursor remaining under the cursor. Easily learnable through a "grab" mouse cursor it does sometimes conflict in the case where a user might wish to move an object and/or the entire scene. This problem can be solved with the addition of a held down key to pan and regular click and drag being solely for item movement. This method does reintroduce some discoverability problems.
Known Uses:
Mouse move to pan is utilized by Hyper-Photos once you are zoomed in beyond the initial view.
Directional buttons to zoom are used by some iPhone apps where a drag would be captured by the enwrapping ZUI and in Virtual Earth in the form of a combo button representing all 4 directions
Use of an overview pane, allowing either dragging of the viewport rectangle or the background for pan, can be found in Google Maps. Another use of the overview pane is seen in the game Supreme Commander. Zoomify also features a overview pane, called navigator.
You can find an instance of a scroll bar to pan in the Playboy Archive. There is a horizontal scroll bar at the bottom of the screen in some zoom contexts to assit in reading the articles.
Books
Panning Navigation Methods
