We’ve all been there. You’re surfing the web when something interesting draws your eye. Maybe it’s an appealing ad or an intriguing social post that promises to solve a problem you’ve been experiencing.
Out of curiosity, you click, and you’re transported to an unfamiliar website.
But once you get there, you’re completely lost. You see the brand name and logo, but you have no idea what the company actually does—and whether or not its offer is relevant to you.
How long do you click around and try to figure it out? Five seconds? Thirty?
Who is this company? What do they do? Am I on the right website?
Research shows that most website visitors don’t have much patience for vague or unclear homepages. In fact, 55% of people will leave a website in less than 15 seconds if it doesn’t capture their attention.
That’s why it’s so important for you to include a hero message on your homepage that instantly engages your visitor, divulges your who/what/why, and compels them to take the next step on your site.
If you’re not sure how to write this perfect website hero message, don’t fret. You’ve come to the right place. We’ll walk you through the process we use to create hero banners for our clients and reveal six best practices sure to result in increased conversions.
The website hero is a crucial element.
Your website’s hero is vital because it’s the first thing your visitor sees when they land on your homepage. And it may be the only thing they see before they decide whether or not to further engage with your company.
Research shows that it takes no more than 50 milliseconds, or 0.05 seconds, for users to form an opinion about a site. What’s more, 75% of web users admit to judging a company’s credibility based solely on the design of their site.
As a web design agency, our goal is to attract your users’ attention and keep them on your site long enough to entice them to take the next step. We can accomplish this by crafting a hero that is eye-catching, visually appealing, and relevant. If it’s not, we risk losing your visitors before they’ve even arrived at your core content or product offering.
Your hero also matters because visitors want to know immediately that they’re in the right place. Web users today are smarter and more tech-savvy than ever, but attention spans are also dwindling. That’s why it’s vital that your hero communicates your unique value proposition to your user within the first 10 seconds they’re on your page.
What is a hero message?
Sometimes referred to as a “hero statement,” “welcome message,” or “homepage message,” your website hero message is the initial copy your visitor sees when he or she arrives at your site’s homepage.
The hero message is typically made up of a large header, a clarifying sentence or two (slightly smaller in size), and a call to action that asks your prospect to do something on your site, such as view a product demonstration video or contact you to learn more.
This message is your chance to introduce yourself and your brand to your reader.
Your hero message should explain the following (in under 5 seconds):
- Who you are as a company (your industry or niche)
- What you do (a summary or your product offering or services)
- Why the visitor should care about your offer (how it can help them or make their life easier)
The hero message is vital because it’s often your visitor’s first touchpoint with your company and therefore your first opportunity to establish a relationship with your prospect.
In addition to explaining your who, what, and why, your hero message should:
- Help your visitor quickly determine if your website, product, or service will be useful to them
- Establish credibility and trust
- Entice your visitor to perform your desired call to action (the call to action is the most important “next step” you want users to take on your site)
What a hero message isn’t
Your hero message isn’t a place to be ambiguous or overly clever. It’s not a place to incorporate buzzwords that are ultimately meaningless or jargon that’s difficult for the average user to understand.
Because you have so little time to sell yourself, it’s vital that you clearly define the value your product or service brings to the table. If you want to be more playful with your header text, be sure to describe your offer more explicitly in your hero’s follow-up sentence(s).
Your messaging doesn’t have to be life-changing or inspirational, but it should inspire your visitor to take the next step on your site.
What about the hero image?
Your website’s hero image is the large, high-resolution image that sits front and center on your homepage. Some hero images take up the entire page while others are aligned left, right, or sit atop the fold of the page (this is the area of the page that’s visible without scrolling).
The main purpose of your hero image is to capture your visitor’s attention. People are visual creatures who respond well to aesthetically pleasing images on beautifully designed pages.
They can tell instantly whether a design is fresh or outdated. Your hero image helps them decide whether your company is credible and current.
The hero image can also serve to show off your product, provide additional context to your message, or evoke an emotional response from your visitor.
So, what kinds of hero images are best for conversions? Here are six key types of high-converting hero images we often use for our clients:
1. Product-based hero image
This is a great option if you wish to show off your top-selling product, call attention to a new product, or highlight a specific benefit.
Here’s an example from American multinational automaker Ford:
2. Human-centric hero image
Using real people in your visual content can help you connect with visitors. It enables them to imagine themselves reaping the benefits of your product or service. Just make sure you don’t use an obvious stock photo, as this can result in a negative perception of your brand.
Here’s an example of a human-centric hero image from genealogy company Ancestry:
3. Famous founder hero image
This type of image is exactly what it sounds like–a high-resolution snapshot of your company’s founder. Famous founder hero images allow users to match a face to a product or service, which can close the gap between you and your customer. It can help you establish an initial connection that leads to a trusting relationship.
These types of hero images are typically accompanied by a little bit of text that introduces your founder and highlights their credentials.
Here’s an example from digital marketing strategy website Robert Katai:
4. Contextual hero image
A contextual hero image adds additional context to your offer, which can help your visitor understand how to use your product or service or see how it can enrich their life.
Here’s an example from consulting company Equal Parts:
5. Emotion-evoking hero image
An emotion-evoking hero image is useful when there’s a strong emotion tied to your product, service, or brand. If you can make your visitor feel something, then you have a better chance of compelling them to take action.
Here’s an example from non-profit organization Too Young to Wed:
The case against image carousels and sliders: why you should never use them
You may be tempted to ask your web design company to design your homepage around an image carousel or slider, which rotates images every few seconds. But we strongly urge you to reconsider. While they look cool and you may be tempted to try them out, the data is not on your side.
Notre Dame University tested their carousel image and found that only 1% of total visitors clicked through from the carousel. 84% of those users who clicked interacted with only the very first slide.
Lee Duddell, UX Director at London-based usability testing firm WhatUsersDo, had the following to say about image sliders after observing thousands of tests:
“They are next to useless for users and often ‘skipped’ because they look like advertisements. Hence, they are a good technique for getting useless information on a homepage… Use them to put content that users will ignore on your homepage. Or, if you prefer, don’t use them. Ever.”
Does every website need a hero?
The short answer is yes. If your brand and logo aren’t instantly recognizable to the average person, then you absolutely need a hero message on your website homepage.
Only extremely high-profile brands can get away with forgoing the hero on their site, and that’s because (nearly) everybody already knows who they are and what they do.
But even the most recognizable brands who don’t necessarily need a hero message still use them. That’s because they know how valuable this space is for introducing a new product, concept, or service.
Look at Apple, for example. Apple doesn’t have to explain who it is or what it does, but it still takes advantage of the hero in order to promote its newest product, the iPhone X.
There are six best practices we always follow when crafting the perfect website hero message for our clients. We’re going to share them with you now.
1. Your hero should clearly explain who you are, what you do, and the value of your product or service
If your visitor can’t figure out what you offer within a few seconds, they’ll likely abandon your site as quickly as they arrived. They need to understand–in an instant–exactly what you bring to the table.
Here are a few questions we ask our clients to help us determine their unique value proposition:
- Why should your visitor care about your product offering?
- How can it help them save time or money or live a more fulfilled life?
- Why should they trust you over a competitor?
Be clear and direct
We don’t want to try so hard to be clever that we forget to include your who, what, and why. We also don’t want to use jargon that’s unfamiliar to your target persona.
Most web users don’t have the time or will to decipher the meaning behind your text, and to attempt to do so could result in cognitive strain.
This struggle creates friction, or negative feelings, between you and your user. It can make them suspicious of your intentions and less responsive to your offer.
To avoid cognitive strain, use simple language to explain who you are and what you do. Homepage copy should always be straightforward and easy to understand.
Be authentic and sincere
This means avoiding overused and meaningless buzzwords that offer little or zero substance. You may think your copy sounds pretty, but the average internet user spends about six hours and forty-two minutes online each day. They’ve come into contact with thousands of webpages and they recognize inauthentic sales language when they see it.
2. Your hero should explain who you are targeting
Visitors want to see themselves reflected in your offer. They want to know that your offer is relevant to their demographic or industry. That’s why it can be beneficial to specifically name your audience.
For example, if you provide accounting software for small businesses, your scope is probably too small to accommodate a large corporation. If your boutique specializes in swimwear, you won’t be relevant to a shopper searching for snow gear for a trip to Aspen.
Alternatively, we sometimes forgo the “name your audience” route and simply focus on the “you.” Second-person “you” language speaks directly to your visitor and explains what benefits they could get out of your product or service.
3. Your hero should explain why you exist
Think about why you (or your founder) created your company in the first place. What problem were they trying to streamline or solve? What are your company’s core beliefs?
Ask yourself why your prospects should care about your product or service. How will it enhance their lives? How will it make their day-to-day easier?
It may help to go back and reread your company’s “about” page. Reread your mission statement and consider your unique value proposition, or the one benefit you bring to the table that sets you apart from the competition.
Once you share your “why” with your web design agency, they’ll be able to bake it into your hero message.
4. Your hero should include your target keyword (if you can do so naturally)
Most hero messages are also the main (H1) header on a home page. In 2019, it’s still considered a search engine optimization (SEO) best practice to include your target keyword in a few vital elements of each webpage, including in your H1. This helps both Google and your reader quickly understand what your page is about.
However, it’s more important than ever to incorporate your keyword naturally. In the past, website owners who stuffed their keyword into as many places as possible saw their pages rise to the top of the rankings.
Today, Google views this keyword stuffing as spam. That means it will negatively impact your rankings. Google encourages you to write for your reader—not for its algorithms—and to use a variety of keywords naturally throughout your content.
5. Your hero should include a call to action (CTA) that inspires your visitor to click, scroll, or interact with your site in some way
You always want to incorporate a call to action in your hero. The call to action, or CTA, is the most important conversion action you want your visitor to take on your site.
While this has long been a best practice, close to 70% of small business websites lack a call to action on their homepage. By employing a CTA on yours, you can gain more conversions than your competition.
Some examples of CTAs we’ve included in our clients’ heroes include:
- Contact the company for more information
- Watch a product demonstration video
- Initiate a free trial of the product or service
- Read a case study
- Sign up for a blog or newsletter
- Read an important blog post or visit a vital page on the site
- Get a free template, whitepaper, or e-guide
6. Your hero should be optimized to load quickly on the page
Just 0.5 additional seconds of page load time can reduce traffic by 20%, according to research from Google. That’s why we resize and compress your hero images before uploading them to your site.
We also know from experience which image file type (PNG, JPG, etc.) will provide you with the best image quality–without sacrificing your page load time.
If you’re interested in checking your homepage load time, you can use a free tool like Tools.pingdom.com to do so.
Final Thoughts
You just learned that it takes users only 0.05 seconds to form an opinion about your website. In the blink of an eye, your prospects will determine whether your site is fresh, trustworthy, and relevant. They’ll decide whether to engage with you further by exploring your products and services.
That’s why it’s vital that the different elements of your hero–your message, your image, and your call to action–work together to capture their attention and quickly and clearly demonstrate your value.
As web design experts, we know how to create hero messages that inform, convert, and leave lasting impressions. Reach out today to discover how we can transform your website and help you surpass your goals.
