I enjoy showing people why it’s important to include faces on websites near things that the want to highlight. Studies show that the human eye is attracted to faces and those faces can have a profound effect on a person’s attitude about something. Placing a smiling face near an item you want to highlight will increase the item’s exposure and make it more likely that a user takes the action you want. For example, if it is important to you that your users contact you, you should place a picture of a nice smiling person near the link to contact you.
Faces are so important to users that there have been several studies conducted about the effectiveness of faces on websites. A technology developed by the military to track a soldier’s eye movement for weapons targeting was adapted to track a user’s eye on a web page and create what’s called a “heatmap” of their activity. The hotter a region, the more people looked at it. Below I will provide a couple of examples of how people look at web pages.
Below is an example of very effective image placement. Notice that the heatmap has what looks like a couple of legs in the middle. This can be attributed to how the human eye is attracted to the image. Notice that both “legs” slant to the right from top to bottom. This is because the user’s eye was attracted to the image from the top text and then pulled downward, then the users examined the text below the images. If you have something important to promote, the item your’re promoting needs to be directly below the image because you can see that the users viewed the text directly below both images on the page.
Below is an example of an article containing a face. Notice that the person’s image has the most concentrated views. The face brought the user’s eyes down from the title, the bold text underneath the image also attracted attention, then the users eye moved down to the “register now” link. Notice that users mostly scanned the text of the article after reading the title. This shows that a good “hook” is important in the title to entice the reader to go farther.
Below is an example of a giant “sale” image that went completely ignored. The users likely saw it in their peripheral vision, saw that it said “sale”, knew that it was an advertisement, and ignored it. Had they been attracted to the text of the giant sale notice at all, there would be some coloration in that area. To make this more effective, they could have made the “sale” smaller, included a person’s image on the top left of the ad, and then the important message of “dvd’s from 4.99 directly below the image.
This brief discussion of strategically placing images on your website should serve as a good guide to get you started modifying your own pages. Remember, the busier you make it, the more distractions there are from your main conversion goals, so choose your images and placement wisely. The goal is to guide a user’s eye around a page to find what you want them to find.
