How to use photos to improve the user experience

Hello UPA 2011!‘How to use photographs to improvethe user experience’James ChudleyUser Experience Directorcxpartners@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, ispend a disproportionateamount of time thinkingabout photos!but I realised that i hadnever really thoughabout photos in ux terms. 4

why are photos neverreally discussed in uxterms?! 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 photosin your research?How many of you influence photo selection on yourwork?

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 adcampaigns that aredesigned to shockand causecontroversy. 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 ourfamily holidaysover the years.

to the stuff themakes us laugh...

WHAT ARE YOU THINKINGABOUT 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. http://www.wiltshirefarmfoods.com/

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. http://www.wiltshirefarmfoods.com/

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 EVERTALK ABOUT PHOTO UX? weird isn’t it?!

photos are often takenin a way that willinfluence the way theyare perceived.in this example i usedcertain camera controlsto create a certainresult.ux designers are thesame. we make deliberatedesign decisions tocreated an anticipatedresponse or behaviourfrom 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 speedEnsure 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 uniquenessShow 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 comeWill 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 toIs 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 atsome differentphotos and examinethem from a usabilityperspective.

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 uxprofessionals to improvethe photos that are used inthe stuff that we work on?here are some ideas thatyou 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 moreservices such as this one tosource placeholder photosfrom.finding photos can be timeconsuming but sites such asflickr 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

http://www.photoux.co.uk	756
http://paper.li	89
http://jchudley.tumblr.com	27
http://www.scoop.it	17
http://www.cms.rk.edu.pl	6
url_unknown	5
https://twitter.com	4
http://moodle.chclc.org	4
http://twitter.com	3
http://a0.twimg.com	3
http://trevorwong.weebly.com	2
http://us-w1.rockmelt.com	1
http://photoux.co.uk	1
http://www.slideshare.net	1
http://1545506.huweb.nl	1
https://si0.twimg.com	1
http://www.weebly.com	1
http://www.mindgum.co	1
http://www.linkedin.com	1

How to use photos to improve the user experience

by cxpartners on Jun 24, 2011

Accessibility

Categories

Upload Details

Usage Rights

19 Embeds 924

Statistics

How to use photos to improve the user experience Presentation Transcript