Photos of real people (not shiny models) are important for believable persona profiles. You can add extra context to your personas by adding photos to illustrate other aspects of their lives like their working environments too.
In this short video I talk a little bit more about this and show how a photo came together that I used to illustrate the personas chapter in my ’Smashing UX Design’ book.
I had a great conversation recently with someone who was responsible for the selection of photos on her corporate website.
Her main problems were:
1. How can we measure the success of the photos that we change?
2. How can I determine the quality of the photos that we use on our current site
After a broader conversation it became clear that in order to answer these questions she needed to take a more strategic approach.
During the call we worked through what I think presents a sensible strategy for improving the quality of web photos that you could apply to your own digital product or service.
1. Define the role of photography within your product/ service.
Create a photographic strategy document that explains how photos should be used to communicate your brand, your proposition and how your product / service meets the needs of your customers.
This will become your ‘rule book’ that will be used in the future to guide the selection of photos for your digital product/ service. Treat it as a hypothesis that you can test and refine during this process.
Use tools like customer experience maps to plan what types of photos you will need to meet both business and user requirements throughout the entire customer lifecycle/ journey.
2. Take stock of what you have
Create an inventory of the photos that you have and audit them using your style guide. Get some user input to help to understand what your photos are communicating to them at the moment.
List the photos you can use and the ones you need to lose.
3. Work out what you need
Your experience map will provide a complete picture of what you need and your audit and inventory will have told you what you have. The gaps represent what you need to shoot/ commission/ locate (some useful sources here).
4. Shoot and measure
Once you have got the new photos you need publish them and measure the effect that they have both qualitatively and quantitatively.
5. Learn and iterate
The role and impact of the photos within your digital product/ service will continually change. As your knowledge grows you should regularly update your photographic strategy (and the photos you use) to reflect both the changes in your business strategy and the usage of your product.
Compare your results to the benchmark you defined at step 2 to keep track of your successes and failures.
- - - -
I find that a lot of 'strategy’ stuff I read is often long winded and vague so I have deliberately tried to make this short and to the point.
In the early days of e-commerce, we studied how seasoned hiking customers bought hiking boots online. Two sites in our study, L.L. Bean and REI, both sold virtually identical boots at the same price with practically the same marketing copy. Yet the customers we studied were far more likely to buy the boots on the REI site than on the L.L. Bean site.
Why? Because the product pictures on the REI site showed the bottoms of the boots, whereas the L.L. Bean imagery only showed the boots standing upright. For people experienced with buying hiking boots, the tread on the bottom is important. Choosing a tread, for some hikers, can be a matter of life or death.
It’s a great example of using user requirements to inform your photo strategy.
My new eBook 'Usability of web photos' is now available!
It is with great pleasure that I can now announce that my new eBook ‘Usability of web photos’ is now available to buy from Five Simple Steps (£2).
I believe that this is the first book of it’s kind on this topic.
I’m particularly excited because within it I share my new photo usability checklist (Excel, 83kb). It is a simple tool for you to use to evaluate the usability and effectiveness of photos in your own work.
The book will appeal to anyone who wants to learn more about the impact that the photos are having within their digital product or service. It will also be useful for photographers to use to help them to plan to take more effective and usable photos.
Within the 60 odd pages of the book I cover:
Part 1 - What are usable photos and why are they so important?
I explain what I mean by a usable photo and introduce some of the psychological reasons behind why they are so important.
Part 2 - Photo usability stories from the coalface
In every research project I see usability problems with photos. In this chapter I share some of my favourites.
Part 3 - How do you know if a photo is usable or not?
I have developed a photo usability checklist for you to use to evaluate the usability of photos in your own projects. In this chapter I introduce the checklist and explain it in detail.
Part 4 - The digital design process and web photo usability
I interviewed a commercial photographer and a digital designer to understand the issues they face when producing and working with the photos that we see online. This chapter identifies some of the problems that we face in typical design projects that directly impact upon the photos that end up on the web.
Part 5 - User-centred design techniques to improve photo usability
In this chapter I share some techniques that I’ve used during user centred design projects that have helped to improve the usability of the photos that were selected for the final product.
Nice summary from Jacob here - ’When used properly, photos are effective, information-dense content that can quickly send your intended message to your audience. However, using the wrong photos can degrade your users’ experience on your site. In this article, I’ll go over 8 potential issues your photos can have that will lead to poor website usability.’
On a recent persona project I thought I should practice what I preached and get some decent photos.
The whole point of personas is to bring real users to life so that project teams find it easier to understand and empathise with their customers.
I often see personas that use stock photos of models to represent customers of a product or service. The problem with stock is that the models often look fake. This clearly causes problems when using it for personas which must be believable to be successful.
We had recruited actual customers of my clients service to take part in some research at our offices. This presented an ideal opportunity to get easy access to real people to take photos of.
I thought that we could take a quick full length portrait of them after they had finished, we we could then crop as we needed to suit the final format of the personas.
I set up a simple studio (as above) in the office but you don’t need to use lights or a back drop to do this (although it made doing the work in post production easier).
We asked all of the customers for permission to do this and they all signed model release forms.
We created booklets of the final persona profiles for everyone at my clients business, as well as 4 life-size cut outs of the final personas to ‘live’ in our clients office.
Ideally I’d have liked to have shot them in their own environments but given the logistical challenges this presents, dropping backgrounds in using photoshop might be the next step.
“Coming from Five Simple Steps in January 2013, Pocket Guides are concise ebooks, focusing on specific and timely aspects of web design and development, each written by experts in the industry – and all for the price of your favourite coffee.”
This concise eBook talks about photos in terms of usability for what I believe is the first time.
I discuss what the qualities of a usable photo are, share case studies of where I have seen photos have a significant impact upon the user experience and propose a new framework to use to evaluate the usability of web photos.
Image a property website that didn’t show photos. Inconceivable isn’t it. Being able to get a good look at a property is a fundamentally important user task that property websites must support well.
The Foxtons website is very impressive, particularly in its use of photography.
The photos are huge and allow the user to get a clear idea what the property looks like. More importantly they allow the user to imagine living there.
Foxtons realise the importance of great photos in shifting properties. They realise that people love to browse property websites to dream about the lifestyles they could lead.
The photos are critical for users as they help us to determine value for money and whether we want to view a property. These primary user tasks are supported almost entirely by the photographs.
User experience designers understand what these primary tasks are and also understand the commercial objectives of the site owner, yet we do little to influence the photos that are shown. Weird isn’t it!
These photos stand out because they are shot in a different way to standard second hand car photos. That immediately makes them different and interesting. The photos were also shot in some lovely golden light which just makes the car look more desirable.
Fundamentally, the photographer has thought a bit about what they are doing which made a huge difference to the end result.
More proof of the importance of good photos when trying to sell products online!
I was looking through a few commerce sites for a client and was amazed at the diversity of approaches to photos they took.
One that stood out to me was H&M.
The first thing that grabs you is the use of photos through the entire site. They use large and bold photos on every page you visit en route to the product page.
The default photo size on the product page is quite large and certainly bigger than many of the competitors that I looked at.
The alternate views were abundant and useful.With this shirt for example, you get a variety of angles and also the choice to see it on and off a model.
The zoom options were also interesting. They offer a click to zoom and then drag to navigate as well as a ‘view full screen’ option that loads a much larger photo. The drag option fails however on mobile devices such as the iPhone as you can’t drag the photo.
It was a really interesting exercise to compare so many sites side by side and I had forgotten how useful it can be to take a load of screen shots and see the different approaches that people were taking in terms of photography.
The photos on sites like Boden, Mamas & Papas and H&M were so dominant it got me wondering at what point the photos became available within the design process. I can just imagine how spare the wireframes must have looked with huge boxes with crosses in them everywhere!
Another interesting observation was how disjointed the photographic style can become on sites like Amazon which essentially act as an aggregator, as opposed to say Mamas & Papas where all the photos fit a clearly defined style guide.
I’d recommend creating a wall of screenshots early in the design process to give you a very quick feel for patterns and opportunities to differentiate yourself from the competition.
Advantages and disadvantages of photo zoom options
Online photos are hugely important but what is also important is what you can do with them.
Users often want to get a closer look at photos and different websites offer different ways of letting them achieve this.
I’ve observed some interesting user behaviour around the classic implementations of zoom that I thought i’d share in this quick summary.
Display in new window
New window offers more space to show product photos at a larger size.
Zoom often allows many levels of magnification to zoom into specific details. This is great as long as photo resolution is sufficient to display correctly at high levels of magnification.
Opens a new window, annoying particularly on mobile devices.
User loses the product information.
User may have to still zoom to see specific details.
Once zoomed in user will then have to zoom out to orientate themselves.
You dont get lost within the photo when you zoom, the original is always available to orientate yourself.
You remain on the same page as opposed to the new window method.
Mouseover won’t work for tables and phones so the zoom option is often completely removed for these devices (although users will use zoom gestures to compensate).
Requires a certain level of dexterity to use properly.
Easy to trigger by mistake.
You can only zoom in to one magnification.
Space to display the close up view may be limited due to the layout of the page. The size of the original photo may be compromised in order to display close up.
Zoom in situ
User can determine how far they zoom into the photo so are given a greater amount of control over what they see.
No other parts of the page are obscured when the user zooms into the photo.
Once zoomed in to a high level of detail its easy to become disorientated and then need to zoom all the way out again
Photos are often not available at high enough resoulutions to display legibly when user zooms right in
Users will often need to zoom and drag the photo to get to see what they want. Now all users will be aware that dragging is possible so prompts can be a useful addition.
Display in lightbox
The product is displayed at a larger size by default and look great as a result!
The user can still see the source page so as lost or distracted as they potentially could via the new window method.
The space that this method affords can be used to display alternative thumbnails.
In the examples given the user has chosen to zoom but is just shown a larger photo that they cant subsequently zoom into. Some lightboxes will offer options to zoom which is preferable. Some hide zoom options until user rolls over photo which causes problems for touch dependent devices.
I’ve had a few really interesting chats this week about retina displays.
I’m trying to understand what all the gazillions of photos that have been scaled to suit the constraints of the old web resolutions are going to look like when viewed on retina displays.
My assumption is that they are going to look pretty rubbish and that this is some kind of time bomb just waiting to go off.
There seems to be a real problem with photos because they can’t be made into vectors which would just scale beautifully with no loss of quality.
The solution seems to be to upload different variations of the same photo. If the user is viewing the page with a retina display a media query detects that and serves the higher resolution photo. Problem solved.
But what about all the sites that have no larger resolution alternative to serve i.e. the majority of sites currently on the web?
Surely all site owners that care about the photos on their sites are going to have to re-upload higher resolution versions to get around this issue. The interesting problem we then have is having mobile devices with 3G connections which are trying to download larger image files.
Retina displays seem to have introduced all manner of issues that the web design and photographic community are really yet to get their head around. The impacts will be significant and I get the feeling that we lack a clear idea of what to do about it!
On a related note while doing some research on issues around photos and responsive design I found adaptive-images.com which serves up different versions of photos to suit the device being used. This video gives a great introduction to the service.
I was asked today by Alistair what I meant by the usability of online photos?
It’s interesting to consider that in reality photographers will always be thinking about how their photos will be perceived and what impact they want them to have, but they will never articulate this using terms such as ‘usability’ or 'user experience’.
A photographer will take a photo in a particular way to illicit a particular response. We design digital products in a certain way to illicit a particular response. It seems fitting and appropriate that we could then share a common vocabulary as we regularly use the output of the photographers craft in our work.
So let’s coin a phrase, what is a usable photo?
A usable photo is one that has a positive impact upon someone that views it. It may help them with their task, make them happy, trigger a memory, remind them of something, help them to choose or to illustrate a point.
A usable photo is easy to interpret, has a positive impact upon the overall experience of using something.
But of course usability is only part of user experience design.
ISO 9241-210 defines user experience as “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service”.
Given this definition it becomes immediately apparent just how powerful photos can be in terms of influencing peoples 'perceptions and responses’.
This is why I believe photos are so important and we should be doing more as a community to improve the usability of online photos.
TED talk from Nat Geo photo director on the power of photos
National Geographic know all about the importance of great photos. David Griffin shows some wonderful photos from the magazine and demonstrates the story telling power of photography in what he calls ‘visual narratives’.
Grab a cuppa and spend 15 minutes in the company of some of some truly wonderful photos.
The photo director for National Geographic, David Griffin knows the power of photography to connect us to our world. In a talk filled with glorious images, he talks about how we all use photos to tell our stories.