Eye Movement Patterns
🔗 Apply These Patterns To Your Designs
Universal Eye Movement Laws
Eye movement patterns are NOT preferences - they are biological responses shaped by decades of reading behavior and screen interaction. Understanding these patterns allows you to design with predictable user attention flow across all platforms.
The 3 Universal Eye Movement Patterns
1. Z-PATTERN (Quick Decision)
[ZONE 1 - TOP LEFT]
Primary Hook / Brand
40% width
[ZONE 2 - TOP RIGHT]
Supporting Visual / Data
40% width
[ZONE 3 - MIDDLE FULL WIDTH]
Key Message / Benefit
100% width
[ZONE 4 - BOTTOM RIGHT]
CTA / Handle
30% width
When to Use Z-Pattern:
- ✓Quick Scan Content: Ads, announcements, data posts, conversion-focused designs
- ✓Action-Oriented Goals: Click, buy, sign up, download
- ✓Warm/Hot Traffic: Retargeting ads, existing audience, product launch
- ✓Platforms: Facebook ads, Instagram feed posts, LinkedIn company announcements
2. F-PATTERN (Deep Reading)
[ZONE 1 - TOP VISUAL]
Hero Image / Lifestyle Visual
100% width, 50% height
[ZONE 2 - HEADLINE]
Main Hook Text
100% width, 15% height
[ZONE 3 - BODY TEXT]
Story / Benefits / Details
100% width, 25% height
[ZONE 4 - CTA / HANDLE]
Action / Brand Tag
100% width, 10% height
When to Use F-Pattern:
- ✓Long-Form Content: Thought leadership, carousels, educational posts, case studies
- ✓Reading Goals: Learn, understand, trust-building, engagement
- ✓Cold Traffic: First-time viewers, brand awareness, educational content
- ✓Platforms: LinkedIn posts, Instagram carousels, Facebook organic posts, blog headers
3. VERTICAL SCAN (Mobile-First Decision)
[HOOK - 15%]
Stop-scroll text
[IMAGE - 50%]
Visual proof
[BENEFIT - 25%]
What they get
[CTA - 10%]
Clear action
When to Use Vertical Scan:
- ✓Mobile-Optimized Content: WhatsApp broadcasts, Instagram stories, vertical video thumbnails
- ✓Private Messaging: Direct, intimate, personal communication
- ✓Warm Audiences: Subscribers, email lists, community members
- ✓Platforms: WhatsApp Status, Instagram Stories, mobile-first designs
Pattern Selection Decision Tree
START: What is the user's goal?
Quick Decision / Take Action
Use Z-PATTERN
Read & Understand / Build Trust
Use F-PATTERN
Mobile-First Private Message
Use VERTICAL SCAN
Common Eye Pattern Mistakes
WRONG: Using Z-pattern for educational content
Z-pattern is for quick decisions, not learning. Users will miss key information.
WRONG: Using F-pattern for conversion ads
F-pattern slows down decision-making. Use Z-pattern for action-oriented ads.
WRONG: Ignoring mobile vertical scan
WhatsApp/Stories require vertical scanning. Horizontal layouts fail on mobile.
WRONG: Mixing patterns in one design
Pick ONE pattern per design. Mixing confuses the eye and kills conversion.
Platform-Specific Applications
| Platform | Primary Pattern | When to Use |
|---|---|---|
| F-Pattern (default), Z-Pattern (announcements) | Thought leadership = F, Company news = Z | |
| Facebook Ads | Z-Pattern | All conversion-focused ads |
| Facebook Organic | F-Pattern | Engagement posts, stories, educational content |
| Instagram Feed | F-Pattern (lifestyle), Z-Pattern (promo) | Aspirational = F, Product launch = Z |
| Instagram Stories | Vertical Scan | All story designs (mobile-first) |
| WhatsApp Broadcast | Vertical Scan | All WhatsApp designs (private messaging) |
| Retargeting Ads | Z-Pattern | Warm traffic knows you - quick decision |