31 Flares Filament.io 31 Flares ×

When we’re shopping online, selecting color is a user experience that most frequent online shoppers take for granted. That’s because selecting color has traditionally been presented to users on common commerce platforms, in a very straightforward manner. Color swatch, color name, and sample image all correlate, making adding the color of the product you want, a total no-brainer. However, these days as retailers struggle to set their online store experience apart from competitors, particularly in cases where a brand may also sell their line on stores like Saks.com or Shopbop.com, I’ve noticed that the basics of the product detail page user experience are muddled. Whenever redesigning a retail experience, it’s really important to make sure the user understands exactly what they’re adding to the cart. A high conversion rate isn’t as impressive if it’s accompanied by a high rate of online returns (unless Try & Buy is your commerce strategy and you’re OK with a lot of online returns, but that’s a topic for another blog post).

Hopefully without embarrassing these two online retailers by using them as examples, here are two instances of common mistakes.

SELECTING COLOR ON the quick view

Quick View Blazer

First, this site in Quick View, presents a color swatch and corresponding product photography, but doesn’t include the name of the selected color in text. Why is this a problem if the user can plainly see from the color swatch that they’ve chosen pinstripe? Because look closely: these swatches are all very close in hue and saturation. The pinstripes in both the swatch and the product image are very faint. When you take into consideration that it’s estimated about 1% of the male population suffers from protanopia (color blindness that impacts perception of red, purple, and green making all hues look a little yellowish) and about 5% of the male population in Europe suffers from deuteranomaly (difficulty distinguishing greens and reds), then you’ve suddenly got a considerable percentage of your potential sales to men impacted by your customer’s inability to tell what color he’s adding to the bag.

Maybe this doesn’t concerns you because you sell lingerie to women. But if you’re Tommy Bahama or Thomas Pink and your typical online customer is a guy with color blindness issues, give the guy a hand and spell out the name of the color.


Blazer mini cart

Once your customer has made their selection and has added a product to the bag, include the color choice made whenever that item is mentioned again, especially in shopping bag views. When we’re shopping, we’re all creative directors. We associate our color preferences with our own personalities, and color choice is a huge determining factor in whether or not we purchase an item (have you ever passed up buying something cool because it’s not available in black?). If a magnificent shade of blue was the driving motivation behind the user’s decision to add it to their cart, do not miss an opportunity to remind the user about that shade of blue before they have checked out. There are some other issues going on with this mini cart that I’m not going to address in this blog post. But not including the product title, quantity and especially color selection in exchange for an aesthetically clean mini cart is a mistake, in my opinion.

Blue Sweater more colorsBecause color selection and finding a color that is really appealing is such an integral part of the shopping experience, don’t bury color selections below the fold.

If you’re promising users at the product listing level that a sweater is available in more colors…. then at the product detail level, don’t make your customer scroll to see color options.


Blue Sweater PDP

Place visible color options next to the drop-down area where the user makes their selection, or enable the user to select color by clicking on the desired swatch and featuring the text name of the color. And most importantly, as expensive as it may be, have product photography available for every sku in every color.

Blue sweater mini cart

A shopper who has started an online shopping session before a meeting at the office and has resumed it later in the day will see a picture of a blue sweater in their cart when they remember adding a white one.

While shopping experiences are becoming increasingly beautiful and unique, there are some behaviors that will remain true for shoppers who drive to the mall and who shop on their iPad during status meetings. Good design can be fancy, but great design should acknowledge best practices to drive conversion rather than making a shopping experience more time-consuming and cumbersome for the shopper than necessary. Your customers are looking for things to buy. Don’t confuse them and give them reasons to abandon their carts.

Alexandra Fletcher

Alexandra Fletcher

UX Strategist
Alexandra Fletcher is a business analyst and UX strategist specializing in e-commerce experiences, conversion, and CRM.
Alexandra Fletcher


Digital Publishing Know-It-All
@JonathanAmes thank you for the story you told yesterday at Largo. It was beautiful (and also funny). We should all… https://t.co/8JOFp0kgVv - 1 week ago
Alexandra Fletcher
Alexandra Fletcher

Latest posts by Alexandra Fletcher (see all)