Layout and position
Variation selector should always be combined with an image displaying the selected variation. Most e-commerce platforms already achieve this by default by placing the product image and the variation selector panel side by side, with the image on the left and the panel on the right. For the sake of simplicity, and since it is the most common, this article will also make use of this pattern. As a base principle, the right panel should not take up more that half of the horizontal screen estate. The reason being that having large images of the product you are selling is one of most important aspects of a good performing product page.
Designing a variation selector for a simple product with a maximum of 1 to 2 feature types with 3 to 5 options for each is a relatively easy task. We can show all features and options in one place without hiding important information.
But when dealing with more complex products with many feature types and options, the task of designing a good experience becomes a lot harder. By introducing more complexity we make it harder for a visitor to make a purchase decision. Two concepts often linked to this problem is “Choice paralysis” and “Buyer’s remorse”.
As an example, imagine having a Sofa with 4 components and various options for each:
Back material and color
- 20 options
Seating material and color
- 20 options
Armrest material and color
- 10 options
Legs material and color
- 10 options
The above example equates to a total 40.000 combinations of a single furniture, all available for the customer to purchase. The above example illustrates the problem clearly: How do we decrease the friction and make it easy for the customer to select the right options and how do we make them confident about what they have chosen to reduce the number of decision cycles needed.
In this part of the article we propose a series of solutions to reduce the friction and cognitive load that a customer faces when doing a purchase. Make sure to go through the first article in this series to cover the basics of general UX concerns that needs to be addressed.
A simple way to make it easier for customers to make a purchase decision is to highlight predefined configurations that can serve as a starting point for further customization. This could be implemented as a part of the product page as part as the right panel or in the cross sell section. Another solution could be treating different configurations as a separate SKU.
Think of decision funnels as a way to guide a user to make the right decision by asking question that make it easier discard the wrong decisions. It’s the same tactic used in many retail stores. For instance instead of asking what color the customer is interested in, they ask about other properties such as materials, size or shape to narrow down the further selection. By asking the customer about other requirements you can narrow down the final selection drastically. How a funnel is designed will vary across different customer segments, but implemented correctly can mean a big difference in conversion.
Similar to the predefined configurations it can be beneficial to limit the initial number of options, while still allowing the visitor to browse the full catalog. Two common strategies is to either limit the visible part of a scrolling list of options so you only see the top portion of the list, or to simply hide the rest of the options behind a toggle, e.g. “show all options”. For both strategies it’s important that the initial options are optimized for conversion, e.g. a selection of the most popular colors or fabrics.
Hierarchy and separation
The title of this section should be pretty self explanatory. By implementing a clear visual separation of your feature types you reduce the visual clutter, and as a result reduce cognitive load. Make use of tabs or a boxed layout to signify the separation. Numbered steps can be added as an additional affordance, to help guide customers.
Ideally every option should have a swatch containing a visual representation, big enough for the customer to make out if an option is relevant or not. Implementing visual swatches will make it easy for visitors to quickly scan through all the options without having to click and apply each one.
Dealing with highly configurable products is a hard task especially when having to design an interface that makes finding the right product configuration a relatively easy task. In this article we pointed out 5 strategies that can be used alone or as a combination.