Most homepages fail their CTA before a single word of copy gets written. The problem is structural, not creative, and it costs founders clicks every day it goes unaudited.
Nielsen Norman Group's original 2006 eye-tracking study watched 232 people read web pages and found a pattern that hasn't moved since: visitors scan in a rough F-shape, reading fully across the top, then trailing into shorter scans as they drop down the page. A follow-up study eleven years later found the same shape held even on mobile screens. Build a layout without that pattern in mind, and the click never reaches the offer.
Standard advice says test your CTA copy: swap "Sign Up" for "Get Started Free." That fixes nothing if the button is competing with four other elements for the same six seconds of attention.
At SageGridLab, we build hierarchy into a layout before a single word of copy gets written. There's a structural difference between a decorative layout and a hierarchy-driven one, and most homepages we're handed start out as the former.
Article highlights
- A cluttered homepage doesn't have a copy problem. It has a hierarchy problem.
- Your CTA should sit in one of two zones: bottom-right of a Z-pattern, or directly under the headline of an F-pattern page.
- None of the seven checks below require a redesign. They require seven decisions, audited in order.
Eye-tracking heatmaps reveal where visitors actually look — hierarchy decides what they act on.
What the Eye-Tracking Actually Shows
Two scanning patterns show up across the research, and they don't apply to the same kind of page.
F-pattern comes straight from Nielsen Norman Group's eye-tracking lab. The original 2006 study tracked 232 people reading text-heavy pages and found a consistent shape: a full horizontal sweep across the top, a shorter sweep lower down, then a vertical drift down the left margin. NN/g reran the study in 2017 with updated eye-tracking equipment and found the same shape held, mobile included. This is the pattern for blog posts, articles, and anything built from real paragraphs.
Z-pattern is a related idea, but it's worth being precise about the difference: it isn't an NN/g eye-tracked finding the way the F-pattern is. It's a layout from broader eye-tracking and print-design research, describing how people scan pages with less text and more visual structure: landing pages, hero sections, pricing pages. The eye starts top-left, sweeps right, drops diagonally toward the bottom-left, then sweeps right again to land wherever the layout puts the CTA, usually bottom-right.
Which pattern applies depends on how much text is on the page. A 1,500-word article scans in an F. A four-line hero section with one button scans in a Z. Most homepages are some blend of both, which is exactly why hierarchy has to be decided on purpose instead of left to whatever the page happened to ship with.
Decorative Vs Hierarchy-Driven Layout
| Layout Type | Default Behavior | Visitor Outcome |
|---|---|---|
| Decorative Layout | Treats every element on the page as equally important | Visitor hesitates, bounces, or clicks the wrong thing |
| Hierarchy-Driven Layout | Assigns one clear "most important" element per screen | Visitor's eye lands on the CTA without being told to |
Most sites built without an audit default to decorative. It's not bad taste; nobody ever decides which element gets to win. The fix is less competition, not more design.
7 Criteria for a Visual Hierarchy Audit
1. Single dominant CTA
A page with three same-weight buttons doesn't have three options. It has zero CTAs, because nothing is signaling priority.
Whirlpool found this the hard way: cutting a marketing email from four CTAs down to one lifted clickthrough by 42%. HubSpot's broader analysis of CTA volume points the same direction at scale, with single-CTA messages generating multiples more clicks and sales than messages running several asks at once. Homepages aren't email. The mechanism is identical: every extra CTA is a vote against the one you actually want clicked.
Task 1: Count every clickable, same-color element above the fold. If you count more than one CTA, you have none.
"I redesigned our homepage three times chasing the wrong fix. Turns out I had five buttons fighting for the same click and didn't even notice until someone counted them out loud."
2. Contrast isolation
If your CTA's color shows up in your nav bar, your footer, or a secondary button, it's no longer special. It's just another shape on the page.
This is the Von Restorff effect at work: a 1933 psychology finding that an item standing apart from its surroundings gets noticed and acted on more than an identical item that blends in. HubSpot tested this directly with CTA buttons and found a red button outperformed an otherwise-identical green one by 21%, on a page where the rest of the design was dominated by green. The color wasn't the lever. Isolation was.
Task 2: Audit every other element on the page for color overlap. If the CTA's color appears anywhere else, retire it there.
3. Scan-path placement
Eyes don't read a homepage top to bottom. They scan it in an F or a Z, depending on how visual the page is, and they land where the pattern tells them to, not where you decide they should.
That's the research above, translated into a checklist item: if you don't know which pattern your page is using, you can't know where the CTA needs to sit.
Task 3: Trace your own eye path across your homepage right now. If it doesn't land on your CTA within three seconds, your visitors won't either.
"We assumed people read our homepage like a brochure. The heatmap said otherwise. Half our traffic never made it past the second paragraph."
4. Whitespace ratio
A CTA crowded by text or sibling buttons reads as just another piece of the page, not the priority.
Research out of Wichita State University found that increasing the space around a design element improves both readability and how quickly people locate it. Google's own usability testing on interactive elements found that margin around a button cuts mis-clicks and speeds up accurate taps, especially on mobile. Most CRO teams work from a simple floor: at least 20 to 30 pixels of clear space on every side of a CTA before anything else is allowed to touch it.
Task 4: Measure the empty space directly around your CTA. If another element touches it, the CTA has already lost rank.
5. Motion discipline
A subtle hover effect earns a second glance, but only if it's the only thing moving. Five animated elements cancel each other out.
A widely cited 2005 eye-tracking study (Burke, Hornof, Nilsen & Gorman, published in ACM Transactions on Computer-Human Interaction) found that animated elements pull visual attention away from everything static on the same page, including content the user actually came for. Nielsen Norman Group has documented a version of the same effect for scroll-triggered animations specifically, finding they delay people from reaching the content below. Animation isn't free. Every moving element borrows attention from somewhere else on the page, usually from the CTA that isn't moving.
Task 5: Count what's currently animating on your homepage. More than one and you're splitting attention instead of directing it.
"Our dev team was proud of every micro-animation on the homepage. None of us noticed we'd built a page where nothing stood still long enough to look important."
6. Above-the-fold priority
If a visitor has to scroll to find your CTA, you've already lost the visitors who weren't going to scroll.
Nielsen Norman Group's most recent scrolling study (2018, 120 participants, over 130,000 eye fixations) found that even though people scroll more than they used to, 57% of total viewing time still lands above the fold, and 74% lands within the first two screenfuls. Below that, attention drops off fast. That doesn't mean everything has to fit above the fold. It means whatever's above the fold has to include the one thing you actually want clicked.
Task 6: Open your homepage on a phone. If the CTA isn't visible without scrolling, that's the first fix, not the copy.
7. Competing offers
Every pop-up, banner, and chat widget that fires on page load is a CTA you didn't mean to create, fighting your actual one for the same six seconds.
Google's Page Experience guidelines specifically penalize interstitials that block content the moment a page loads, apart from any concern about the CTA itself getting buried. The distinction Google draws is useful here too: an exit-intent popup firing as someone is already leaving doesn't compete with your CTA, because the visitor already decided not to click it. A popup firing on load competes directly, and it usually wins the eye contact your CTA needs.
Task 7: List every element firing automatically on page load. Each one is a competitor to your real CTA, whether you meant it to be or not.
"We had a newsletter pop-up firing at the exact moment someone landed on our demo CTA. We were paying to drive traffic to a page that argued with itself."
[Insert IMAGE 3: before/after example of a hierarchy-driven CTA layout]
Why SageGridLab
Most agencies hand you a hierarchy audit as a pitch deck. We'd rather hand you the audit itself, free, before you've signed anything.
Run the seven checks above on your own homepage and you'll probably find two or three failures. Most sites do, because nobody built them with hierarchy as a deliverable. We built our process the other way around. Under our Digital Alchemy methodology, hierarchy gets decided at the engineering stage, before a designer touches a screen and long before marketing writes a word of CTA copy. Engineering lays the substrate the hierarchy has to sit on. Design is the reaction that turns that substrate into an actual layout, decision by decision. Marketing is the catalyst that proves it worked, because the number that matters, your CTA's conversion rate, moves.
Skip the order and you get a site that looks finished in a screenshot and still underperforms in the only test that counts: whether a stranger lands on it and clicks the right thing.
We'll run this exact seven-point audit on your homepage at no cost and with no contract. You'll get the failures back in writing, ranked by how much they're likely costing you. If you want us to fix them, we will. If you just want the list, that's fine too.
Get your free visual hierarchy audit
FAQ: Visual Hierarchy Audits
What is the visual hierarchy on a website?
Visual hierarchy is the order a layout forces a visitor's eyes to scan in. Size, color, contrast, and spacing decide what gets noticed first, second, and not at all. A page without it makes every element compete for the same attention instead of guiding it.
How do I know if my CTA is in the right place?
Trace where your own eyes land first on your homepage. Strong CTA placement sits at the bottom-right of a Z-pattern scan (visual-led pages) or directly below the headline on an F-pattern scan (text-heavy pages). These are the two zones eye-tracking research consistently shows visitors land on.
Does visual hierarchy actually affect conversion rate?
Yes, indirectly but measurably. A page with clear hierarchy gets a visitor to a decision point faster; a page without one forces the visitor to do the work of figuring out what matters, and most visitors won't do that work before bouncing.
How much does a visual hierarchy audit cost?
The audit itself is free. We'll run all seven checks against your homepage and tell you exactly what's failing, no cost, no contract. What it costs to fix depends on whether the problems are layout-level (usually a quick adjustment) or structural to your underlying design system (a bigger job). Send us the site and we'll scope the fix accurately instead of guessing at a number that won't apply to you.
Can I fix the visual hierarchy without redesigning my whole site?
In most cases, yes. The five highest-leverage levers (size, contrast, whitespace, alignment, and motion) can usually be adjusted within an existing design system without a full rebuild. A redesign is only necessary when the underlying structure itself is fighting the hierarchy you're trying to create.
Closing line: A cluttered homepage isn't a creative failure. It's an unaudited one.