#49) Add zooming capability to your product image gallery

0 comments
Product
 

IKEA’s zooming approach on mobile is great.

When you tap on the product image, it also shows the same full-screen view as on desktop, with all the images which you can easily zoom in by pinching.

While that’s a great user experience, that view on mobile is particularly buggy and not fluid. So if it was better implemented, it would be near-perfect. The other recommendation I’d make, besides fixing the pinching on mobile, would be make the X in the corner always visible, even when zoomed in.

 
 
On mobile, there are 3 main approaches, I think:
  1. No zoom feature, but users can pinch to zoom in the page, which also zooms in the product image.
  2. Allow to zoom within the product gallery area (and it does NOT zoom the rest of the page)
  3. Clicking an image opens an overlay panel above the page (with or without thumbnails of other images) in which you can pinch and double-tap to zoom in and out. I recommend this third approach.

 

Which approach did you opt for? Did you test it properly to make sure it provides a smooth experience to your shoppers?

 

On desktop, IKEA is good inspiration. When you hover your mouse over the product image, it shows a “+ lense” icon. When you click on the image, it opens a full-screen view of the image, with a X in the corner to close it.

You can scroll down with the mouse to see all the zoomed-in images.

 
test

Leave a Reply