During our mobile usability testing of e-commerce sites we’ve time and again documented that users try to use gestures such as pinch, double-tap, and swipe, to try zooming and navigating images on mobile product pages. However our latest benchmark of 50 top-grossing US mobile e-commerce sites reveal that 40% fail to support these image gestures.
In this article we’ll present our usability test findings on what image zoom gestures users expect to be supported on mobile images galleries, and whether mobile sites need to state it when pinch and tap is supported. We’ve also sprinkled the article with a number of best and worst practice examples from the benchmarked sites.
It became very clear during our mobile usability testing that a single large-sized image is not enough for mobile sites in industries where product aesthetics or details have even the slightest influence on the user’s purchasing decision. This in particular include sites that sell apparel, toys, gifts, art, furniture, most consumer electronics, tools, etc.
While the user can get an idea of the overall visual appearance of a product from a large-sized image, they cannot properly inspect its material and texture, judge the build quality, see the different parts of a package, or special product details (compartments, physically small features, etc) – all of which can be vital to the user’s buying decision.
Throughout testing the subjects would try to interact with the images on product pages to inspect a particular product detail or quality. Some tried zooming the product image by tapping and pinching it – alas many of the tested sites didn’t support these gestures and had also disabled their users’ ability to zoom the webpage as a whole through the
<meta name="viewport" ..> tag (note: we have an upcoming article dedicated to this tag and its usage).
At the sites where nothing happened many of the test subjects chose to go hunt for other products – both on- and off-site – since they felt they weren’t able to sufficiently inspect the product’s quality or features, and therefore didn’t feel comfortable buying it. These two quotes from subjects that abandoned sites due to lack of a detailed image view illustrates just how severe this issue can be:
A subject looking at a set of tin figures in a toy store: “I would like to see what figures I am buying and if they are painted decently. To see if they are suitable as a gift.”
A subject looking at a dress on an apparel site: “I would never buy anything on a page like this because I can’t see what it is I’m really purchasing. I need to see the details. You wouldn’t purchase anything you couldn’t see how it looked up close – you are after all to wear it, so you will notice it if things don’t look good up close.”
Even on sites that had dedicated close-up images in their image gallery the test subjects would still try to zoom the images via gestures. Given the severity of users not being able to zoom product images via pinch and tap gestures, and the extent to which users expect to be able to do this, it’s shocking that 40% of mobile sites don’t support these image gestures.
The test subjects were observed to rely on both tap and pinch gestures, and for this reason alone we’d recommend supporting both gestures. Furthermore, site support for these two predominant zoom gestures is very inconsistent, further amplifying the need to support both (since there is no web convention).
Interestingly, the need for advanced zoom features is a largely mobile-specific issue caused by the small form factor of the platform. We haven’t observed anywhere near as strong a need for advanced image zoom functionality during our desktop e-commerce studies where a “Larger View” feature that scales the image to full-width of the (much larger) laptop or desktop screen typically provides the user with sufficient detail to inspect product details and textures.
While 4% of the benchmarked sites did technically support the gestures to zoom, they failed to provide pictures in a decent image resolution, resulting in images that were in practice unusable when zoomed due to their low quality.
This is an unfortunate but predictable implementation. After all, most mobile sites (rightfully) use mobile-optimized lower-resolution product images to reduce the download footprint of their pages. If using mobile-optimized images, it is therefore important to make sure that your image gallery implementation fetches a higher-resolution version of the product image when users begins zooming, to ensure that they can actually see the product detail(s) they are trying to inspect.
With 40% of mobile sites not supporting zoom gestures, users simply can’t predict whether your site will or not. Interestingly, out of the 60% of sites that support zoom gestures, only half of them inform their users that they support pinching and tapping.
The test sessions revealed that it actually helped users when sites indicated support for image gestures. It obviously helped underscore that the gestures would be supported but perhaps more importantly it reminded and encouraged the user to take advantage of this “hidden” feature.
We observed no noticeable usability issues on sites that chose to hide / fade out the “zoom support” message after a few seconds (the case for both of the above examples). If opting for a permanently visible message it is, however, important that it doesn’t obscure the default image.
A last implementation detail observed during testing was that – depending on the mother tongue of your site audience, and how technically inclined it is – not all users will recognize the terminology “Pinch” for this gesture. Some of the test subjects that weren’t native in English had trouble understanding the terminology. It is therefore recommended to write “Double-Tap to Zoom” or use a gesture icon in combination with any usage of the word “Pinch” (while still supporting both gestures).
It’s baffling that 40% of the mobile sites from major retailers still neglect basic features that are central to overcoming the limitations of users browsing on 3-5” screens. Especially considering how relatively straight-forward the fixes are.
As detailed throughout this article, our mobile usability research shows that a simple set of guidelines for image zoom gestures can be summarized thusly:
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” mobile e-commerce user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Do you know any non-iPhone user who knows how to pinch-zoom? I don’t know many iPhone users who know how to do it! It’s an awkward and uncomfortable gesture that uses the side of a thumb and only about a third of a fingertip, on a surface that has to be held tightly in another hand; I don’t think building that into a UI is a great idea, still. Tap is better, perhaps.
You talk about percentages of sites that don’t offer it but then you only offer a vague ‘extent to which users expect to do it’. Have you a percentage for that?
Hi Mike, in total 50+% of the subjects had issues on sites that didn’t support zoom (tap or pinch). We don’t track the number of subjects that zoomed on sites where it was indeed supported – so the number of “zoom users” is higher than that.
For “pinching only”: it was 15% of all the subjects that tried pinch to zoom on sites that didn’t support it. Again, we don’t have the number of total subjects that pinched on sites where it was indeed supported – so the number of “pinch users” is higher than that, i.e. not neglectable. We indeed observed a majority of the “pinching users” to be current or recent iPhone users. Likely as pinch to zoom is native iOS gesture (zooming photos etc), which haven’t been the case for all mobile OS over time due to patent issues ( http://www.theverge.com/2012/8/30/3279628/apple-pinch-to-zoom-patent-myth ).
It would be pretty complex to allow pinch to zoom, given that (a)the low resolution image loads on the page by default, and (b) there may be only 1 high resolution image. Pinch to zoom is a non-binary gesture. The user expects to see the image smoothly enlarge as he spreads his fingers apart.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org