U6.06.1Focus plus context keeps detail and global in one viewdesign

Focus plus context packs a magnified detail and its compressed surroundings into one single view

Aliases: focus plus context · focus-and-context

What it is

Focus plus context names a family of techniques: within one view, present a magnified focus region together with its compressed surroundings — collapsible tree outlines, fisheye-warped lists, magnifying lenses. The promise is "descend without losing orientation": the focus region supplies detail, the context keeps telling you where in the whole that detail sits.

Why it happens

The pattern solves the built-in tax of the overview-plus-detail arrangement — the gaze commute: two views mean every cross-check shuttles between canvases, and working memory carries information across the gap. Focus plus context folds both scales into one field of view, dropping the comparison cost to zero: adjacency makes "where the detail sits in the whole" a direct perception rather than a memory-based inference. Its precondition follows from the same logic — focus and context must be spatially or structurally continuous (list items, map regions, tree nodes); continuity is the carrier of same-view comparison. Purely abstract relations (high-dimensional scatter) give the pattern no foothold.

Where it stops holding

Housing two scales in one view has a price: the focus region is confined to part of the canvas, capping its detail below a fullscreen view, and the compressed or distorted context loses some of its own readability. The pattern suits tasks of "frequent comparison at moderate depth," not "sustained close reading" (switch to fullscreen) or "global pattern discovery" (go straight to the overview). It is also not one technique but a family — fisheye, collapsing, lenses, magic lenses each trade differently; selection depends on the task (the cards that follow).

Applying it

  • Profile the task first: work demanding frequent detail-versus-whole checks (navigation trees, long lists, large-canvas inspection) is the candidate for focus plus context.
  • Confirm the data has spatial or structural continuity before picking a specific technique; abstract relational data should use linked views instead.
  • Verification: have users perform one operation in the focus region and state where that element sits in the whole; answering without switching views means the pattern holds.

Related

  • Same group: U6.06.2 The difference from overview-plus-detail is whether they occupy two views · U6.06.3 The transition between focus and context must be continuous and legible · 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.1 Fisheye achieves focus plus context by local magnification and peripheral compression · U6.04.3 Zooming must keep an exit back to the global view
  • Search terms: focus plus context · fisheye views · overview detail tradeoff

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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