Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/Visual Design Principles in Practice/
Exercise #1

The F-Shaped and Z-Shaped Visual Scanning Patterns

Extensive eye-tracking research conducted by Nielsen Norman Group demonstrates that web users rarely read text word-for-word; they scan screens rapidly along predictable trajectories:

The F-Shaped Scanning Pattern

Dominates text-dense editorial and documentation pages:

  1. Users read horizontally across the upper part of the content area (forming the top bar of the F).
  2. Their eyes drop down the left margin, scanning a shorter horizontal burst across subheadings (the lower bar of the F).
  3. Finally, they scan vertically down the left edge in a quick sweep (forming the F's stem).

The Z-Shaped Scanning Pattern

Dominates landing pages and marketing screens with low text density:

  • Eyes travel from top-left (logo) to top-right (CTA), sweep diagonally across the hero imagery to the bottom-left, and finish horizontally across the primary action button on the bottom-right.

Topics

The F-Shaped and Z-Shaped Visual Scanning Patterns
Visual Anchors and Guiding the User's Foveal Gaze
Reducing Visual Entropy: The 8pt / 4pt Spatial Grid System
Contrast as the Engine of Conversion and Wayfinding
Intentional Friction: When Sound UX Slows Users Down
Responsive Cohesion Across Multi-Device Breakpoints
design
UX Design

From lesson

14

Visual Design Principles in Practice

Level 4 · Principles of Design

Top contributors

Community contribution details will appear here once real learner activity is available.

Share