More options available

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.

 

Show the color variants

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.

 

Baymard’s advice

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.

 

 

On desktop

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.

 

Other solutions

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)

 

Mouse hover

Should the image change on mouse hover on the color swatches?

I believe it’s easy to ‘mis-hover’ and end up on the other variant if the image changes on hover. Try it for yourself on Zalando (only some products have swatches, so you’ll have to look at a few to find one that has them) and you’ll probably experience some frustration. I think people are used to clicking on a variant to display it.