Date post: | 17-Aug-2014 |
Category: |
Design |
Upload: | cxpartners |
View: | 16,172 times |
Download: | 3 times |
1
James Chudley @chudders UXCambridge & FOWD
Usability of web photos
hi!
I’d like to tell you why i think that photos are the unsung heroes of user experience design
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.
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.
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.
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
6
http://www.fivesimplesteps.com/pages/pocket-guides
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!
7
#PHOTOUX
@chuddersplease use these to connect on twitter.
8
Who are you?!
Designers?
Developers?
UX’ers?
Photographers?
All of the above?
who are you?!
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.
10
It all started with meals on wheels
Photos from http://www.wiltshirefarmfoods.com/
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.
11
a photo is designed.
it is taken in such a way to create a certain response from the viewer.
12http://www.ikea.co.uk
SIMPLE PHOTO - COMPLICATED STORY
let’s pull this photo apart and consider it from the perspective of the photographer, the user and the client.
13
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 made deliberate decisions that have resulted in the result they wanted.
14
Convey the benefits
Demonstrate usage Entertain Educate & help
understanding
Shock Illustrate a point Set expectations Persuade Get a reaction
Create desire Sell & cross sell Show quality Demonstrate features
Show uniqueness
Show scale & what’s included Give context Communicate a
propositionConvey a lifestyle
Support the brand
Inspire Show accessories Convey intangibles
Convey personality
Create 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.
15
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.
16
Why does the UX community ignore photos?
THIS IS WEIRDux’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?
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.
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?!
So why are photos important?
let’s look at why photos are so important.
20
There are quite a few of them online!
http://mashable.com/2011/02/14/facebook-photo-infographic/
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.
21
We are programmed to notice faces and emotions
http://www.nikewomen.com
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.
22
Reading is hard & we are lazy
https://twitter.com/
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.
Observations from the front line
23
i’ve seen loads of examples of where photos have led to good and bad user experiences.
here are a few examples.
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!
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.
26
This is better
you can see the difference here.
real people doing real things.
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.
Photos generally fit into one of two types
29
Photos are generally either useful
http://www.evanscycles.com
content photos are useful.
they help us in some way.
they also typically help the needs and goals of the business too.
30
Or not!
http://www.b2bcompliance.org.uk/
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.
31
These make me sad
http://www.superstock.com/
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.
some examples of photos being heroes and villains
lets look at some more examples.
33
Support the primary task
http://www.foxtons.co.uk
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! ; )
34
What shape is this mirror?
http://www.marksandspencer.com/Marks-and-Spencer-Flower-Design/dp/B001BFN4DS
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!
35
To convey the intangibles
http://www.buffalosystems.co.uk/about/
buffalo use photos brilliantly to convey intangible qualities such as heritage, quality, craftsmanship and expertise.
36
Show me the benefits
http://www.joby.com
photos like this enable the customer to instantly understand the benefits of a particular product.
37
Credibility
http://www.arkive.co.uk
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.
38
To show you how
http://www.ifixit.com
this site uses photos to guide you through a process.
you can check at every stage that you are doing it properly.
39
Humanising technology
https://sumall.com/about
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.
40
Consistency
http://www.johnlewis.com
vs
http://www.ebay.co.uk
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.
41
Let me look at it in detail
http://www.mothercare.com
zoom options that keep a photo of the original image while one zooms help users to orientate themselves.
42
Strategic use to help to sell
http://www.boden.co.uk
Emotional Rational
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.
43
Don’t forget
just a reminder.
when it comes to thinking about photos when designing interfaces we do this!
bonkers isn’t it!
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
ethos(CREDIBILITY)
pathos (EMOTION)
logos (practical)
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.
46
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?
these are the sorts of user questions that fit into this framework.
consider how usable these photos are
how usable are these?
use the framework to find out!
48
Framework for evaluating web photos
Rational appeal (LOGOS)
1. Photo fundamentals
Emotional appeal (PATHOS)
Reputation/ brand appeal (ETHOS)
2. effectiveness
3. Message communicated
4. anticipated user response
i’ll publish the final evaluation framework in my book
49
Framework for evaluating web photos
Rational appeal (LOGOS) - useful?, helpful?, constructive?, instructional?
1. Photo fundamentals - focus, composition, size, exposure, quality, crop
Emotional appeal (PATHOS) - do i want it?, entertaining, aesthetically pleasing
Reputation/ brand appeal (ETHOS) - appropriate?, match the brand?, Believable?
2. effectiveness
3. Message communicated
4. anticipated user response
change behaviour, decision making, sharing, change opinion, create desire
what is it saying to you?
here is the framework as it currently stands.
its work in progress and if you use it do let me know how you get on. (@chudders)
how usable do you think they are now?
so having applied the framework how usable are they now?
so how do photos get created and selected?
http://www.superstock.com/
52
Photographers problems
http://alistairhood.com
offline vs online
digital is the poor relation
cost
brief based on campaign idea not on user
needs
photographers work under specific constraints which often means that digital is the poor relation to offline media.
53
Designers problems
lack of assets
No access to photographer
Lack of landscape orientated
shots
retouching time Lack of guidelines
digital designers often have so few photos to work with.
good photos are hard to find and can be expensive.
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.
56
Drop photos into wireframes
add representative photos to wireframes, particularly for user testing.
it adds an extra level of depth to user feedback.
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!
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.
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.
60
Talk about them in your reports
make sure you highlight the usability issue caused by photos within your usability reports.
61
Use real people in your personas
“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 belindawe should be careful when we use photos in our own internal deliverables such as personas.
the job of a persona profile is to help people to empathise with the people they are designing for.
the photos must then be of people that look like real users of a product or service.
62
See the difference it makes
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
you can see the difference it makes when you use photos of real people.
we recently took photos of users after user testing sessions.
they met the clients recruitment profile so seemed like perfect candidates for personas.
it only took about 2 minutes to shoot them after user testing.
please make sure you have the necessary permissions from them to do this if you want to try it out.
63
Photo audits
•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
when evaluating a site use criteria such as these to conduct a photo audit.
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.
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!
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.
you want more?!
68
My blog.co.uk
check out
photoux.co.uk.
for more of the same.
69
Who the hell am I and why am I qualified to talk about this?
check it out on amazon - http://amzn.to/GX8rBI
keep an eye out for my new book on this topic over at
5 simple steps
70
Please join me on my bigger mission
to improve the usability of online photos.
“
”
thanks so much for checking out my slides.
please join me in my bigger mission!
@chudders