’Usability of Web Photos’ from UXCambridge & FOWDPresentation Transcript
hi! I’d like to tell you why i think that photos areUsability of web photos the unsung heroes of user experience designJames Chudley @chudders UXCambridge & FOWD 1
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
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
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
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
BIG announcement - Usability of web photos eBooki’m also writingan ebook onexactly thistopic!keep your eyespeeled for it inthe new year!http://www.fivesimplesteps.com/pages/pocket-guides 6
#PHOTOUX@chudders please use these to connect on twitter. 7
Who are you?! UX’ers? All of the above? Developers? Photographers? Designers? who are you?! 8
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
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
a photo isdesigned.it is taken insuch a way tocreate a certainresponse fromthe viewer. 11
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
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 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 13
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 whatShow 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
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 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 meIs 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
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
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
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
So why are photos important? let’s look at why photos are so important.
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
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
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
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
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
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
This is better you can see the difference here. real people doing real things. 26
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
Photos generally fit into one of two types
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
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
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
some examples of photos being heroes and villains lets look at some more examples.
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
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
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
Show me the benefits photos like this enable the customer to instantly understand the benefits of a particular product. http://www.joby.com 36
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
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
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
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
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
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
Don’t forget just a reminder. when it comes to thinking about photos when designing interfaces we do this! bonkers isn’t it! 43
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?
pathos (EMOTION) logos ethos (practical)(CREDIBILITY)aristotle came upwith the idea ofrhetoric.he said that apersuasiveargument must belogical, come froma credible sourceand have anemotional impact.we can use this toevaluate photosbecause theycommunicatemessages. 45
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
consider how usable these photos are how usable are these? use the framework to find out!
Framework for evaluating web photos1. Photo fundamentals2. effectiveness Rational appeal (LOGOS) Emotional appeal (PATHOS) Reputation/ brand appeal (ETHOS)3. Message communicated i’ll publish the final evaluation4. anticipated user response framework in my book 48
Framework for evaluating web photos1. Photo fundamentals - focus, composition, size, exposure, quality, crop2. effectivenessRational appeal (LOGOS) - useful?, helpful?, constructive?, instructional?Emotional appeal (PATHOS) - do i want it?, entertaining, aesthetically pleasingReputation/ brand appeal (ETHOS) - appropriate?, match the brand?, Believable? here is the framework as it3. 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
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/
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
Designers problems No access to photographer Lack oflack 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
let’s push things forward so what can we do to improve the usability of online photos?
Annotate your wireframes we can annotate our wireframes to convey the job of the photo to our designers. 55
Drop photos into wireframes add representative photos to wireframes, particularly for user testing. it adds an extra level of depth to user feedback. 56
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
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
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
Talk about them in your reports make sure you highlight the usability issue caused by photos within your usability reports. 60
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
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
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
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
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
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
you want more?!
My blog .co.uk check out photoux.co.uk. for more of the same. 68
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
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
Stefano Tirloni