Z-Pattern Layout
A visual scanning pattern where the eye moves in a Z-shape across a page: left to right across the top, diagonally down to the bottom-left, then left to right across the bottom, common on pages with minimal text.
What Is the Z-Pattern?
The Z-pattern describes how users scan pages dominated by visuals rather than text — homepages, landing pages, and marketing pages. The eye starts top-left (logo), sweeps right (nav and top CTA), drops diagonally through the hero, and concludes bottom-right (final CTA). Long pages often stack multiple Z's into a zigzag. Where F-pattern applies to content, Z-pattern applies to marketing — and placement along the Z determines what gets seen.
Also Known As
- UX and design: "Z-layout," "zigzag layout"
- Product and engineering: "hero scan pattern"
- Marketing and growth: "landing page flow"
- Design teams: "marketing page scan path"
How It Works
A homepage places the primary "Book a Demo" CTA in the top-left corner below the logo. Conversion is weak. Moving it to the top-right (end of the first horizontal sweep) and repeating it bottom-right (terminal point of the Z) aligns the button with the natural visual conclusion of the scan. Visitors reach the end of the page already primed to click because the CTA is sitting exactly where their eye is going anyway.
Best Practices
- Place primary CTAs at natural Z terminals: top-right of the hero and bottom-right of each major section.
- Alternate left- and right-aligned content blocks on long pages to create rhythm and maintain scan momentum.
- Anchor each Z segment with a clear visual — image, icon, or stat — at the start to capture the eye.
- Keep text blocks short on Z-pattern pages; dense paragraphs trigger F-pattern scanning and break the flow.
Common Mistakes
- Placing the primary CTA bottom-left (dead space in Z-pattern) because it looked balanced in the mockup.
- Applying Z-pattern thinking to text-heavy pages, where F-pattern actually governs — the patterns are not interchangeable.
Industry Context
SaaS and B2B: homepage and feature page layouts are canonical Z-pattern territory; demo CTAs belong at Z terminals. Ecommerce and DTC: category and campaign landing pages benefit from alternating zigzag product rows. Lead generation: single-purpose landing pages with minimal copy follow tight Z-patterns where hero CTA and submit button anchor the two ends.
The Behavioral Science Connection
The Z-pattern reflects the Western left-to-right, top-to-bottom reading bias combined with gravity of gaze toward terminal points — the brain resolves each scan by landing on a "conclusion" element.
Key Takeaway
On visual marketing pages, put your primary CTAs at Z-terminals — top-right of the hero and bottom-right of each section — where the eye naturally concludes.