Scan Patterns
Scan patterns describe the predictable paths eyes take across a page. Matching your layout to the right pattern decides whether your CTA, headline, and trust badges actually get seen.
Scan Patterns
Predictable eye-movement paths shoppers follow across a page — F-pattern, Z-pattern, and layered grid scans — that decide what gets seen first.
Scan patterns are the recurring routes a visitor's gaze takes when first landing on a page. The three you'll see most in online retail are the F-pattern on text-heavy pages (blogs, product descriptions), the Z-pattern on image-led pages (landing pages, hero sections), and a layered or 'spotted' pattern on shopping grids where eyes hop between product tiles.
Knowing which pattern applies to a given template tells you exactly where to anchor the headline, the primary CTA, the price, and the trust signals. Get the pattern wrong and your best-converting element sits in a dead zone the visitor never fixates on.
The F-pattern was popularised by Nielsen Norman Group eye-tracking studies: on copy-heavy pages, readers scan the top line in full, drop down a few lines and read a shorter horizontal stretch, then vertical-scan the left edge. The right side of long paragraphs is essentially invisible.
The Z-pattern shows up on sparse, image-led layouts — think a Shopify homepage hero. The eye sweeps top-left to top-right (logo to nav CTA), diagonals down to bottom-left, then finishes bottom-right. That terminal corner is prime real estate for a primary action.
Product listing pages break both. Shoppers don't read — they hop. Eyes jump between tiles based on image contrast, badge colour, and price prominence, returning to whichever tile won the comparison. Designing for this means treating each tile as its own micro-layout.
Attention Weight = Pattern Position Score × Visual Salience × Time-on-Zone
PPS
Pattern Position Score
0–1 score for how strongly the scan pattern fixates this region (e.g. top-left of an F-pattern ≈ 1.0, bottom-right of an F-pattern ≈ 0.2).
VS
Visual Salience
0–1 score for how much the element stands out — contrast, size, colour, motion.
TZ
Time-on-Zone
Average fixation seconds in that region from your session-recording tool or eye-tracking study.
An apparel store has a 'Free returns' trust badge in the bottom-right of an F-pattern blog template. PPS = 0.2 (cold zone), VS = 0.6 (decent contrast, small), TZ = 0.4s average fixation.
PPS: 0.2
VS: 0.6
TZ: 0.4s
→ Attention Weight ≈ 0.048
A score below ~0.15 means the element is effectively invisible. Moving the badge into the left-edge vertical scan zone (PPS ≈ 0.8) pushes the weight to ~0.19 — roughly 4× the chance of being seen, with zero change to the badge itself.
The three patterns aren't equally common across templates. Matching pattern to page type is the first thing to check during an attention audit — before you change copy, colours, or button text, confirm the layout matches how the page is actually scanned.
Which scan pattern dominates which page type
| Page type | Dominant pattern | Best CTA placement | Common dead zone |
|---|---|---|---|
| Homepage hero (Shopify) | Z-pattern | Bottom-right of hero | Mid-left vertical band |
| Product detail page | F-pattern (right rail) | Top-right, above the fold | Below-fold paragraph tails |
| Collection / PLP grid | Layered / spotted | Within each tile (badge + price) | Filter sidebar after row 2 |
| Blog / editorial | F-pattern | Inline after paragraph 2 + left-edge sticky | Right margin |
| Checkout (single column) | Vertical linear | Bottom of form, full width | Anything in the right rail |
| Email-capture landing | Z-pattern | Bottom-right or below hero image | Top-right after logo |
Scan patterns are one lever inside the broader discipline of attention optimization — alongside visual hierarchy, contrast, and progressive disclosure. Confirm the pattern with session recordings or a 5-second test before redesigning around it; default assumptions break on mobile, where everything collapses to a vertical scroll.
Scan patterns FAQ
Run a session-recording tool with a heatmap overlay for a few hundred sessions, or do a 5-second test on UsabilityHub. Text-heavy pages almost always show an F. Sparse hero pages show a Z. Grids show clustered fixations on individual tiles.
Partly. On mobile, the F and Z collapse into a vertical scroll where the top 1–2 viewports get 80%+ of attention. The 'pattern' becomes: above-the-fold matters disproportionately, and anything past viewport 3 is rarely seen unless the page hooks the user early.
On desktop, the top-right rail at the natural F-pattern fixation point — beside the hero image and above the fold. On mobile, directly under the price and rating, before the description accordion. Sticky add-to-cart on scroll recovers everything below.
It's been refined, not retired. Recent eye-tracking work shows the F is most pronounced on dense, un-formatted text. Strong typographic hierarchy, bullets, and subheads pull the eye into a more layered pattern — which is generally good for comprehension and conversion.
The Z starts top-left and immediately sweeps top-right, so a logo top-left and a primary nav CTA top-right is the canonical Z-friendly setup. If your nav CTA sits centre-top, you're fighting the natural sweep.
The F and Z mirror. Right-to-left readers scan top-right to top-left first, then drop down. If you localise into Arabic, flip your layout — don't just translate the copy.
Place them where the eye actually lands during the decision moment. On a product page, that's beside the price and CTA, not in the footer. On checkout, immediately under the payment form. Badges in the dead zones of an F-pattern earn almost no attention.
Yes — heavy visual elements act as anchors. A large hero image pulls the eye away from a pure F into a Z. A bold price tag on a tile creates a fixation point regardless of pattern. Designing the salient anchors is how you 'steer' the scan.
Scan patterns describe the path; attention optimization is the broader practice of making sure your most important elements sit on that path with enough visual weight to actually fixate. Patterns are the map — salience, hierarchy, and contrast are the levers.
Yes, but test the specific change, not the theory. 'Move trust badges into the left-edge F-scan zone' is a testable hypothesis with a clear primary metric (add-to-cart rate). 'Redesign for F-pattern' is too broad to learn from.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.