Interactive swatches in product list items allow users to preview different color variations shown in thumbnails by tapping on swatches. Instead, sites can provide interactive swatches to their users. 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? 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. On Nordstrom, users can interactively preview color options easily by tapping on swatches without the need to visit product pages.ĭuring 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. If implemented carefully, interactive swatches in the product list can provide users with great visual information with less friction, compared to going back-and-forth from the product list to individual product pages. Observed Benefits of Interactive Swatches in Mobile Product Listings 3 Common Usability Pitfalls with Interactive Swatches.The Observed Benefits of Interactive Swatches in Mobile Product Listings.In this article, we’ll share the test findings from our mobile UX research study related to displaying color swatches. 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.
We see sites taking this concept one step further and including not static but interactive swatches within their product lists. 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.Īn 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. 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). While Wayfair does indicate that there are variations available within the list item information, this could be easily overlooked when the user scans the product list, as it’s only indicated through text.
0 kommentar(er)
