---
name: Z pattern
slug: z-pattern
category: layout
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: "The scanning shape on sparse pages: across the top, diagonally down
  to the lower left, then across the bottom to the final call to action."
aliases:
  - name: Z-shaped pattern
    source: community
  - name: zigzag scanning
    source: community
tags:
  - perception
relations:
  contrastWith:
    - f-pattern
  variantOf: []
  partOf: []
  seeAlso:
    - focal-point
implementations: []
sources: []
demo: inline
exhibit: false
useWhen: laying out a sparse page with one clear action
---

Give a reader a page with four things on it and the eye does not settle into a column. It
runs along the top, where a logo and a navigation bar usually sit, cuts back across the
middle on a diagonal, and runs along the bottom, arriving last at whatever is furthest
right. Drawn out, that route is a capital Z, and it is the reason the classic landing page
puts its mark top left, its menu top right, its promise in the middle, and its button in
the bottom right corner.

The Z is the sparse-page counterpart to the [F pattern](/f-pattern), and the difference
between them is density, not taste. Dense text gives the eye enough material to sample
line beginnings, which produces the F. A hero with a headline, an image, and one button
gives it nothing to sample, so the gaze bounces between the few high-contrast objects it
can find and the path between them reads as a diagonal. Add a second column of copy and
the Z stops describing anything.

Treat it as a description of a starting point rather than a template. The eyetracking
record behind these shapes is thinner than the confidence with which they are repeated:
the studies measured skimming on particular kinds of pages, the shapes are averages over
many readers rather than a route any single person takes, and the pattern mirrors under
right-to-left scripts. What survives replication is the weaker and more useful claim, that
the corners of a sparse layout are seen and the interior is not. Anything you would rather
the reader saw belongs on the path, and the last stop on it is the only place a single
call to action should be.

A layout is also allowed to overrule the shape. Contrast, scale, colour, and motion pull
the eye harder than position does, which is why a bright button parked mid-page is found
immediately and a grey one in the bottom right corner is not. The Z is what the reader
falls back on when nothing else is directing them, so the honest way to use it is as a
default the [visual hierarchy](/visual-hierarchy) is then designed against.