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.