'Usability of Web Photos' from UXCambridge & FOWD

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