The psychology of stock photography
Stock photos are often used in web design because they are easy to get hold of and cheap to buy.
We often see the impact of selecting the wrong type of photo within our user research. Users often perceive them as being cliched, staged and cheap.
But if you have no choice other than to use stock what sorts of photos should you go for?
This article offers some guidance on what types to choose and what effect they might have on the user.
One of the great things about getting out and about talking about photo UX is that people share their stories with you.
After my UXCambridge talk on ‘Usability of web photos’ @happygeneralist came over and said hi and shared a great example.
Scarva are an online supplier of clay and pottery. You can buy it in various quantities from a 12.5kg bag right up to a tonne.
Because it’s hard to imagine what a quantity of something like clay will look like when you receive it they use photography to show you.
This photo above shows you what 25kg of clay looks like so you can clear a suitable space in your studio for it when it arrives.
A nice example of a clever use of photos that improves the user experience, thanks @happygeneralist!
I’m delighted to announce that I’m writing ‘Usability of web photos’ which will be out in the new year.
The book is one of the new 5 Simple Steps ‘Pocket Guide’ series.
“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.
The use of photos by Buffalo on their website has clearly been very carefully considered.
Screenshot of the homepage from Buffalo.co.uk
The trend of using large photos in web design isn’t new but examples such as this prove just how effective it can be.
The composition of this shot is interesting too. The subject is small and off centre in the frame but faces the navigation, and as such draws attention to it.
The photo also communicates escapism, the wild and also poor weather - all things that Buffalo want to associate themselves with.
Additional messages that Buffalo wish to convey to potential customers through their photography are quality, craftsmanship, heritage and ‘UK’ amongst other things.
They use photos to do this quite brilliantly as you can see on the ‘About’ page.
Screenshot of the ‘About’ page from Buffalo.co.uk
Photos are a brilliant asset to use to tell stories. Buffalo use customer stories as testimonials to the quality of their products.
The photos add both credibility and evidence to support the stories.
They also help the viewer to imagine themselves in that situation and to consider how important good clothing will be in that situation.
Screenshot of the ‘Stories’ page from Buffalo.co.uk
Yet more proof (if needed) of the impact that photos can have when used effectively!
W3C responsive & retina photo guidance
Advancements such as responsive design techniques and retina displays have thrown up all sorts of issues with regards to the use of photos.
This document has just been released by the W3C which offers some useful guidance for designers and developers
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!
We’ve all seen the varying quality of photos on auction sites such as eBay. Listings with a selection of well shot photos are much more likely to sell than those without.
This article on fstoppers.com shows how well taken photos add tremendous value to a car that could have otherwise looked pretty average.
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!
Screenshot from www.hm.co.uk showing product detail page.
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.
