Z-pattern or F-pattern: which visual layout for your landing page?

A web page is never read word by word on first contact: the eye scans it first to form an overall impression, then comes back to settle on whatever caught its attention. Eye-tracking research has documented two dominant paths depending on the type of content — the Z-pattern for short, action-oriented pages, and the F-pattern for text-dense ones. A landing page, short by nature and built to convert, almost always calls for the former. Knowing which one applies to your page — and where to place the elements that matter along that path — directly changes what visitors notice before they leave.

What eye tracking actually shows

The F-pattern was documented in a study by Shrestha, Lenz, Chaparro and Owens published in 2007: tracking participants' gaze across e-commerce pages mixing text and images, the researchers observed a path made of two or three decreasing horizontal sweeps near the top, followed by a vertical sweep down the left edge — the shape of an F (study on Google Scholar). A second study, by Buscher, Cutrell and Morris, presented at the CHI conference in 2009 across 361 web pages viewed by 20 participants, confirms that attention concentrates heavily in the top-left area, with the exact distribution shifting depending on whether the visitor is searching for something specific or browsing (study on Google Scholar). Neither study describes a universal law, but both point to a strong tendency: without a visual hierarchy steering it elsewhere, the eye follows the path of least effort, from the top-left corner downward.

The F-pattern: the trap of overly dense pages

The F shows up on pages where information sits in continuous blocks of text — articles, search results, catalogs with long descriptions. The reader scans the first lines in full, then reads a little less of each following block, before dropping down and scanning line beginnings vertically. It's a pattern of economical scanning, not full reading: anything sitting to the right or at the end of a paragraph risks never being seen at all. On a landing page, an F-pattern taking hold is almost always a symptom — too much unstructured text, not enough visual anchors. Our article on readability covers how to shorten paragraphs and strengthen visual anchors to avoid that slide.

The Z-pattern: the one to design for on a landing page

The Z shows up on short, uncluttered pages built around a single goal — exactly the shape of a landing page. The eye starts at the top-left corner, sweeps horizontally to the right, drops diagonally toward the bottom-left, then sweeps right again. Four anchor points emerge: top-left, top-right, bottom-left, bottom-right. That's the path to design for, not merely accommodate.

1. Top-left: the logo or offer name — the first landmark that reassures visitors where they are.
2. Top-right: a secondary trust or minimal-nav element (phone number, badge, login link) — never the main CTA, which would land too early on the path.
3. Central diagonal: the headline and subheadline, sitting right on the eye's own trajectory — see our method for writing a headline that hooks.
4. Bottom-left: a reassurance point or social proof that confirms the headline's promise.
5. Bottom-right: the main CTA — the natural landing point of the Z, where the eye's path ends after reading the promise and its proof.

Placing the CTA at the bottom-right of the first screen isn't an arbitrary convention: it coincides with the gaze's landing point described in both studies above. It builds on what our article on the fold establishes about the five elements to place above it — the Z-pattern specifies how to place them relative to each other, not just which ones to keep.

One Z per section, not just the first screen

The pattern repeats at every new block on the page, not just the first screen. A "benefits" section followed by an image alternates naturally: text on the left then visual on the right on one row, visual on the left then text on the right on the next — a zigzagging Z that keeps the eye moving instead of letting it settle into an F out of fatigue. It's the same logic behind the structure described in our anatomy of a landing page that converts: each section re-triggers attention instead of simply stacking on top of the last. The choice of hero visual matters here too: an image that itself directs the gaze toward the headline or CTA reinforces the path instead of fighting it.

Where the Z-pattern meets copywriting frameworks

The Z-pattern isn't just a layout concern: it overlaps with the order recommended by copywriting frameworks like AIDA — attention top-left, interest along the diagonal, desire bottom-left, action bottom-right. The visual pattern and the argumentative structure point to the same path; aligning them keeps a good sales argument from being undercut by its own layout.

How to check the actual pattern on your page

• A heatmap: it shows the actual path of clicks and, with an eye-tracking or webcam-based tool, of gaze — see our article on heatmaps.
• The 5-second test: ask someone to describe what they saw first, second, and last; the order reveals which path they followed — full method in our dedicated article.
• Scroll depth combined with clicks: if the bottom-right CTA on the first screen gets few clicks despite good scroll depth, the gaze may be following an F and missing it.
• The sticky CTA on mobile: on small screens, the Z compresses into a single vertical column; a CTA fixed at the bottom of the screen makes up for the lost bottom-right anchor point.

All ten LanderKit templates are built around this path-first logic rather than a stack of blocks: logo top-left, headline and subheadline along the diagonal, social proof bottom-left, CTA bottom-right on the first screen, and a text/visual alternation section after section to keep the eye moving all the way to the final form.