When & How to Implement Interactive Swatches on Mobile Product Listing Pages

The color variations a product is offered in is a key purchasing decision for many users’ when shopping in industries such as apparel, home furnishings, and beauty. Consequently different product types, from appliances to apparel, are offered in different colors. In fact, our benchmark of the top 60 US and European e-commerce sites shows that 88% of sites have color as an available variation for at least some of the products.

While the color variation can be indicated via a simple text statement, as seen in the Wayfair example above, our large-scale mobile usability testing showed that users overlook color indicators shown in text in general, but especially if the text did not stand out clearly from other list item info (see 3 Key Design Principles for Product Listing Information). For example, text like “more colors” appended at the end of list item info, in the same color and size as other text is hard for users to discern when scanning a product list.

An alternative to simply stating that there are visual variations, is to include color swatches (something that we generally recommend), which immediately show the user just what color variations are available. But some sites don’t stop there. We see sites taking this concept one step further and including not static but interactive swatches within their product lists.

However, implementing interactive swatches on mobile isn’t as simple as it seems, and we’ve found there are three common usability pitfalls sites should watch out for when using interactive swatches on mobile product listing pages. In this article, we’ll share the test findings from our mobile UX research study related to displaying color swatches. In particular, we’ll discuss:

• The Observed Benefits of Interactive Swatches in Mobile Product Listings
• 3 Common Usability Pitfalls with Interactive Swatches

Observed Benefits of Interactive Swatches in Mobile Product Listings

During our large-scale Product Lists usability testing, it is recommended to include color swatches over simple text statements to both indicate that multiple visual variations are available for a product, and to indicate what exact colors the variations then are. Using swatches within the product list alleviates issues with users missing or overlooking a text statement and therefore not realising that a visual variation is available, as well as providing the user with visual examples of what these colors. But even with swatches, the only way that the user can see what the entire product looks like is to visit the product page — right?

Instead, sites can provide interactive swatches to their users. Interactive swatches in product list items allow users to preview different color variations shown in thumbnails by tapping on swatches. With interactive swatches, users can avoid visiting product pages in order to see different color variations for a particular product, and can quickly compare different items without leaving the product list. As one mobile user said, “I like the idea that I click the icon [swatch] and I get the different pattern, without needing to click into the [product details] page, because I can really see all of the available options without needing to load a page and then back out again”.

Remaining on the product list to review and compare products at a high-level means that the user can spend more time reviewing the actual product selection at a site, rather than spending time bouncing between product list and product detail pages. Especially in purchasing contexts where how the product looks is the main qualification or disqualification factor for a product (along with price and brand), allowing users to see the color variation they might be interested in, without having to visit the product page can significantly reduce product exploration friction.

3 Common Usability Pitfalls with Interactive Swatches

Implementing interactive swatches on mobile isn’t as simple as it seems, however, as we discovered during our large-scale mobile usability testing. Our testing revealed 3 main issues with interactive swatches on mobile:

1. Too small and too tightly spaced swatches causing interaction issues,
2. Interactivity becoming less useful if swatches are truncated,
3. Users not noticing that the product image updated to reflect the variation choice.

Issue 1: Too small and too tightly spaced swatches

The first issue observed during testing was that the size and spacing of the swatches in the product list directly impacted users’ ability to use them effectively. If the hit area of the interactive swatches is too small, or if swatches are too close together, users will have difficulty interacting with them.

Our testing has shown that there is a minimum hit area on mobile devices of at least 7mm x 7mm, and a minimum spacing between tappable elements of 2mm, to ensure good usability for interacting with mobile site elements. If swatches do not meet these requirements, some users will end up tapping the wrong swatch, while others will find it overly difficult to tap the swatch they’re interested in. As the adjacent elements in the product lists are mainly other hit areas, a tap registered to be outside of the swatches often won’t just result in nothing happening, but rather that the user is (unwillingly) sent to a product page — greatly increasing the consequences of accidental taps.

Issue 2: Truncation limits the usefulness of swatches

The second issue we observed during testing relates to truncation of swatches — shortening the full list by only showing some of what’s available. If only some swatches are shown in the product list, users won’t have the option of previewing all color choices without visiting the product page.

So if there are, for example, 12 color variations of a product but only 3 swatches displayed in the list item (like in our Crocs example, above), users will be able to preview only a quarter of the variations in the product list — which isn’t especially helpful, as most users will then still have to go to the product page anyway to understand what colors are available, as it’s difficult to say no or yes to something without first knowing what all of the choices are.

Even if there’s only one color option that’s truncated, users wanting to make an informed decision will often want to see all the options as they don’t know what they are saying no to.

Hence, if users need to visit the product page to see all variations, the value of the interactive swatches is greatly reduced.

However, showing all interactive swatches in product lists can also cause an issue — they can cause list items to become too tall. In our testing on the sites where the list items were taller than half the screen height, nearly every single user had severe issues navigating the list, and often got “lost in the list” multiple times (see guideline #933 for more findings mobile list item height, if you have Premium access). Trying to cut down the overall height by minimizing the size of the swatches leads us back into our first issue and continues to cause problems.

So if showing too many swatches is as much of an issue as showing too few, how can you display swatches?

One way to avoid these issues is to use a horizontally scrolling list of swatches within the product list items where it’s necessary. It’s important to ensure that the ability to scroll through the swatches is obvious to users by indicating clearly the presence of more swatches (e.g., by partly truncating — only showing half — the final swatch on the right). Also the swatches visible by default should be chosen to show the diversity of all the colors available, or the most popular.

Horizontal scrolling solves the issues otherwise caused by either truncating swatches or by displaying a too high number of swatches in the list item (causing excessively tall list items). During our testing, the mobile users had no difficulty scrolling horizontally to preview multiple colors, as long as the swatches have sufficiently large hit areas and spacing between them.

Issue 3: Users not noticing the product image has updated

If users can’t see the color change clearly in the thumbnail, there is no point in having interactive swatches. One cause of this issue is if the thumbnail itself is too small, making it hard to detect differences between similar shades. Another reason for users not seeing the color change clearly could be that, despite the thumbnail area is sufficiently large, the part of the product that changes color is too small to see clearly (e.g., if only the cord of a headphone changes color).

Thumbnail images must be large enough to depict all key features, and, if interactive swatches are implemented, should be zoomed to show the part of the product that changes color when the swatches are tapped.

Interactive Swatches Benefit Users when Implemented Well

When properly implemented, mobile users can save time by viewing and comparing multiple color variations directly within the product list, without having to visit an array of product pages only to see the possibly desired product in the possibly desired color. Interactive swatches are particularly useful on sites where color variations seriously affect users’ purchasing decision. For example, sites selling visually-driven products such as apparel, some beauty products, home decor, and furniture.

For sites where color variations are less important to the target audience, it’s worth mentioning that our testing also showed that simply making the list item one large hit area, and taking users to the product page when they tap on a swatch, is an acceptable choice that can be technically simpler to implement compared to interactive swatches.

When implementing product color variations in the mobile list item design:

• Regardless of whether they are interactive or not, color variations should always be displayed using swatches.
• Make sure that including swatches is not done at the expense of including any of the other needed informational attributes in the list item (which is a general product listing issue, see What Information to Display in Product Listings — 46% Get it Wrong).
• Ensure that there is sufficient size and spacing when including interactive swatches (at least 7mm x 7mm size and at least 2mm between them).
• Horizontal scrolling can be useful for long lists of swatches rather than truncating the list entirely or having list items that are excessively tall.
• It must be clear that the product image has changed when a swatch is selected so that users can actually benefit from interactive swatches — meaning large enough product thumbnails, or focussing on the area where the color changes.

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” mobile e-commerce user experience.