The design of your website is more important for conversions than you think.
First impressions matter, and a good way to make one is with a hero image that complements your value proposition. But what’s a hero image, really, and how do you make them work for you?
What’s a Hero Image?
A hero image is defined as “a large, featured image or series of images prominently displayed on the homepage.” You’ve seen them before. They look like this:
Angie Schottmuller described a hero shot as “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade a customer.”
So it’s not simply a large photo on a home page; it’s a large photo of a solution that complements your value proposition to provide clarity and context to your visitors. It’s a photo with a purpose.
Why Use a Hero Image?
We’ve seen that consumers feel pleased when they see a website that makes sense, one that is immediately:
- easy to read
It doesn’t take much time for people to make a judgement, and a hero image helps introduce clarity, understandability, and ease of consumption right away.
In fact, it takes only about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your website. That’s all the time it takes someone to decide whether they like your site or not, whether they’ll stay or leave.
A couple studies have supported this number, including Google’s own research. Actually, according to their study some opinions develop even within 17 ms (though the effect was less pronounced on some design factors).
Again, with your hero image, you’re looking to complement your value proposition and create a better first impression for visitors on your site.
How To Design and Choose Your Hero Image
Clearly, designing and choosing a hero image is as much art as science. It’s also usually as much about branding as it is conversion. But as with heuristic analysis, you can use frameworks to help guide your decisions.
Angie Schottmuller created a 7 step framework for judging hero shots, and it goes like this:
- Keyword Relevance (does the image complement the targeted keywords?)
- Purpose Clarity (does the image help clarify the message of the site?)
- Design Support (does the image support and enhance seamless flow of page design leading to the CTA?)
- Authenticity (does the image represent your brand in a credible way?)
- Added Value (does the image add value? Improve relevance? Demonstrate benefits?)
- Desired Emotion (does the image portray desired emotions that trigger action?)
- Customer “Hero” (does the featured image depict the customer as the “hero” once equipped with this solution?)
You can also use another heuristic framework, such as the one we suggest on our ResearchXL model. Judge your hero image based on:
Is your hero image relevant to your value proposition? Is it clear? Is it distracting (as in an auto-rotating slider)? These aren’t things you can validate without testing, but they give you a good place to start when initially designing and choosing a hero image.
4 Types of Hero Images
When analyzing websites, you generally come across 4 types of hero images:
- Product images
- Contextual images
- Famous founders
- Non-contextual images
It’s not my job to tell you whether any of these categories works better or worse than any others (A/B testing should be a fine way to decide what’s working better or worse), but the following hero image examples can give you some inspiration for new variations…
The Product Hero Image
The product hero shot is the most intuitive – it’s a large, HD shot of the product. This could be a product in action, static, or otherwise, but its job is to complement the value proposition with a visual demonstration. Here are some examples…
ManPacks is a subscription box that sends men “all the basics when you need them.” These boxes include “underwear, socks, razors, condoms,” etc, which of course it says right there on the subheadline. But the hero image to the right does a better job at conveying, visually, what you get.
RideTap is a startup that organizes real-time ride options. Though I think they could be more clear with their value proposition (something about “transportation ecosystem” sounds weird – like a consumer would never use that phrase), the hero image of their app with all the ride option icons helps add some context to what the app does.
This is a product from Bulletproof (the makers of Bulletproof Coffee), and I’m not really sure what it does. It explains on the product page that it’s a “whole body vibration plate,” which I suppose gives some context (though still not sure why I want one).
You’ve got to dig a little bit into the product copy to discover the benefits, but this hero image on the home page at least gives you a visual display of the product in action.
4. Bulletproof InstaMix
Another product from Bulletproof.com, this time a version of their popular Bulletproof coffee. InstaMix, however, is a portable version, made for travelers and those on the run who still want buttery coffee.
The hero image shows someone on the move with a travel mug and a pack of InstaMix, a good illustration of its use case.
Onnit is another trendy nutrition and fitness company. On their home page slider, one of the products they feature is their daily multi-vitamin. Their headline “the easiest way to get optimized” is complemented with an actual display of the product in its packaging.
6. Hammock Town
Hammock Town sells hammocks, so they show you what your house could look like with the addition of two epic cocoon hammocks. Not bad.
Another trend I’ve seen in the last few years is to have an animated hero shot. While this example from Instapaper isn’t necessarily an exact replica of their UI, it’s an illustration of the fact that you can read your articles anywhere and everywhere, on your own time.
8. Heap Analytics
Heap Analytics does something similar, showing animations of different charts and reports you can access in the app (the animation goes on longer, but my screen recording software cut off early). A good way to take a look inside the app to get an idea of the experience and capabilities.
The Contextual Hero Image
Sometimes, companies don’t simply throw up an image of their product, but instead they use a complementary image that provides context or support for their offer. This could be the environment in which you use the product, or just something related to the product that bolsters trust and value.
9. National Allergy
National Allergy is an eCommerce site that sells a variety of allergy products. While they don’t have an assortment of allergy pills sitting to the right of their headline, they choose to display a doctor. Probably to display trust and confidence that the product is legit, and it also gives context that you’re on a medically-oriented site.
Here’s one that shows the product (swim trunks), but more so, I think, shows them in an environment in which you would use them. Bonobos could have just showed a close up of the product, but it’s probably more compelling to imagine yourself hanging out with your friends and doing cannonballs in the trunks.
We also found, in one of our academic insights, that images of humans (especially in terms of apparel) draw more attention (fixation time, etc). So consider showing customers the context of your product on real humans in contextual environments.
11. Chubbies Shorts
Chubbies does something similar. They’re all about the weekend (it’s a consistent motif of their copy), so they show a bunch of young people partying on a boat in Chubbies swim trunks.
12. Fashion Metric
Fashion Metric makes products that allow online retailers to better predict people’s sizes, thus reducing returns and maximizing revenue. It’s an innovative product, and to articulate the benefit, they use a hero image of what feels like a more technically sophisticated retail environment…
Instacart, grocery delivery service, shows a stack of fresh and delicious groceries in their hero image. Not only that, but it looks like they’re being handed to you (thus the environmental context of grocery delivery).
Uber could show you a shot of their app, but instead they show you inside the car (the real experience). It’s a smiling driver and a passenger in the back, clearly and effectively showing you what an awesome experience Uber is.
RoverPass is an Austin-based startup that provides on-demand booking for campgrounds and RV parks. Just like Uber, instead of showing you a close-up of their app, they show you what your experience is using the product. This example might be even better, because their campground hero shot looks like an adventure, like it would be a really good time.
The Famous Founder Hero Image
The famous founder hero image is a shot of the founder of the site, usually on content-heavy sites with a heavy personal flair. It’s usually just on the home page and is often used in conjunction with an offer to join an email list. Sometimes, though, there are founder videos, which I’ll consider in the same category (especially if they’re not the annoying auto-play sales letters). Here are some examples you may already be familiar with…
16. Kopywriting Kourse
Neville Medhora teaches people to be great copywriters. He does so through his blog, email list, and his Kopywriting Kourse. He uses his own image as a hero shot, and also executes a great example of a directional cue (he’s looking right at the email opt-in)…
Not sure I need to explain this one (you can click over to our home page if you want). Here’s Peep, pointing at our headline…
OKDork is the blog of Noah Kagan, founder of SumoMe. It only makes sense that his smiling mug is next to the email opt-in.
20. Conversion Sciences
Conversion Sciences also uses the famous founders hero shot, but they use a video instead of a static image. Still, the freeze frame is on their faces so it works to the same effect.
21. Book In A Box
The same strategy goes for Book In A Box, Tucker Max’s company. The static image shows his face with a title (credibility indicator). The video shows him explaining the service in greater depth to complement an already solid value proposition.
Same strategy with Danny Iny and Mirasee (a training/coaching company, I think). Though, I believe they could beef up their value proposition and explain better what they do. Perhaps I’m just not in the target market, but I had to do so much research before I (sort of) got the point.
The video is a good touch, especially with a notable founder, but it doesn’t supplant a proper value proposition.
The Non-Contextual Hero Image
The non-contextual hero image is an image that just doesn’t fit in. It’s usually implemented because it looks cool, or because it’s trendy, but it simply doesn’t complement the offer or lend any additional clarity on the page. Often, non-contextual images actually distract from the message by making you think too much about what the offer/value is.
Note: maybe these companies tested the crap out of these and they’re clearly the more effective option for them. I don’t know that because I don’t have their analytics. But this is a heuristic based analysis, so these examples are what I find to be mismatched and therefore subpar hero images…
23. 500 Friends
It’s already hard to tell what 500 Friends does (you can’t see it from the picture, but their headline flashes a bunch of buzzwords before landing on “loyalty realized”). Then they use what looks like a generic stock photo for their hero image. Not helping.
Muru is some sort of music app. I can tell that because of their headline “Create your own music journey.” I assume that entails some sort of customization or personalization with music.
But take that headline out, and what information would I get from that photo of a bunch of friends drinking wine and eating dinner? Nothing. It adds no clarity or additional value…
Who doesn’t love a good startup stock photo? Well, if you want to convey what you actually do, or if you want to differentiate yourself from the many other companies that use photos like Leankit‘s below, then perhaps you should avoid the startup stock photo. It’s generally irrelevant and usually quite bland…
Personally, I think Beme is the worst case scenario outlined yet. No indicator of what they do, flashing photos, and mostly generic, lifestyle photos that don’t tell me anything about the product. I found no reason to dive further into the site to research what the product was. I had no incentive.
The site’s flashing photos conveyed the opposite of clarity, understandability and ease of consumption…
Hero images, when done correctly, contextualize and complement a value proposition to increase the clarity on a page. They help someone understand quickly what the value of your offer is.
There are also an infinite amount of ways you can execute a hero image; that’s why it’s an important thing to test. You can take some best practices (real people, product in action, etc), and see what works best for your particular website. Just try not to use a startup stock photo of a laptop and a cup of coffee.