Episode summary
Your homepage hero section can make or break website visitors' first impressions of your brand. Yet many sites fail to make this valuable space count, driving potential customers away.
In this practical episode, Phil explains how to create a homepage hero that genuinely engages visitors and motivates them to continue exploring your site.
Learn why the hero section is essential for making a strong first impression, common mistakes that make them miss the mark, and how to showcase your core value proposition.
Phil offers tips for effective homepage hero size, design, copy, and calls-to-action.
With strategies based around the first-time visitor and buying motivations, Phil decodes effective homepage hero design.
Listen to transform the most important section on your website.
Recommended content: What should I put on my homepage?
Episode transcript
The homepage hero section is a really important piece of real estate in the website because it's so prominent to the majority of visitors and for some it's the only thing that they will see before deciding to go elsewhere.
Frankly, the hope being that those are the right visitors to go elsewhere and the ones that are right to stay a stay.
It's easy to get it right, but a lot of people don't because they get caught up in their own process and their own creativity and there's a fear in some people of looking the same as others.
But in reality there are some very simple conventions that will, for the time being, always perform best or better than anything else you can come up with, which is the Homepage Hero section is what your visitor sees the first second when they arrive on your website. And for the majority of those it's their first visit to your website.
So the content of it has got to be aligned to the first time visitor and the first few seconds of their visit.
Passing the 'blink test'
There's a phenomenon known as the blink test in which a new visitor, a first time visitor to a website will give it about eight or so seconds while they digest what they see initially to decide whether they're going to stay on this website, explore it further or go elsewhere.
Hero content
And to get them to stay, to get them to make that decision in those 8 seconds, you've got to communicate clearly and simply what it is you have to offer them and how it aligns to the problem they're trying to solve by visiting you at that point in time.
So, overly clever strap lines, overly creative content will not perform as well as the simplest clearest explanation of what product you have and what it does for the visitor.
Hero imagery
And you need to support that with your imagery, if possible, in a way that quickly and at a glance confirms or at least improves the understanding of the visitor of what that Hero section contains in terms of text. So product imagery or photography is very good, very powerful. Lifestyle imagery and sort of conceptual creative imagery is going to be less effective at supporting the text value proposition statement that's there.
So with homepage messaging, you want to get across what it is you have to offer and why they should stay on the site.
You've then got a few options, what you can do around that.
Calls to action
It's very common to have calls to action in that Hero section on that home page.
It's tricky to get that call to action right, though. Typically the performance in terms of how many visitors click on them and use them to go elsewhere will be disappointing because the majority of visitors are not ready to click on a call to action. Particularly one that takes them straight to the bottom of the funnel when they're just consuming what the header section, what the hero section tells them?
So you might find that if you put a book, a demo or take a trial CTA there, it doesn't perform nearly as well as the same one in the navigation or elsewhere on the site.
There's not a lot of study done on it, but one test actually did find that no CTA in the Hero section improved the overall website conversion rate by a measurable amount.
And so I think it's always worth trying that, but ultimately use CTAs that you think will help the visitor on their journey to the next logical page, be it a product tour or a key product page.
And you can have one that points to the bottom of the funnel conversion offer if you so wish, but don't expect earth shattering results from those placements, but they won't detract either, so you can go ahead and test different things beyond that.
Hero movement/animation
Movement is probably a no no generally, because movement simply distracts the human brain from reading what's on the page, and so it's very hard to use movement in a way that improves the visitor's understanding of what you're trying to communicate to them.
So fast moving animations, heavy video probably is going to harm rather than help your results, but you can put some embellishment around your content as long as it isn't overly distracting and overly complicated.
Because, again, visitors are going to give you just a few seconds while they consume what's there to decide if this is the website for them or not.
Homepage hero size
Probably the main thing that guides us on the size of the hero section is the false bottom or false floor danger where if your content, your header section, for example, completely occupies the viewport, the size of the screen the person is viewing on, and of course, that size can vary.
Then you may create the sensation that's all that's there. And that can be very sort of subconsciously effective at impacting the visitor's decision making.
They may not scroll they may not scroll to see what important content that you have below that header section.
So I am typically in favour of letting your header, your homepage Hero section take up what feels like a natural amount of space for it, but not forcing it to fill your entire screen, not least because the screen you're using won't be the same screen as all your visitors.
It's possible with development techniques to actually ensure that the Hero section perfectly occupies the screen. But it's probably counterproductive to do so, because, again, visitors are really time poor, and very keen to use every second effectively when they're on a website.
So, anything that gets them thinking that there's nothing to see below this section is probably worth avoiding.
So, yeah, I think give it space. Don't want clutter, you want clear white space around your content, but don't force it to be so big that it can takes up the whole of the above the fold visible part of your page.