Books
Drag to Pan
Interaction and Visualization Design Patterns
Navigating between items
Panning Navigation Methods
Pinch/Unpinch Gesture
Research Papers
Scrollwheel Zoom
Seadragon
Seadragon Tools
UI Button
UI Slider
UI Viewport Resize on Master View
Welcome
Zoom to Point
Zooming Design Patterns
Zooming TechnologiesProblem:
Multi touch devices allow for physical gestures and finger combinations to navigate, many devices also lack keyboard/mouse and/or have small displays.
Rationale:
Because of the ability to use multiple inputs on multi-touch screens the use of the "pinch" as a zoom metaphor makes sense in that it is appears you are physically resizing the canvas (or item) that you are intereacting with. The "unpinch" gesture makes sense in the same fashion as you work to expand an item.
Variants:
This is the standard for zooming on multi-touch devices. The idea is that the two points of initial contact become anchors for the zoom/scale operation; as the user moves their fingers, the image is resized/zoomed such that those two points on the image remain in contact with the user's two fingers. In some cases this also implies rotation.
Known Uses:
- Apple's iPhone and the Microsoft Surface both use the pinch/unpinch gestures though on different scales.
- Linja Dax has a plug-in for Firefox that uses Clockwise and CounterClockwise single finger gestures for zooming
Clockwise/CCW Gesture: