How to use photos to improve the user experience

Hello UPA 2011!
‘How to use photographs to improve
the user experience’
James Chudley
User Experience Director
cxpartners

@chudders #uxphoto

plan of attack:

why is this important?

Some photo ux stories

workshop!

what makes a usable photo?

improving photo usability

2

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

@chudders 3

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.

4

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?

photos play a huge
part in out lives.

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

http://www.ﬂickr.com/photos/mikeygottawa/398496381/
http://manishin.com

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

http://www.benetton.com

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

http://www.ﬂickr.com/photos/edwardolive/2283701570/

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.

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

Here are 4 reasons
why.

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

1. there are lots of images online!

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.

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

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

[Funny quote]

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

http://www.threadless.com/

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

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.

http://www.wiltshirefarmfoods.com/

POINTS OF ANXIETY

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

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!

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

DO I LIKE THE LOOK OF IT?

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

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!’

http://www.mothercare.com/

‘NO THAT’S NOT WHAT I WANT’

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.

http://www.mothercare.com/

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.loveﬁlm.com/

‘attractiveness’ from okcupid

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!

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

‘WHAT IS THAT?!’

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.

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

‘THEY DON’T LOOK REAL’

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

remember how good we
are at judging people!

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

‘I CAN IMAGINE BEING THERE’

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.

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

leisure vs business travel

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.

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

zoom and orientate

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.

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

consider design patterns

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.

http://www.facebook.com

content vs ornamental

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.

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

content vs ornamental

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

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

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.

consider this image

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

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

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

Shoot wide to convey Control shutter to blur Dynamism & Use directional light to
space water movement add impact

Location choice - Compose to only Use flash to enable
Wet floor acts as a Use white wall on left
urban, aspirational, on include relevant use of fast shutter
reflector as reflector
brand objects speed

Ensure colour remains
Blow sky to render Dress image as Use lines on floor to Shoot at eyeline to
punchy to draw
neutral appropriate guide the eye connect with people
attention 39

Convey the Demonstrate Educate & help
Entertain
beneﬁts usage understanding

Shock Illustrate a point Set expectations Persuade Get a reaction

Demonstrate Show
Create desire Sell & cross sell Show quality
features uniqueness

Show scale & what’s Communicate a Convey Support
Give context
included proposition a lifestyle the brand

the business
stakeholder has their
own objectives for the
photo and what they
want it to Create an emotional
achieve.
Convey Convey
Inspire Show accessories
intangibles personality
this is deliberateresponse
because if the image has
to contribute to the
objectives of the
business.

Quality & trust Demonstrate value Imagine ownership Show details Improve perception
40

Is this what Can I imagine myself
Does it look good? How does it work?
I want/ need? there?

What does it come
Will it match ‘x’? Is it right for me? Will it be right for ‘x’ Will it ﬁt?
with?

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

Am I in the What will the Does it look like value Can I imagine Does it look
right place? experience be like? for money? owning it like fun?

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

we come to websites
Has it got that feature I Is it what I would Help me to
Is it good quality? Do I trust them? with many unanswered
need? expect from questions that photos it
them? understand
can help to address.

remember how hard
reading is online,
photo’s are easy to
Where will Ibe sitting/ in a short
consume
Does it look period of time. there
Will be people
Is it safe? Do I like it? staying/ watching
comfortable? like me there?
from?
41

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

pathos
(EMOTION)

ethos logos
(CREDIBILITY) (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.

Rational appeal (LOGOS) Emotional appeal (PATHOS)

Will it match ‘x’? Will it fit? Does it look good?

Is it right for me? Is this what I need? Will the experience be good? in order for a
so
photo to be useful
and persuasive it
must communicate all
Where is it? Will it be right for ‘x’ Entertain me! of the components
of rhetoric.

What do I get? Is it good quality? Do I want it? i’ve added a fourth
around social/
status appeal.
How does it work? Is it safe? Does it look like fun? a photo of a luxury
car for example may
help the user to
imagine how others
will perceive them if
they owned it.
Reputation/ brand appeal (ETHOS) Social/ Status appeal

Does it fit with the brand? What will I look like with it?

What qualities do I assume it has What will other people think?

These guys know what they are doing Is it for people like me?

If they made it it must be good How will this make me look?

Will this help me to fit in?
44

assessing photos using a rhetoric framework

Rhetoric scoring framework

rational

brand

social
emotion

useful?
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

this photo
immediately conveys
the benefits of the
product.

i can see how it would
be useful.

i want one!

brand
rational
emotion

useful?
social
http://www.joby.com/gorillapod

be careful when setting expectations

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.

brand
rational
emotion
customers got very upset

useful?
social
when just a shirt arrived in
the post.
http://www.ctshirts.co.uk

match the brand, or maybe ‘define’ the brand

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

brand
rational
emotion

useful?
social
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.johnlewis.com http://www.ebay.co.uk

convey the intangibles

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.

brand
rational
emotion

useful?
social
http://www.bentleymotors.com

credibility

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

brand
rational
emotion

useful?
social
older people.

http://www.arkive.org

show scale

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

brand
rational
emotion

useful?
social
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

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!

brand
rational
emotion

useful?
social
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.

conduct a 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!

hoto audit
P
e
•Audienc

•Task e
P urpos
•Out come/
e
m essag
imary n
•Pr b e show h
is Will h this w
xt - th and wit
•Conte urney
the jo ve
o bjecti
ercial
•Comm

http://www.thebelfry.co.uk 61

does this look familiar? 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

nd a
connect with because they

beli
don’t look real.

bus in ess ccess
on su mak
cussed to
“i’m fo er it takes
w hatev
ca reer” o f a ma
j
or vp orks ha
e seni
h w
da is t mpany. She r fools
bren al co fe
na t ion ’t suf
d doesn
h ard an
sk s are:
her key ta s
o recast
s ales f
- ch ecking
s
r eport
- ru nning
t argets
- se tting
http://www.createyourownrealitynow.com

LOOK AT the difference

teac her
ret ired
er the
pet t to mak
e the
most
“i wan ment”
retire
a
o r 6 ye
e tired f eacher
s been r r as a t
pe ter ha ul caree
f
s uccess
:
but when e start to use
s arwe
k
her k ey tas photos of real people we
ct
can immediately begin odu
pr to
e
d ing th
empathise with them.
rstan f
- und e believable photos such as rans
this one really final
t
ttoe bring giving
ouvalueh life thus
t
kingthem
personas
- wor dv
with a
as ux

etings
deliverables.
e
in g up m
- sett

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!

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.

66

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-ﬂickrbomb 67

here are some more resources on the topic

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

How to Use Images
Lindsey Marshall and Lester Meachem

my plea to you

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

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

Thanks! feel free to
drop me a line!

James Chudley
@chudders
www.cxpartners.co.uk

http://jameschudley.photoshelter.com/

70

How to use photos to improve the user experience

More Related Content

Viewers also liked (8)

Similar to How to use photos to improve the user experience (20)

More from cxpartners (20)

Recently uploaded (20)

How to use photos to improve the user experience