Let’s start off on the same page and define “hero.” It’s a big word with a few meanings.
He·ro
ˈhirō/
Noun
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:
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.
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.
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.
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.
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....