Hello UPA 2011!‘How to use photographs to improve the user experience’

James ChudleyUser Experience Directorcxpartners

@chudders #uxphoto

2

plan of attack:

why is this important?

Some photo ux stories

workshop!

what makes a usable photo?

improving photo usability

3

#uxphoto

@chudders

please use this hashtag when you tweet about issues relating to the ux of photos!

4

as a photographer, i spend a disproportionate amount of time thinking about photos!

but I realised that i had never really though about photos in ux terms.

why are photos never really discussed in ux terms?!

i see photos being used in all of the material i design and test.

i’ve spent the last year collecting stories around where photos have impacted upon usability.

how many of you design user experiences of some sort?

How many of you have seen usability issues with photos in your research?

How many of you influence photo selection on your work?

http://www.flickr.com/photos/mikeygottawa/398496381/http://manishin.com

photos play a huge part in out lives.

From iconic images of historical events that stick in your mind...

http://www.benetton.com

to provocative ad campaigns that are designed to shock and cause controversy.

http://www.flickr.com/photos/edwardolive/2283701570/

from recording and reminding us of significant moments in the lives of our friends and families...

to recording our family holidays over the years.

to the stuff the makes us laugh...

WHAT ARE YOU THINKING ABOUT RIGHT NOW?

i bet you are all now thinking about your families, holidays and favourite photos.

We just can’t help it, we are wired to react to photos like these.

13http://www.flickr.com/photos/bieraugel/5712960853/sizes/l/in/photostream/

i fing the fact that photos are so rarely discussed in terms of user experience very strange.

Here are 4 reasons why.

1. there are lots of images online!

http://mashable.com/2011/02/14/facebook-photo-infographic/

facebook is now at 100 million images and instagram users are posting 10 images per second.

also so many common web tasks such as shopping, researching and social networking use photos as their core content.

2. Lack of guidelines for use of photos for usability

there are a million tutorials around image manipulation but where are the guidelines around which photos to use to make things more usable?

I’ve looked and they aren’t really there.

3. as ux people we know so much about users & tasks

we design experiences and digital products but when it comes to photos we just do this!

how do we get away with it?!

it’s lucky we don’t design t-shirts

http://www.threadless.com/

[Funny quote]

if we designed t-shirts they would probably look like this!

4. i see photo ux issues in every project i work on

i see photo ux issues in all of my research.

Here are some examples...

GREAT SERVICE

http://www.wiltshirefarmfoods.com/

an image can provide such a powerful message.

Users told us how this company would ‘deliver whatever the weather’ because of how they interpreted the photo.

POINTS OF ANXIETY

http://www.wiltshirefarmfoods.com/

customers were worried about who would deliver food because they would be allowed into their houses.

They deliberately showed real delivery people across the site so you knew who to expect.

THE ART (& SCIENCE) OF FOOD PHOTOGRAPHY

http://qwikstep.eu/search/when-to-change-motor-oil.html http://www.ehow.co.uk/how_7830140_remove-shoe-polish-wall.html

in the world of food photography devious tricks are used to show the food at its best.

Motor oil is commonly used as ‘gravy’ and boot polish is used to give steaks those griddle stripes.

mmmmmmmm!

DO I LIKE THE LOOK OF IT?

http://www.wiltshirefarmfoods.com/

in this instance customers thought the food looked too good!

the customers were generally in their 60’s, 70’s and 80’s and didn’t want food that looked so fancy.

HELPING CUT THROUGH JARGON

http://www.mothercare.com/

often web taxonomies use terms that confuse users.

In the example new parents struggled with this strange new world.

‘Do i need a buggy, a stroller, a travel system or a pram!’

‘NO THAT’S NOT WHAT I WANT’

http://www.mothercare.com/

but the second they saw the resulting product they knew whether it was what they were after.

photos are often used within navigation to provide prompts to people to push them in the right direction.

fundamental constraints

photos are a great way of answering a fundamental user anxiety.

What use is an expensive buggy if you can’t fit it in your car or through your front door?

http://www.r32oc.com/general-chat/12986-pram-buggy-boot-r32.html

people can help, but be careful!

often images of people are used in an effort to help customers to self identify with the most appropriate group.

However, if you don’t identify with anyone what do you do?

using images of people is dangerous because we are very good at judging people!

http://www.lovefilm.com/

‘attractiveness’ from okcupid

http://blog.okcupid.com/index.php/the-4-big-myths-of-profile-pictures/

we have all thought which images of us to use as our social media avatars.

it turns out that is you are trying to get a date you should use a photo of you doing something interesting!

‘WHAT IS THAT?!’

http://www.dmu.ac.uk/partnerships/business-services/index.jsp

highly conceptual imagery is dangerous if used in the wrong context.

if users feel it isn’t appropriate they will react strongly and just go elsewhere.

‘THEY DON’T LOOK REAL’

http://www2.le.ac.uk/business

if photos of people dont look genuine or real we don’t trust them.

remember how good we are at judging people!

‘I CAN IMAGINE BEING THERE’

http://www.derby.ac.uk/business

users liked these photos because they gave them a sense of what it would be like to be there.

they didn’t look professionally shot but users didn’t care as they focussed on what they contained instead.

leisure vs business travel

http://www.crystalski.co.uk/

hoteliers who use large images of rooms allow potential customers to imagine what their stay will be like.

if you are travelling for leisure you will be keen to make sure this hotel will be perfect for your hard earned vacation.

zoom and orientate

http://www.ctshirts.co.uk/

design patterns have emerged around common photo tasks such as zooming.

the method shown here works well because users never lose where they are on the product when they are zoomed right in.

consider design patterns

http://www.facebook.com

sites like facebook will determine the design pattern to follow when presenting slideshows because it is such a universally used site.

we often see these expectations from users such as why can’t it just work like google. users don’t care about the potential costs and complexities involved.

content vs ornamental

http://www.timbuk2.com/tb2/products/home

typical images can be described as either content or ornamental photos.

this is an example of a content photo, its contents are useful and relevant to the page.

content vs ornamental

http://www.b2bcompliance.org.uk/

these are ornamental photos, they are indirectly related to the supporting copy and do little more than break up the text.

SO WHY DON’T WE EVER TALK ABOUT PHOTO UX?

weird isn’t it?!

photos are often taken in a way that will influence the way they are perceived.

in this example i used certain camera controls to create a certain result.

ux designers are the same. we make deliberate design decisions to created an anticipated response or behaviour from our users.

38http://www.ikea.co.uk

consider this image

let’s deconstruct this photo from the perspective of the photographer, the business stakeholders and the user who views it.

39

Shoot wide to convey space

Control shutter to blur water

Dynamism & movement

Use directional light to add impact

Wet floor acts as a reflector

Use white wall on left as reflector

Location choice - urban, aspirational, on

brand

Compose to only include relevant

objects

Use flash to enable use of fast shutter

speed

Ensure colour remains punchy to draw

attention

Blow sky to render neutral

Dress image as appropriate

Use lines on floor to guide the eye

Shoot at eyeline to connect with people

the photographer has deliberately shot this photo in a certain way to get the result they wanted.

40

Convey the benefits

Demonstrate usage

EntertainEducate & help understanding

Shock Illustrate a point Set expectations Persuade Get a reaction

Create desire Sell & cross sell Show qualityDemonstrate

featuresShow

uniqueness

Show scale & what’s included

Give contextCommunicate a

propositionConvey

a lifestyleSupport

the brand

Inspire Show accessoriesConvey

intangiblesConvey

personalityCreate an emotional

response

Quality & trust Demonstrate value Imagine ownership Show details Improve perception

the business stakeholder has their own objectives for the photo and what they want it to achieve.

this is deliberate because if the image has to contribute to the objectives of the business.

41

Does it look good?Is this what

I want/ need?Can I imagine myself

there?How does it work?

Will it match ‘x’? Is it right for me? Will it be right for ‘x’ Will it fit?What does it come

with?

Entertain me! Where is it? What do I get? Have I got one like it?

Am I in the right place?

What will the experience be like?

Does it look like value for money?

Can I imagine owning it

Does it look like fun?

Is it good quality? Do I trust them?Has it got that feature I

need?Is it what I would

expect from them?Help me to

understand it

Is it safe? Do I like it?Does it look

comfortable?

Where will I be sitting/ staying/ watching

from?

Will there be people like me there?

How is it different?

the user has their own goals and tasks that the photo can help with.

we come to websites with many unanswered questions that photos can help to address.

remember how hard reading is online, photo’s are easy to consume in a short period of time.

i recently came across this great book that introduced me to the idea of rhetoric.

rhetoric is the study of language used to persuade or influence people.

web content such as photos are often used to persuade or influence people, particularly in the world of e-commerce.

http://www.abookapart.com/products/the-elements-of-content-strategy

ethos(CREDIBILITY)

pathos (EMOTION)

logos(LOGIC)

aristotle determined that a persuasive argument will include ethos, pathos & logos.

so to persuade someone your communication needs to be credible as well as providing logical and emotional components.

44

Is this what I need?

How does it work?

Will it match ‘x’?

Is it right for me?

Will it be right for ‘x’

Will it fit?

Where is it?

What do I get? Is it good quality?

Is it safe?

Rational appeal (LOGOS)

Does it fit with the brand?

Reputation/ brand appeal (ETHOS)

What qualities do I assume it has

These guys know what they are doing

If they made it it must be good

Does it look good?

Entertain me!

Does it look like fun?

Do I want it?

Emotional appeal (PATHOS)

Will the experience be good?

What will I look like with it?

Is it for people like me?

Social/ Status appeal

What will other people think?

How will this make me look?

Will this help me to fit in?

so in order for a photo to be useful and persuasive it must communicate all of the components of rhetoric.

i’ve added a fourth around social/ status appeal.

a photo of a luxury car for example may help the user to imagine how others will perceive them if they owned it.

em

otio

n

ratio

nal

brand

so

cia

l

useful?

Rhetoric scoring framework

assessing photos using a rhetoric framework

we can use the rhetoric framework to help us to score photos.

i’ve added a fifth called ‘useful?’ which is a reflection of how useful the photo is to the user.

http://www.ikea.co.uk

let’s take a look at some different photos and examine them from a usability perspective.

show me the benefits

em

otio

n

ratio

nal

brand

so

cia

l

useful?

this photo immediately conveys the benefits of the product.

i can see how it would be useful.

i want one!

http://www.joby.com/gorillapod

be careful when setting expectations

em

otio

n

ratio

nal

brand

so

cia

l

useful?

users (rightly) assumed this shirt came with a tie and cufflinks.

it didn’t, they just used them in the photo to dress the shirt.

customers got very upset when just a shirt arrived in the post.

http://www.ctshirts.co.uk

match the brand, or maybe ‘define’ the brand

em

otio

n

ratio

nal

brand

so

cia

l

useful?

brands often use such a distinctive style that it in itself becomes the brand.

if you are familiar with howies you will probably be able to recognise their photos from the way they are shot.

if we see imagery that doesn’t match the brand it raises questions in the users mind - ‘this doesn’t look like their stuff’

http://www.howies.co.uk

be consistent

vs

john lewis meticulously shoot every product in exactly the same way which produces a consistent style.

of course ebay photos come from all over and the resulting page suffers as a result.

consistency aids usability, it helps us to focus on the product and not on the inconsistency.

http://www.ebay.co.ukhttp://www.johnlewis.com

convey the intangibles

em

otio

n

ratio

nal

brand

so

cia

l

useful?

for luxury brands like bentley it is important to convey qualities like heritage, hand made, tailored and custom built.

some of these more esoteric qualities are hard to describe in marketing copy.

a strong photo like this one can convey many of them in an instant.

http://www.bentleymotors.com

credibility

em

otio

n

ratio

nal

brand

so

cia

l

useful?

the association of an individual with a site brings credibility as in this example.

however its important to remember not everyone may know the individual.

in this case we tested this site with some kids who perceived the inclusion of david attenborough as meaning the site was for older people.

http://www.arkive.org

show scale

em

otio

n

ratio

nal

brand

so

cia

l

useful?

we need to be sure that a product will be suitable for the job we want it for.

in this example the photo conveys space as well as scale.

we know how big a forklift is and can see that this van will easily hold a lot of kit.

the potential purchaser will feel assured that it will do the job they want it to do.

http://www.ford.co.uk

big is good

sites like ‘the big picture’ (boston.com) recognise that users want big photos to immerse themselves in.

we continually see how larger images test better with users as they allow them to see the details and to enjoy the photos.

http://www.boston.com

show me how

em

otio

n

ratio

nal

brand

so

cia

l

useful?

photos are really useful when we are trying to follow instructions.

following a recipe becomes so much easier when we are able to check our progress with what it is ‘supposed’ to look like!

http://www.thefoodiemethod.com

tell me a story

photos are a really great way of telling stories.

the photographer nick hand uses them to great effect with his ‘soundslides’ which are a slideshow accompanied by audio.

we’ve used a similar technique to bring users to life for our clients, the results have been really compelling.

http://www.slowcoast.co.uk

so what can we do as ux professionals to improve the photos that are used in the stuff that we work on?

here are some ideas that you could try.

annotate your wireframes

we annotate every part of our wireframes but never the photos.

why not convey the purpose of the image you place in your wireframes by way of annotation.

you are not selecting the photo but informing the selection of the photo.

you could even provide links to examples.

sketch a brief

we love sketching interface ideas so why not sketch out a concept for an image to convey its contents.

we used this technique when planning a recent ux book photo shoot.

it worked so well because we all understood what we wanted the image to convey.

use your task models as a shot list

it is likely that different types of imagery will be more appropriate at different points in the user journey.

we can add examples of photos or sketches of photos to illustrate what we feel should be used at these different stages of the task.

61

conduct a photo audit

•Audience

•Task

•Outcome/ Purpose

•Primary message

•Context - this Will be shown at this point in

the journey and with this what content

•Commercial objective

Photo audit

you can use the categories shown below to conduct an audit of the photos much as you would do a content audit.

and yes they really do hoover the greens at the belfry!

http://www.thebelfry.co.uk

“i’m focussed on success, i’ll do

whatever it takes to make it in my

career”

brenda is the senior vp of a major multi-

national company. She works hard and plays

hard and doesn’t suffer fools gladly.

her key tasks are:

- checking sales forecasts

- running reports

- setting targets

business belinda

does this look familiar?

http://www.createyourownrealitynow.com

personas are a classic ux document that often contain questionable photos.

often stock photos are dropped in as they are easy to get hold of.

the problem they cause is they make the people they represent difficult to connect with because they don’t look real.

peter the retired teacher

“i want to make the most of my

retirement”

peter has been retired for 6 years after a

successful career as a teacher

her key tasks are:

- understanding the product

- working out the final transfer

- setting up meetings with adviser

LOOK AT the difference

but when we start to use photos of real people we can immediately begin to empathise with them.

believable photos such as this one really bring personas to life thus giving them value as ux deliverables.

a story telling approach

we took a story telling approach to help to bring the stories of flood victims to life in a project for the environment agency.

we asked flood victims to send us photos and we interviewed them on the phone.

the resulting slide show with audio provided a compelling artefact which really helped stakeholders to understand what it was like to be a victim of flooding.

add photos to prototypes for testing

you can get some really useful feedback from users in testing when you drop photos into your wireframes.

in the same way that we rarely test with wireframes that contain lorem ipsum i can see a move to using more photos in testing and avoiding using the boxes with the x’s in them!

66

there are more and more services such as this one to source placeholder photos from.

finding photos can be time consuming but sites such as flickr are a great resource.

67

this site pulls in images from flickr based on parameters you define in the code.

i’ve found compfight.com (an external flickr search tool) really useful when i’ve needed to source photos in a hurry.

of course, be sure to always credit images and of course check the copyright terms.

http://www.zurb.com/playground/rapid-prototyping-with-flickrbomb

here are some more resources on the topic

How to Use ImagesLindsey Marshall and Lester Meachem

http://www.smashingmagazine.com/2010/06/25/how-to-use-photos-to-sell-more-online/

http://www.cxpartners.co.uk/thoughts/10_ways_to_use_photos_to_enhance_the_user_experience.htm

http://www.useit.com/alertbox/photo-content.html

i’m leading a campaign to improve photo ux, please join me!!

my plea to you

so please join me on my mission to improve the usability of photos.

if you see particularly good and bad examples of photo usability please tweet it and flag it with

#uxphoto

70

Thanks!

James Chudley@chudders

www.cxpartners.co.uk

http://jameschudley.photoshelter.com/

feel free to drop me a line!