UX for multi variant products
Do some of the products you sell online include additional attributes which a customer can select? This could be the colour of a top, the finish on a TV cabinet or the size of a towel. What is the best way to display these on the product page so that the user experience is still consistent with the other single variant products on the website. Have listed some tips to help below.
Divide up the page
Divide up the page and allocate an area for each type of functionality that stays consistent across all products. For example, image always on the left with the product name above it, price and call to actions in the centre and selling points on the right.
Guide the customer
Where the customer has to select additional attributes before they can add the product to the cart – guide them through it by numbering the required selections ie, 1. Select colour; 2. Select size; 3. Select quantity etc.
Show touch sized thumbnails
As customers start to use more and more touch devices we should be designing product pages accordingly. This means using thumbnails to describe variant options rather than a dropdown list. Dropdowns tend to be fiddly and slow to use on a touch device.
Don’t move Add to cart
Ideally you want the ‘Add to cart’ or other call to action to stay in a similar location and where possible above the fold. If you have a large number of variants this can prove difficult as they take up more space pushing the Add to cart further down the page. Solve this by only display the first few ie, 5 with a call to action to display more which can either push content down the page or open a new section which is optimised for multi variant products.
