#161) Interactive Color Swatches
On IKEA, instead of showing variants there, they add More options available under the product. Interesting approach, it makes visitors wonder what the other options are. I think that is both a good and a bad thing. Curiosity is good, but it creates some confusion.
Macy’s, alternatively, actually shows the variants under the product image. And you can get a preview of a limited amount of variants by clicking on them right there. I think IKEA could do the same, instead of only mentioning that there are variants.
Below are some insights by Baymard from their user testing on mobile. (source)
- Swatches must be big enough: On mobile, they must be 7mm x 7mm minimum, with minimum 2mm of spacing between them
- If a product has more swatches than fits on one row at the bottom of the product item in the product list, do NOT truncate them (showing only a few with a + button) and do NOT show multiple rows of swatches. Instead, make the list of swatches horizontally scrollable. Make it obvious that there are more swatches by showing half of the last one.
- Make sure users can clearly see what changes in the product thumbnail when selecting a swatch.
- If color variations are not very important for your audience, a viable alternative to interactive swatches is to simply open the product page when the user clicks/taps anywhere on the product list item, including the swatches.
What about on desktop, if there are too many color variants for one row?
One possible solution is to have scrolling arrows (left and right) to scroll through the swatches.
On some sites, I’ve seen two other solutions implemented, which I believe have the same usability issues as mentioned in the Baymard article for mobile:
- Truncating the swatches and NOT showing a + button
- Truncating the swatches and showing a + button (to indicate that there are more variants)