Let’s start off on the same page and define “hero.” It’s a big word with a few meanings.
He·ro
ˈhirō/
Noun
- a person who is admired or idealized for courage outstanding achievements or noble qualities
- another term of a submarine sandwich
- a large banner prominently placed on a web page, and often the first visual a visitor encounters on a site
I’ve got a lot of thoughts on submarine sandwiches (Have you been to Bub and Pop’s? It's SO GOOD.), but in this post I want to discuss website heroes.
Heroes have been around for a while because they serve an important purpose. They aim to do something that seems near impossible – say “everything” about your company in a horizontal space at the top of your website often comprised of a few words and an image.
That’s basically the equivalent of leaping from one tall building to the next in a single bound.
Settling on a concise statement for your hero is tough. Businesses are complicated! But trust us: spending time crafting a successful hero will pay dividends.
Here are some helpful do’s and don’ts to reference when designing your hero area:
Do's
Introduce yourself
Unless everyone in the world knows who you are before they even arrive at your site (think Google, Apple), you need to tell site visitors who you are. Resist the urge to use the hero to promote a new product, your latest press release, etc. This is a sacred space where you set the tone for your visitor. Tell them who you are, what you do, and why you do it the best.
Be visual
A picture is worth a thousand words – probably more if you account for inflation (ba da bing!). Visuals go a long way toward telling your story. They intrigue users and pull them into your site before they even recognize words on the page.
Include an Action
At this point you should have a great introductory statement and an impactful image in your hero (see recommendations above). Now, get your user to engage with you by leading them to an action. The action should be global like signing up for emails or a free trial.
Don'ts
Just say NO to sliders
I hate to break it to you, but sliders (aka carousels) do not work. They have a negative impact on conversion rates, and are perceived as annoying by users. Don’t believe me? There’s data to prove it.
DON’T try and cram everything “above the fold”
The fold is gone. It’s no more. Users expect to scroll and in fact PREFER to scroll through content vs. click to get to something. Plus, we live in a responsive age – and that means your website needs to support a huge range of devices and screen sizes. Finding the perfect “above the fold” height is counterproductive and virtually impossible.
I repeat, “Above the fold” is dead and we should embrace it. There’s life below the fold!
We hope these tips are helpful the next time you work on your website hero. And if nothing else, we'll leave you with this song to remember this post....