There is a dedicated part of the brain that is dedicated to processing faces called the Fusiform Facial Area (FFA). We are particularly good at identifying faces within things that we look at, regardless of whether they actually contain a real face or not.
This phenomenon is known as pareidolia. We’ve all seen faces in the clouds and some of us have been lucky enough to profit from images of famous faces in cheese sandwiches!
Screenshot from BBC website showing image of the Virgin Mary on a cheese sandwich
It is because of the FFA that photos of people are so powerful. We can’t help but look at people when they are present on a poster, an advert or a website.
We are particularly attracted to their eyes, again this is a hard wired response. Photographers always make sure that eyes are in sharp focus when photographing people and animals for exactly this reason.
In digital product design we can use this knowledge to our advantage. Not only are we drawn to people’s eyes but we are drawn to look at what other people are looking at.
This photo from Nike Women makes use of this by using the gaze direction of the athlete to shift the attention of the viewer from the athlete to the product description.
Screenshot from Nike Women showing the influence of gaze direction upon where you look
This photo used on Puma.com is also very clever. It uses Usain Bolt’s trademark pose to draw attention to the call to action that the designer wants you to notice and to interact with.
Screenshot from Puma showing how gestures can determine where you look
Our gaze direction can also be influenced when using photos of animals. This tiger photo on the wonderful Arkive website guides your attention to the supporting copy to find out more about the species.
Screenshot from Arkive showing how even photos of animals can influence where you look
So if you are designing a page that has some elements that you really want to see, using photos in this way can be a great way of influencing what people look at.
Whilst doing some research for my UPA poster on the UX and psychological qualities of usable photos I came across made.com.
The quality of the photography is outstanding. The products not only look great but the size and variety of the photos give the shopper all they need to compare and choose the right product for them.
It’s also interesting to note how significant the photos are within the design. If you take the photos away you are left with pretty much nothing.
I wonder how the UX design process worked for this site. At what point did they have the photos? Was the site design always going to lean so heavily on photos? I wonder if they dropped any photos into wireframes for user testing purposes.
So a great example of a site with great photos and also a reminder of how important photos are to great websites.
I was thrilled to be interviewed by the behavioural psychologist Susan Weinschenk (@thebrainlady) recently on the topic of photo UX for her series of UX podcasts.
We covered a wide range of topics in the half hour chat from what UX designers can do to improve the quality of photos used in the products we design, to stories from my user research where photos have significantly influenced the user experience.
We even strayed into more controversial topics such as adding photos to wireframes and how to test photos with users during the design process.
You can listen to the podcast and read some of Susan’s fantastic articles on psychology and design over at her website ’What makes them click’.
“I eagerly await new concepts and processes. I believe that the electronic image will be the next major advance. Such systems will have their own inherent and inescapable structural characteristics, and the artist and functional practitioner will again strive to comprehend and control them.”—Ansel Adams, 1981
Common garden spider photographed to draw attention to the eyes
The way in which a photo is taken can have a direct impact upon how it is viewed. Focus is a good example of this as the photographer can which elements of a subject are in focus and also the ‘depth’ of focus within the photo.
I shot the spider photo using a wide aperture which I knew would result in a narrow area of focus, also known as a 'shallow depth of field’. This was a deliberate choice that I made because in this instance I wanted to draw attention to the eyes. You’ll notice that little else in in focus in front of or behind the eyes.
So by controlling the depth of field we can influence what people look at within a photo.
Frost needles photographed to keep everything in focus
By way of contrast, pretty much all of this photo is in focus. In this instance it is the composition of this photo and the specific content of the photo that determines what you look at.
So if you want to draw attention to a particular aspect of a subject a photo with shallow depth of field might be a good choice. If you want to provide a more natural look that represents the whole subject equally then you can do that by selection photos which show all of the subject in focus.
But what if the user could decide what they want to see in focus and not the photographer?
A new system developed by Lytro allows you to do exactly that as this video demonstrates.
So is the future of online photos ones that can be retrospectively focussed to suit the specific needs of the viewer? Possibly not but this technology clearly has clear benefits in terms of allowing new levels of control within post processing and beyond.
Have a play with refocussing some images over at the Lytro website.
I’m in the market for a new pair of jeans. I have spent a hours browsing the web and have been reminded of how consistency in photographic style can have a significant impact upon usability.
Consider the example above from asos. The products are all photographed identically. This makes it easier to focus on the the products and not the visual differences that result from them being photographed in different ways.
For a retailer that stocks a variety of brands this consistent photographic style makes sense because it makes it easier for customers to compare one quite different brand with another.
It’s interesting to see just how consistent the photos are. The exposure is identical in every photo and you can see from the shadows behind the legs that the lighting set up is also identical. The cropping of the photos is also identical, again to allow the customer to make easy comparisons between the products.
So what happens when there isn’t a consistent photographic style?
Immediately you can see the difference. The eBay example is so much more distracting and you find yourself scanning all over the page in an effort to try and compare like with like.
So if your customers are struggling to choose between the products on your site, have a look to at your category landing pages and see how consistent your photographic style is to see how you measure up.
During my trawl of the web to find more on the topic this is one article that I found really useful. Jared talks about how web graphics help, and when they don’t and he makes some great points on the use of photos.
He makes a great distinction between the two main types of photos that you commonly see used on websites, ‘content’ and 'ornamental’ photos.
'Content’ photos are useful photos and they add something of value to the page. Examples of content photos include product photos that help customers to choose the right product for them.
There are many different types of content photo that you can use such as photos that help people to read, learn, remember, make decisions and focus their attention. I am pulling these together in a poster with Susan Weinschenk at this years UPA conference, that explains the psychological and UX principles behind what makes these types of content photos so effective. I will share the poster here once its finished! UPDATE! Our poster now available to download.
'Ornamental’ photos can be considered as filler content. They add nothing of direct value to a page other than potentially splitting up large chunks of content. Cheesy stock photography often lurks here, beware!
So before you add a photo to your page, consider what its job is. Is it a 'content’ photo or an 'ornamental’ photo? Is it necessary? What value does it add to the user or to the site owner?
One common complaint I often hear when conducting user research is that the people who feature in photos don’t look genuine. This is often because they are models who look disproportionately happy to be using a certain product because they are being paid to pretend to do so!
This raises the question of how good actually are we at spotting a real smile from a fake one. It turns out that we are generally surprisingly bad at it.
It turns out that what constitutes a real smile is pretty subtle:
When a smile is genuine, the eye cover fold - the fleshy part of the eye between the eyebrow and the eyelid - moves downwards and the end of the eyebrows dip slightly.
Whenever people see stock photos that feature people that are clearly models they immediately question the authenticity of the digital product or service. This is a great idea to make more authentic stock photography of people more readily available for designers to use.
“Fake People Suck” — now that’s a tagline. In 2009 David Katzenstein and Sherrie Nickol began a fine arts project that involved asking people off the street to come to their studio and photographing them against a white background. The idea was to capture the striking diversity that’s commonplace in New York. But after photographing about 50 people — and due also to a steady drop in commissions from commercial and corporate projects — they realized the potential the project had as a commercial venture. Thus was born Citizen Stock.
Check out the full article over at the wonderful PetaPixel.
Photos of faces (particularly when they are of people you know) are very effective at attracting your attention. Linkedin cleverly used this principle to attract recipients attention to a recent email campaign.
Photos provide an excellent way of guiding people through a process. In this example the excellent photos let you check that what you are preparing looks like it’s supposed to!
Photos can be really useful when following instructions such as when you build things and fix things. We know how much people hate following instructions, particularly when they consist of large amounts of text. Photos show you how to do things as well as what the thing you are constructing is supposed to look like.
We all love a good story. From an early age we’ve been told stories to entertain us, protect us and to teach us about all manner of things.
Photos help to tell stories by bringing elements of a story to life. They help people to empathise with the characters, setting, context and situation that form the story.
There are many to use photos when telling stories. Use photos to help to bring customer stories to life, to tell a story about how a product or service works or highlight what real life is actually like for some people.
To see some great examples of storytelling with photos check out Pictorymag and Nick Hand’s wonderful Soundslides.
The photos on Threadless are brilliant. The shoot for each T-shirt design is unique which results in a photographic style that is distinctive, recognisable and a perfect fit for the brand. The photos are a good size too (636x460) so you can get a good look at the product. I like the way that they use employees as models too, a nice touch.
Landscape and photos of the natural world are often used in environments like hospitals, waiting rooms and hotels to help to create a calm and serene environment.
Studies have shown that visual stimulus, such as a window offering a view from a hospital bed can have a positive effect on recovery times (see PDF of research by Roger Ulrich). This got me wondering whether patients with beautiful landscape photos on their walls recover faster than those without?
They are used widely online, particularly on travel websites such as Abercrombiekent as they help people to imagine the experience they will have on holiday. They help to sell a dream, an experience or lifestyle that a viewer might be striving for and to let them escape from everyday life.
Photos like this are often used for ornamental purposes. When used in this way they offer no real purpose other than to break up large blocks of text and to provide a bit of eye candy.