Layout and Whitespace: How to Guide the Eye to the Sale

Good layout guides the eye to the sale by putting the right thing in the spot where people actually look, and by using whitespace to make that thing stand out. People do not read web pages, they scan them, so the job of layout is to make scanning lead straight to your offer and your call to action.

Here is the part most business owners miss: where attention falls on a page is not random. It has been measured, in detail, with eye-tracking. When you know the numbers, you stop guessing about where to put your headline, your proof, and your button. This is exactly the kind of evidence we design around when we build a site.

Where do people actually look on a page?

Attention is heavily top-loaded. In eye-tracking research covering more than 130,000 fixations from 120 participants, 57% of viewing time falls above the fold (the part visible before scrolling), and 74% falls within the first two screenfuls (NNGroup). The top 20% of a page alone captures over 42% of total viewing time.

The fold matters less than it did in 2010, when it pulled around 80% of attention, but at 57% it is still the sharpest attention cliff on any page (NNGroup). So the offer, the supporting line, and the primary button belong up there. We treat this as a build rule, not a nice-to-have.

57% of viewing time falls above the fold, and the top 20% of a page captures over 42% of all attention (NNGroup).

Attention also leans left. Across pages, users spend about 69% of viewing time on the left half of the screen and only 30% on the right (NNGroup). The practical lesson: primary content and calls to action belong on the left or centre. A right-hand sidebar will quietly be ignored.

How do people read once they start scanning?

They mostly do not read, they scan along headings. The best-performing pattern is what researchers call the "layer-cake" pattern: the eye jumps from heading to heading and only drops into the body text that earns its attention (NNGroup). For that to work, two things must be true: headings must look clearly different from body text, and each heading must honestly describe what is below it.

The opposite is the "F-pattern", where the eye runs across the top, then down the left edge, skipping most of the page. The F-pattern is real and confirmed in current eye-tracking on both desktop and mobile, but it is a failure mode, not a strategy. It is what happens when the layout gives the eye nothing to grab (NNGroup). The fix is plain: front-load the important words, start headings with meaningful terms, bold key phrases, and use short lists.

Does whitespace really help, or is it wasted space?

Whitespace earns its keep. A Wichita State University study found that adding space between paragraphs and in the margins improved reading comprehension (Wichita State University). A widely repeated "up to 20%" figure circulates online, but we could not verify that exact number from a reliable source, so we will not quote it as fact. The honest claim is the safe one: more space, better understanding.

The link from whitespace to sales is indirect but sensible. Clearer space means easier comprehension, which means less mental effort, which means a calmer, faster decision. No controlled test puts a conversion number on whitespace directly, so we treat it as a comprehension tool rather than a magic conversion lever.

Whitespace also sets your price perception. The same product looks upmarket with generous spacing and downmarket when crammed (A List Apart). If you sell on quality, tight, cluttered layouts work against you.

To keep spacing consistent rather than arbitrary, we build on an 8-point system, using a geometric scale (2, 4, 8, 16, 32, 64px) so every gap relates to the next. For readability we follow accessibility guidance: line-height around 1.5 to 1.6 times the font size, paragraph spacing at least 1.5 times the line-height, and line lengths of roughly 50 to 75 characters (WCAG 2.1, Level AAA).

What about big hero images and full-screen video?

This is where good intentions backfire. A full-viewport image or autoplaying video looks impressive, but it creates a "false floor": the screen looks complete, so people never scroll. In one usability test of a full-screen video hero, 75% of users (6 of 8) did not realise there was more content below (NNGroup). Everything past that point, including your offer, may as well not exist.

The fix is to let the next section "peek" above the fold, a sliver of the following content that signals there is more. Split layouts (text on one side, a relevant image or product on the other) and product-led heroes tend to be clearer than full-bleed atmosphere shots, because the visitor understands the offer at a glance.

And do not forget where most visitors are: 83% of landing-page visits now happen on mobile, though desktop still converts about 8% better (Unbounce, 2024 Conversion Benchmark Report, 57M+ conversions). On a phone, the button needs at least as much visual weight as any image. Atmosphere loses to access.

FAQ

Should my call to action go above the fold? Yes. The top of the page holds 57% of viewing time and the top fifth alone captures over 42% (NNGroup). Your primary button belongs where attention already is.

Is more whitespace always better? No. Whitespace improves comprehension (Wichita State University) and signals quality, but news and utility sites use denser layouts on purpose. Match the spacing to your brand and to how much your visitor needs to read.

Are full-screen hero images a mistake? They are high-risk. A full-screen video hero left 75% of test users unaware they could scroll (NNGroup). Let the next section peek into view so people know to keep going.

Why do headings matter so much for sales? Because people scan headings far more than body text (NNGroup). Clear, honest headings that describe what follows guide the eye down the page and toward the action.

We build fast, conversion-tuned websites informed by exactly this research, so attention lands where it should and the path to your offer is obvious. If that is the kind of site you want, here is the way we build websites, or book a call and we will talk it through.