Usable Web Photography

The importance of investing in good photography for digital projects is frequently underestimated or overlooked.

It often ends up being an afterthought or filler – just “decoration” for the page. Depending on when (and how) content gets collated, the photos may not appear until late on in the design stage. Or worse, during the build! They’re reduced to grey boxes and lines in wireframes and prototypes. There’s rarely a strategic purpose, other than to “break up that chunk of text”.

Every other element in a site design has been placed there after careful consideration. How will x be used, how will x be perceived by the user? So where does that tender-loving-care go when it comes to the photography?

"Photography and illustrations are powerful and emotive tools that express our values just as strongly as colours and typefaces."

New technology allows us to use bigger/better/brighter photos without killing our devices. But users still aren’t going to wait for a dozen images to load. Particularly if after waiting for them, they’re only there for decoration!

We still have to be selective and smart with how we handle photography for the web. This post aims to explain why our web photography should be usable. But first…

What is “usable” photography?

Usability ISO 9241 Part 11: (1998) [link]
The extent to which a product can be used by specified users to achieve specified goals with:

  1. effectiveness (task completion by users)
  2. efficiency (task in time)
  3. and satisfaction (responded by user in term of experience) in a specified context of use (users, tasks, equipments & environments).

So, what makes a photograph usable? Well, it should be effective, efficient and it should meet a need. Does that sound like just “decoration” to you? No, us neither – unless your need is completely superficial…

“Photos are the unsung heroes of digital design. They have a huge impact on conversion, user trust, our emotions, and the usability of the digital products and services we use every day.”

First Impressions

It’s pretty well-documented that people skim content more than they read it on-screen. It saves time! We know that not everything on a page will be 100% relevant to us, and we’ve got pretty good at finding the important stuff in a hurry. A bit like skipping to your favourite section in a newspaper…

“We scan pages for information, and photos support this scanning behaviour because our brains find them easy to process. Our ability to process photos exacerbates our laziness. We will always look for the easiest way of completing a task… If a photo helps to make a task easier then the amount of people that successfully complete the task will increase.”

Wait, what? People aren’t even reading the content?! What a disaster! Don’t panic, it’s not all bad. Now we know how people tend to read online, let’s make the most of it. Let’s make it even easier to give your users/customers/clients what they need at a glance!

Let’s look at some sites that do just that…


Made.com

Features

A sense of scale…
Products are shot with people using them, or tailored selections of furniture – giving context and a sense of scale. Scale diagrams and product dimensions support the imagery. Packaging dimensions are also included – a life saver if you’ve got narrow doorways or a staircase to navigate. Copy and imagery working in harmony to help the customer!

The little details…
It’s common to see “faked” product shots on furniture sites. One product image is (noticably) recoloured to show a dozen variations. Not on Made.com! Products with colour variants sit side-by-side for easy comparison. There are close-ups of product details – like fabrics, seams etc.

Clarity cuts costs…
Most home furnishing sellers photograph their products in impossibly-perfect room setups. Sometimes they use real spaces and products; sometimes they’re all or partially computer-generated. Either way they take time, money and space to create. Made.com cut out these unnecessary costs. Products are shot in a simple photo studio – a white background with minimal accessories. The focus is on the product, but it also gives an opportunity for cross-selling.

Benefits

Made.com go out of their way to give their customers what they need to make an informed decision – a clear idea of what they’re buying! This helps to manage expectations, encourage a sale and mitigate the risk of returns. That’s vital when selling online – customers won’t see a product in-the-flesh until after they’ve paid for it!


ASOS Marketplace

The ASOS Marketplace photography guide. These guidelines help sellers create usable photography for their Marketplace customers.

Features

Differentiate…
It is important for ASOS to differentiate marketplace products from their own. It protects the ASOS brand and avoids confusing their customers. No studio shots allowed – they would be too much like ASOS’s own product photography. This also gives the marketplace sellers a bit more creative freedom.

True to fit…
Clothing and accessories should shown on a person, not thrown on a mannequin – or worse, the floor! Customers want to see how a dress fits, and how big that handbag really is.

Authenticity…
Vintage or new, customers buying luxury brands online want to see proof of an item’s authenticity. ASOS marketplace recommends photographing all labels, receipts and certificates. This gives the customer peace of mind.

Benefits

This example is more about helping people to create their own usable photography. They help sellers provide a consistent (and trustworthy) experience for their customer. They want to ensure that customers get the clearest possible picture of what their buying.


Conclusion

We could easily write a whole other post on what not to do with your web photography. But as we now know, you’re only skimming this post anyway ;) – here’s the gist:

  • Don’t use poor quality images.
  • Don’t leave it until the last minute.
  • Make it meaningful, not just decorative.
  • Avoid photos that are poorly composed.
  • Try to align it with your business goals,
  • … and with your users’ needs.
  • Pay attention to the details.
  • Avoid clichéd metaphors.
  • Avoid Stock photos.

We know it isn’t simple, that’s why we give our clients guidelines to help them (and their photographer) get the best out of their web photography. We also usually include an adaptation of a checklist put together by James Chudley. He literally wrote the book on usable photography…

So don’t underestimate the impact that photography can have on digital projects. Have a bit of empathy for your users. Put their needs before your wants and deliver better results for all.