The scale change from magnified focus to compressed context has to stay continuous, not jump abruptly
Aliases: focus transition · graduated magnification
What it is
The boundary between focus and context is where this pattern succeeds or fails: the scale change from magnified focus to compressed context must be continuous and legible — graduated magnification, deliberate boundary treatment, a traceable correspondence. A hard cliff (half normal, half squashed; a sudden seam) breaks the sense of correspondence at exactly the line users cross most, and "where does the focus end" becomes a permanent small confusion.
Why it happens
A legible transition sustains "correspondence tracking": elements seen in the focus region must map seamlessly onto the same elements in the context, which requires two things — a continuous scale change (adjacent elements differ in size by less than a perceptible jump) and a visible mapping (the user can tell which stretch of the context the focus magnifies). Scale cliffs destroy the former: adjacent elements across the boundary jump in size, severing the perception that they belong together; poor boundary treatment destroys the latter: the focus reads as a pane of glass floating above the context with no registration to it. Graduated transitions (fisheye's continuous warp) satisfy continuity naturally; block-style designs (collapsible trees) must compensate with explicit correspondence markers (expansion arrows, synced highlights).
Where it stops holding
Continuity need not be geometric: a collapsed tree has a hard boundary at each expand point, yet the arrow and the indent structure supply clear structural correspondence — legibility achieved. Conversely, geometric continuity with semantic breakage (warping that overlaps or displaces elements) does harm. Magnitude needs restraint too — the higher the focus magnification, the fiercer the peripheral compression and the harder the boundary reads; high-magnification demand should switch to the dual-view arrangement rather than stretch the warp. Animated transitions (continuous deformation while the focus moves) aid correspondence enormously, subject to the reduced-motion conventions.
Applying it
- Cap the size step between elements across the focus boundary; beyond the cap, smooth the transition or add correspondence markers.
- For block-style focus (collapse, drawers), provide structural indicators at the boundary (arrows, indentation, numbering).
- Verification: have users pick an element in the focus region and point to its counterpart in the context; fluent pointing means the transition passes — repeated hunting means correspondence is broken; add transition or markers.
Related
- Same group: U6.06.1 Focus plus context keeps detail and global in one view · U6.06.2 The difference from overview-plus-detail is whether they occupy two views · U6.06.4 The pattern saves gaze switches but adds spatial comprehension load · U6.06.5 The focus position must be movable by the user
- Nearby: U6.07.2 Geometric distortion breaks positional encoding; magnitudes stop being readable · U11.03.4 Transition animations must respect the system's reduced-motion preference
- Search terms:
focus context transition·degree of interest·distortion boundary
Cards in the same group
- U6.06.1Focus plus context packs a magnified detail and its compressed surroundings into one single view
- U6.06.2Whether detail and overview share one view or split across two is what separates these two patterns
- U6.06.4Focus plus context saves the eye a trip but asks the mind to hold two scales in view at once
- U6.06.5What gets magnified in a focus-plus-context view has to be the user's choice, not the system's