Watch
F-pattern and Z-pattern 0:50
A 50-second explainer of F-pattern and Z-pattern, narrated over the same demo you can try yourself.
Try the interactive F-pattern and Z-pattern demo
What this video covers
The F-pattern and Z-pattern describe the rough paths eyes take when scanning a page, not reading every word. Text-heavy pages tend to get an F - two horizontal sweeps near the top, then a vertical skim down the left. Sparse, visual pages get a Z - across the top, diagonally down, across the bottom. Both say the same thing: people scan in predictable shapes, so put what matters on the path.
Trace the overlay and you can see it: on the text page the gaze rakes across the top twice then slides down the left, leaving the lower-right a dead zone; on the landing page it cuts a Z from logo to nav to hero to call-to-action. Put the important things on those lines, and they get seen; hide them off the path, and they don't.
