enlarge image buttonIt might not be the worst usability problem you will find on a typical shopping site, but poor product images are a persistent weakness.

Aside from the all too common fault of not linking photo thumbnails to the larger image, another major cause of irritation is the ‘larger’ image turning out to be the same size, or only slightly bigger, than the original image or thumbnail. This wastes everybody’s time.

Here are some significant UK shopping sites with under-sized product images and time-wasting ‘larger’ images that aren’t:

Slightly better, but still lacking:

  • woolworths.co.uk – fairly good product images, just about worth viewing
  • johnlewis.co.uk – does have some alternate angles and some pan & zoom images
  • direct.tesco.com – includes alternate angles. open/close, etc.
  • jjbsports.com – product images are a little on the small side, but the ajax/lightbox implementation works well
  • gadgetshop.com – a good variety of images, but only a few large ones

Pan and Zoom

Some sites make more of an effort with product images by taking the pan & zoom route, typically using Scene7 technology. Scene7 has some good product configurator solutions, great for applying different colour, texture, material or finish options to a common product or room set photos.

Unfortunately, the way many sites implement ‘enlarged’ product images, results in a cumbersome pan & zoom arrangement which is quite fiddly to operate, confining users to a small porthole through which to view an otherwise good image. Some examples of this are:

Good product images:

  • artgalleriesdirect.com – generous-sized images with some room set options. Use of basic pop-up browser window is not so good
  • and… a shortage of good examples

The problems

Good product images help users to make buying decisions. Poor or under-sized product images contribute to a negative user experience – you click, and the result is disappointing.

Why then, if businesses go to the not inconsiderable trouble of shooting product photos, can decent quality images not be made available on their web sites in a usable form?

Pan & Zoom gadgets work well in some cases, particularly when you want to examine specific areas of a product in detail. For the majority of users, however, peeping through a small porthole is fiddly, frustrating and prevents you from getting a good view of the overall picture.

Standard web browser pop-up windows don’t cut the mustard these days either. Confusion can be caused when they disappear behind other windows, some pop-up blockers catch them and window sizes are often difficult set or unpredictable to calculate.

The solutions

Good product images – or any primary subject image for that matter – are an important element of any web site’s content, particularly when the user goal is a purchase or product selection task.

It is also important to present these images in a usable and accessible form. Here are a few tips for successful use of product images:

  1. Link thumbnail images to the corresponding main/enlarged image
  2. Display enlarged images at a useful size that makes good use of available screen space
  3. Use a well-coded ajax type pop-up mechanism which degrades to maintain accessibility
  4. For pan & zoom implementations, make better use of available screen space to minimise ‘porthole syndrome’
  5. Use good quality sensibly cropped images, minimise unnecessary white space and avoid distracting backgrounds
  6. Offer alternative views/angles and close-ups of important areas

Footnote: if you think this is a minor issue, read Usability: fine details make a big difference.