←F-Pattern Layout
HeroLive DemoAnatomyComponentsRules
See All Styles
Eye-Tracking Research

F-Pattern
Layout

Based on Nielsen Norman Group eye-tracking research. Users scan the top horizontally, drop down for a second shorter scan, then skim vertically down the left edge — forming an F-shape.

Stroke 1 — Full-width top scan (highest attention)
Stroke 2 — Shorter secondary scan (~75% width)
Stroke 3 — Left-edge vertical skim
232
Users Studied
F
Scan Shape
80%
Content Left
First Horizontal StrokeSecond Stroke (75%)VerticalStrokeEye-Tracking Heatmap

Red = highest attention, Blue = moderate, Teal = lightest. The right side below stroke 2 receives almost no engagement.

Live Demo

F-Pattern in action

A news article listing built on F-pattern principles. Toggle between desktop and mobile to see how the layout adapts while preserving scan hierarchy.

EditorialPress
WorldTechnologyDesignScienceAbout
Featured

F-Pattern Research Celebrates 20 Years: How One Study Redesigned the Internet

The 2006 Nielsen Norman Group eye-tracking study changed how designers think about content placement forever. Two decades later, the F-pattern remains the most cited layout principle in UX.

First Horizontal StrokeSecond Stroke (75%)VerticalStrokeEye-Tracking Heatmap
Search articles...
AllTechDesignScience
Technology|Feb 20, 2026

How Eye-Tracking Research Shaped Modern Web Design Patterns

Nielsen Norman Group's seminal studies revealed users read web content in an F-shaped pattern. Learn how this insight transforms layout decisions.

Sarah Chen·8 min read
Design|Feb 18, 2026

Content Hierarchy and the First Horizontal Scan Line

The first horizontal stroke of the F receives the most attention. Discover why your headline placement determines engagement rates.

Marcus Webb·5 min read
UX Research|Feb 15, 2026

When to Break the F-Pattern: Exceptions and Alternatives

Not every content type benefits from an F-layout. We examine when Z-pattern, gutenberg diagram, or layer cake approaches serve better.

Priya Nair·6 min read
Performance|Feb 12, 2026

Optimizing Scan Speed: Typography Choices for F-Pattern Layouts

Line length, font weight, and leading all affect how fast a user completes each horizontal stroke. Data from 12 publications.

Tom Fischer·4 min read

Trending

1Z-Pattern vs F-Pattern
2Mobile Scroll Depth
3Heat Map Analysis

Tags

UXLayoutEyetrackReadingScanContent
Layout Anatomy

The 3 F-strokes explained

Each stroke carries a different attention weight. Click any stroke to highlight its role in the layout hierarchy.

1
Stroke 1 — Full Width
2
Stroke 2 — 75% Width
3
Stroke 3 — Vertical

Click a stroke to highlight — opacity shows attention falloff

01

First Horizontal Stroke

The full-width top sweep captures headline, logo, and primary navigation. Users allocate the most attention here. Place your highest-priority content in this zone.

Place: Logo, Primary Nav, Featured Headline
w-full border-b border-gray-200 py-4
02

Second Horizontal Stroke

A shorter second pass slightly below — users have already reduced focus. Content that extends past 75% of the width often goes unread.

Place: Category Tags, Search, Secondary Nav
w-3/4 border-b border-gray-100 py-3
03

Vertical Stroke

The leftmost vertical column scan — users skim down the left edge after horizontal passes. Article titles, timestamps, and list item beginnings live here.

Place: Article List (left edge), Timestamps, Lead Text
border-l-4 pl-4 flex-1 space-y-4
/* Category Tags */
Components

F-Pattern component gallery

Each component is designed for left-aligned, scan-friendly reading. Transitions stay under 200ms to avoid interrupting the reading flow.

Primary CTA — Red accent, fast feedback (duration-150)

Outline & Ghost variants

Size variants — sm / md / lg

Animation & Interaction Rules

F-pattern interaction patterns

Four named interaction rules derived directly from the F-pattern aiRules spec. Each demo is interactive — hover or click to feel the pattern.

Eye-Tracking Guides

hover: translate-x-1 + underline reveal

List item titles shift right 4px and reveal an underline on hover — helps users lock on during the F-scan without jarring animation.

F-Pattern Research: 20 Years Later
Eye Tracking in Mobile Design
Content Placement Best Practices
Why Left-Aligned Text Wins

Hover each list item to see eye-tracking guide behavior

Fast Feedback

duration-150 to duration-200 max

Editorial interactions must not stall reading. Transitions cap at 200ms. Here is a side-by-side comparison — slow 600ms vs fast 150ms.

Slow — 600ms (interrupts reading)
Fast — 150ms (snappy, flow preserved)

Hover each button to feel the speed difference

Contrast Pop

hover:bg-gray-50/70 hover:shadow-sm

Content row gets a light background lift and subtle shadow on hover — visually separates the item from the information stream without distraction.

UX Research

Content row hover state demonstration

6 min read · Feb 2026
Hover the row above
Image Focus

group-hover:brightness-95 group-hover:contrast-105

Thumbnail gets a subtle contrast boost on hover — signals clickability as a visual affordance without disruptive zoom or scale effects.

Performance

Image contrast boost as click affordance

4 min read

Hover the card above — thumbnail contrast shifts, arrow appears

Design Rules

Content placement rules

F-pattern content placement is not aesthetic preference — it is backed by user behavior data. These rules reflect where attention actually lands.

Attention zone reference — where your rules apply

Zone 1 — Highest: Full-width top (logo, headline, featured story)
Zone 2 — Medium: 75% width (search, categories)
Zone 3 — Low: Left edge skim
Lowest attention — avoid critical content here

Do

  • Place most important content at top (first horizontal stroke)
  • Keep left edge populated — users scan left margin vertically
  • Use clear heading hierarchy: h1 > h2 > h3
  • Use bullet lists and short paragraphs for scannability
  • Align all body text to the left (text-left)
  • Limit line width with max-w-prose for readable measure
  • Put primary CTA within the first two horizontal strokes
  • Use visual weight to guide — bold text at line starts

Don't

  • Never place critical content in the right-lower quadrant
  • Never center-align large blocks of body text
  • Never ignore content priority in placement decisions
  • Never use long unbroken paragraphs — they kill scan speed
  • Never leave the left margin under-utilized
  • Never put a CTA below all three strokes without a reason
  • Never rely on right-side content for first impressions
Correct — Left-aligned, prioritized

Hero spans full width, secondary is 75%, content left-aligns

Wrong — Centered, priority ignored

Logo small and centered, CTA buried at bottom, text centered

F-Pattern Layout
Eye-Tracking Design System

Built on Nielsen Norman Group research. Place your most important content where users actually look — top left, then trace the F.

Color Palette

This StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
F-Stroke ZonesStroke 1 — Full WidthStroke 2 — 75% WidthStroke 3 — Vertical
F-Pattern Layout — StyleKit Design System
←All Styles