UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Scanning Path Design

Pages should support predictable scanning instead of forcing attention to jump between focal points.

scanlayoutnavigation

Design Principle

Attention moves through headings, key data, groups, and actions; layout should align with that path.

Principle Attention moves through headings, key data, groups, and actions; layout should align with that path.

Design action Create a clear entry, body, and next step above the fold; keep strong focal points along one primary path.

Examples Positive example: Users need to understand state, risk, and next steps quickly. Counterexample: Both sides of the page contain strong focal points.

Apply when Users need to understand state, risk, and next steps quickly. Pages include multiple cards and navigation nodes.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Create a clear entry, body, and next step above the fold; keep strong focal points along one primary path.

Apply When

  • Users need to understand state, risk, and next steps quickly.
  • Pages include multiple cards and navigation nodes.

Avoid

  • Both sides of the page contain strong focal points.
  • CTAs are far away from their explanatory content.

Knowledge Metadata

Category
Visual Foundations
Quality
82%
Version
v1
Published
6/6/2026