Displaying detailed information alongside a simplified or abstracted view of its context, enabling users to maintain situational awareness while completing focused tasks.
Examples
🚧 Contextual navigation
Contextual navigation helps users understand the industrial pasteuriser’s structure – where each component fits within the pasteuriser itself, the production line, and the broader orange juice process. Navigation maps out three types of relationships:
- Explicit connections are clearly defined in the data—like parent-child structures or functional groupings.
- Inferred connections aren’t directly stated but can be identified using domain knowledge—such as parts that consistently appear together in certain setups.
- Deduced connections suggest components that aren’t yet modeled but are likely needed based on what’s already present. If there’s a “Heating Assembly,” for example, a “Recirculation Pump” might reasonably be expected.
TODO: Fix demo
Timeline
Significant events are highlighted with detailed information, while routine activities are summarized concisely.
TODO: Demo
Resources & references
- Furnas (1986) Generalized fisheye views — the degree-of-interest formalism (an item’s display priority as a function of its importance and its distance from the actor’s focus) that this pattern descend from
- Cockburn, Karlson & Bederson (2009) A review of overview+detail, zooming, and focus+context interfaces
- Wattenberger (2024) Fish-eye lens for text
Related patterns
Enacts
- Agency — agency here belongs to the system as well as the user
- Adaptability — the focused frame and its surrounding context recalibrate as the actor's task shifts
- Density — balanced against the actor's cognitive load as focus shifts
Complements
- Progressive disclosure — staged exposure pairs naturally with focus-and-context, revealing detail as the actor moves toward it
- Workspace — focus and context manages detail and overview within a single context; workspaces manage switching between distinct contexts
Alternatives
- Semantic zoom — keeps focus and context simultaneous — detail follows the actor's attention, non-uniformly, inside one continuous view; semantic zoom shows one uniform level at a time under a global scale control
Preceded by
- Embedded intelligence — infers what contextual information is most relevant to the actor's current focus