10 ways you can use photos to influence the user experience

As a photographer I understand how to take photos that will result in a certain reaction from the viewer. We have all seen photos that have influenced our thoughts, our feelings and ultimately our own behaviour.

The classic wireframe image placeholder

So why as UX designers do we ignore photos when they can be so powerful?  The classic wireframes image placeholder represents nothing but a missed opportunity.

In this article I will identify just how important choosing the right photographs can be, as well as proposing a new method for denoting photos in our wireframes.

1. Show them what you sell

Moo website screenshot showing their business cards

Trying to explain what your proposition is can be very difficult. We act on first impressions and often look before we read.

Use photos that show your products so that people can understand what you sell.

2. Create emotional appeal

Screenshot of Habitat lifestyle photography

When we shop, our emotional brain takes over from our rational brain. Consider the Habitat example. If you associate with these people you will be more likely to buy these products.

Habitat sells a lifestyle that you can buy into. Use lifestyle images when you want to show products within a context so that people understand how they will enhance their lives.

3. Facial recognition

The heatmap demonstrates the attraction of the face (Source: Bunnyfoot)

We have an innate skill in recognising human faces within all manner of things from clouds to burnt toast, a phenomenon known as pareidolia.

Use images of people's faces to draw attention. Position products or calls to action close to images of faces to guarantee that they are seen.

4. Baby face bias

Photo of a baby's face

We perceive baby faced features as being more naive, helpless and honest than more mature features.

The front of a VW Beetle has huge headlights, deliberately designed to mimick the large eyes of an infant.

By understanding why a baby face is so attractive to us we can re-use those attributes within our design.

Use photos of people with baby like facial features when you want to gain empathy and trust.

5. Face to body ratio

When the face takes up the majority of the frame we focus on that persons intellectual and personality attributes. When more of the body is shown we focus more on the physical and sensual attributes of that person.

Consider which is the more appropriate style for your client and their product.

High face-ism vs low face-ism (comparison)

6. What are you looking at?

Gaze plot showing how we follow where people are looking

We can't help but look to see what other people are looking at. Consider the example of the advert with the baby. Our gaze goes from the baby to see what he is looking at.

Use this type of image when you want to influence where people look.

7. Match the photography to the brand

Screenshot of Howies website photography

Brands use photography to help to give themselves an identity. If images are not used consistently it can create a mismatch in people's minds.

Be consistent with image style and help to reassure your customers that you are who they think you are.

8. Be different

Photo of Virgin Trains Finance Director

Even small changes can make your photos stand out. A recent request involved differentiating the profile photos of members of the board. We recommended a landscape crop. It's unusual in this context and suited the quirky style of the accompanying copy.

A new take on an established method can help to differentiate your content.

9. Conveying the intangible

Photo of craftsman carving wood

Consider how you might convey the qualities of a product such as craftsmanship, service, quality or freshness. Sometimes using a photo is the best way of communicating a message to your customers without reams of copy.

Use this type of imagery when you want to reinforce the attributes of a product that are hard to put into words.

10. The social networking profile picture

Selecting a profile picture for your favourite social networking site has become a modern day dilemma. I bet you gave it more than a moments thought when selecting your own. I've spotted a few patterns in photos that are selected, which one did you go for?

  • "The Pet" - I can never get my cat off facebook
  • "The logo" - This brand has got me by the kahunas
  • "Cartoon me" - One day i'll be on the Simpsons
  • "The glory days" - I was young once
  • "The fundraiser" - Did I mention my charity work?
  • "Life of the party" - You wanna watch me, I'm crazy!
  • "The default image" - This is all too difficult

So how can we enhance our wireframes?

We should annotate our image placeholders to convey the intended purpose of the image. This will help to convey our intentions to the visual designers who will be bringing our work to life.

I've had a crack at this using a train operator website as an example. You are clearly trying to promote train travel so what attributes should the photograph convey to support this? (click wireframe image to view larger)

Example wireframe with annotations to describe image choice

I propose that we annotate our placeholders with the following categories to influence the final imagery:

  • Content - What the photo should be of
  • Key message - What message should the photo communicate?
  • Response - How we would like customers to respond to the image?
  • Search keywords - Keywords to use on Getty, Corbis etc to find a suitable image

How do you think we should address the use of photography within UX design?

I'd love to hear your thoughts and ideas.

James is responsible for leading user-centred design projects across all industry sectors, and also runs cxlabs. He has written two UX books, speaks regularly at international conferences, and co-founded UXBristol.