Understanding how visual attention flows through interfaces.
Gaze Cueing Psychology
Eye-Superiority Effect
Research Finding:
People automatically follow where others are looking,
even when face and eyes point in different directions.
┌─────────────────────────────────────────┐
│ │
│ [Person Photo] ───eyes────► [CTA] │
│ │ │
│ │ │
│ face pointing │
│ at camera │
│ │
│ Users follow EYE direction, │
│ not face direction │
└─────────────────────────────────────────┘
Why: Evolutionary survival mechanism -
detecting what others are attending to
Application
GAZE DIRECTION BEST PRACTICES
✓ Use photos where person looks toward CTA
✓ Illustrated characters with directed gaze work too
✓ Video thumbnails with gaze toward key content
✓ Eye contact builds trust, then gaze directs action
❌ Avoid: People looking away from conversion elements
❌ Avoid: Generic stock photos with random gaze
❌ Avoid: Photos where subject looks off-page
Eye Movement Patterns
F-Pattern (Text-Heavy Content)
Reading pattern for content-heavy pages:
┌────────────────────────────────────────┐
│ ████████████████████████████ ←1st scan│
│ █████████████████████ │
│ ████████████ ←2nd scan│
│ ████████ │
│ █ │
│ █ ↑ │
│ █ │ │
│ █ vertical │
│ █ scan │
└────────────────────────────────────────┘
Implications:
├── Put key content in first two paragraphs
├── Front-load important words in sentences
├── Use subheadings to catch vertical scan
└── Don't bury CTAs in right column
Z-Pattern (Visual/Minimal Content)
Reading pattern for landing pages:
┌────────────────────────────────────────┐
│ 1 ─────────────────────────────────► 2 │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ 3 ─────────────────────────────────► 4 │
└────────────────────────────────────────┘
1: Logo/brand (start)
2: Navigation/search
3: Secondary content
4: CTA (natural end point - optimal placement!)
Gutenberg Diagram
Attention Distribution:
┌────────────────────────────────────────┐
│ │ │
│ PRIMARY OPTICAL │ STRONG FALLOW │
│ AREA │ AREA │
│ (high attention) │ (medium) │
│ │ │
├────────────────────┼───────────────────┤
│ │ │
│ WEAK FALLOW │ TERMINAL AREA │
│ AREA │ (high attention) │
│ (low attention) │ │
│ │ │
└────────────────────────────────────────┘
Primary Optical (top-left): Where eyes start
Terminal Area (bottom-right): Natural resting point
→ Place CTA in Terminal Area for maximum impact
Mobile Visual Considerations
Thumb Zone Design
MOBILE REACH ZONES
┌────────────────────────────────┐
│ ⚠️ HARD TO REACH │
│ │
├────────────────────────────────┤
│ │
│ ⚡ NATURAL REACH │
│ │
├────────────────────────────────┤
│ ✓ EASY / OPTIMAL │
│ [Primary CTA Here] │
└────────────────────────────────┘
Thumb movement from bottom-center:
├── Bottom center: Easiest
├── Bottom corners: Medium
├── Top: Requires stretch
└── Top corners: Hardest
Mobile-Specific Cues
- Simplified hierarchy (single primary CTA)
- Gesture-friendly (swipe indicators)
- Reduced visual noise
- Larger touch targets
- Sticky CTAs for long pages