The Human Face. How to Choose Effective Website Photos and Images, Part 3
Editor’s Note: This article was originally published by Web Marketing Today. Practical Ecommerce acquired Web Marketing Today in 2012. In 2016, we merged the two sites, leaving Practical Ecommerce as the successor.
This article continues a series of guidelines to help you with website image selection. In Part 1, I covered some general principles to consider. Part 2 discussed ways to use images to support your company’s brand. In this article I’ll discuss ways to deal with a tricky image element — the human face.
Using faces in photos on your website presents some unique challenges. I’ll group these challenges into two major groups for this article: “Faces draw attention” and “Faces don’t mean the same thing to everyone.”
Major Challenge #1: Faces Draw Attention
People look at faces. That’s just how we’re built, as humans. We look at eyes and mouths in particular to help us identify the person, their mood, and their intent towards us.
This can pose a problem for websites if faces are not used carefully. A face — or faces — in a prominent location on your web page can easily distract attention away from your product, message, or call to action. In other words, faces can become a true detriment to your website.
For example, take a look at the Shutterfly home page:
Since I’ve had to shrink down the size quite a bit for inclusion here, the distraction effect is a bit exaggerated. But you can see, even at this size, how the faces on the page attract your attention — to the detriment of the “Learn more” and “Go” buttons. It’s a tough challenge for a photo product site, to be sure!
As another example, take this on-site promotion from Target.com:
This is a pleasing ad with a strong, clear message. But theNow, given enough time a visitor would eventually see the main call to action in this promotion. If you missed it the first time, take another look — it’s the “Shop These Looks” text link. The models’ faces are pleasing, but they are a much stronger element than the call to action.
Suggestions for Dealing with This Issue
Turn the face towards your offering
You can use the attractive power of a face by turning it towards your product or call to action. Depending on the context, this can help direct your visitor’s attention to the area you want them to peruse.
Here’s a BAD example, showing how NOT to do this:
Notice how, when you look at this page, you want to look where the students in the photo are looking? Which means you are NOT looking at the form, the one thing on the page this company would most like you to pay attention to.
This page, by contrast, does it the right way:
In this photo, the little girl’s face will still attract attention, but visitors will tend to look where she is looking, which is at the page links.
Here’s another example:
In this promotion there are three factors that mitigate the distracting effect of the woman’s face. First, the woman is relatively small. This shifts the balance of the promotion’s layout to the large area beside her. Second, her eyes are not very visible because she’s posed from the side. And third, she is facing the promotion’s content and action button.
Turn the eyes away
As we saw above, a face is less powerful if the eyes are not visible. So, an easy way to use a face on your website but reduce its potential for distraction is to use photos in which eyes are turned far away from the camera.
For example, in this promotion both the mother and daughter are looking down:
Since we can see only their eyelids, we aren’t drawn quite as strongly to look where they are looking. This is still a bit risky, though, so luckily this dental site chose to make their promotional message stand out very strongly through the use of color.
Frame the face in another context
If a face can be seen as part of yet another object within the photo, its impact and distraction level can be reduced. For example:
In this promotion, the faces are contained within an open book. Although this doesn’t entirely remove their distraction potential, it does place them at a greater psychological remove.
In another example:
Notice how the young boy’s face is not only contained within a context — in this case Apple’s iPad device — but he also has his eyes turned down towards his guitar. This image retains humanity without distracting from the product.
Get rid of the face entirely
Another obvious way to deal with this issue is to simply not use faces at all. There are some drawbacks to this, however. Faces can add warmth and humanity to a website in a way that other design elements can’t. It can also be tricky to do without looking bizarre or cold. But here are some approaches that I think are successful:
In this example, the face is cropped out of the photo but a thin border line helps keep it from looking like a mistake.
Here we have the empty suit, faceless and even hand-less. It may be a little odd, but to my eye this places emphasis on the elements that matter in this promotion — the product, the brief message, and the call to action.
The site, Overstock.com, consistently avoids using faces for their clothing listings:
In these next two examples, notice how the image is cropped to exclude the model’s eyes (the most distracting part of any face) but include her friendly smile:
So! That’s a look at the problem of face distraction and some approaches to deal with it. Let’s move on….
Major Challenge #2: Faces Don’t Mean the Same Thing to Everyone
Another difficulty with using faces on websites
is that your visitors may interpret them differently than you intend. This can show up in a variety of ways:
1. I guess I’m not really wanted here
Visitors can feel subtly unwelcome if a photo is obviously meant to represent them, the prospective customer, but isn’t the right race, age, or (fill in a multitude of potential affiliations here). This is an issue important for businesses, because people are more willing to interact with a company or service if they can tell it’s meant for them. Their age group, their education or income level, their gender.
For discussion, let’s examine this photo from the University of Phoenix site:
It’s become common practice that if you must have only one gender in a photo, you should chose a woman. This decision is often based on studies showing that women in particular are more likely to unconsciously assume a photo of a man means the company or service isn’t intended for them. Here are a couple more examples, just to illustrate how common the practice is:
But going back to the University of Phoenix example: This woman looks to be in her mid-twenties to early thirties, of mixed race. Now, University of Phoenix may have looked over their customer data and carefully selected this photo based on their current student population’s typical age and ethnicity. Or they may’ve detected my IP address as having a California location, and dynamically served up a woman who aligns with a large portion of California’s ethnic demographics.
The point, though, is that by selecting any race, gender, and age for a photo, you run the risk of communicating some exclusion, and causing prospective customers to make assumptions about your service and leave without researching your offer any further. Especially if it’s a product or service that’s new or unfamiliar to your site visitor.
Suggestions for Dealing with This Issue
One strategy is to use what I like to call a “scattershot” photo. I know you’ve seen these, maybe even used one of them — the group photo with at least one woman, one minority, and possibly even one person with gray hair, all smiling? Here’s an example:
In my mind, even though this is a fairly common approach it’s a decent, quick and easy compromise solution to a difficult challenge. Make sure the photo is high-quality and, if it’s a stock photo, hasn’t been used by other companies. I can’t stress this enough when it comes to stock photography — do your research, and be sure you’re using a photo that is not used by your competitors or somewhere that could detract from your credibility.
Brand / Spokesperson
If you have more resources and marketing channels outside your website, then using a “branded” face avoids not only this issue but the “is it you, or me?” issue as well. For example, these two insurance companies use spokespersons that appear in their television and other advertising:
The reason these faces work, however, is because they’ve been strongly associated with the brand through means other than the company’s website. These companies are relying on that previous exposure.
Cartoon / Non-Human
Some companies, of course, take the Brand/Spokesperson approach a step further by using a cartoon or non-human being to represent their company. This makes it clear to (hopefully) all site visitors that the face on the website represents the company, not their customers. For example, a couple more insurance companies:
2. Is that me, or you?
This is a particular problem when the company culture and employees are similar to that of their target audience. Take, for example, the experience of one of our business-to-business clients. Their website’s home page prominently featured a fairly typical “happy-smiling-woman” stock photo. Our client wanted the photo to represent their target audience, and make them feel they could identify with the website and the company. When we asked how that photo was working for them, our contact laughed and told us that when customers called in to their Support center, they often asked support representatives, “Are you the woman on the website?” Instead of seeing themselves in the photo, their customers thought it represented an actual company employee.
Here’s an example (from a different site, not our client’s) of the “is that me, or you?” problem.
The man in this photo looks like he could either be a company employee or part of the company’s target business audience.
Suggestions for Dealing with This Issue
One effective way to mitigate this issue is to represent both your company and your target audience in the photo. Make sure the roles are portrayed clearly in the photograph. For example, this photo:
In this photo, it’s pretty clear that the man is a consultant or salesperson, while the two women are clients or potential customers. Now, you may still get phone calls asking for “the guy in the blue tie,” but at least you’ve made your intended message a little clearer.
While this photo is probably not right for this company’s brand, notice in this quick mockup how much clearer the roles are:
Use context to make it more obvious
This simply means including enough detail in the photo to help clarify who the person is. For example, instead of using a photo of a person in a plain or generic setting, include some context that communicates more about them and their situation:
In this photo the woman is in a clothing shop, and by her position behind the counter and the authority she conveys, she’s the owner. This makes it clear that she’s part of the target audience. Again, while not right for this company, notice the difference
this photo makes in understanding what role the person plays:
So, now what?
As with all things image-related, remember that small changes can make a big difference in how your company is perceived. As you select images for your website, consider the impact a face may have, and make sure it’s having the effect you wanted.