Visual hierarchy is the way a page's size, contrast, color, position and spacing tell visitors what to look at first, second and third.
On a page built to convert, the hierarchy should match the decision: the offer and the main action read first, the proof that supports them next, and everything else last.
Whitespace is one of the tools that builds that order, but more of it is not automatically better.
That last point is where our test database disagrees with a lot of design advice.
Several of the cleanest wins we have came from removing space, not adding it, because the space was pushing the offer out of view.
Below is what the research says, what real A/B tests show, and how to tell which problem your page has.
You can browse every related result in the layout and design tests.
Whitespace in web design: when space helps and when it costs sales
Whitespace (or negative space) is any empty area between and around elements: margins, padding, line spacing, the gap between sections.
It does two jobs. It gives text room to be read, and it shows which items belong together.
What the research shows
The readability case is real but modest. In a 2004 study published in Usability News, Chaparro and colleagues compared four white space layouts and found that text with margins was read faster and understood better than text with no margins.
Changing line spacing (leading) did not change reading performance, though it did change which layout people preferred.
The grouping case comes from Gestalt psychology. Nielsen Norman Group's article on the proximity principle puts it simply: items close together are perceived as part of the same group.
Whitespace is how you say "these belong together" and "this is a separate thing" without drawing boxes.
There is also research on first impressions. A 2012 study by Tuch and colleagues, run with Google, found that visual complexity shaped how attractive people rated a website within 50 milliseconds, and in a second study in the same paper even within 17 milliseconds.
Simple, familiar-looking sites scored highest. Note what was measured: beauty ratings, not purchases or sign-ups.
What A/B tests show
None of that research says "add whitespace and conversion goes up."
The tests in our database show something more specific: space helps when it clarifies, and hurts when it hides.
- Dave Diederen reduced the padding between elements in a bundle buy box, keeping everything else identical. Conversion rate rose 10.74% and revenue per visitor 10.77%, with no change in order value. The reasoning: on mobile, the extra gaps forced shoppers to scroll back and forth to compare bundle options, prices and savings.
- Oliver Kenyon shrank the top section of collection pages by condensing the header to cut white space and moving filters closer to the grid, so products showed above the fold. It was reported as a +$45K/month win.
- Against that, Clean Commit's less cluttered product page with de-emphasized secondary elements came out flat: +4.4% average order value, -0.6% conversion rate and -1.5% revenue per visitor.
The pattern is that whitespace is a budget, especially on a phone.
Spend it between groups so people can see what belongs together.
Don't spend it inside a group the shopper needs to compare at a glance, and don't let it push the product or the button below the first screen.
Our above-the-fold guide covers that second problem in more detail.
Decluttering is a different change
"More whitespace" often really means "fewer things." Removing elements frees up space and attention at the same time, which is why decluttering tests tend to beat pure spacing tweaks.
- Oliver Kenyon cut a product page's first view from 6-7 selling points to three bullets and used the freed space to show the Add to Cart button and trust seals right away. Reported result: +$47,795 per month and +$0.27 revenue per session.
- GoodwillFinds removed the shipping and authentication sections from its mobile product page and moved related products up. Add to Bag clicks rose 5.16%, though the test ran only 8 days.
- Showpo's decluttered product information section on desktop and tablet lifted purchases 1.33% among new visitors, about $19k in extra revenue. The case study doesn't say exactly what was removed.
If a section is ignored, people often scroll past it the way they skip ads, a habit called banner blindness.
Removing it can be a cleaner test than restyling it.
@oliverkenyon@oliverkenyon
@DaveDiederen
Clean CommitVisual hierarchy in web design: the levers and the tests behind them
Nielsen Norman Group defines visual hierarchy as the organization of design elements so the eye takes them in order of intended importance.
It names three main tools: color and contrast, scale, and grouping.
Position on the page is the fourth lever that CRO teams use most, since content higher up gets seen by more people.
| Lever | What it does | Test from our database | Result |
|---|---|---|---|
| Contrast | Makes the key message or action stand out | Hivelocity high-contrast hero (Cro Metrics) | +180% CTA clicks |
| Contrast + position | Pulls a buried form into view | ArchiveSocial form CTA (VWO Services) | +101.68% form field clicks |
| Scale | Makes the deciding number easy to see | Royal Discount bigger, bold sale price (Fruition) | +36.54% Add to Cart clicks |
| Muting | Lowers competing elements so the main one wins | WorkZone grayscale customer logos (WorkZone) | +34% form submissions |
| Readability | Lowers the effort of reading everything | Fonts made 5% bigger (Dave Diederen) | +5.41% conversion rate, +6.91% revenue per visitor |
Contrast: make one thing win
Hivelocity's homepage hero image made the value proposition hard to read.
Cro Metrics replaced it with a high-contrast image, and CTA clicks rose 180%.
That is a click metric, not sign-ups or revenue, so treat it as evidence that people noticed the message, not that they bought.
ArchiveSocial's homepage email form sat at the bottom of the banner with no visual distinction.
Giving it contrasting colors and moving it to the first fold raised form field clicks 101.68% over a 27-day, 50/50 test.
Two changes shipped together, so you can't separate the effect of color from position.
Contrast also has a floor for legibility. WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (roughly 24px, or about 18.5px bold).
Pale gray body copy on white often fails this and makes everything harder to read, not just the low-priority parts.
Muting: lower everything else
Hierarchy is relative. You can raise the main element, or you can lower the elements competing with it.
WorkZone turned the customer logos on its demo request page from full color to black and white.
Form submissions rose 34% in a 22-day test on new visitors, reported at 99% significance.
The logos still did their trust job; they just stopped pulling the eye away from the form.
Nielsen Norman Group also warns against relying on color alone, since some visitors can't tell certain colors apart. Pair color with size, weight or position.
Scale and type: the size of what matters
Royal Discount's product page showed the sale price at 15px regular weight next to a crossed-out list price.
Fruition enlarged it to 20px bold, changing nothing else.
Add to Cart clicks rose 36.54% and revenue 10.21%, though the revenue lift had not reached significance at first and the test covered one product page.
Base type size counts too. Dave Diederen saw a site-wide 5% font size increase lift conversion 5.41%, and a separate 4px increase on a product page for an older audience lift revenue per visitor 4.17% and conversion 1.71%.
Both stores sold to buyers who were likely to struggle with small text, so the effect may be smaller for a younger audience.
Position: what comes first
People scan before they read, often in the shape described by the F-pattern.
The top of the page and the start of each line get the most attention, which makes position the strongest hierarchy lever.
Order sections by what the visitor needs to decide, not by what the brand wants to say.
For product pages, our product page design guide walks through a tested order.
When hierarchy changes lose
Moving something up the hierarchy pushes something else down, and that can cost you.
Clean Commit put three short testimonials next to the title, price and add-to-cart area.
Conversion fell 9.2% and revenue per visitor 15.3% over 9 days.
The drop wasn't statistically significant, but it held on both devices, and click-through rose 7.1%: more engagement, fewer sales.
Device matters as well. Blend Commerce's simplified apparel homepage hero lifted desktop conversion 26%, but mobile conversion and revenue fell, so it shipped on desktop only.
A hierarchy that works on a wide screen can stack badly on a narrow one.
Check each device separately, and see our mobile CRO guide for mobile-specific patterns.
How to audit and test your page's hierarchy
- Do the squint test. Blur the page (or squint at it) and note what still stands out. If it isn't the offer or the main button, the hierarchy is off. Nielsen Norman Group recommends this as a quick check.
- Write down the intended order. List the three things a visitor must see to decide, in order. Compare that list with what actually draws the eye.
- Check the first screen on a real phone. If padding or a tall header pushes the price or the button below the fold, tighten it before you add anything.
- Change one lever at a time when you can. Contrast, size, spacing and position can all be isolated. Full redesigns can win big, but you won't know which part did the work.
- Measure the sale, not the click. Contrast tests often move clicks a lot. Confirm with conversion rate or revenue per visitor before you call it a win.
For more ideas tied to this topic, see the hero section tests, the add-to-cart button tests, our broader ecommerce UX guide and the landing page optimization guide.
Or search the full test database and the CRO guides hub.