• Introduction

Semantic zoom

The actor is surveying a space of content too large to read at once — a map, a canvas of notes, a graph of records. 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
  • Would an outline do? — zooming as the organising principle has repeatedly failed outside inherently spatial data; the humble alternative to a zoomable interface is often a tree widget

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 artifacts, 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

The ladder itself is item view’s vocabulary (reference / summary / detail / full). 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 — with the two obligations item view doesn’t carry: uniformity across the population, and continuity of spatial arrangement.

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

Related patterns

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

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