How to use photos to improve the user experience
-
Upload
cxpartners -
Category
Design
-
view
11.872 -
download
2
description
Transcript of How to use photos to improve the user experience
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!