Recommendation

Many sites use "dots" to show that an image gallery contains more images. However, user studies show that using dots to represent this introduces several problems. The biggest is that many people overlook additional product images when the only visual cue is these "dots." And even when they see them, some don't understand what the dots represent. Either way, they only see the default image and conclude that there aren't any more images.

It's not a problem on mobile. On mobile, users swipe through the image gallery both with and without any indicators.

But it's a big problem on desktops. In a Baymard study, 50% of desktop users had trouble finding additional images represented by dots. Some completely overlooked them. Most likely because the larger viewport includes more elements that steal focus.

Therefore, you should use thumbnails to represent additional product images on desktop. This prevents people from overlooking that you offer multiple product images. In user testing, it didn’t matter whether you show the thumbnails below or to the left of the main image. But I would place them below the main image to be able to make the main image bigger.

But showing additional images as thumbnails doesn't just prevent images from being overlooked. The thumbnails also act as a preview of what images are available. Without them, your visitors have to swipe through all images to see what images you provide. This may not feel like a big thing. But your user will grow tired of this and see fewer products. With thumbnails, they instantly see what images are available and can select any particular image they like.

On mobile, I recommend that you test using thumbnails vs. using dots. On mobile, "dots" have the advantage that they use less vertical space. This pushes your add-to-cart button and the rest of your sales content higher up the page.

Examples

Remember: I only guarantee that the marked area(s) follows my CRO recommendations.

Remember: I only guarantee that the marked area(s) follows my CRO recommendations.

CleanShot 2022-06-23 at 21.26.58@2x.png

CleanShot 2022-06-23 at 21.32.12@2x.png