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

Amazon1

Advantages

  • 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.

Disadvantages

  • 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.

Contextual rollover

Mothercare

Advantages

  • 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. 

Disadvantages

  • 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

Currys

Advantages

  • 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.

Disadvantages

  • 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

Asos

Advantages

  • 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.

Disadvantages

  • 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.
A blog celebrating photos, the unsung heroes of great user experience design, by James Chudley (@chudders)

My 60 page 'Usability of web photos' ebook is for sale on Amazon for the price of a coffee.

Buy Usability of web photos

view archive