Image Zoom Edit
Problem summary
The user wants to zoom in on an image to view the details in a higher image resolution.
Example
Image zoom used at the Danish fashion magazine Costume's website. Zooming into pictures of clothes makes a lot of sense in the website's context.
Usage
- Use when the image size you normally show images in is not in high enough resolution to for the user to grasp the details in the image.
- Use when downloading full-sized and detailed versions of a all images takes up more bandwidth than you’re interested in sharing.
- Use when showing a full-sized and detailed version of an image does not fit into the website’s design.
- Use when showing a full-sized and detailed version of an image will prevent the user from getting an overview of the picture.
- Use when downloading a full-sized and detailed version of every image will take a disproportionate amount of download time for the user compared to the provided value. Only show images in high resolution when they are requested as all images might not be of equal interested to the user.
Solution
Provide a mechanism that allows the user to zoom an image to view its details.
From a server point of of view, an important goal is not to pre-load high resolution images before they are requested. This will help save bandwidth.
An intuitive way of doing this is to allow the user to click a spot on a given image, where after the image is zoomed. As the user clicks the image to zoom, a higher resolution image is preloaded.
Provide graphics or text that calls to action about zooming in on the image; a bare image will not suggest zoom functionality to the user.
Rationale
Allowing the user to zoom in on an image allows for exploration of the image’s details. Depending on the zoom factor, showing the entire high resolution image from the beginning will not provide the user with an overview of the entire image thus removing the context of the details viewed.
By providing a zoom functionality, a user can zoom into just one area of the image that he or she is interested in. The user is in this way not bothered with the details of uninteresting parts of an image.
More example images of the 'Image Zoom' pattern
-
Image zoom used at the Danish fashion magazine Costume’s website. Zooming into pictures of clothes makes a lot of sense in the website’s context.
-
In the apple.com online shop, selected products are shown with a zoom feature, that allows you to zoom in on the product image to view its details in greater resolution.
-
MagicZoom allows you to view a zoomed-in area of a picture while still viewing the original resolution image.
-
The MagicMagnify zoom function shows a zoomed-in version of an image in a circle where your mouse cursor is hovering the original image. The effect enhances the feeling of exploring the details of an
This document is in version 1 and was last updated on Dec 25, 2008 by Anders. Edit this pattern.
Related information
Collection
Related patterns
Related links
See it in action
- Zooming into a product image at apple
- Zooming into a picture at costume.dk
- Zoom effects with MagicToolbox
Image Zoom has 2 comments
-
over 1 year ago
Danni Swalef
12 Dec 2008
Another example of image zoom well-designed:
http://www.bbcicecream.com/store -
about 1 month ago
rapid4me
27 Jan 2010
I am really glad to have come across your site. Yous posts give food for though and make us think about really important things.