butchorpeza.comYour homepage hero has about three seconds to answer three questions: what you do, who it's for, and what to click next. Clear plain-language headlines and one main button pass the test. Vague slogans, sliders, stock photos and competing buttons fail it.
- Visitors judge a homepage in seconds.
- Say what you do in plain words, not a slogan.
- Signal who you help: industry, location or problem.
- Keep one main call to action in the hero.
- Test your hero on people who don't know your business.
Who this is for
Business owners whose websites get visits but few inquiries.
Why I wrote it
The hero section is the most common problem I fix on client sites.
What you will get
A three-question test and a fix you can do today.
Table of contents
- Introduction
- Try the test yourself
- Why it matters
- The Three Questions
- What every hero must answer
- The Mistakes I See Most
- Vague and busy heroes
- Every decision is a chance to leave
- What a Strong Hero Looks Like
- My own example
- Earn the scroll
- Writing a Headline That Passes
- Say the job, then the audience
- Use the words your customers use
- Keep the supporting line short
- Testing Your Hero With Real People
- The five-second screenshot test
- Check it on a phone
- Change one thing at a time
- Conclusion
- A quick fix for today
Introduction
Try the test yourself
Open your homepage, look at it for three seconds, then close it. Ask a friend who doesn't know your business to do the same. Can they tell you what you do, who it's for, and what to click next?
Why it matters
If not, you have a hero section problem, and it's probably costing you customers.
The Three Questions
What every hero must answer
- What is this? What you actually do, in plain words.
- Is it for me? A hint about who you help: industry, location or problem.
- What do I do now? One clear button, not four.
The Mistakes I See Most
Vague and busy heroes
A huge stock photo with a line like "Excellence in every detail". A slider that changes before you can read it. Three equally loud buttons. A menu with twelve items.
Every decision is a chance to leave
Each of those makes the visitor think, and every bit of thinking is a chance to leave.
Survey and data source: Nielsen Norman Group usability research and the Stanford Web Credibility Project
What a Strong Hero Looks Like
My own example
On my site, the hero says who I am, what I build and where I'm based, with two buttons: book a call or open my resume. Everything else waits further down for people who are already interested.
Earn the scroll
A good hero doesn't try to say everything. It earns the scroll.
Writing a Headline That Passes
Say the job, then the audience
A simple formula works for most businesses: what you do, plus who you do it for. "Web design for dental clinics" beats "Digital solutions that inspire" every time.
Use the words your customers use
If customers call it "a website", don't call it "a digital presence". The closer your headline is to how people describe their problem, the faster they recognize themselves.
Keep the supporting line short
One sentence under the headline can add proof or detail, like years of experience or a key result. Two sentences is usually the limit.
Testing Your Hero With Real People
The five-second screenshot test
Show a screenshot of your hero to someone for five seconds, then hide it. Ask what the business does and what they would click. If they hesitate, simplify.
Check it on a phone
Most visitors see your hero on a small screen. Make sure the headline and main button are visible without scrolling.
Change one thing at a time
If you test changes, adjust only the headline or only the button at once, so you know what made the difference.
| Element | Weak hero | Strong hero |
|---|---|---|
| Headline | "Excellence in every detail" | "Bookkeeping for small restaurants in Cebu" |
| Who it's for | Not mentioned | Clear industry, location or problem |
| Buttons | Three equally loud buttons | One main action, one optional |
| Visual | Generic stock handshake | Real work, product or person |
| Motion | Auto-playing slider | Static, readable at a glance |
Before and after
A consultancy hero reads "Excellence in every detail" with three buttons. The rewrite says "Bookkeeping for small restaurants in Cebu" with one button: Book a free call. Same page, but now a stranger can pass the three-second test.
Conclusion
A quick fix for today
Rewrite your headline as if you were explaining your business to a stranger at a party, delete every hero button except the most important one, and test it on three people.
References
FAQ
What is a hero section?
The first part of a web page visitors see before scrolling, usually a headline, short text, an image and a main button.
How many buttons should a hero have?
One primary action, and at most one secondary option.
Are image sliders bad for homepages?
Usually. Most visitors only see the first slide, and moving content makes the message harder to read.
Who is Butch Orpeza?
Butch Orpeza is a Philippines-based creative technologist: a web designer, developer, 3D artist and AI automation specialist. He builds WordPress and Elementor websites, creates photoreal 3D product images, and sets up AI workflows that let teams hand repetitive work to AI agents.
Leave a comment
No comments yet. Be the first to share your thoughts.