Design Guidelines for Selling Products with Multiple Variants

Kim Salazar
|
April 25, 2023

In our most recent ecommerce-research study for the 5th edition of our report series on ecommerce user experience, we observed that users sometimes encounter difficulties when shopping for products that are offered in multiple variants (i.e., different sizes, colors, prints, materials).

The usability problems we identified came about when ecommerce sites incorrectly represented product variants as different products and vice versa — when they represented different products as product variants. Let’s discuss the difference.

Let’s assume that we’re looking at two different items on an ecommerce site — A and B. If the only difference between these two items is a single product attribute (such as color, size, pattern, material), then those two items can be considered variations of the same product. If, however, the product descriptions for the two items are different, then the two items are different products.

Our main guideline, based on our ecommerce user research, can be summarized as follows:

Different products should have different listings; product variations should be displayed under a single listing (and variations should be presented as selectable attributes on the product detail page).

When this guideline is not followed, the following usability issues emerge:

  • It becomes hard for users to compare items that, in spite of being essentially different products, are presented as variations of the same product on the same product page.
  • If each product variation is shown on a different product page, there is a proliferation of product options, which makes browsing and selecting products tedious and risks that users may not discover the combination of attributes that meet their needs.

In this article we analyze examples of both problems encountered in usability testing and explore in detail the obstacles they create.

Multiple Listings for Multiple Products

In our research, we encountered product pages with attribute-selection dropdowns for fundamentally different products.

For example, Best Buy’s product-detail pages for televisions included a dropdown menu for the attribute Series. For context, each TV series corresponds to an entirely different model of television, with different technology and features available.

While shopping for a new television, one study participant became confused and overwhelmed by the Series selection. In fact, upon changing the Series field, the page information (including the product title) changed, but the participant did not immediately realize it because the featured image stayed the same.

The distinction between products and variations is important. Getting it wrong causes problems for users for two reasons.

Written by
Kim Salazar

Kim Salazar is a Senior User Experience Specialist with Nielsen Norman Group. Salazar combines her background as a developer and education in Computer Science with her user experience expertise, particularly around complex applications, to bring well-rounded insights to her work.