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?
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.
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.
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.
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.
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.
The header reads: “The no-nonsense web design company.” Our visitor knows right away that we offer web design services. The “no-nonsense” adjective compels them to keep reading in order to learn how we set ourselves apart.
The two clarifying sentences read: “Get your website made the way it should be: clean, functional, secure, and 100% custom. We’re the Atlanta web design experts who know how to bring customers to your digital door.”
This copy speaks directly to our customer by telling them exactly why they should work with us and what they’ll get out of it. Not only will we provide them with a great website, but we’ll also optimize their design and content to increase traffic to their site.
We also include a call to action–“See Our Work”–that invites the visitor to explore some of the websites we’ve designed for past clients.
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:
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:
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:
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:
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:
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:
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.”
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.
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.
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.
Cognitive strain: the uncertainty a web user feels when they struggle to interpret your font, language, or overall message.
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.
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.
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.
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.
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.
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.
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.
1. This hero that we designed for custom trade show exhibit company BTWN Exhibits:
2. This hero from web-based list-making application Trello:
3. This example hero image we created to show you what not to do:
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.
Ready for a slick new website, increased traffic and more converting customers? Tell us a little about your business and we’ll reach out to get your project underway.