Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
'Usability of Web Photos' from UXCambridge & FOWD
1. hi!
I’d like to tell
you why i think
that photos are
Usability of web photos
the unsung heroes
of user experience
design
James Chudley @chudders UXCambridge & FOWD
1
2. Who the hell am I and why am I qualified to talk about this?
i’m a ux director
at cxpartners.
i spend my time
understanding
how people do
things and then
designing stuff
that works for
them.
2
3. Who the hell am I and why am I qualified to talk about this?
i’m also a
photographer.
i absolutely love
taking photos.
because of this i
pay particular
attention to the
photos i see being
used in my design
projects.
3
4. My blog
.co.uk
i blog at
photoux.co.uk.
This is a
collection of
thoughts,
examples and
ideas that relate
to photos and
user experience
design.
4
5. Who the hell am I and why am I qualified to talk about this?
i wrote ‘Smashing
ux design’ with my
colleague
@jesmond.
Ch.26 gives an
overview on typical
user and business
requirements from
web photos.
check it out on
amazon - http://
amzn.to/GX8rBI
5
6. BIG announcement - Usability of web photos eBook
i’m also writing
an ebook on
exactly this
topic!
keep your eyes
peeled for it in
the new year!
http://www.fivesimplesteps.com/pages/pocket-guides
6
8. Who are you?!
UX’ers?
All of the above?
Developers?
Photographers?
Designers?
who are you?!
8
9. My mission for the next 60 minutes
“to change the way
you think about
web photos ” i’m going to do
this by showing
you some
examples which
demonstrate
just how
important
photos are.
i’m also going to
share a new
framework to
use to evaluate
web photos.
9
10. It all started with meals on wheels
key user anxieties
were whether the
food would arrive
and who would
deliver it to their
elderly parents.
these photos
helped to
reassure the
users.
Photos from http://www.wiltshirefarmfoods.com/ 10
11. a photo is
designed.
it is taken in
such a way to
create a certain
response from
the viewer.
11
12. SIMPLE PHOTO - COMPLICATED STORY
let’s pull this
photo apart and
consider it from
the perspective
of the
photographer,
the user and the
client.
12
http://www.ikea.co.uk
13. the photographer
has made
deliberate
decisions that
have resulted in
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 13
14. Convey the Demonstrate Educate & help
Entertain
benefits usage understanding
Shock Illustrate a point Set expectations Persuade Get a reaction
Demonstrate Show
Create desire Sell & cross sell Show quality
features uniqueness
the business
stakeholder has
their own
objectives for the
photo and what
Show scale & what’s Communicate a Convey they want Support
it to
Give context
included proposition a lifestyle achieve. the brand
this is deliberate
because if the
image has to
contribute to the
Convey Convey objectives of emotional
Create an the
Inspire Show accessories business.
intangibles personality response
Quality & trust Demonstrate value Imagine ownership Show details Improve perception
14
15. 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 fit?
with?
Entertain me! Where is it? What do I get? Have I got one like it? How is it different?
the user has their
own goals and tasks
Am I in the What will the Does it look like value Can I imagine the photo can
that Does it look
right place? experience be like? for money? owning ithelp with. like fun?
we come to websites
with many
unanswered
questions that
photos can help to to
Has it got that feature I Is it what I would Help me
Is it good quality? Do I trust them? address.
need? expect from them? understand it
remember how hard
reading is online,
photo’s are easy to
consume in a short
Where will I be period of time.
sitting/
Does it look Will there be people
Is it safe? Do I like it? staying/ watching
comfortable? like me there?
from?
15
16. Why does the UX community ignore photos?
THIS IS WEIRD
ux’ers spend so much
time understanding
users and the clients
requirements and
ignore photos.
this is weird.
why do we ignore
photos when they
clearly have such an
effect upon how
people behave?
16
17. Am I on my own here?
IS IT JUST ME?
i asked my colleagues
whether they were
seeing issues in their
own research around
photos.
they all were.
it was at this point
that i started to
look into it and to
collect some stories.
17
18. Where are all the guidelines?!
i went online to try
and find some
guidance around
photos in ux terms
and found very
little.
is it any wonder that
the usability of web
photos is often so
poor?!
18
19. So why are photos important?
let’s look at why
photos are so
important.
20. There are quite a few of them online!
i would wager that
during the majority
of web visits people
encounter photos in
one format or
another.
we all carry cameras
now and it has never
been easier to publish
and share photos
online.
http://mashable.com/2011/02/14/facebook-photo-infographic/ 20
21. We are programmed to notice faces and emotions
as humans we just
cant ignore photos.
photos of people
will always attract
our attention. we
have a area of our
brains that is
dedicated to
recognising faces.
this site draws
attention to the
copy because of
where the athlete is
looking.
http://www.nikewomen.com 21
22. Reading is hard & we are lazy
we all know how
hard it can be to
read online.
we scan things to
decide what we want
to look at.
consider twitter.
you prioritise
reading tweets from
the people you like.
you do this by
scanning their
photos.
https://twitter.com/ 22
23. Observations from the front line
i’ve seen loads of
examples of where
photos have led to
good and bad user
experiences.
here are a few
examples.
23
24. Helping with a complicated purchase
photos can be really
helpful when
products are known
by many different
names.
consider stroller,
pram, pushchair,
buggy etc!
photos are also
useful when
considering practical
questions such as
will it fit into my
boot!
24
25. Dangers of using stock
stock photos like
these can cause
problems because
people find it hard
to empathise with
them.
often they don’t
look like ‘real’
people.
prospective
students wanted the
photos to show
them what life was
like at university and
these didn’t help.
25
26. This is better
you can see the
difference here.
real people doing
real things.
26
27. What messages are your website photos giving your users?
consider this photo.
a lone woman has
broken down on a
rural road and its
getting dark.
they use
photography
cleverly to map to
our anxieties.
27
29. Photos are generally either useful
content photos
are useful.
they help us in
some way.
they also typically
help the needs and
goals of the
business too.
http://www.evanscycles.com 29
30. Or not!
filler photos are
often used to fill
a space, to break
up text or to
‘cheer a page up’.
they generally
don’t have a
purpose other
than to add visual
appeal.
http://www.b2bcompliance.org.uk/ 30
31. These make me sad
stock photos such
as these are so
prolific on the web
because good
photography is
generally
expensive and hard
to get hold of.
not all stock is
bad though, often
people don’t think
about the impact of
the photos they
choose.
http://www.superstock.com/ 31
32. some examples of photos being heroes and villains
lets look at some
more examples.
33. Support the primary task
when people are
looking to move
they want to be
able to imagine
living in that
property.
large photos help
with that.
photos also show
features such as
drainpipes in the
living room! ; )
http://www.foxtons.co.uk 33
34. What shape is this mirror?
the mirror is
round but looks
oval because its
been shot at an
angle.
users use photos
to check they are
buying the right
thing, but when
the photos lie it
all falls apart!
http://www.marksandspencer.com/Marks-and-Spencer-Flower-Design/dp/B001BFN4DS 34
35. To convey the intangibles
buffalo use photos
brilliantly to
convey intangible
qualities such as
heritage, quality,
craftsmanship and
expertise.
http://www.buffalosystems.co.uk/about/ 35
36. Show me the benefits
photos like this
enable the
customer to
instantly
understand the
benefits of a
particular product.
http://www.joby.com 36
37. Credibility
the photo of david
attenborough
meant that users
trusted this site
and thought of it
as a valuable
resource.
despite having
never heard of it
before.
http://www.arkive.co.uk 37
38. To show you how
this site uses
photos to guide
you through a
process.
you can check at
every stage that
you are doing it
properly.
http://www.ifixit.com 38
39. Humanising technology
photos of people
are a good way to
bring a intangible
product such as
‘technology’ to
life.
we often associate
the perceived
personalities of
those working for
a brand, to the
brand.
https://sumall.com/about 39
40. Consistency
vs
look at the
difference that a
consistent
photographic style
makes.
the john lewis
example focusses
attention on the
product.
brands are often
recognisable from
their photographic
style alone such as
howies.
http://www.johnlewis.com http://www.ebay.co.uk 40
41. Let me look at it in detail
zoom options that
keep a photo of the
original image while
one zooms help
users to orientate
themselves.
http://www.mothercare.com 41
42. Strategic use to help to sell the role of photos
changes at
different points of
the site.
homepages and
section pages are
about emotion
whereas product
pages are all about
the hard sell.
Emotional Rational
http://www.boden.co.uk 42
43. Don’t forget
just a reminder.
when it comes to
thinking about
photos when
designing
interfaces we do
this!
bonkers isn’t it!
43
44. What QUALITIES DOES A USABLE PHOTO HAVE?
so what makes a
photo usable and
can we identify
some unique
qualities that we
can look out for?
45. pathos
(EMOTION)
logos
ethos (practical)
(CREDIBILITY)
aristotle came up
with the idea of
rhetoric.
he said that a
persuasive
argument must be
logical, come from
a credible source
and have an
emotional impact.
we can use this to
evaluate photos
because they
communicate
messages.
45
46. 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?
Where is it? Will it be right for ‘x’ Entertain me!
What do I get? Is it good quality? Do I want it?
How does it work? Is it safe? Does it look like fun?
Reputation/ brand appeal (ETHOS)
Does it fit with the brand?
these are the
What qualities do I assume it has sorts of user
questions that fit
These guys know what they are doing into this
framework.
If they made it it must be good
46
47. consider how usable these photos are
how usable are
these?
use the framework
to find out!
48. Framework for evaluating web photos
1. Photo fundamentals
2. effectiveness
Rational appeal (LOGOS)
Emotional appeal (PATHOS)
Reputation/ brand appeal (ETHOS)
3. Message communicated
i’ll publish the
final evaluation
4. anticipated user response framework in my
book
48
49. Framework for evaluating web photos
1. Photo fundamentals - focus, composition, size, exposure, quality, crop
2. effectiveness
Rational appeal (LOGOS) - useful?, helpful?, constructive?, instructional?
Emotional appeal (PATHOS) - do i want it?, entertaining, aesthetically pleasing
Reputation/ brand appeal (ETHOS) - appropriate?, match the brand?, Believable?
here is the
framework as it
3. Message communicated currently stands.
its work in
what is it saying to you?
progress and if you
use it do let me
know how you get
on. (@chudders)
4. anticipated user response
change behaviour, decision making, sharing, change opinion, create desire
49
50. how usable do you think they are now?
so having applied
the framework
how usable are
they now?
51. so how do photos get created and selected?
http://www.superstock.com/
52. Photographers problems
offline vs
online
cost digital is the
poor relation
photographers
work under
specific
brief based on constraints which
often means that
campaign idea digital is the poor
not on user relation to
offline media.
needs
http://alistairhood.com 52
53. Designers problems
No access to
photographer
Lack of
lack of assets
landscape
orientated
shots
digital designers
often have so few
photos to work
with.
retouching time Lack of guidelines good photos are
hard to find and
can be expensive.
53
54. let’s push things forward
so what can we do
to improve the
usability of online
photos?
55. Annotate your wireframes
we can annotate
our wireframes to
convey the job of
the photo to our
designers.
55
56. Drop photos into wireframes
add
representative
photos to
wireframes,
particularly for
user testing.
it adds an extra
level of depth to
user feedback.
56
57. Back off
be careful though.
ux’ers have a
chequered past
when it comes to
land grabs when
working with
designers.
we should share
our insights from
user research and
not be actually
choosing final
photos.
art directors and
designers are far
better than us at
that!
57
58. Using photos to tell stories to get empathy
photos are a great
way to tell stories.
we wanted people to
understand what it
was like to be
flooded.
flood victims sent
us their photos and
we interviewed them
about the
experience.
we used soundslides
to pull this all
together into a very
compelling result.
58
59. Talk to your designers
a simple way to
influence the
choice of photos
is to chat to
your designers.
they dont all
bite.
tell them what
impact photos had
in your user
research.
let them know
what job the
photos need to
do.
finding photos is
hard so your
insight will help
them to pick and
choose.
59
60. Talk about them in your reports
make sure you
highlight the
usability issue
caused by photos
within your
usability
reports.
60
61. Use real people in your personas
belind a
bus in ess ccess
on su mak
we should be
careful when we
cussed to use photos in
“i’m fo er it takes our own internal
hatev
deliverables such
w as personas.
ca reer” the job of a f a ma
o
j
or v p or
persona profile ks ha
seni
da is the any. She people ols
is to help w
bren al comp theempathise with
to r fo
ffethey
su
nation d doesn’t designing
people
are
hard an for.
ta sk s athe :photos must
re
he r key s
recast
then be of people
o
ales fusers of a
that look like
s real
- ch ecking product or
orts
service.
ep
- run ning r
t argets
- se tting
61
62. See the difference it makes
you can see the
difference it
makes when you
use photos of real
people.
we recently took
d te
photos of users
e re tire
after user testing
r th
sessions.
p ete they met the
clients
make
to
recruitment
t
“i wan irement”
profile so seemed
like perfect
m y re t
candidates for
personas. i t
b een re l
it er has aboutsfu
only took
t
pe2 minutes tocces
t a su shoot
er after user
afthem r
teache
testing.
please make sures are:
k
you have the s
ey ta
er k
hnecessary
permissions from ing t
nd
to rsta
them dedo this if
- un
you want to try it
e
out.
ou t th
- w orking
p meet
62
63. Photo audits
hoto audit
P
e
•Audienc
•Task e
P urpos
•Out come/
e
m essag
imary n
•Pr b e show
is Will journey
when evaluating
a site use
xt - th in the
criteria such as
•Contes point onten
t
these to
a t thi s what c
conduct a photo
ith thi
audit. a nd w e
b jectiv
rcial o
•Comme
63
64. Use task models to create a shot list
task models tell
you how people
go about doing
certain things.
use them to help
to decide what
sort of photos
will be useful at
different points
of the user
journey.
this gives you
your shot list.
64
65. Sketch a brief
sketch out an
idea for the
photo you want
if you are
getting photos
commissioned.
think of it as a
wireframe for a
photo.
we are good at
wireframes!
65
66. So to recap
photos will be having a massive impact upon the
way that people are using your products.
you need to understand the impact that
they are having.
you need start taking photos seriously
within your ux design and research please try to
just do
something to
improve the
usability of the
photos on your
next project.
66
68. My blog
.co.uk
check out
photoux.co.uk.
for more of the
same.
68
69. Who the hell am I and why am I qualified to talk about this?
keep an eye out
for my new book
on this topic
check it out on over at
amazon - http://
amzn.to/GX8rBI 5 simple steps
69
70. Please join me on my bigger mission
“to improve the
usability of
online photos.”
thanks so much
for checking
out my slides.
@chudders please join me
in my bigger
mission!
70