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.
There is a dedicated part of the brain that is dedicated to processing faces called the Fusiform Facial Area (FFA). We are particularly good at identifying faces within things that we look at, regardless of whether they actually contain a real face or not.
This phenomenon is known as pareidolia. We’ve all seen faces in the clouds and some of us have been lucky enough to profit from images of famous faces in cheese sandwiches!
Screenshot from BBC website showing image of the Virgin Mary on a cheese sandwich
It is because of the FFA that photos of people are so powerful. We can’t help but look at people when they are present on a poster, an advert or a website.
We are particularly attracted to their eyes, again this is a hard wired response. Photographers always make sure that eyes are in sharp focus when photographing people and animals for exactly this reason.
In digital product design we can use this knowledge to our advantage. Not only are we drawn to people’s eyes but we are drawn to look at what other people are looking at.
This photo from Nike Women makes use of this by using the gaze direction of the athlete to shift the attention of the viewer from the athlete to the product description.
Screenshot from Nike Women showing the influence of gaze direction upon where you look
This photo used on Puma.com is also very clever. It uses Usain Bolt’s trademark pose to draw attention to the call to action that the designer wants you to notice and to interact with.
Screenshot from Puma showing how gestures can determine where you look
Our gaze direction can also be influenced when using photos of animals. This tiger photo on the wonderful Arkive website guides your attention to the supporting copy to find out more about the species.
Screenshot from Arkive showing how even photos of animals can influence where you look
So if you are designing a page that has some elements that you really want to see, using photos in this way can be a great way of influencing what people look at.
Whilst doing some research for my UPA poster on the UX and psychological qualities of usable photos I came across made.com.
The quality of the photography is outstanding. The products not only look great but the size and variety of the photos give the shopper all they need to compare and choose the right product for them.
It’s also interesting to note how significant the photos are within the design. If you take the photos away you are left with pretty much nothing.
I wonder how the UX design process worked for this site. At what point did they have the photos? Was the site design always going to lean so heavily on photos? I wonder if they dropped any photos into wireframes for user testing purposes.
So a great example of a site with great photos and also a reminder of how important photos are to great websites.
I was thrilled to be interviewed by the behavioural psychologist Susan Weinschenk (@thebrainlady) recently on the topic of photo UX for her series of UX podcasts.
We covered a wide range of topics in the half hour chat from what UX designers can do to improve the quality of photos used in the products we design, to stories from my user research where photos have significantly influenced the user experience.
We even strayed into more controversial topics such as adding photos to wireframes and how to test photos with users during the design process.
You can listen to the podcast and read some of Susan’s fantastic articles on psychology and design over at her website ‘What makes them click’.
“I eagerly await new concepts and processes. I believe that the electronic image will be the next major advance. Such systems will have their own inherent and inescapable structural characteristics, and the artist and functional practitioner will again strive to comprehend and control them.”—Ansel Adams, 1981
Common garden spider photographed to draw attention to the eyes
The way in which a photo is taken can have a direct impact upon how it is viewed. Focus is a good example of this as the photographer can which elements of a subject are in focus and also the ‘depth’ of focus within the photo.
I shot the spider photo using a wide aperture which I knew would result in a narrow area of focus, also known as a ‘shallow depth of field’. This was a deliberate choice that I made because in this instance I wanted to draw attention to the eyes. You’ll notice that little else in in focus in front of or behind the eyes.
So by controlling the depth of field we can influence what people look at within a photo.
Frost needles photographed to keep everything in focus
By way of contrast, pretty much all of this photo is in focus. In this instance it is the composition of this photo and the specific content of the photo that determines what you look at.
So if you want to draw attention to a particular aspect of a subject a photo with shallow depth of field might be a good choice. If you want to provide a more natural look that represents the whole subject equally then you can do that by selection photos which show all of the subject in focus.
But what if the user could decide what they want to see in focus and not the photographer?
A new system developed by Lytro allows you to do exactly that as this video demonstrates.
So is the future of online photos ones that can be retrospectively focussed to suit the specific needs of the viewer? Possibly not but this technology clearly has clear benefits in terms of allowing new levels of control within post processing and beyond.
Have a play with refocussing some images over at the Lytro website.
I’m in the market for a new pair of jeans. I have spent a hours browsing the web and have been reminded of how consistency in photographic style can have a significant impact upon usability.
Consider the example above from asos. The products are all photographed identically. This makes it easier to focus on the the products and not the visual differences that result from them being photographed in different ways.
For a retailer that stocks a variety of brands this consistent photographic style makes sense because it makes it easier for customers to compare one quite different brand with another.
It’s interesting to see just how consistent the photos are. The exposure is identical in every photo and you can see from the shadows behind the legs that the lighting set up is also identical. The cropping of the photos is also identical, again to allow the customer to make easy comparisons between the products.
So what happens when there isn’t a consistent photographic style?
Immediately you can see the difference. The eBay example is so much more distracting and you find yourself scanning all over the page in an effort to try and compare like with like.
So if your customers are struggling to choose between the products on your site, have a look to at your category landing pages and see how consistent your photographic style is to see how you measure up.
During my trawl of the web to find more on the topic this is one article that I found really useful. Jared talks about how web graphics help, and when they don’t and he makes some great points on the use of photos.
He makes a great distinction between the two main types of photos that you commonly see used on websites, ‘content’ and ‘ornamental’ photos.
'Content' photos are useful photos and they add something of value to the page. Examples of content photos include product photos that help customers to choose the right product for them.
There are many different types of content photo that you can use such as photos that help people to read, learn, remember, make decisions and focus their attention. I am pulling these together in a poster with Susan Weinschenk at this years UPA conference, that explains the psychological and UX principles behind what makes these types of content photos so effective. I will share the poster here once its finished! UPDATE! Our poster now available to download.
'Ornamental' photos can be considered as filler content. They add nothing of direct value to a page other than potentially splitting up large chunks of content. Cheesy stock photography often lurks here, beware!
So before you add a photo to your page, consider what its job is. Is it a ‘content’ photo or an ‘ornamental’ photo? Is it necessary? What value does it add to the user or to the site owner?