The content lives in one large continuous space — a map, a canvas, a timeline — rather than discrete pages. The actor navigates by panning across it and zooming in and out; everything keeps its place in a single coordinate system, so there are no page transitions to break the spatial sense, but staying oriented becomes the actor’s problem.
Behavioural position
Supports
- Exploring — spatial metaphors naturally support discovery
- Navigating — direct access to known locations (with landmarks or coordinates)
- Visual scanning and pattern recognition at multiple scales
Constrains
- Re-finding — harder without clear landmarks or bookmarks
- Transactional search — limited unless search features can position/highlight
- Orientation — actors can get lost without good wayfinding
Variants
- TODO: Geographic maps
- Zoomable timelines
- TODO: Infinite canvas
States
View states
- Overview — zoomed out, showing broad context
- Detail — zoomed in, examining specific area
- Transitioning — animating between positions/scales
Interaction states
- Panning — actively dragging view
- Zooming — actively changing scale
- Idle — viewing without navigation
- Loading — fetching data for new visible area
Orientation states
- Oriented — actor knows their position
- Landmarks visible — recognisable features in view
- Disoriented — requires reset or wayfinding
Implementation patterns
- Pan controls: drag to pan, arrow keys, scrollbars, edge panning (moving cursor to edge to pan)
- Zoom controls: pinch gesture, mouse wheel, zoom buttons, double-tap/click, zoom to fit
- Orientation aids: TODO: minimap, landmarks, coordinates, reset button
- Performance optimisation: viewport culling (rendering only visible area), level of detail, tile loading, debounced updates
To-do
Complementary patterns to capture:
- Bookmarks or saved views
- Minimap, or overview-detail patterns
- Layers, or filtering for complex spaces
Resources & references
- Shneiderman (1996) The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations
- Bederson, Hollan (1994) Pad++: A Zooming Graphical Interface for Exploring Alternate Interface Physics
Consequences
- everything keeps its place in one coordinate system, so nothing breaks the spatial sense — and orientation becomes the actor's problem: at any zoom the view carries no evidence of where it sits in the whole, which is what a second, wider viewport kept in step is for
- a continuous space has no addresses of its own; position and scale have to be made nameable before anything in it can be linked to, bookmarked, or returned to
- what's on screen is a fraction of what exists, so the space has to decide what to load and what detail to draw at each scale — and those are visible to the actor as waiting, not as engineering
Related patterns
Precedes
- Coordinated views — everything keeps its place in one coordinate system, so nothing breaks the spatial sense — and orientation becomes the actor's problem: at any zoom the view carries no evidence of where it sits in the whole, which is what a second, wider viewport kept in step is for
Complements
- Searching — enables jumping to locations
- Deep linking — encode position and zoom in URLs for sharing
- Hybrid patterns — global nav for sections, spatial within sections
Tangentially related
- Drag and drop — drag-to-pan shares the gesture, not the move — the drag translates the viewport; nothing is picked up and no destination carries meaning
- Overview and detail — continuous-space overview+detail — the minimap, the overview map with a field-of-view box — shares the name but couples two viewports over one space rather than compressing items; that is pan and zoom's territory, with coordinated views keeping the viewports in step
Alternatives
- Pyramid — for sequences that could be spatial
- Fully connected — pan/zoom hybrid for maps with discrete sections
- Multilevel tree — for hierarchical spatial data
Related
- Intent & Interaction — spatial exploration feels natural
- Semantic zoom — the navigation surface this move layers onto — pan and zoom move the viewport; semantic zoom decides what the things in it look like at each scale