DesignDojo
Attention

Eye Path

Guide the reading order on purpose instead of making every block compete equally.

Also heard as: scan path, visual flow

Back to vocabularyJump to components

Definition

Eye path is the order people notice and read interface elements as they move through a screen.

Why it matters

If the eye path breaks, people miss the real action and spend effort decoding the layout instead of using it.

Visual comparator

✓ Directed flow

Anchor

One dominant entry point and a clean progression make the next action obvious.

  • Lead with one dominant focal point.
  • Keep supporting surfaces quieter than the primary action.
  • Use spacing to reinforce the reading sequence.

✕ Competing clutter

Drift

Equal-weight surfaces create scanning stalls and force users to hunt for meaning.

  • Too many bright surfaces compete at once.
  • Navigation and content shout at the same volume.
  • The user has to guess where to start.

Prompt language

  • Make the eye path move from headline to proof to primary action without competing side content.
  • Reduce visual noise around the CTA so the scan path lands on one decision first.

Anti-patterns

  • Giving the hero, navigation, badges, and sidebar equal visual weight at first glance.
  • Sprinkling bright accents everywhere so users have no obvious first focal point.

When to research more

Research more when the page contains multiple user roles, dense dashboards, or competing business goals that make the first action ambiguous.

Related components

Container

Constrain page width so content stays readable and focused.

Navbar

Provide top-level wayfinding and global actions.

Card

Group related information into a bounded, scannable surface.

Related lessons

Your Eye Has a Path

1.1 First Principles

Container

1.2 Components

Navbar

1.2 Components