On product pages, product images are tremendously important in users’ product-evaluation experience, providing critical visual information about key product details.
Yet in order to be most valuable, users have to know how to find additional images and what important product attributes they depict.
During Baymard’s large-scale usability testing across both desktop and mobile, we observed that using only dot indicators or text to represent the existence of additional product images within the main image gallery caused some users to miss the very product images they were looking for, while others had difficulty interacting with the indicator dots.
While 100% of desktop benchmark sites use thumbnails for optimal visibility, only 24% of mobile sites do so.
Interestingly, our desktop and mobile UX benchmarks show widely divergent strategies for displaying additional gallery images — while 100% of desktop benchmark sites use thumbnails for optimal visibility, only 24% of mobile sites do so.
In fact, on many sites, the desktop version will use thumbnails to indicate additional gallery images but switch to dot indicators or text on their mobile site, presumably under the impression that this decrease in visibility is worth the usability trade-off in order to conserve screen real estate.
However, our mobile usability testing shows that subtle dot indicators or text indications cause other usability issues, making thumbnails the universal solution across platforms for providing both clarity and easier gallery navigation.
In this article we’ll discuss the test findings from our large-scale UX research related to image gallery thumbnails. In particular, we’ll discuss:
When additional images are not immediately evident, desktop users are prone to mistakenly think that the only product image available is the one that is displayed on the product page by default.
On desktop, the default image typically takes up a smaller proportion of the overall screen real estate, so more additional product information like product variations and the product description is usually visible within the viewport.
With more visible product information, during testing desktop users were less likely to explore the additional gallery images compared to mobile users, where the default image often takes up the majority of the viewport and other product information requires additional scrolling and interaction.
In fact, when indicators were used to indicate additional images, 50% of desktop users had trouble finding these additional product images — with a handful missing the fact that there were additional images entirely.
Therefore, inconspicuous gallery indicators risk that desktop users will overlook the quantity and quality of product images available.
Unlike with desktop testing, during mobile testing we observed that users assumed the existence of additional images regardless of whether additional images were indicated.
Even with no obvious indication of additional gallery images, users routinely begin swiping the default image to navigate the gallery, and text or dot indicators are routinely ignored.
Being more likely overall to engage with the image gallery, mobile users are therefore far less likely to overlook additional images compared with desktop users, so the availability of thumbnails versus indicators is, in this regard, not a factor on mobile.
Yet that doesn’t mean that indicator dots perform well for mobile users.
When attempting to navigate the image gallery, mobile users almost universally use the swipe gesture, typically using dot indicators only as a fallback when they experienced issues with unresponsive swiping.
However, when this fallback was necessary, the tiny and closely spaced hit areas of these indicators often resulted in accidental taps during testing.
This resulted in users often tapping the wrong gallery indicator and accessing an unexpected product image, or accidentally tapping the main image, opening a disorienting enlarged view overlay.
Consequently, for users relying on gallery indicators as a means to navigate product images, these hit area issues make this experience highly frustrating and inefficient.
Even worse, some mobile sites fail to include any indication of additional images. With this complete lack of information scent, mobile users often attempt to swipe past the final image, either “bouncing” against a dead end or circling endlessly through the same few images over and over again.
While gallery indicators may lend a visually “cleaner” look to product pages, this aesthetic benefit comes at significant cost when it comes to usability.
Across both desktop and mobile platforms, indicators or text indications of the number of images in the image gallery provide no visual information for users, leading to further important drawbacks.
Likewise, if videos or 360-views are included in the image gallery, users may overlook or unwittingly skip them.
Furthermore, without adequate information scent, users have a more difficult time finding the particular image they need to answer their questions or complete their understanding of the product.
For both desktop and mobile users, fatigue can set in before all product images have been explored — again, resulting in a wasted opportunity.
For desktop sites, representing additional images with thumbnails is a common convention: all desktop benchmark sites use thumbnails to indicate to users that additional product images are available.
Because this implementation is so common, deviations from it will come at high risk, as users looking for additional images have become highly accustomed to looking specifically for thumbnails.
Given the rate of adoption on desktop sites, it’s surprising that thumbnails for mobile image galleries are somewhat rare: only 24% of mobile benchmark sites use thumbnails to represent product images.
Using gallery indicators such as dots to represent additional product images is often used as a way to conserve valuable screen real estate on mobile, where its narrow viewport means relatively little content can be visible at once.
However, using gallery indicators or text sacrifices too much when it comes to users’ ability to conduct a thorough visual inspection of a product.
On the other hand, during mobile testing we observed using thumbnails to represent additional product images resulted in the lowest incidence of unintentional taps and errors compared with other gallery indicators.
The increased hit area provided by thumbnails makes thumbnail images much easier for users to accurately target, overcoming a major issue of indicators observed during mobile testing.
Of course, due to the narrow mobile viewport, only a modest number of thumbnails will be visible by default, causing any additional images to be hidden offscreen.
However, the natural predisposition of mobile users to swipe through the gallery means that, despite truncation, users are actually unlikely to overlook images that are hidden by default.
That said, users should still be provided with an indication that there are additional gallery images beyond the visible thumbnails.
For example, showing only half of the final, visible thumbnail, or fading and horizontally cutting off a second line of thumbnails, provides the necessary visual cue that allows users to quickly ascertain that there are more thumbnails available.
As confirmed by our large-scale UX testing, using thumbnails to represent product images results in enhanced visibility and ease of navigation across all platforms:
Given the outsized value of product imagery to most users’ purchase decision-making, product thumbnails are a worthy inclusion to any product details page — even when screen real estate is scarce.
Join 24,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
Hello is it okay if I share this as a carousel on Instagram?
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 firstname.lastname@example.org