Welcome back fellow landing-pagers. On our previous article, we talked about a hugely important element of every landing page: the Unique Selling Proposition. Now it's time to move on to another hotspot of landing page territory: the "Hero Shot".
The definition we gave on our first post of this series reads:
"The hero shot is the all-important, you-can't-afford-not-to-have-one, graphic element of your landing page, used not so much for decoration but rather to draw your customers' attention and provide a much necessary context.
If you're selling a product, the hero shot is a picture showing—you guessed it—that product. If it's a service you're offering, this should be a graphic descriptive enough of that service. But it doesn't always need to be a picture or a graphic: it can also be a useful video depicting your product's benefits in use."
The concept of the "hero shot", as understood in landing page design, comes straight from another well-known term in printed media: the "money shot", which is defined in Wikipedia as a visual element that is:
[...]"perceived as essential to the overall importance or revenue-generating potential of the work" and also as "a photograph that in itself drives an important percentage of the sales of the publication".
As you can see, the conversion/revenue element is present right there in the definition of the hero shot itself. Why? The web is a primarily visual medium and when you're offering a product or service nothing beats images when it comes to actually showing what that product or service can do for your customers.
Envision a pure text landing page. All you can see in the back of your mind is a boring leaflet full of words, right? Add a well-placed, nicely crafted image above the fold and the offer on your page becomes more appealing to potential customers.
But as with many things in life, there must be a method to it all—it's not just about placing some random image on top of your page. Not every graphic will do it, even if it's a picture of your product or the person offering the actual service, or whatnot.
- keyword relevance,
- purpose clarity,
- design support,
- added value,
- desired emotion, and
- the customer "hero".
Keyword relevance means that your hero shot has to be clearly tied to the keywords being used in the page. Purpose clarity means that your hero shot must clearly express what the purpose of the page and/or offer is. Design support means that the imagery on your hero shot has to be consistent and blend in with the page design. Authenticity is all about the credibility that the image conveys: don't use cheap or free stock photos or clipart. Added value is the capability of the image to provide additional details regarding the product. The desired emotion is any quality or emotion that the image conveys that could generate empathy with the viewer. And, finally, the customer hero factor is achieved when the prospective client can be portrayed using the product and reaping its benefits.
Of course, not all of these persuasion factors can be used at once on every single hero shot as, many times, they largely depend on the nature of the product or service. Of course, you can always try to incorporate as many as you can on your image, but whatever you do, never miss the first four: make your image keyword-relevant, make it purposeful, well designed, and authentic. The lack of any of these factors will surely turn your landing page into a bounce machine, so you want to pay close attention to that.
An important consideration on your hero shots, closely related to the design support factor mentioned above, is that it should, whenever possible, direct the attention toward the call to action on your landing page. As the folks at CrazyEgg say:
"Having a hero shot by itself is a great way to attract attention, but it will mean almost nothing for your conversions if this attention isn’t directed towards action."
Now it's a good time to see some of these concepts in action. Let's start with Bear CSS:
Bear CSS, a website that builds CSS templates from HTML files, decided to use a funny character for their hero shot, a bear—totally consistent with the site's name—sporting a tool belt, and his paw pointing straight ahead to the CTA asking you to upload your HTML document. This is how you direct attention using a hero shot.
H.BLOOM offers custom floral arrangements, a bit on the luxury side, so what's more appropriate than a flowery hero shot? This is all about relevance and context. It gives you a clear idea of what you can get when you sign up for a design consultation with them.
Squarespace offers beautiful templates for websites and theirs is a beautiful page for sure, an example of home page as a landing page. The image above shows the above-the-fold section of their site with a hero shot that depicts three different devices and screen sizes, a laptop, a tablet, and a smartphone, communicating the idea of responsive design in their offered templates. If you scroll down, you will see more hero shots as they describe in detail some of their services, all with a cohesive design and the ever present "Get Started" black CTA button.
Don't you love the minimalism here? This is the home page/landing page of Ribbon, an upcoming web service to send payments. Everything here exudes simplicity. From the USP to the CTA to the hero shot, which is just a picture of a smartphone with the app running, so you can see what the user experience of the application feels like. This is the idea Ribbon wants to convey: that using their service should be simple, so every design element in the page is aligned toward that purpose. To us, they have nailed it.
Make sure not to miss our next installment in this series, where we will be talking about how to clearly state the benefits of your product on your landing page.
Your insights on hero shots will be welcomed on the comments. Keep tuned for more!