bts防弹少年团演唱会

bts防弹少年团演唱会

Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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:

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》
Image” source>

Angie” schottmuller described a hero shot> “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
  • clear
  • understandable

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 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%E2%80%99s” 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 step framework> for judging hero shots, and it goes like this:

  1. Keyword Relevance (does the image complement the targeted keywords?)
  2. Purpose Clarity (does the image help clarify the message of the site?)
  3. Design Support (does the image support and enhance seamless flow of page design leading to the CTA?)
  4. Authenticity (does the image represent your brand in a credible way?)
  5. Added Value (does the image add value? Improve relevance? Demonstrate benefits?)
  6. Desired Emotion (does the image portray desired emotions that trigger action?)
  7. Customer “Hero” (does the featured image depict the customer as the “hero” once equipped with this solution?)
《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》
Image” source>

You can also use another heuristic framework, such as the one we suggest on our ResearchXL” model>. Judge your hero image based on:

  • Relevance
  • Clarity
  • Value
  • Friction
  • Distraction

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:

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…

1. ManPacks

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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

2. RideTap

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.


《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

3. Vibe

This is a product from Bulletproof” makers of bulletproof coffee and i not really sure what it does. explains on the product page that a body vibration plate which suppose gives some context still why 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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

4. Bulletproof InstaMix

Another product from Bulletproof.com,” this time a version of their popular bulletproof coffee. instamix however is portable made for travelers and those on the run who still want buttery>

The hero image shows someone on the move with a travel mug and a pack of InstaMix, a good illustration of its use case.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

5. Onnit

Onnit” is another trendy nutrition and fitness company. on their home page slider one of the products they feature daily multi-vitamin. headline easiest way to get optimized complemented with an actual display product in its packaging.>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

7. Instapaper

Another trend I’ve seen in the last few years is to have an animated hero shot. While this example from Instapaper” isn necessarily an exact replica of their ui it illustration the fact that you can read your articles anywhere and everywhere on own time.>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

10. Bonobos

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 probably more compelling to imagine yourself hanging out with your friends and doing cannonballs in 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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

11. Chubbies Shorts

Chubbies” does something similar. they all about the weekend a consistent motif of their copy so show bunch young people partying on boat in chubbies swim trunks.>《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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…

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

13. Instacart

Instacart,” grocery delivery service shows a stack of fresh and delicious groceries in their hero image. not only that but it looks like they being handed to you the environmental context>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

14. Uber

Uber” could show you a shot of their app but instead they inside the car real experience it smiling driver and passenger in back clearly effectively showing what an awesome uber is.>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

15. RoverPass

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 their app they show what your experience using the product. this example might be even better because campground hero shot looks adventure it would really good time.>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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)… 

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

17. CXL

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…

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

18. OKDork

OKDork” is the blog of noah kagan founder sumome. it only makes sense that his smiling mug next to email opt-in.>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

19. Backlinko

Same goes for Brian Dean and Backlinko.” he a trusted face in the seo community so why not lead with that effect>?

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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” the video shows him explaining service in greater depth to complement an already solid value proposition.>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

22. Mirasee

Same strategy with Danny Iny and Mirasee” training company i think though believe they could beef up their value proposition and explain better what do. perhaps just not in the target market but had to do so much research before of got point.>

The video is a good touch, especially with a notable founder, but it doesn’t supplant a proper value proposition.

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

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.
《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

24. Muru

Muru” is some sort of music app. i can tell that because their headline your own journey. assume entails 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…

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

25. Leankit

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%E2%80%98s” below then perhaps you should avoid the startup stock photo. it generally irrelevant and usually quite bland>

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

26. Beme

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…

《Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)》

Conclusion

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.

Feature” image source>

Related Posts

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注