Chapter 4
The Hero Section
Grader
Your homepage hero has four seconds and four jobs. This tool runs five evidence-based tests on your hero section to reveal whether it passes or fails — and exactly where to fix it.
Your image stays in your browser — nothing is uploaded to our servers.
Upload Your Hero Screenshot
Take a screenshot of your homepage above the fold — just the area visible without scrolling. One image only.
Click to choose or drag and drop
your homepage screenshot here
JPG, PNG or WebP — ideally 1280px wide or wider
The image is processed in your browser only and never leaves your device.
The Recognition Test
You have 3 seconds to absorb this hero section — just as a first-time visitor would. Watch the countdown, then answer honestly.
Memorise what you see…
What did you see?
Select everything you could identify in those 3 seconds.
The Blur Test
When a page loads slowly or a user glances briefly, this is what they see. Strong visual hierarchy survives blur. Answer before looking at the comparison below.
Looking at the blurred version on the left…
Answer before scrolling to the side-by-side comparison.
Can you still identify the visual hierarchy?
Is the main message still readable?
The Element Count
Cowan's Law states that human working memory holds approximately 4 items simultaneously. Count carefully — every button, image, logo, text block and badge is an element.
How many distinct elements do you see above the fold?
Count: logos, headlines, body text, images, buttons, icons, badges, nav items.
Cowan (2001): working memory capacity is ~4 items — not 7 as Miller claimed.
How many calls to action are there?
Count every button, link or form that asks the user to do something.
The Quality Signal Test
Premium brands signal quality visually before a single word is read. Answer these four questions as honestly as you can — be your own harshest critic.
Quality assessment
Answer yes or no for each quality signal.
Does the hero image look professionally shot or produced?
Is the typography consistent with a premium brand?
Is there adequate whitespace around key elements?
Would you trust this brand based on this hero alone?
The Scroll Motivation Test
The only metric that ultimately matters: did the hero earn the scroll? And what emotional state did it create in those first five seconds?
After seeing this hero for 5 seconds, would you scroll down?
Be brutally honest — answer as a cold, sceptical new visitor would.
What emotion did the hero section evoke?
Pick the single strongest feeling you experienced.
Your Results
Hero Section Grader
Chapter 4 Case Study
What the research says about hero sections
Nielsen Norman Group's eyetracking studies show users decide whether to stay or leave in under 10 seconds. The hero section accounts for nearly all of that judgment. Sites with a single, clear value proposition in the hero see 47% lower bounce rates than those with cluttered or ambiguous messaging.
Hick's Law tells us that every additional element in the hero increases decision time exponentially. The paradox of the ambitious hero: brands try to communicate everything and end up communicating nothing. One message. One visual. One action.
Sources: Nielsen Norman Group (2020), Hick & Hyman (1952), Cowan (2001) — referenced in Chapter 4 of The Visual Content Audit.
Get the full Chapter 4 framework
Download the complete Visual Content Audit — including the Hero Section scoring rubric, before/after case studies, and the 12-point hero checklist.
✓ You’re on the list — check your inbox shortly.
Was this tool useful?
✓ Thank you for your feedback!