Has this ever happened to you?
You’re casually browsing when you land on a random website. It’s selling a product you don’t *really* need or want… but you decide to check it out anyway.
You may not realize it, but there’s a good reason for that.
How about this?
You’re looking for a specific product that you need n-o-w. You land on a website that seems to offer what you’re looking for… and yet you decide to keep searching.
Yes, there’s a good reason for that as well.
In either case, the factor that determined your action—staying on the page or immediately leaving the website—might have been the hero section of the landing page.
In case this name feels unfamiliar, the hero section is the first thing you see on a web page, right above the fold. It usually has a background image, big bold text, and a button or two.
Why the Hero Section is So Very Important
The Nielsen Norman Group says it take people 10 to 20 seconds to decide whether to leave a web page or not. In your case, the first page you landed on hooked you – the second one turned you off.
To sell your tech product or service, you need to keep people on the landing page long enough for them to want to give what you’re offering a try.
You have to tell them:
- What you do
- Why they’ve come to the right place
- What key benefits they get, and
- What to do next
That’s why the Hero section is the most important part of your landing page.
An OK Hero section may be good enough to entice a desperate searcher to stick around; but if you want it to capture more than your fair share of visitors it needs to be stellar.
While creating a stellar hero section is not rocket science, it’s not all that easy to do either.
You’ve seen athletes make some spectacular moves or plays, and made them look easy. Designing a stellar landing page’s hero section can also look easy; often because of its very simplicity.
Athletes put in hours and hours of work to make hard things look easy.
You, on the other hand, won’t have to put in a ton of hard work to design a stellar hero section. But if you want to get it right and attract more people on your page, you’ll need to know exactly what common mistakes you should avoid.
A word of warning
Some of these common mistakes are so customary that they’ve become “best practices”. Once you see what they are (and you’ll discover them in just a moment), you’ll be able to spot them everywhere. Literally everywhere on the web.
If you confuse these common mistakes with “best practices” and use them on your website, your hero sections will turn out to be like most others—average. If you’re lucky, you might experience an average conversion rate.
But if you want to create a hero section that will wow your visitors, follow our checklist below and you’ll see exactly what you need to do to avoid these mistakes and make your hero section stand out. .
Checklist: The 5 essential elements of a drool-worthy hero section
The Headline
As a minimum, your headline must address what you make or sell, and how it meets your visitors’ needs. It needs to be direct, and it needs to be clear. It also needs to be concise.
It doesn’t have to be inspiring, and it should be a statement rather than a question.
That said, here are 3 things you don’t want to do:
- Your headline must never be vague; no matter how clever or good-sounding you think it is.
- Your company tagline should not be used as your headline.
- Never use the name of your product or service as your headline.
What you need to do is:
- Clearly state what your product or services will do for your visitor.
- Match your message to your intended audience or ideal user. Keep it simple with no jargon if it’s a mass-market product. You can use more specialized language for a niche customer.
- Your headline is always about your ideal visitor. Never about you. Product or services features can be described later; the focus here is on the benefit
Accomplishing this in a few words often requires more than a little thought. This is where a good subhead can do some of the heavy lifting for you.
The Subhead
When a headline is vague and doesn’t tell you what you want to know, the temptation is to ask yourself “So what?”
Here’s how you can use this to your advantage:
Read your headline out loud.
Ask yourself “So what?”
Write down the answer and put it under the headline, as a subhead.
This will give the reader the information they need to decide if they’re interested in what you’re offering or not.
BONUS TIP: While you can use a subhead to make up for whatever might be lacking in a headline, that should not be its only purpose. Its main purpose is to keep people on your page longer.
- A subhead typically has more words than a headline; maybe 2 or 3 times as many. That’s because it gives visitors a better understanding of what they have to gain from trying your product or service.
- Use a subhead to list benefits, call out your target audience, differentiate yourself from competitors, state what’s innovative about your product/service, state how it will make people’s lives easier or better, or state how it will solve a major problem.
The Hero Image
The hero image is critical for the success of your landing page.
It’s by far the best way to create a good first impression, one that will linger in people’s minds long enough to remind them of a pleasant user experience and encourage them to spread the word.
People process images 60,000 times faster than text. They’ll see your hero image and quickly decide whether to stay or leave.
Your hero image needs to support three goals:
- It needs to grab attention
- It needs to support your headline and subhead, and
- It needs to be authentic (see note below)
Ideas for a hero image would include a product shot, a photo of a person using the product, an illustration or an animation showing how the product works, or an image showing the outcome of using the product, e.g., a clean and organized desk or workplace.
Helpful hints:
- Hire a professional photographer unless you are one yourself.
- Don’t use a smartphone shot as a hero image.
- Don’t use a stock photo unless it’s a very, very good one, it’s totally relevant, it aligns perfectly with your message, and no one would believe it’s a stock photo even if you told them.
When you use stock photos, you’re essentially trying to pass something off as being authentic when it is not.
It’s like those TV commercials that portray “real” people instead of actors. You’re never really sure if that’s actually the truth, which makes you wonder if the advertising is trustworthy.
The Social Proof
It’s amazing how many websites delegate social proof to the bottom part of their presentation. If you think about it, it’s only natural to place your social proof where it can create instant trust and make your visitor eager to join your “club” of happy and satisfied customers. That “place” is above the fold.
Here are some great ways to use social proof in your hero section:
- Mention the number of people who have purchased or are using your product (only if your user base is large or growing at an impressive pace)
- Display your product’s star rating if its over 4.5/5
- Name-drop major brands that are using your product
- Include testimonials – a testimonial slider usually works best (for space considerations)
Your CTA
Starting with your headline and image, your content guides your visitor to your CTA. Make sure it’s incredibly easy to find.
- Make it big and bold and in a contrasting color
- A single CTA is usually the norm for a single product, but there are times you might want to give your visitor an option (buy now/free trial/ see more). Make your preferred choice stand out.
- Be as specific as you can in as few words as possible (g. Sign up for a 30-day trial)
Wrapping Up
The importance of having a stellar hero section can’t be overemphasized. A visitor’s first impression will generally dictate whether he or she is going to stay or leave.
- Some visitors may be inclined to give you the benefit of the doubt; but only for a few seconds. In that time, you have to convince them to keep reading.
- To keep them on your page, the hero section needs to include all of these 5 essential elements. None are optional.
- It’s worth noting here that a hero image doesn’t have to be a photo. It can be artwork, and minimalist artwork at that – as long as it’s relevant and gets people’s attention.
- Review your design to make sure each of the elements in the checklist adheres to the guidelines. Once you’ve launched your landing page, constantly work to improve it one element at a time, testing to see which changes convert better.
- It never hurts to have a pair of expert eyes go over your hero section to make sure it’s getting plenty of attention, attracting the right crowd, and keeping the visitors on the page. We’re happy to do that for you.
