Layout and Whitespace. How to Guide the Eye to the Sale
Good layout guides the eye to the sale by putting the right thing where people look, and by using whitespace to make that thing stand out. People scan web pages far more than they read them, so the job of layout is to make scanning lead straight to your offer and your call to action.
Where attention falls on a page isn't random. It has been measured, in detail, with eye-tracking, so you don't have to guess where your headline and your button should go.
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 steepest drop in attention on a page (NNGroup). So the offer, the supporting line, and the primary button belong up there. We treat this as a build rule.
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). Primary content and calls to action belong on the left or centre, and a right-hand sidebar gets far less attention.
How do people read once they start scanning?
Mostly along the 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, 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. Current eye-tracking confirms the F-pattern on both desktop and mobile, but it is a failure mode: 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 couldn't verify that exact number from a reliable source, so we won't quote it as fact.
The link from whitespace to sales is indirect but plausible. Easier comprehension means less mental effort, which makes for a faster decision. No controlled test puts a conversion number on whitespace directly, so we treat it as a comprehension tool.
Whitespace also affects how expensive you look. 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?
A full-viewport image or autoplaying video looks impressive, but it creates a "false floor": the screen looks complete, so people don't 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). If your offer sits below that point, those visitors may never see it.
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.
Most visitors are on a phone: 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 small screen, the button needs at least as much visual weight as any image.
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 put the offer and the main button in the first screen and let the top of the next section show above the fold, so people know to scroll. There's more on how we build websites, and you can book a call to talk about where attention lands on your own pages.