While there’s generally a correlation between good usability and “good for business”, there are some instances where the two align exceptionally well. Suggesting both alternative and supplementary products is one of those instances: it’s good for business and great for usability. Yet, when benchmarking 50 top e-commerce sites we discovered that only 42% tap into this “match made in heaven”.
Users land on product pages for many different reasons and from widely different paths. Often times these users don’t yet know the exact product which they need, but rather have an idea of what it is that they want. During our large-scale usability test of e-commerce category navigation we observed how suggestions for alternative products help the user find the “right” product, while suggestions for supplementary products help them find additional items to go along with that product to “finish the package” or “complete the look”.
Microsoft doesn’t offer any product suggestions on their product pages, making it tricky for users to find similar products (i.e. alternatives) and accessories (i.e. supplementary products).
58% of all major e-commerce sites only offer one of these cross-sells, or show both in the same cross-sell element. This severely limits users because the two types of suggestions serve different purposes. Suggestions for alternative products help increase product findability and discoverability while suggestions for supplementary items enhance product catalog navigation and awareness. Users benefit greatly from both types of suggestions, and since they complement each other incredibly well, they should both be implemented.
In this article we’ll look at the benefits and characteristics of product suggestions for both alternative and supplementary products respectively, and why both types of suggestions are needed, along with 4 implementation details to beware of.
Suggestions for Alternative Products
When users land on a product page and learn that the specific item doesn’t match their criteria perfectly, they essentially have two options: 1) abandon the site or product search, or 2) go look for alternatives until they find an item that fits their criteria. Initially, most users will luckily opt for the latter option, continuing their product search, but after a while more and more users will drop off as they fatigue.
Now, users land on product pages from a wide variety of paths – sometimes from a category, other times from on-site search, and perhaps even more often, off-site search, social media links, not to mention “regular” referrals and ads. Yet, what they all have in common is that the user typically chose to open this particular product page so the item typically isn’t a far-shot from what they’re interested in or looking for either. In short: even if this particular product isn’t a match, the user is typically looking for something fairly similar to it. Enter: suggestions for alternative products.
Kohl’s lists alternative products with a “More to Consider” sidebar, giving the user quick access to other bedding products in case this particular quilt isn’t to their taste upon closer inspection.
Suggesting product alternatives and substitutes are a great way to ease the user’s product finding process. Instead of forcing the user to hunt around product lists until they find just the right product, product alternatives lets the user jump from one product page to the next until they find a relevant item. It’s an effective way to keep users on product pages, taking them from one related product to the next. This facilitates scope-jumping too, enabling users to find relevant products outside their current category scope, e.g. to a sibling-category.
Ideally the product suggestions are sufficiently similar to remain relevant to the user while also being different enough to potentially match the user’s criteria. Striking this balance can be tricky if the suggestions aren’t hand-picked by a human being (which can be difficult to scale) but rather auto-generated by the site (which at the very least requires an array of variables to be combined to determine product similarities).
Whether the suggestions are manually curated or auto-generated, keep in mind that the purpose of suggesting alternative products is to help the user find the “right” product. They’ve landed on a item which upon further inspection wasn’t the exact right match, yet because the product probably isn’t far off from what the user is interested in either, showing similar product alternatives is likely to help them find what they’re looking for.
Suggestions for Supplementary Products
When the user do find the product they want (possibly via suggestions for alternative products!), they often need or want various add-ons or accessories to go along with it. Yet finding such supplementary products can be an incredibly cumbersome task unless they are listed as product suggestions directly on the product page (and below the cart contents on the cart page).
During our usability test sessions we often observe subjects hunt around product pages in search of suggestions for supplementary products after adding the product to their cart – often looking to “complete the package” by e.g. getting a case and memory card to go along with that compact camera they just added, or “finish the look” by adding a pair of pants and shoes to the shirt they just found. In other words, users find recommendations for supplementary products to be available on the product page incredibly helpful and often expect them to be there.
While the “May We Suggest” suggestions for alternative products are great, this test subject had already found a dress (the product page she was currently on) and wanted to “complete her outfit” with a pair of shoes to go with that dress. Unfortunately, Gilt only offered suggestions for alternative products (i.e., other dresses) and not supplementary items (such as shoes, jewelry, makeup, etc).
One of the reasons supplementary product suggestions are so popular among users is because they ease navigation significantly by enabling cross-category scope jumping. Scope jumping is essential when looking for supplementary products because accessories are often located in a separate scope, which is why they are often difficult (or at least cumbersome) to locate from the product page. Suggestions for supplementary products provide a shortcut to those scopes – it’s often less about the specific supplementary product suggested and more about accessing its scope via the product page (from which the user can either use the breadcrumbs to navigate to the general category scope or begin browsing any listed suggestions for product alternatives).
This also highlights another important function suggestions for supplementary product: product catalog awareness. By showing product recommendations for cases and memory card on the product page of a camera, the user will be made aware that the site also sells these types of items. This is particularly important for users landing on the page from external sources (off-site search, social media, ads, referrals, etc). It indirectly informs the user about other product categories offered on the site.
Suggesting supplementary products is therefore much more about enabling scope-jumping and enhancing product catalog awareness than it is about trying to suggest just the right accessory, as this can often be an impossible task. Of course, it doesn’t hurt to suggest relevant supplementary products but the suggestions are far from useless even if they don’t turn out to be the exact accessory the user is looking for.
Users Need Both Types of Product Suggestions
By now it should be clear that suggestions for alternative and supplementary products serve different purposes. The former is about finding the right product (by means of similar products), while the latter is about finding complementary items to “complete the package” (by means of add-ons and accessories).
There’s an inherent sequence at play here: if the user can’t find the “right” product, it’s unlikely they’ll begin looking for supplementary items for it. Product alternatives are therefore vital to the user’s initial product search and their decision to buy from the site or not. If the user finds a product they like and decide to purchase it from the site, then they’ll begin thinking whether they need any additional items to go along with it. That’s where supplementary products enter the picture – both in terms of making the user aware that those additional product categories are available on the site and then helping the user easily navigate to those product scopes.
“Something which is similar, that other customers visited or bought”, a test subject mumbled to himself when glancing over the sidebar. Tesco helps their users find both alternative and supplementary products by having both an “Others bought these alternatives” and a “Customers who bought this also bought” list in the sidebar on their product page. (They even get the labelling of the two lists right by clearly indicating they are based on the behavior of other customers.)
So while it may be tempting to only have recommendations for supplementary products (as this is where order value is increased), they don’t work without suggesting product alternatives too. Also, even though product alternatives typically don’t increase order value (items are substituted rather than added to the order), they can increase order volume since they often play a critical role in helping users find products they want to purchase in the first place – a prerequisite to the user purchasing anything at all.
While alternative product suggestions don’t depend on supplementary products to work (it’s a one-directional dependency), given the obvious business and usability appeals of recommending supplementary products, it’s hard to see why any site would want to leave them out. Also, why it might seem like recommendations for supplementary products would be more suited for cross-sell suggestions in the cart, it’s actually often better to place them on the product page since cross-sells in the cart can distract users from initiating the checkout process.
The takeaway? Have suggestions for both alternative and supplementary products (although as you’ll see in the next section, make sure to keep the two types of suggestions separate).
4 Implementation Pitfalls & Details
While it’s only 42% of sites that have both alternative and supplementary product suggestions on their product pages, testing found that implementation details also have a great say in the actual performance of those suggestions.
When implementing suggestions for alternative and supplementary products, there are 4 pitfalls and implementation details to be mindful of to ensure that the suggestions a) match user expectations, b) increase product catalog awareness, and c) enhance cross-scope navigation.
1) Transparency of Suggestions (Matching User Expectations)
During our research studies the test subjects generally respond poorly to product recommendations where it’s unclear to them what the suggestions are based on. This has two implications: first, the suggestions should be labelled clearly, and second, the different types of suggestions must be kept separate.
Urban Outfitters mix suggestions for alternative and supplementary products, making it unclear what criteria the suggestions are based on. The problem is worsened by ambiguous thumbnail-only list items which makes it unclear to the user whether the recommendations are for the depicted shirt, pants, or jacket.
Keeping suggestions for alternative products separate from recommendations for supplementary products allows the user to instantly tell the two apart and work out their distinct qualities. Therefore, list the two types of suggestions in separate groups. This way the suggestions can also be given more specific labels, which can further increase their transparency. It’s important to note that the two lists of suggestions don’t necessarily have to be placed together or even in close proximity to one another.
It’s ultimately about setting appropriate user expectations for the suggested products to enable the user to intuitively grasp their respective utility and rationale.
2) Assumptions Regarding Compatibility (Matching User Expectations)
When it comes to product categories where intercompatibility might be an issue, it’s incredibly important to label the suggestions very carefully as most users simply assume that any recommended items are compatible with the product they’re suggested from (be it on a product page or in the shopping cart).
While Tesco had spot on product suggestions on their product pages as we saw in an earlier example, they unfortunately messed up in the cart. “When they say ‘Recommended for you,’ I assume they will fit,” this test subject explained, referring to the camera cases displayed after adding a Nikon Coolpix pocket camera to his cart. It turns out that one of the two recommended cases actually doesn’t fit the camera.
Indeed, during testing the test subjects have generally assumed that any recommended product was compatible unless the suggestions were explicitly labelled as “Other customers also bought” or used similar phrasing which underscored that the suggestions were based on the behavior of other customers and not recommendations coming from the site or vendor. Users expect recommendations from the site or vendor to be compatible, the same way you would expect a salesman to only recommend covers compatible with the phone he just sold you. It’s only when making it clear that the suggestions are based on the behavior of other customers that most users realize they have to be careful.
Of course if product compatibility can be guaranteed for the suggestions this isn’t a concern. (This is yet another instance where a compatibility database can come in handy.) But if compatibility can’t be guaranteed, then make sure to avoid labels such as “Recommended for you” and instead assign the suggestions designations such as “Other customers also viewed”.
Note that some product categories of course don’t suffer from intercompatibility issues at all. Apparel doesn’t have this issue, for instance.
3) Ensuring Product Diversity (Increasing Product Catalog Awareness)
It’s important to base the product recommendations on multiple factors to avoid the suggestions becoming overly one-sided. For example, during usability tests, we often observed highly monotonous suggestions when the product recommendations were based on a single dimension, especially if that dimension was behavior-based and for a low-volume product (which has a much smaller behavioral dataset to draw on).
The reason one-sided recommendations are problematic is that they do a poor job of increasing product catalog awareness – which in the case of supplementary product suggestions is their main raison d’être.
The diversity of Newegg’s product suggestions is great – notice how the four suggested accessories are all from different categories. This implicitly tells the user that Newegg, in addition to cameras also sells: lenses, memory cards, tripods, and backpacks for equipment.
The chances of the specific product suggestions being just the right item the user is looking for are typically fairly low, and the main value of the suggestions is therefore derived from making the user aware of the breadth of the site’s product catalog and giving them a shortcut to access those scopes. In other words, a product suggestion can still be incredibly helpful to the user even if it isn’t for the exact item they end up buying, because it increases the user’s knowledge about the site’s product catalog and enables cross-scope navigation.
It’s therefore important to ensure a good level of diversity in the product suggestions to give the user the best possible insight into the types of products offered on the site. If an electronics site only recommends laptop sleeves on their laptop product pages, their users won’t know if they also sell external hard drives, monitors, stands, and more. To ensure such product diversity, it is typically necessary to base the recommendations on at least a couple of different dimensions (or alternatively set up rules to ensure there’s only one product selected from each category, though that approach might suffer from relevancy issues).
4) Accessing Enclosing Categories (Enhancing Cross-Scope Navigation)
As already mentioned, the odds of recommending just the right product to the user are slim, especially when it comes to supplementary items – yet the suggestions are still incredibly helpful because they increase product catalog awareness and enable cross-category navigation.
Because product suggestions are as much about accessing different category scopes and increasing the user’s awareness of the site’s product catalog breadth, it can therefore be a good idea to link directly to those scopes directly from the product suggestions. This lets the user access the categories directly and saves them from thinking of creative navigation patterns.
While Amazon does a great job of suggesting a diverse set of supplementary products, it’s needlessly difficult for the user to access the enclosing categories of those suggestions.
Without direct links to the enclosing categories of the suggested products the user will have to show a fair degree of foresight, following a line of reasoning that goes something like this:
“Ok, so this isn’t the exact accessory I’m looking for, but it is the class of accessory product I’m interested in, so I’ll open the item’s product page anyways, and then from there find some breadcrumbs, and click one of those links to traverse up to the accessory product’s enclosing category scope…“
Now, that’s a lot more demanding of the user than simply clicking a direct category link.
A mockup of how Amazon could have linked to the enclosing categories of the listed product suggestions. (The category links could also have been added below each individual product recommendation – this approach tends to increase clarity and visibility but can potentially lead to redundancy and hit area confusion unless it’s very carefully implemented.
It’s therefore recommended to link directly to the enclosing categories of the suggested products (a strategy that should be considered for any featured product, either with links below each product suggestion or at the bottom of the section of recommendations (as depicted in the above mock-up).
Also note that while this is of course the most useful for suggestions for supplementary products which almost always reside in a completely different category scope, links to enclosing categories can also be helpful for alternative product suggestions which reside in sibling categories or for substitutes that are placed elsewhere in the site’s hierarchy.
Avoid Trapping the User
At the end of the day, implementing suggestions for alternative and supplementary products is a way to increase the user’s product catalog awareness as well as enable lateral site navigation and cross-scope jumping. This lowers the risk of users getting trapped in a category that’s potentially too narrow for their product needs.
By combining the both types of product suggestions, the user is made aware of other categories and product types available on the site and they are empowered to easily access and explore those options. This is why both types of product suggestions are needed. Yet in order for them to work optimally, it’s also important to consider the four above implementation details:
- Transparency of Suggestions – Make the criteria which the suggestions are based transparent to the user.
- Assumptions Regarding Compatibility – Avoid using labels such as ‘Recommended’ unless product compatibility can be guaranteed.
- Ensuring Product Diversity – Maximize the user’s product catalog awareness by suggesting products from a diverse set of categories.
- Accessing Enclosing Categories – Enhance cross-scope navigation by linking to the categories of the suggested products.
Tip: Want product page inspiration? Browse 50 different product pages from top e-commerce sites in the public part of our Homepage & Category benchmark.
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
