“Working Lunch” Webinar Series – Topic: Top Ways to Boost Conversions So Your Website Works The Way You Want It To
June 8, 2020
“Working Lunch” Webinar Series – Topic: Top 5 Ways to Boost Conversions with an Effective Hero Image on Your Homepage
June 26, 2020Table of Contents
For quick insight, check out this video for the Top 5 Ways to Boost Conversions with an Effective Hero Image on Your Homepage! You can read our full article below for more details and download our FREE informative guide!
Site visitors form an opinion about your website in as little as 50 milliseconds. That’s literally faster than the blink of an eye. What’s more, in one study of website credibility, 94% of the reasons web users gave for mistrusting a website were related to design.
It’s clear first impressions are critical, and with so little time to make yours count, it’s crucial you get your website design right. When the success of your business depends on how efficiently you engage new visitors and nurture them into clients, your homepage design needs to be 100% optimized for conversion.
The first thing site visitors see when they land on your homepage is the large rectangular area in the top half to two-thirds of their screens. Not only is it the first thing they see, it’s where users focus roughly 80% of their attention. This area represents your make-or-break opportunity to either captivate your visitor’s attention in an instant, or let them wander off elsewhere on the Web.
What you feature in this space is perhaps the most decisive factor on your entire website for successful engagement and conversion. Hence the name “hero image” for the all-important picture you display in this position. Your hero image needs to be effective on multiple levels to achieve all the following goals:
- Grab attention,
- Establish credibility and trust,
- Build brand,
- Communicate benefit and value,
- Engage visitors,
- Communicate quality,
- Demonstrate your unique sales proposition,
- Elicit response through a call to action (CTA),
- And ultimately boost conversions.
Following are five of the most common ways to make your hero image work hard for you, capture more leads for your business, and convert those leads into customers or clients.
Note: Whichever of these five methods you choose, common to all is the goal of converting visitors into leads, and leads into customers. To that end, your hero image should include your company logo if it’s not already part of your homepage header design, a simple brief headline, and a few words of text. Perhaps most important of all, add a clear, obvious CTA or even two — see our complete line, sign up for our newsletter, request a consultation, get a no-obligation quote, download a free report, buy now — whatever makes sense for your business.
Show the product.
If your business produces actual products, this is the most common type of hero shot. It’s the fastest, clearest way to show visitors precisely what you make and distinguish your brand from your competitors.
Commodity products tend to be self explanatory — musical instruments, running shoes, handmade pottery for example. Sure, there may be a lot of unique detail and variation in all of those products that can’t be expressed in a single hero image. But those details and variations are what the sub-pages of your website are for. Use a simple, clear, uncluttered, relatively close-up shot of your flagship product. The overall design should distinctly emphasize your product, logo, and brand colors to immediately communicate exactly what your company produces, and entice viewers to engage with you further.
Show the benefit.
Sometimes the product doesn’t lend itself to a particularly interesting image. A bag of mulch comes to mind. Or maybe you’re in the career counseling business and you don’t manufacture a product at all.
In such cases, use your hero image and a simple headline to show the benefit of using your product or service. For the career counseling example, it could be a simple photo of a person signing a document that clearly states “Employment Agreement” at the top, accompanied by the headline “You’re hired!” Depicting your product or service in the context of how it will benefit site visitors will quickly communicate what’s in it for them, and give them reason to stay on your website longer or visit more often.
Show a person, or a face.
Take advantage of the human factor in your hero image. When you show a person or their face in your image, it helps site visitors relate on a visceral, human level. In particular, a smiling face will put viewers in a positive frame of mind about your business. If viewers can picture themselves in the same situation, interacting with your product or service, they begin to form a personal connection to your brand and will want to explore your site further.
Use real people and use an original photograph if it’s within your means. It’s possible to find an authentic-looking stock image showing models in staged situations. But stock photos often lack a sense of warmth or authenticity. That’s certainly not how you want viewers to feel about your website. Be as real as you can with your hero image, and if you must use stock photography, put in the time and effort necessary to find the most genuine-looking image you can find.
Show some (positive) emotion.
This works particularly well for companies that don’t sell physical products, or for companies that want to highlight the benefits of their product. Viewers respond and relate better to images and brands that evoke familiar and positive emotions. That’s one of the reasons smiling faces work so well in advertising. Your hero image can leverage those feelings and emotions to entice visitors to engage more deeply with your website.
Even if your product or service is something people don’t generally associate with happiness, such as taxes or finding care for elderly parents, you can still create positive feelings by showing how your product or service helps people solve their problems. Potential customers come to your website looking to overcome difficulties or soothe concerns. Show them how delighted or relieved they’ll be by engaging with your business, and they’ll associate those positive feelings with your website and brand.
Show a video.
The use of video on the web continues to grow, and the reason is plain and simple: better engagement. Moving images are nearly impossible for humans to ignore. For example, one business blog switched to a video for their hero image and saw a 138% boost in visitors staying on the site and signing up for their offer.
But using video on your homepage comes with its own set of rules. The improved results can be worth it, but like anything else, you need to do things correctly to achieve the improvement. Here are six fundamentals you should follow to ensure your hero video better engages visitors and increases the likelihood of conversion.
- The video must be relevant, clearly communicate your product or service, and reinforce your brand. You might show your product in use, show delighted clients using your service to fulfill their aspirations or solve their problems, or demonstrate unique manufacturing or organizational processes that distinguish your product or service as superior. Just remember you’re doing business promotion, not art. Keep the first four points listed above front and center in your hero video.
- Your video should support the rest of your brand message, not dominate it. In particular, don’t let it obscure your call to action. A common technique to ensure your video remains in the background is to use a dark, light, or even a color overlay to “tint” the entire video or give it a faded look. Then for your headline, brief copy, and CTA, choose vivid colors that sharply contrast against the tinted or faded background video.
- Use short video clips. Remember, your homepage has to load faster than the blink of an eye. The larger the video file, the longer it will take to load. A Google study shows that increasing page load speeds from 0.4 to 0.9 seconds can reduce traffic by 20%. Don’t risk it. Keep your video short and the file size small. Limit your video to 5-10 seconds, and limit file size to 6MB or less. Set the video to loop continuously to create the impression the video is longer than it actually is.
- Your video will look only as good as the device the viewer uses to watch it. You may have access to pro video gear and editing software, and blazing internet speed. But you must create your video to still look terrific on a bargain basement smartphone connected to dodgy Wi-Fi. Consider using the video app on your mobile device to shoot the video in the first place.
- Video, good. Audio, bad. Auto-play audio that starts playing as soon as it loads on a page is ranked as one of most annoying things when it comes to website experiences – especially when it starts blaring away while you’re among a group of people. Your video will start playing immediately when your homepage loads. If the video includes audio, it too will begin playing automatically. If your video includes audio, remove it or mute it. Thank you.
- Don’t show video controls. Your hero video is merely a background image for the top portion of your homepage, not a featured video. If you’ve followed all the other guidelines, it’s relevant and engaging to watch, it’s not overpowering and stays in the background, it loads quickly and plays continuously without a hiccup, and it doesn’t make a sound. There’s nothing to fast forward or rewind to, no audio to adjust, and no reason for users to need a pause button.
Note to WordPress website users: There are two relatively straightforward options for adding a video background to your homepage. One is to choose a theme that supports video backgrounds. The other is to use a video background plugin.
Following are some additional do’s and don’ts for your hero image regardless of which method or format you choose.
- As previously noted, avoid using stock images if you can. Viewers can tell they’re staged, and they communicate nothing unique or personal about your website or business. Don’t give visitors the impression you can’t even be bothered to take a photograph of your own product or business.
- The overall layout and composition of your hero image should be simple, clear, and uncluttered. Images should be large enough to see on any screen size. Likewise for your brief headline, a few lines of text, and your CTA. Visitors must be able to take it all in at a glance.
- Use sharp, clear, in-focus images. Viewers won’t trust your business if their first impression of your website is a huge, fuzzy, amateurish photo.
- Make sure your images load quickly. Optimize them for size, resolution and compression. WordPress users can use the Smush plugin, or other online image optimizers are freely available.
- Resist the temptation to use slideshows, carousels, or other techniques where users swipe or click through a series of different images. They’re resource hogs, slow to load, potentially annoying, and the first image in the series gets 84% of the clicks anyway.
- Responsive design is critical to ensure your homepage and hero image display correctly on any size screen or type of device. You can use a responsive image generator to help determine the optimal size for your hero image. Simple graphic design apps are also available to help you design image and video content for multiple devices.
You get just one chance to make a stellar first impression. Your hero image is the single most important feature on your homepage to instantly capture a new visitor’s attention and entice them to engage more deeply with your website. Follow the guidelines presented above to ensure your hero image is working as efficiently and effectively as it can to drive more conversions for your business.
