Take a look at the home page of your website, or at the home page of any website you visit regularly – perhaps this website, or your favorite restaurant, etc. What’s the first thing you see?
What you are looking at is frequently referred to as the website’s ‘hero space.’ The hero space is that large section that fills the top of the home page when someone lands on your website. Often, the hero space consists of the single, prominent ‘hero image’ – a graphic that has only a few seconds to influence your visitor into checking out more about you, responding to a call-to-action, or hitting the ‘back’ button to look at a different site.
What is your website doing with its hero space? Are you making the most of it to immediately engage your visitor?
Let’s take a quick look at 6 things to consider when deciding the best way to use your hero space.
1. What type of business are you?
Here are some questions you should ask yourself: Who is my business targeting? What demographic? Is my target customer looking for a business that is creative, or a business that exudes an air of trustworthiness and safety? In my industry, is it better to be unique and stand out, or is it better to be seen as level-headed and conventional?
The answers to these questions will help you understand what type of image will work for the customer you’re targeting.
This financial consulting website (image on the right) is very traditional, but the text and photo are compelling. As a legal professional, or some other type of traditional business, you may want to go with a more conservative photo that suits your industry. You might consider symmetry, and colors that are toned down.
If you are in a creative industry, or you’re a retailer targeting customers who are looking for a business that stand out with a unique and eye-catching website, you have a lot more leeway to experiment with combining colors and patterns, or using bold images filled with action.
2. Don’t clash with your brand colors and style.
Think about the colors of your website and logo. When deciding on an image for your hero space, you might consider using a filter, a gradient, or some other type of effect that complements or ties a photo into the standard colors and style of your other business materials, including your logo.
If you are overlaying text on an image for your hero space, you’ll want to consider how the font or typeface you use will either match or complement the font used for the rest of your website, or in your logo. If you use too many fonts, your website could begin to look schizophrenic.
3. What’s your tagline or key messages?
Because of the prominence of the hero space, it’s a great place to reinforce your tagline or key message to your potential customer. What is the most important thing you want your customer to understand about your product or service?
Maybe you’ll use an inspirational quote in your hero space. Think about quotes that evoke a certain feeling and that correspond closely to the objectives or philosophy of your company. If you plan to use an inspirational quote, be sure to cite the author of the quote.
4. How do you want your visitors to feel while on your website?
You also want to think about how you want your visitors to feel when they’re on your website. When they land on your page and see that hero image, is there a specific emotion you want to evoke? Do you want them to feel comfortable with something they can relate to or jolted by something to shake them up?
The image in this hero space (see image on the right) imparts the ‘relaxing’ mood a customer will expect from a yoga center.
By combining images, colors, and text in your hero space, you can create a mood that drives your potential customer to read more, or to immediately act and make a purchase. But, an overly crowded hero space can also create a negative reaction in your potential customer, so find the balance that draws them in deeper, without giving them sensory overload.
5. Speed and size matters!
When a potential customer lands on your page, they will leave fairly quickly if your graphics are so large and complex that it takes too long for your page to load. Make sure that you are not overloading your hero space to the point of actually driving visitors away.
How will your potential customers be viewing your website? Check out how your hero space looks on a smartphone or tablet, to make sure that your font is not so small as to be unreadable on anything smaller than a desktop monitor.
6. Don’t turn off your visitor with sliders and carousels!
Does your hero space include a slider gallery or carousel? While these rotating or ‘sliding’ galleries of images may help you show more content without your visitor having to scroll down, you might actually be driving customers away. Customers may not catch everything on an image before – poof! – it’s gone, and they don’t know how many more images they’ll have to sit through before they get a chance to read it again.
A study by the Nielson Norman Group found that many people experience ‘banner blindness,’ and have ceased to register banner advertising on websites. Visitors who perceive slider galleries and carousels as banner promotions have stopped ‘seeing’ them, rendering them ineffective for businesses.
Take a look at your website’s hero space. Is it in line with your company’s industry, messages, branding, and customer needs? If not, consider the above tips for how you can make your hero space work for you to attract more customers to your business.
Bernadette Geyer provides writing, copy editing, and translation services for small businesses, entrepreneurs, and writers. She also leads online workshops on a variety of topics for small businesses and writers. Geyer likes being a small fish in a big pond, and enjoys helping others move to bigger ponds themselves. Subscribe to her monthly news from the big pond if you’re interested in professional growth.
