Image Zoom

Problem summary

The user wants to zoom in on an image to view the details in a higher image resolution.

Examples

No items found.

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. As the user clicks the image to zoom, a higher resolution image is preloaded.

Provide graphics or text about zooming in on the image; a bare image will not suggest zoom functionality to the user in itself.

Rationale

Allowing the user to zoom in on an image permits 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. In this way, the user is not bothered by the other details.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE