In my previous post, I mentioned how, if we treat website visitors as heroes with problems, we can guide our thinking on how to present them with a solution (“tell the hero you understand their problem and can help them fix it.“). In this article we look at the above-the-fold section of your website with a practical example of what our messaging can be to let the hero know they’ve come to the right place.
What is Above-The-Fold and why it matters.
Above-the-fold is a newspaper-era terms which describes the portion of a page that is seen before the user “folds the newspaper”. In digital terms it’s the section that everybody sees before they need to scroll. It is the single more important section for that very reason. Not everyone will scroll, some will just go back (if they don’t like what they see). So 100% of the visitors to your site see the above-the-fold section. Some 60% will scroll further (and the number drops off as the page progresses). Let me repeat that, everyone who visits your site sees the above-the-fold content. It is your one chance to impress.
Engaging The Hero
It should come as no surprise therefore that the top of your website is often termed the “Hero Section” or “Hero Image” – going back to my previous article where I talked about a new painter trying to break into the market let’s look at two examples of hero sections. Now come at the is from the perspective of someone who needs, say, a room in their house painted (you’re the hero and that’s your problem). You Google for “painters”, and this is the first candidate that comes up.
OK, so there’s a hint that this might be a painter, but they could just as easily be a local DIY store that offers a wide-range of colour choices when it comes to mixing paint. The image leaves you guessing. The text says absolutely nothing. You click back and try the second link.
Ah, now this is what you need, someone who understands the problem. This Hero section does three things, it says what we do, it talks to your problem and it tells you the outcome. The image reinforces the message.
The bonus here is the call-to-action (CTA) – the button that says “Free Quote”. It offers our hero a quick way of saying “sounds good, here’s my problem…” we could also just put a contact form directly in the hero section – the less friction we give our hero, the better. We’re there to help.
So when you consider the development of your website, put yourself in the shoes of the hero, ask what you need and design the above-the-fold section to pinpoint that need and let them know you can help. Tell them what you do, so that they can move forward on their journey.