Hero Images And Why Websites Need Them
What’s a Hero Image?
If you have noticed the most obvious trend for web design since 2015 until today is the used of large image on top of the website. Sometimes the image will cover the whole screen or ¾ of the screen but the usage of the large image is definitely one of the most popular trend you can see in the website layouts. This large image is often called ‘Hero Image’ . I guess it is called Hero because it depicts the main subject of the website you’re visiting.
A hero image is defined as a large, featured image or series of images prominently displayed on the homepage. It is also a credible photo or video of a solution that demonstrate the relevance, context, value, and emotion to support, educate, or persuade a customer. Basically, 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 do you use Hero Image
A study has found out that it takes only 0.05 seconds for your visitors to form an opinion about your website. That’s all the time it takes someone to decide whether they find out more about your website or immediately leave.
By using Hero image as the first thing your visitor arrive at your website, you are providing a good first impression to your website visitors. It also provide clear, easy to read and understandable message that you are trying to convey to your website visitors.
How do you use Hero Images
According to Angie Schottmuller who created a 7 step framework for creating hero shots, when creating Hero Images, the following factors should be considered:
- 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?)
Using the above mentioned factors, let us look at how some of the major websites in the world are using them.
1.0 The White House
We can see here the website uses the an authentic image to represent the brand, ie the image of the current President Barrack Obama. It also has a clear Call To Action button hear President Barrack Obama’s speech.
As we all know, AirBnb has revolutionise the accommodation industry by providing an alternative means of accommodations to worldwide travellers. The image and the tagline ‘Live There’ they are using has actually triggered the right emotions for their site visitors. With the emotions triggered, immediately below the image is the call to actions for visitors to start the search for their accomodations.
Paypal is the biggest online merchant payment in the world. The image they are using is authentic and reflects the emotions of a buyer who has just received an order of something she has purchased online. The tagline basically says thet we can now have a ‘ new money ‘ to shop at over 10 million online stores worldwide. Immediately after the tagline is the Call To Action asking the visitors to sign up.
Bata is one of the most popular shoe brands in the world. Their tagline is ‘We Love Shoes’. Basically, it is telling that everyone loves shoes. The have chosen a beautiful women wearing a presumably Bata shoes that matches the colour of her handbag. Again invoking emotions, in this case beauty and also elegance, for someone using Bata shoes.
5.0 Walt Disney
A well known brand worldwide for everyone. It does not use any tagline except its own name but the image they choosed is an authentic image as well as a well known brand image of Walt Disney.
The largest professional social network in the world. They are using headshot images of people from various countries and they all looked professional, to show relevance to their website. They have 3 types of Call To Actions, where the most prominent one would ask the visitors to immediately register as user. They also have Call to Actions for visitors to start looking for any professionals worldwide and also login for existing users. Excellent used of authentic professional head shot images and Call To Actions.
Another multi billion dollar company using Hero Image for their website. The tag line says ‘ Get There , Your day belongs to you’ will get to where you want to be and save you a lot of time. The image they’ve used shows an friendly relationship between an Uber driver and its passengers. Again, invoking emotions. Uber also picked a senior citizen image to show that a senior citizen can also be a Uber driver. They also used a Call To Actions which is signing up to ride with Uber.
8.0 Sylvestor Stallone
The ever famous Rocky. His website is showing the great image of himself, who is the Hero . An excellent choice of Hero image used.
Is your website using a Hero Image yet? If not, you can using the 7 factors above in choosing the right Hero Image.