U6.06.3The transition between focus and context must be continuous and legibledesign

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

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U6.06.3