It takes only 50 milliseconds for any user to form an opinion about a website, making it crucial to grab their attention from the word go.
Interestingly, when content on a website includes engaging images, it ends up getting 94% more views. That’s how the human brain is wired – to take in visual information rapidly.
One of the ways to captivate your audience and hook them instantly is via a Hero Image or a Hero Banner.
What is a Hero Banner?
Also known as the hero shot, hero header, and hero banner, a hero image is an oversized banner image at the top of the website.
Covering the complete width of the screen and located just below the navigation bar, this visual element has three mainstays – above the fold placement, high-resolution graphic, and a conversion goal.
Nowadays, the hero image or header is not restricted to images and text overlays.
Designers also experiment with carousel, video, animations, illustrations, and endless other options to entice the visitors. Coupled with relevant content, these personal, well-crafted images make an infallible impression on them, thereby increasing the conversion rates.
Hero Images and Conversion Rate Optimization
A poor first impression will inadvertently push back conversion rates on any website.
The reason?
Conversion Rate Optimization (CRO) is entirely centered on the user experience. The way you engage your users and build a seamless customer journey, depends on appealing visuals, great content, and compelling CTAs.
A combination of all these can be present in a single hero banner, which also help in decreasing bounce rates by piquing the user interest, capturing the effectiveness of the product or the service offered, and expressing the main messaging in a compact but impactful frame.
Think of a large paragraph with a donation appeal button versus a hero image with an appealing image conveying the donation’s story. The latter gives more incentive to visitors for carrying on with the journey than strings of text.
Here’s how hero banners do the trick:
Source: https://www.coca-colacompany.com/
Lend a personal touch – The personal touch in the hero images instantaneously build credibility for a brand, making users take the desired call to action or helping them understand the value proposition early on.
Speaking a thousand words – Visuals convey information faster than words. The website visitors can’t miss the hero header and the accompanying information. In a fraction of seconds, they can pick up what the site or the brand is about at a quick glance.
Seamless navigation – Want visitors to navigate to a specific page? How about leading them to download a whitepaper or case study? A hero banner acts as a great navigation tool in all these situations by diverting the visitors’ focus to the call-to-action (CTA) button.
Emotional appeal – Hero images are a proven way to tug at the emotions of the users. From hand-drawn illustrations to videos, you can tell a story through multiple methods and set the tone for the interaction. The idea is to answer the visitors’ questions, satiating their curiosity. It should resonate with the visitors at the first chance itself.
Aesthetic appeal- Hero banner increases the aesthetic appeal of a site manifold. With thousands of websites vying for the users’ attention, an attractive full-blown image or video makes a massive difference.
What Not to Do When Designing a Hero Banner?
1. Keep a check on the loading times when you add large image files for the hero header. Use a fast CDN and optimize the hero images and video sizes to ensure that the header loads fast.
2. Ditch stock images from the internet stockpile and choose graphics or visuals that add value to your website. Stock images are a faster, easier way to get the work done, but they are done to death with many sites using the same images.
3. Because the hero image represents a company and its value proposition, ensure that it stays consistent across the pages. Everything needs to be relevant to offer an ideal user experience and align with their journey, from the brand colors to the messaging.
4. Never ignore the CTA. Ensure that they are informative, compelling, to-the-point, and easy to spot on the banner. The design of the CTA should be such that they are easily distinguishable from the design and the overlay text.
5. Don’t forget to optimize for different screen sizes, devices, and browsers. Considering the orientations and the dark themes are also equally important. Without this, there are high chances that a CTA may get cut or the image may get stretched, leading to missed opportunities of increasing the conversion rates.
Here are some examples of brands with exceptional hero banners.
Airbnb
Source: https://www.airbnb.co.in/
A surreal graphic greets the users on Airbnb’s homepage. The text overlay asks the right question and guides them to the CTA button immediately below. The banner also includes a navigation menu and search bar to help them check availabilities instantly without leaving the page.
Overall, the custom illustration is all about the brand – travel and experiences – which lends a helping hand in creating a compelling homepage.
Apple
Source: https://www.apple.com/iphone-13-pro/
Apple’s website design is well-known to its product users and non-users alike due to its sleek, no-nonsense, minimalist design. Each section is well-designed and in tune with what the masses love. Great, chromeless product photography combined with crisp content are the mainstays of this hero image example for the newly launched iPhone 13. Their hero images speak a language that we all love.
Rado
Source: https://www.rado.com/en_in/
A statistics shared by Forbes show that embedding a hero background video can help boost your conversion rates by 80% and influence a customer’s purchasing decision by 90%.
Rado followed this to the T with its hero banner.
The Swiss watchmaker uses a dynamic video background with overlay text and a simple CTA button. You can’t help but repeatedly see the eye-catching animation that’s all about class, innovative design, and durability – characterizing the brand.
Red Bull
Source: https://www.redbull.com/in-en/
Red Bull gives you wings. And its hero image carousel makes you stay on the page. The brand colors and graphic elements with the right amount of text make the website pop. With seven distinctive hero images in horizontal parallax format, the entire experience is dynamic and engaging even for first-time visitors.
Nike
Source: https://www.nike.com/
Known for brilliant product imagery, shoe brand Nike takes three vibrant images of its products and immediately draws attention to the text below. The CTA button is short but significant. It’s the uninterrupted journey of the users from looking at the product and knowing where to buy it.
Spotify
Source: https://www.spotify.com/in-en/
Spotify goes all out to offer unlimited access to free music to its users. The website includes the simplest of hero banners, with the apt use of brand colors and text that matters. The idea is to take visitors to the web player. And that’s precisely what the prominent image does.
Virgin Hyperloop
Source: https://virginhyperloop.com/
Pacy and intense.
That’s how we would like to describe the vibrant hero banner for Hyperloop. When you are done watching the entire videos, you automatically want to scroll down or click the ‘Learn More’ CTA button.
Their entire website is intuitive, with hints of animation and graphics. But it is the hero image that takes the cake.
Key Takeaways
Using the right hero images or videos is the perfect hook you need to capture a site visitor’s attention. As a UI UX designer, it is the ace up your sleeves for increasing the website’s usability and overall look and feel.
If you are unsure what works, run A/B tests, create powerful imagery with the message and see which hero banner can ultimately help you drive conversions.
