Always Use Thumbnails to Represent Additional Product Images (76% of Mobile Sites Don’t)

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:

  1. How desktop users overlook additional images when presented as indicators or text instead of thumbnails
  2. How mobile users struggle to use gallery indicators as a fallback for navigating product images
  3. The importance of information scent when it comes to product images
  4. How thumbnails resolve many issues observed with other gallery implementations

1) On Desktop, Users Risk Overlooking Additional Images

“I wonder how big these things [the speaker] are?” This user never found the additional product images in the gallery, including an “In Scale” image that would have helped her answer her question regarding the size of the speaker.

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.

2) On Mobile, Indicator Dots Are Hard to Target

Even without any indicators of additional images, this user on B&H Photo immediately attempted to swipe through gallery images, a behavior observed across our mobile test users. On mobile, the default assumption that additional images exist and are able to be viewed by swiping is prevalent.

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.

“Now I’m just touching the dots at the bottom because the swipe is giving me a problem.” Many mobile test users resorted to trying to use the indicator dots to navigate the main image gallery when swiping was unsupported or performing poorly, as did this user on Under Armour. Yet rarely were users able to tap indicator dots without any unregistered or unintentional taps due to the small size of the indicators (an issue this user had as well).

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.

Without an indication of how many images were available, this user swiped through the same two images over and over again, eventually abandoning the product due to the lack of visual detail available. When users can’t tell how many images exist, they are liable to waste time and become frustrated when their expectations regarding additional images aren’t met.

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.

3) On Both Desktop and Mobile, Indicators or Text Lack Information Scent

“The fact that these represent images I think is kind of unnecessary. I would rather just show a little mini image…if I’m looking at features and I want to go back and look at this image I have to click through all of these to find out which one it was…if it’s a little thumbnail then I know exactly which image I need to click on.” Using indicators to represent product images makes it unnecessarily difficult for users to click on or find the images they are interested in.

This user swiped through all the images within the gallery, attempting to swipe past the final image. She admitted to thinking there were additional images, stating, “I guess I didn’t really read the ‘5 of 5’”. Text indicating how many images are in a gallery is apt to be overlooked by users.

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.

Namely, users are unable to use gallery indicators to preview the different image types that may be available for the product, such as “In Scale” and “Included Accessories” images.

Likewise, if videos or 360-views are included in the image gallery, users may overlook or unwittingly skip them.

Using indicators rather than thumbnails makes it more likely that users will miss the additional images entirely. Here, in a previous product page design, Apple made it slightly easier to know that there are additional images to explore by including a large arrow indicator next to the image. However, it’s not clear what the next images will be. Without this crucial information scent, users may not bother to click to see the other images if they think they will be just different views of the same product model (in fact, they were images of the Macbook with and without a touch bar).

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.

4) Thumbnails Solve the Issues Caused by Indicators or Text

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.

The right-most thumbnail on Williams Sonoma’s product page is visually cut off by the side of the viewport, providing a visual indication of further content.

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:

  • On desktop, gallery thumbnails alert users to the existence of additional images, which they would likely otherwise overlook.
  • Meanwhile, on mobile, thumbnails prevent common hit area issues observed as users attempt to navigate within the image gallery.
  • Across both platforms, thumbnails provide valuable information scent that allows users to preview the full range of images available and home in on those that are most important in their own product exploration.

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.

Authored by Kathryn Totz on October 20, 2020

If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Weekly

Join 37,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter