The F-Pattern and the Z-Pattern: How People Actually Read Your Pages

UI/UX

Here is a truth that stings a little when you have poured weeks into a page: almost nobody reads it. They scan it. They arrive with a question, sweep their eyes across the screen looking for a shape that answers it, and if the shape is not obvious in the first second or two they leave. I have watched enough session recordings and sat behind enough people during testing to stop taking it personally. Reading is expensive, scanning is cheap, and human beings are magnificently lazy in the way evolution intended. The good news is that scanning is not random. Eyes move across a screen in a couple of dominant shapes, and once you know those shapes you can stop fighting them and start designing with them. At Identiti we plan almost every layout around two of these patterns, the F and the Z, because they quietly decide whether your message lands or dies in the gutter of the page. This post is about how people actually read, and what we do about it.

The scan is the default, not the exception

The first thing to internalise is that scanning is not a failure of attention. It is the correct strategy for the reader. When someone lands on a page they do not yet know whether it is worth their time, so they invest the minimum required to find out. They fixate on a few anchor points, they extract the gist, and they decide. If your page rewards that quick sample, they might slow down and read properly. If it punishes them with a wall of undifferentiated text, they are gone before they have processed a single full sentence.

Eye tracking research has been telling us this for a long time. When you overlay a heat map of where people look on a typical content page, you do not get an even wash of attention. You get hot zones near the top and along the left, cooling rapidly as you move right and down. People read the first line or two of a text block with reasonable care, then their eyes start skipping. They read fewer and fewer words per line. They drift down the left edge hunting for the next thing worth stopping on. The pattern is remarkably consistent across cultures that read left to right, and it flips horizontally for right to left scripts, which matters more than most teams remember when they localise.

What this means in practice is that the position of a word on the page changes its odds of being seen. A brilliant sentence buried in the third paragraph, mid line, is functionally invisible. The same sentence promoted to a subheading on the left edge gets read. We are not writing for a patient reader who starts at the top left and finishes at the bottom right. We are writing for a restless eye that samples the page in a predictable geometry, and our job is to put the important things where that eye already wants to go.

The F-pattern: how eyes move over text-heavy pages

The F-pattern shows up on pages that are dense with text and light on strong visual structure. Think blog articles, search results, documentation, long product descriptions, news pages, anything that is fundamentally a river of words. The eye does something that looks like the letter F when you trace it. First, a horizontal sweep across the top, reading the opening line or heading fairly fully. Then it drops down a little and does a second, shorter horizontal sweep. Then it gives up on horizontal movement almost entirely and runs vertically down the left edge, catching the first word or two of each line, each paragraph, each list item, occasionally darting right when something snags its interest.

The consequence is brutal and useful. The top left is prime real estate. The start of every line matters far more than the end. The right side of the page, past the first couple of lines, is barely seen at all. I sometimes describe it to clients as reading from the doorway: the reader is standing at the entrance, glancing in, and only stepping fully into the room if what they can see from the door looks worth it. Everything on the far wall might as well not exist for that first decision.

This is why we obsess over the left margin of content. If your key benefit lives at the end of a long sentence, move it to the front. If a paragraph opens with a throat clearing phrase like “In today’s fast paced world” or “It is important to note that,” you have spent your most valuable position on nothing. The eye scanned “In today’s” and moved on, never reaching the actual point. The F-pattern is not a decorative idea. It is a distribution map of attention, and it tells you exactly which words are being read and which are being wasted.

One more thing about the F. It emerges most strongly when the page fails to give the reader better cues. A dense, poorly structured page forces the eye into the F because there is nothing else to grab onto. A well structured page can partly override it, pulling attention to specific points with hierarchy and spacing. So the F-pattern is both a description of default behaviour and a warning: if you see people scanning your page in a rigid F, it often means your design has not offered them anything better to do.

The Z-pattern: how eyes move over sparse, visual pages

The Z-pattern governs a different kind of page entirely. It applies where there is little text and a lot of visual breathing room: landing page heroes, splash screens, simple posters, campaign pages, anything where a handful of elements sit on a largely open canvas. Here the eye does not settle into the grinding vertical scan of the F. Instead it traces a Z. It starts top left, moves across to the top right, then cuts diagonally down to the bottom left, then travels across again to the bottom right.

Map that path onto a hero section and it lines up beautifully with a classic layout. Top left is your logo or brand mark, the thing that says where the reader is. Top right is your primary navigation or a secondary action like a login or a phone number. The diagonal sweeps the eye down through your headline and value proposition in the middle. And the bottom right, the natural terminus of the Z, is where your primary call to action wants to live, because that is where the eye arrives ready to act. It is not an accident that so many high converting heroes place the button roughly along that path. The layout is quietly cooperating with the way people already look.

The Z works precisely because the page is sparse. There are few enough elements that the eye can afford to travel the whole shape without getting stuck. Add too much and the Z collapses. If you cram a hero with six competing elements, three badges, a video, and a paragraph of body copy, you have destroyed the openness that makes the Z legible, and the eye reverts to confused hunting. The Z-pattern is a reward for restraint. The fewer, bolder decisions you make in that space, the more reliably attention flows along the path you intended. If you want a deeper treatment of getting that above the fold zone right, we have written separately about hero sections that actually convert, and the Z is the skeleton underneath most of those formulas.

Choosing the right pattern for the page you are building

The mistake I see teams make is treating these as a style choice, as if you pick the one you like better. You do not pick. The content picks. The density and visual weight of the page determine which pattern the eye will fall into, and your job is to recognise which regime you are in and design accordingly.

Ask a simple question: is this page mostly words or mostly space? A knowledge base article, a category listing, a comparison table, a long form sales page thick with copy, these are F-pattern environments. The reader will scan the left edge and sample line beginnings, so you structure for that. A brand landing page, a product hero, a coming soon page, an app onboarding screen with one message per view, these are Z-pattern environments. The reader will trace the diagonal, so you place your anchors on the corners and the path between them.

Most real pages are not purely one or the other, and this is where it gets interesting. A long marketing page often opens with a Z-pattern hero, then transitions into F-pattern content sections below the fold as the copy thickens. The trick is to design each zone for the behaviour it will actually trigger rather than imposing one logic on the whole page. The hero gets the sparse, corner anchored Z treatment. The dense sections below get the left aligned, front loaded, subheading rich F treatment. When we plan a layout we quite literally annotate the wireframe with which pattern governs which band of the page, because it changes where every important element goes.

There is also a resolution to the tension between the two. Both patterns agree on the top left being valuable and both reward clarity over clutter. When you are unsure which regime a section is in, default to the F assumptions, because a page that fails to be sparse enough for a clean Z will always fall back into F behaviour. Designing for the F is the safer bet when in doubt, and it rarely hurts a section that turns out to be sparse.

Placing the headline, the value proposition, and the CTA

Once you know the scan shape, placement stops being guesswork. Let me walk through the three elements that decide whether a page works, and where each belongs.

The headline is the single most important piece of text on the page, and it must sit on the primary scan path. In a Z-pattern hero that means high and prominent, spanning the upper diagonal where the eye passes early with full attention. In an F-pattern page it means top left, large, unmissable, because that horizontal top sweep is the one moment the reader is genuinely reading rather than skipping. A headline that is beautifully written but visually demoted, or pushed to the right, or floated below a decorative band, gets skimmed past. Position beats prose here. A blunt headline in the right spot outperforms a clever one in the wrong spot.

The value proposition, the sentence that says why this matters to you specifically, needs to sit immediately in the eye’s path after the headline, not three scrolls down where you have finally gotten around to explaining the benefit. In a Z hero it lives on the diagonal, right under or beside the headline. In an F page it becomes the first subheading or the opening line of the first paragraph, front loaded so the first two words already carry meaning. The reader decides whether to stay based on the value proposition, so it cannot be something they have to dig for.

The call to action is where I see the most expensive mistakes, so it gets its own section below. The short version: the CTA must land where the scan path ends or peaks, which is the bottom right of a Z and, in an F-pattern page, along the left edge repeated at natural decision points. A CTA parked in dead space, off the path the eye actually travels, is a button nobody sees. And a button nobody sees converts nobody.

Front-loading: the first two words do the heavy lifting

If you take one tactical habit from this entire post, make it this. Front load everything. Because the eye reads the beginning of lines and skips the ends, the first two or three words of every heading, every list item, every link, and every paragraph opener are doing a wildly disproportionate share of the communication. Those words are often the only ones read. Treat them as the message, not the run up to it.

Compare two versions of a list item. “We can help you reduce your onboarding time significantly” versus “Reduce onboarding time significantly.” The first spends its scanned words on “We can help you,” which says nothing. By the time the reader reaches “reduce onboarding time” their eye has already moved on. The second version leads with the benefit, so even a reader who only catches the first two words gets “Reduce onboarding.” The information density at the start of the line is everything. This is not about being terse for its own sake. It is about respecting where attention actually lands.

The same logic applies to headings. “Understanding the Benefits of Automated Reporting” front loads “Understanding the,” which is filler. “Automated reporting, faster decisions” front loads the substance. Do this across a whole page and the scannable skeleton of your content, the part people actually consume, becomes genuinely informative on its own. A reader should be able to skim only your headings and line openers and still come away knowing what you offer and why it matters. If they cannot, your page is failing the scan test regardless of how good the full text is. We treat this as a hard rule in copy reviews, and it pairs closely with the broader craft of designing for skimmers with clear visual hierarchy.

The layer-cake pattern and letting scanners drop in

There is a third pattern worth naming because it is the one you actively want to encourage on content pages, and it is called the layer cake. Picture a heat map where attention lands in strong horizontal bands, on the headings and subheadings, with the body text between them mostly cool. Traced top to bottom it looks like the layers and filling of a cake: hot heading, cool body, hot heading, cool body, all the way down. This happens when a page has clear, frequent, informative subheadings that the scanning eye can hop between.

The layer cake is what a well structured F-pattern page turns into, and it is a much healthier state than the rigid F. In the rigid F the reader is stuck scanning the left edge because nothing else pulls them in. In the layer cake the subheadings act as landing pads. A scanner drops down the page, touching down on each subheading, and where one matches their question they dive into the body text beneath it. Good subheadings are therefore not decoration or SEO garnish. They are the entry points through which a scanner becomes a reader. Every subheading is a small promise: read the next paragraph and you will get this specific thing.

This changes how we write subheadings. A vague label like “Our Approach” gives the scanner nothing to decide on. A specific, front loaded subheading like “Fixed scope, weekly delivery” tells them exactly what is below and lets them choose to drop in. The more of your meaning you push up into the heading layer, the more navigable the page becomes for the way people genuinely move through it. When we restructure a client’s underperforming content page, a huge part of the fix is almost always rewriting the subheadings so the layer cake actually carries the argument on its own. Reducing the effort it takes to find the relevant layer is really a form of lowering the reader’s cognitive load, and the page feels faster even though nothing about its length has changed.

Interrupting and redirecting the scan on purpose

Knowing the default paths is only half the craft. The other half is knowing when and how to break them. Sometimes the whole point of a section is to stop the scanning eye and force a fixation on one thing, a single offer, a critical warning, a hero statistic, the one button that matters. For that you deliberately interrupt the pattern, and the tools for interruption are contrast, scale, isolation, and space.

Whitespace is the most underrated of these. An element surrounded by generous empty space reads as important because isolation signals significance and because there is nothing competing for the fixation. When you want to pull the eye off its F-pattern track and make it stop, you do not add more stuff, you remove the stuff around the target so it stands alone. This is counterintuitive to clients who equate empty space with waste, which is why we spend real energy defending it, and why we wrote a whole piece on the role of whitespace in design. A CTA with room to breathe converts better than the same CTA crammed between two other elements, every time.

The other tools follow from how perception works. A strong contrast in colour or weight creates a hot spot the eye is drawn to before it settles into any pattern. A dramatic jump in scale establishes an obvious first stop. Directional cues, an arrow, a gaze, a line, a gradient, can physically redirect the scan from where it would naturally go to where you want it. Much of this rests on the way our visual system groups and prioritises what it sees, which is the territory of the Gestalt principles applied to web design, things like proximity, similarity, and figure ground that quietly govern which element wins the first fixation. The point is that the F and the Z are the currents, and hierarchy is the rudder. You work with the current most of the time and steer against it only where it counts, because if everything shouts for interruption then nothing does.

Why hiding the CTA off the scan path quietly kills conversion

I want to dwell on this because it is the single most common self inflicted wound I see. A team designs a genuinely persuasive page, the copy is sharp, the value proposition is clear, the design is clean, and then they place the primary call to action somewhere the eye never travels. Floated to the right of an F-pattern content block where attention has already collapsed to the left. Sitting alone below the fold with no lead in. Tucked into a busy corner with five other elements clamouring around it. The reader is convinced and ready to act, and there is no obvious door to walk through. So they do nothing, and the page is judged a failure of persuasion when it was actually a failure of placement.

The fix is to treat the CTA as something that must intersect the scan path at the moment of maximum intent, not something you drop wherever there happens to be room. On a Z-pattern hero that means the bottom right terminus, and often a second instance on the diagonal near the value proposition so a fast decider does not have to hunt. On a long F-pattern page it means repeating the CTA at the natural decision points, aligned where the vertical scan runs, so that whenever the reader becomes ready there is a button already in their line of sight. You are not being pushy by repeating it. You are being considerate, because you cannot know in advance at which layer of the cake a given reader will be convinced.

Test this on your own pages with a merciless exercise. Squint at the layout until the text blurs, or ask someone to glance at it for two seconds and then look away. Can they tell you where the button is? If the primary action does not survive that blur test, it is not on the scan path, and you are leaving conversions on the table no matter how good everything else is. In project after project, simply moving an existing, unchanged CTA onto the path the eye already travels produces a lift, because the button was always fine. It was just standing where nobody was looking.

Mobile changes the geometry, so change the plan

Everything above assumes a wide screen where horizontal sweeps and diagonals have room to exist. On mobile the geometry compresses, and the patterns change shape accordingly. A narrow single column cannot support a meaningful F, because there is barely any horizontal distance for the eye to sweep across. The F effectively collapses into a straight vertical scan down the page. The Z similarly flattens, because you cannot place elements meaningfully far apart on the horizontal axis. What you get instead is a vertical stream, and attention concentrates hard at the top and thins as the reader scrolls.

This has direct consequences. On mobile the top of the screen is even more precious than on desktop, because there are no side positions to distribute secondary elements into. Everything queues vertically, which means the order of stacking is the whole design. Whatever you put first gets seen, and each subsequent element competes with the growing temptation to stop scrolling. Front loading matters even more here, both within lines and in the ordering of blocks. Your value proposition and primary action need to appear early in the stack, and the CTA usually wants to be reachable without a long scroll, often repeated and sometimes pinned, because a button far down a mobile page might as well be on another continent.

There is also the thumb to consider, which desktop never forces on you. The scan path and the reach path are different things on a phone. The eye may travel the whole vertical stream, but the thumb comfortably reaches only a zone in the lower and central part of the screen. A CTA that is visually well placed but physically awkward to tap creates friction at the exact moment you want none. So on mobile we plan two overlays, where attention goes and where the thumb can comfortably act, and we try to make the primary action satisfy both. Designing a layout for desktop and then simply reflowing it into one column is how good pages quietly lose their effectiveness on the devices where most people will actually meet them.

A practical checklist you can run on any page

Here is the routine we run, in prose, so you can apply it without a template. Start by deciding which regime each band of the page is in. Is this section mostly words, in which case it is an F and later a layer cake, or mostly space, in which case it is a Z. Annotate it before you place a single element, because that decision governs everything after.

Next, audit position against importance. Take your three critical elements, the headline, the value proposition, and the call to action, and check that each sits on the actual scan path for its regime, top left and along the left edge for the F, the corners and diagonal for the Z. Then run the front loading pass: read only the first two words of every heading, list item, and paragraph, and ask whether that skeleton alone communicates the offer. If it reads as filler, rewrite the openers until the scanned words carry the meaning. After that, check your subheadings specifically, because they are the layer cake’s landing pads. Each one should be specific and front loaded enough that a scanner can decide from it alone whether to drop into the text below.

Then look at interruption. Identify the one thing in each section that must stop the eye, and confirm it earns its stop through space and contrast rather than through clutter, giving it room to breathe rather than more neighbours to compete with. Run the blur test on the CTA: squint, and if you cannot find the button, move it onto the path. Finally, do the whole thing again on a narrow screen, because the F and the Z both collapse into a vertical stream on mobile, and what worked in two dimensions has to be re proven in one. None of this requires new research or fancy tooling. It just requires you to accept that people scan rather than read, to learn the two shapes their eyes trace, and to have the discipline to put your best words and your most important button exactly where those eyes already want to go.