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. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Create a clear entry, body, and next step above the fold; keep strong focal points along one primary path.