Scan Patterns
Scan patterns describe how visitors' eyes move across a page. Matching your layout to the right pattern — F, Z, or layered grid — puts headlines, CTAs, and trust badges exactly where shoppers already look.
Scan Patterns
Predictable paths a visitor's eyes follow across a page — F-pattern for text, Z-pattern for visual layouts, and layered patterns on product grids.
Scan patterns are the repeatable routes shoppers' eyes take when they land on a page before they read anything in full. Eye-tracking studies from NN/g and others show that on text-dense pages people read in an F-shape, on sparse visual pages they sweep in a Z, and on shopping grids they zig-zag through tiles in horizontal layers.
Which pattern your page triggers depends on layout density and content type, not on the visitor. Once you know the pattern, the placement of your headline, primary CTA, price, and trust signals stops being guesswork — you put them on the path the eye already takes.
The F-pattern shows up on content-heavy pages — blog posts, category descriptions, FAQs. The eye sweeps the top line, drops down the left edge, then makes a shorter second sweep before scanning vertically. Anything past the third paragraph or buried mid-line gets skipped.
The Z-pattern fits sparse, visual layouts: hero sections, landing pages, simple promo pages. The eye starts top-left, moves to top-right (logo to nav or hero CTA), drops diagonally to bottom-left, then finishes bottom-right — which is why the primary CTA earns its spot in the lower-right of a hero block.
Shopping grids — collection pages, search results — produce a layered pattern. Shoppers scan the first row of tiles left-to-right, glance at row two, then accelerate down the leftmost column. The top-left product slot gets disproportionate attention; the bottom-right tile of row one is the second-most-viewed.
Which scan pattern dominates each page type
| Page type | Dominant pattern | Put the CTA here | Put trust signals here |
|---|---|---|---|
| Product detail page (PDP) | Modified F | Right rail, above the fold | Directly under price + near Add to Cart |
| Collection / category grid | Layered grid | On each tile (Quick Add) | Top of page banner + per-tile badges |
| Homepage hero | Z-pattern | Bottom-right of hero block | Below hero, full-width strip |
| Blog / content page | F-pattern | Inline after 2nd paragraph + sticky | Sidebar or end-of-article |
| Checkout | Vertical (no scan) | Single primary button per step | Adjacent to payment fields |
| Search results | Layered grid | Filters left, Quick Add on tiles | Result count + sort transparency |
Scan patterns are one lever inside broader attention optimization — the discipline of matching what your page emphasises to what shoppers actually look at. Heatmaps and session recordings confirm the pattern for your specific template; once you've identified it, audit whether your most important elements sit on the path or off it.
Mobile breaks the Z-pattern
On phones, screen width collapses the Z and most F-patterns into a single vertical scan. The first viewport carries roughly 80% of attention — anything below the fold competes with the thumb-scroll. Test mobile and desktop layouts separately; the same hero can be world-class on desktop and invisible on a Shopify mobile session.
Frequently asked questions about scan patterns
F-pattern applies to text-heavy pages where readers skim left-aligned content top-down. Z-pattern applies to sparse visual pages — a hero with a headline, image, and one CTA — where the eye sweeps diagonally. Use F for content; use Z for landing pages and homepage heroes.
Partly. Mobile collapses most patterns into a top-down vertical scan because there's no horizontal width to sweep. The F-pattern survives in a compressed form, but the Z-pattern essentially disappears. Plan mobile layouts around vertical hierarchy and the first viewport.
On a PDP the eye follows a modified F: image gallery left, content right. The Add to Cart button belongs in the right rail, above the fold, directly under price. Sticky variants that follow the scroll improve conversion when the PDP is long.
Run a heatmap or scroll-map on the live page for 1,000-2,000 sessions. Click maps show where attention converts; mouse-movement heatmaps approximate gaze on desktop. For higher confidence, supplement with a moderated session recording review or a five-second test.
They're the same lever from two angles. Scan patterns describe how the eye moves; visual hierarchy is how you shape that movement using size, contrast, and whitespace. You design the hierarchy so the natural scan pattern lands on your most important elements.
Shoppers scan the first row of product tiles left-to-right, then drop a row and scan again — but faster each time. By row three or four, attention drops sharply. The top-left tile gets the most views, so place hero products, bestsellers, or new arrivals there.
Adjacent to the friction point, not in the footer. On a PDP that means directly under Add to Cart; at checkout, beside the payment fields; on a hero, immediately below the primary CTA. Badges in the footer are off the scan path and get ignored.
It doesn't break it — it makes it more aggressive. The longer the page, the more readers compress their scan into the first few lines and left-edge skimming. Break long copy into short paragraphs, lead with the most important sentence, and use sub-headings as anchor points.
A sticky nav with a CTA in the top-right captures the second stop of the Z-sweep on every scroll, not just on first load. That's why Shopify themes that pin a 'Shop now' button top-right outperform themes with only an in-hero CTA on traffic-heavy landing pages.
You can, but you'll be guessing at placement. Knowing the pattern for your page type — F for content, Z for hero, layered for grid — turns CTA, headline, and trust-signal placement into a deliberate decision instead of a designer preference, and it's the cheapest lift in any conversion audit.
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.