Welcome to Blueleaf's UXpert, our regular look at UX that could improve your website for users and ultimately deliver increased conversion rates. This week, we're looking at attribute selectors on PDPs.

What's the problem?

If you sell products with attributes (size, colour etc) and your products are parented so that users can see all available attributes on the PDP, what's the best way of firstly displaying all variants to users and secondly, making it easy for them to select their desired combination?

What's the solution?

Salesforce analysed two different UX solutions employed across their clients' sites:

1. Colour/size attributes displayed as swatches or buttons

2. Colour/size attributes contained inside dropdown selectors

What could the benefit be?

Salesforce data showed that displaying attributes as swatches or buttons attracted around three times the click rates of using dropdown selectors on desktop and around twice the click rate on mobile. This is due to the more visual nature of swatches/buttons. All attributes are visible by default (rather than hidden inside a dropdown) and if a product thumbnail can be used for colour rather than a colour chip, click rates are even higher.

I hope you found this useful – if you have any questions on this or anything else to do with UX, please do message me.

Sign up to our regular email Blueleaf UXpert to keep up to date!