A hero section passes the 5 second test when a first time visitor, after five seconds, can say what you offer, who it is for, and what to do next. Get there with a headline that names the outcome, a subheadline that names the product and audience, and one clear button. Test it with strangers, not your team.
What is the 5 second test?
The 5 second test is a quick usability method: you show someone a page for five seconds, hide it, and ask what they remember and understood. It measures first impression clarity, not beauty or persuasion. If people cannot explain your offer after five seconds, many real visitors will leave before they scroll.
The test mimics how people actually arrive. A visitor from an ad or a search result glances at the top of the page to check whether they are in the right place.
What must a visitor understand in five seconds?
A visitor must answer three questions in five seconds: what is this, is it for me, and what do I do next. Everything else, such as features, pricing details, and your story, can wait for the scroll.
| Question | Answered by | Fails when |
|---|---|---|
| What is this? | Headline and subheadline | The headline is a slogan with no product category |
| Is it for me? | Subheadline, hero image, audience words | The copy could describe any company |
| Why this one? | Headline outcome or a single proof line | Only generic claims like "the best" or "powerful" |
| What do I do next? | One primary button with a specific label | Three buttons of equal weight, or "Learn more" |
Notice that the hero image has a job too. A photo of smiling people in an office tells the visitor nothing. A screenshot of the product, the finished dish, or the room they would book answers "what is this" without words.
Which headline formulas pass the 5 second test?
The formulas that pass are the ones that state a concrete outcome or name the product category in plain words. Clever wordplay and abstract promises fail, because the visitor has to think to decode them. Here are four formulas that hold up:
- Outcome for audience: "[Result] for [who]." Example: "Payroll done in ten minutes for small restaurants."
- Category plus difference: "The [category] that [key difference]." Example: "The project tracker that updates itself from your email."
- Do the job without the pain: "[Job] without [common pain]." Example: "Sell tickets online without the booking fees."
- Direct offer: "[Product] [delivered how / where]." Example: "Fresh pasta kits delivered every Friday."
Avoid headlines that only make sense once you already know the company. "Work, reimagined" or "Your journey starts here" could sit on a bank, a gym, or a software tool. They give the visitor nothing to check against their need.
What should the subheadline say?
The subheadline should fill whatever the headline left out, usually what the product is, who it is for, and how it works in one sentence. If the headline is an outcome, the subheadline names the thing that delivers it. If the headline names the category, the subheadline gives the main benefit.
Two subheadline formulas that work:
- What plus how: "[Product] is a [category] that [does what] so you can [benefit]."
- Who plus proof: "Built for [audience]. [Concrete detail that makes it believable]."
Keep it to one or two short sentences. A paragraph under the headline gets skipped. If you need more, move it to the first section below the hero.
How do you run a 5 second test?
You can run a useful test in an afternoon with a handful of people who do not know your business. Here is the process:
- Take a screenshot of the hero exactly as visitors see it. Do one for desktop and one for mobile, because the mobile hero often crops the image or pushes the button down.
- Pick testers who match your audience but have never seen the site. Friends of friends, a customer of a different product, or an online testing panel. Your team cannot unsee what they know.
- Show the screenshot for five seconds, then hide it. Do not explain anything first beyond "you are about to see a web page".
- Ask open questions in this order. "What does this company offer?" "Who do you think it is for?" "What would you click first?" "What do you remember?"
- Write down their exact words. The phrases they use are often better headline material than yours.
- Score each answer as right, partly right, or wrong. You want most testers to get the offer and the next step right.
- Rewrite, then test with new people. Do not reuse testers, because they now know the answer.
Five to ten testers per version is usually enough to spot a clear problem. If half of them describe your product as something else, you do not need a large sample to know the headline is not working.
What makes a hero fail even with a good headline?
A hero can fail when other elements pull attention away from the headline and button. The words can be clear and still go unread if the eye lands somewhere else first. Common culprits:
- A busy background image or video with the headline overlaid in low contrast. WCAG 2.2 requires a 4.5:1 contrast ratio for normal text and 3:1 for large text, and white text over a photo often falls short in places.
- Competing buttons. "Start free trial", "Book a demo", and "Watch video" in similar styles split attention three ways. Pick one primary action and make the others visually secondary.
- Rotating sliders. The message changes before the visitor finishes reading, and only the first slide gets seen by most people.
- Cookie banners and pop ups covering the hero on mobile during the first seconds.
- Layout shift. If the headline jumps as fonts or images load, the visitor loses their place. See our article on layout shifts and conversions.
A predicted attention heatmap is a quick way to check this before any visitor sees the page. It shows whether attention lands on the headline and button or on a decorative image.
