A Blog by Linda Darlene
Mesmerizing – very attractive, in a mysterious way, making you want to keep looking. – Cambridge Dictionary
We all know that within seconds of landing on a site, organic visitors will decide whether or not to continue browsing. Of course, much of that decision is dependent on the attraction factor. So let’s talk about how a well-chosen, mesmerizing hero image that ‘speaks’ to a visitor will make all the difference.
In web design, hero images are those large photographs, sketches or adornments at the top of a website that generally extend across the page. These images are prominently placed as the first visual element a visitor encounters. Selecting the perfect one for a site is essential. Hero images provide clues to the website’s nature — and they speak volumes about the company, organization, or blogger.
Derived from theatre and film, the term ‘hero’ references props that are meant to be seen by audiences close up and in detail. These types of props in the industry are called ‘hero props.’ Likewise, hero images on websites are purposed and are generally intended to be featured by being viewed closeup and in detail.
The load bearing purpose of hero images is to create a great first impression by:
(a) visually capturing the attention of organic traffic
(b) offering visitors a quick peek at the site’s content
(c) enticing browsers to become customers or clients
With these objectives, can you see why the right choice is so important?
I’ve included in this blog the hero images from actual sites to see what you think! Check them out! Are they doing their jobs? Are they captivating, even mesmerizing?
As a disclaimer, I have chosen these images because I found them interesting to me, but I make no judgment on how mesmerizing the hero images may, or may not, be for you. If not alluring to you, do they, at a minimum, have the possibility of fulfilling the other two objectives? That’s for you to decide. 🙂
Hero images may consist of more than just a photo or image. They can contain an overlay that displays a company’s unique selling proposition. It may also have a call-to-action button that asks for sign-ups for things like pdf documents, trial products, or subscriptions. Hero images can even be videos.
Studies show that sites that evoke pleasant emotions for its visitors are rated more usable than they actually may be. In other words, if it looks good, appeals psychologically or for other personal reasons grabs interest, then folks are more forgiving even if the functionality is not quite there. [1]
Interesting concept, yes?
I would also add that even if a site doesn’t use all the fancy design techniques of today’s technological trends, a website that ‘appeals’ is going to gain users. In conversion optimization (how prospects become clients), there are so many possible avenues of entry. Aesthetics is but one — but I contend, its a critical one. Does it take ‘design fanciness’ to create conversions? Not necessarily.
The home page images I’ve included here are from above the fold of several sites. As an independent variable, all of these websites were created using the free WordPress theme Unite by Colorlib. [2] Colorlib describes its theme as clean, modern, responsive, and made for simplicity and ease of use. It is promoted as a ‘wedding’ theme, but as you’ll see from the examples, the site designers used the template in many different ways for ‘image-centric’ design.
And just for grins, some of the sites are in a variety of languages so we that we have to focus more on the design, not the site content.
As you peruse the images of the website heroes, ask yourself:
• Were you pulled in by the first image you saw? Why or why not?
• Is the first impression attractive? Did the site evoke some kind of emotion in you?
• Did you feel an impulse to gaze longer at the image? Why?
• Could you immediately tell what the business is from the hero image?
There is a method that allows you to test which hero images perform better. It is called A/B testing. A/B testing is essentially an experiment where users see at random two or more variations of a page, and statistical analysis is used to determine which variant performs better for a given conversion goal. [3]
Whereas A/B testing takes time and the specific program to achieve the results, it is possible to do testing merely by checking out a site’s bounce rate and the click-through rates after a month’s usage of one hero image and then attempt another.
Click here for a tool to help you with A/B testing.
Then there is the old fashion intuitive method. -:) Use an image that ‘speaks to you.’ If it moves you in some way, hopefully, it will also capture the attention of your particular prospective target audience.
If you bear in mind the first goal of a hero image, to mesmerize and capture attention, you will spend the quality time necessary to find that perfect image for your site.
Have fun gazing at these images. 🙂
http://artchangechristal.com/ This site’s hero image also uses sound.
FOOTNOTES
Chinese for Aesthetic
You must log in to post a comment.