pattern playground

Semantic zoom

Added · Last updated · Seed

The actor is surveying a space of content too large to read at once — a map, a canvas of notes, a graph of records, a long document. Zooming out with plain magnification shrinks everything into unreadable specks; zooming in loses the shape of the whole.

Semantic zoom changes the representation instead of the size: each item swaps to a coarser abstraction as the actor pulls back and a richer one as they move close. Zooming here means “tell me more”.

🚧 Semantic zoom over content cards.

Forces

  • Overview against detail — the actor needs both the shape of the whole and the content of the parts
  • Recognition at a distance — the pattern works only if each item has a small representation that remains recognisable
  • Wayfinding against transition comprehension — predictable representation-per-tier gives the actor a vocabulary of distances (“this zoom level means streets”), while fluid morphing reads as one continuous surface

The representation ladder

What semantic zoom traverses is a ladder of discrete representations per item — the demo’s circle → label chip → summary card → reading panel; a map’s continent → city → street. Representations don’t interpolate: a dot, a title and a paragraph are different artefacts, so thresholds are unavoidable — the design choices are where they sit and how the crossing is presented.

  • Snap or morph — a hard switch at the threshold keeps tiers legible as tiers; crossfade or morph dissolves the crossing into continuity. This is a presentation axis over the same discrete ladder, trading wayfinding-by-tier against transition comprehension
  • Make crossings legible in transit — animated transitions help the actor build a spatial model of the space; transition times of 0.3–1.0 s are repeatedly supported
  • Footprint stability — a swapped-in representation must fit the box of its neighbour rungs, or items overlap on zoom-out
  • Uniformity — the whole population changes level together, under one scale control; the moment one region shows more detail because the actor is attending to it, the move has become focus and context
  • Semantic resize — the variant where container geometry, not zoom, drives the representation switch: an item grows into a richer rung when its pane widens and collapses to a coarser one when cramped (Masonview). The level index is allotted space rather than viewing scale

The ladder itself is item view’s vocabulary. Item view owns the rungs and their per-item, navigation-driven transitions; semantic zoom is the coordination move that drives the same ladder for all items at once from a single scale control.

The lifecycle assessment data: from stage totals to each flow to its full telling.

What the rungs are made of

The pattern needs a representation that stays recognisable at every level. So the coarse rungs come from two places, by material:

  • Records — a zoom level is a different attribute subset: the population sheds fields as the actor pulls back and regains them moving in, each level the same items shown through fewer attributes.
  • Text — a zoom level is a generated telling at a granularity: heading, then abstract, then full prose, the coarser rungs produced rather than authored in advance.
A directory of people at three rungs — avatars actor recognises by face, then name and role, then the full card.

To-do

  • Connected cards: the demo shows free-standing cards; the mechanism spec also calls for directed connectors that re-anchor smoothly as node bounds change across thresholds
  • Focus mode: an optional deepest-zoom behaviour where the focused node dominates and non-focused nodes shed detail first, then de-emphasise — sits on this pattern’s boundary with focus and context
  • Map example

Resources & references

Consequences

  • every distance shows one uniform level of representation, so the population reads consistently at each scale and the actor learns what a given zoom level means
  • representations don't interpolate — a dot, a title and a paragraph are different artefacts — so thresholds are unavoidable, and where they sit and how the crossing is presented become the design rather than a detail of it
  • a richer rung has to fit the box its coarser neighbour occupied, or the arrangement the zoom was protecting comes apart on the way out

Related patterns

Enacts

  • Density — each zoom level is a density commitment, and the transitions between levels preserve legible density — zooming re-spends the screen budget instead of diluting it

Complements

  • Data view — scale-bound traversal between collection and item granularities, uniform across the population
  • Item view — item view supplies the representation ladder and its per-item transitions; semantic zoom binds that ladder to a scale control and drives every item's rung at once, keeping spatial arrangement legible
  • Overview and detail — combining techniques usually beats any single one — an overview pane alongside semantic zoom, or zoom inside the detail pane. In its split layout overview-detail spends screen space to show two levels at once; semantic zoom spends time, one level after another

Alternatives

  • Focus and context — resolves the same force — detail without losing context — by varying detail with global scale, uniformly and one level at a time; focus-and-context varies it with attention, non-uniformly, inside one simultaneous view

Related

  • Pan and 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

Enabled by