The Hero Section Formula That Removes Doubt
A hero section has one job: answer the visitor's three silent questions before they ask them.
Every visitor who lands on your homepage arrives with three questions. They don’t ask them out loud, and most couldn’t articulate them if you asked. But the questions are running in their head the moment the page loads: What is this? Is it for me? What do I do next? The job of a hero section is to answer all three before the visitor’s patience runs out. Everything else it might do is optional.
I find it useful to think of a hero section not as a design element but as a conversation with a skeptic. The skeptic isn’t hostile. They clicked, after all. But they’re carrying doubt, and doubt is heavy, and people put down heavy things at the first opportunity. The back button is always one gesture away. So the structure of a good hero is really the structure of doubt removal: each element exists to kill one specific objection.
The headline kills the first doubt: I don’t know what this is. It should state, in plain words, what the product does. Not what it enables, not what it empowers, not the future it heralds. What it does. “Send invoices from your phone” beats “The future of getting paid” every time, because the first is an answer and the second is a riddle. Riddles are fine in crossword puzzles. In a hero they’re a tax on the reader, and readers don’t pay taxes voluntarily.
The subheadline kills the second doubt: I don’t know if this is for me. This is where you name the customer and the situation. “For contractors who bill on site” tells a contractor he’s home and tells everyone else to move along, which is also a service. The subhead is where founders most often waste space restating the headline in fancier words. Don’t. The headline said what. The subhead says for whom and why it’s better. They’re different jobs.
The call to action kills the third doubt: I don’t know what happens if I click. The words on the button matter more than its color, whatever the color-testing industry says. “Start free trial” carries an implicit contract: it will be a trial, it will be free, it will start now. “Get started” is vaguer but acceptable. “Learn more” is a confession that you couldn’t decide what you wanted the visitor to do. And next to the button belongs the small print that defuses the click’s perceived cost: no credit card required, free for 14 days, cancel anytime. Whichever is true. That one quiet line often does more than the button itself, because the button asks and the line reassures.
Then there’s the image. Most hero images are wallpaper: a stock photo of people pointing at a laptop, or an abstract gradient blob. Wallpaper answers no doubts. The image should be evidence. A screenshot of the actual product, doing the actual thing the headline claims, is proof that the thing exists and looks the way it will look when the visitor uses it. If your product is a dashboard, show the dashboard. If it’s a report, show the report. When I run GazeSite against homepages, the pattern I see constantly is a hero where the words say one thing and the image says nothing, and the visitor is left to take everything on faith. Faith is exactly what a first-time visitor doesn’t have.
Notice what’s missing from this formula: cleverness. That’s deliberate. Cleverness in a hero section is almost always a transfer of effort from writer to reader. The pun that took you an hour to craft costs each visitor three seconds to decode, and multiplied across all your visitors, you’ve spent vastly more attention than you saved. Clever is what you do when you’ve run out of clear things to say, and if you’ve run out of clear things to say about your own product, the hero isn’t your problem.
The formula, then: a headline that says what it does, a subhead that says who it’s for and why it’s better, a call to action whose words describe what happens next, a line of reassurance that lowers the cost of clicking, and an image that proves the claim. Five elements, five doubts, five answers. It’s not creative, in the sense that it leaves little room for self-expression. That’s the point. The hero section is not about you. It’s the one part of your site where the visitor’s questions matter infinitely more than your voice.
You can be creative below the fold, where the visitors who scroll have already decided to give you more of their time. Up top, in those first five seconds, you’re not an artist. You’re a clerk at an information desk, and someone just walked up and asked what this place is. Answer them.
More articles
Good navigation is less about helping people go somewhere and more about telling them where they already are.
Read →When an accessibility scan finds no images to check, it usually means the images are hidden from everyone who can't see them.
Read →A fingertip is a blunt instrument, and designing buttons a fingertip can't reliably hit costs you customers who never tell you why they left.
Read →