3 Product Comparison UX Implementation Details for Designing User-Friendly ‘Compare’ Tools

E-Commerce “Compare” tools allow users to select products and view side-by-side sheets of their specifications.

Not all sites need a “Compare” tool, but it can be incredibly helpful to users in certain industries — when implemented well.

Indeed, during our large-scale UX testing several of the tested “Compare” tools offered, even at large e-commerce sites, proved more harmful to users’ experience compared to not having the feature at all, since users are still able to compare products on their own without a dedicated site feature.

In this article, we’ll discuss the test findings from our Baymard Premium UX research database related to “Product Comparison” tools. In particular, we’ll discuss:

• 3 checks to help decide whether providing a “Compare” tool is actually necessary for a particular site
• 3 UX requirements for “Compare” tools

3 Checks to Decide if It Makes Sense to Have a Comparison Tool

Comparison tools, while often helpful, aren’t always the right choice for particular sites or product verticals. Our benchmarking reveals that it’s currently 38% of the 60 largest e-commerce sites that offer a “Compare” tool, almost unchanged from 40% when we first started tracking this back in 2015.

Indeed, during our usability testing many leading sites had a “Compare” tool that actually did more harm than good because it was implemented so poorly, without considering UX design.

Therefore, before jumping right to deciding to implement a new “Compare” tool (or redesign an existing one), 3 crucial considerations must be made first:

1. Whether there are existing product data integrity issues (52% of sites have issues)
2. Whether product list items are high performing from an end user standpoint (46% of sites have issues)
3. Whether it makes sense for the particular product verticals being considered

First, proper product data is the foundation for any “Compare” tool. If there are sitewide issues with product data that is missing, unstructured, or unsynchronized then the “Compare” tool will simply not be usable for end users, as the tool is only as good as the data it’s highlighting. Data integrity is therefore an absolute necessity when it comes to “Compare” tools. Unfortunately, our benchmarking of data integrity shows that it’s currently 52% of e-commerce sites that don’t post-process their vendors’ product data before its use on their own site.

If data integrity isn’t good, for example due to unprocessed vendor-provided product specifications, then don’t waste time implementing “Compare” tools. And while performing a UX audit on an existing “Compare” tool, consider removing the feature if it’s misleading users.

Second, “Compare” tools must not be substitutes for poorly performing product list items.

During testing, it was often the case that, when users said they wanted a comparison feature, they actually just wanted to compare a few list items across a single key product attribute that should have been part of the list item information in the first place. For example, users who wanted to know what size laptops would fit within a particular laptop bag when considering a product list of laptop bags.

Rather than relying on a “Compare” tool, having the right category-specific list item attributes will often solve the issues — however, our benchmarking of list item UI shows that 46% of sites don’t display the product attributes that users need the most, as further outlined in our article “What Information to Display in Product Listings — 46% Get It Wrong”. Such underlying product list info issues makes implementing a “Compare” tool a symptom treatment. This is especially true of less spec-driven industries and product verticals, where a handful of key product attributes are often sufficient for users to compare products directly from within the product listing page.

Third, it should be considered which product verticals need “Compare” tools — and which can “get by” with proper list item info.

Our testing revealed that spec-driven verticals — for example, appliances and electronics — are best-suited for “Compare” tools, as users will want to compare a wide range of specs (and not just one or two key specifications).

For these types of products, “Compare” tools can enable users to consider their available options in a very structured manner (which appeals strongly to a certain subset of users).

This is especially true when a core subset of your users are “experts” or “professionals”. We observed during testing that these users are often able to make better use of “Compare” tools, as they are typically better able to interpret all of the nitty-gritty product details and thus methodically compare products, because they better understand the often minor or highly technical differences.

3 UX Requirements for “Compare” Tools and Product Comparison Designs

Now, assuming that the above three conditions have been met — product data is well implemented sitewide; list items contain the necessary product info, including crucial category-specific attributes; and it makes sense for a particular product vertical — then it is often a good idea to provide users with a “Compare” tool.

However, the “Compare” tool design itself must perform well to be beneficial — in particular, when users first encounter it, which is typically in the product list.

Testing revealed 3 product comparison design requirements to ensure the “Compare” tool performs well in the product list:

1. On desktop, show the “Compare” link only on hover
2. Provide explanatory tooltip text
3. Provide easy and prominent access to the comparison interface

(If you’re not a UI designer, read up on the difference between UI and UX.)

1) On desktop, show the “Compare” link only on hover

Showing the “Compare” link only for the list item the user is currently hovering reduces clutter in the product list for the users who don’t want to use it (which is typically the majority of users), while still keeping the option directly available in each list item, reminding the user that the “Compare” tool is an option.

When an element changes on the page — in this case, a “Compare” checkbox appearing in a list item — it typically becomes more noticeable to users, who are also then more likely to actually read any associated text.

Thus, displaying the “Compare” checkbox only on mouse hover, rather than permanently, increases the likelihood that users will both see and understand the purpose of the “Compare” checkbox, as they’re more likely to read the “Compare” label.

2) Provide explanatory tooltip text

The second implementation detail is to have a tooltip appear when the “Compare” option is hovered. The tooltip should briefly explain the “Compare” tool — that is, how it works and what it’s good for.

By displaying a tooltip, additional context can be provided for the otherwise very short “Compare” label. Combined with only displaying the checkbox on list item hover, this greatly reduces the chance of the checkbox being mistaken for another feature.

3) Provide easy and prominent access to the comparison interface

Finally, it should be easy for the user to go from selecting products to compare in the product list to actually comparing them on the “Comparison Table”.

Therefore, it should be immediately obvious to users how to access the “Comparison Table” page after clicking a “Compare” link for a product list item. For example, a “Compare Selected Products” button should appear in the list item immediately after clicking the “Compare” link. This way, the user is given an easy way to access the comparison view, which is accessible right where they clicked the “Compare” checkbox.

Furthermore, after selecting the first product, a “Comparison” header may be attached to the top or bottom of the user’s screen, showing thumbnails of the selected products along with a “Compare Selected Products” button. This gives users a way to track their selected items as they scroll through the product list, as well as a permanently visible way of accessing the “Comparison Table” page.

Implementing these three details will lower the risk of “Compare” tools being misunderstood by users, while still keeping the tool visible and accessible from each list item (when they are hovered).

Ensure Product Comparison Tools Help — Rather Than Hinder

In general, “Compare” tools aren’t a requirement for users attempting to decide among a few different products.

Testing revealed that there’s a danger in simply assuming that a “Compare” tool is necessary to have — poor-performing “Compare” tools often left users more indecisive about the product they were interested in purchasing, instead of guiding them to their product of choice.

But high-performing “Compare” tools can be a boon to users ready to dig deep into product specs — which is often the case for users making expensive or complicated purchases online.

To ensure good product comparison UX and the compare UIs are easy to find and navigate, they must:

1. Have “Compare” checkboxes or buttons that appear only when hovering a list item
2. Provide explanatory tooltip text
3. Provide easy and prominent access to the “Compare” tool and product comparison table, once an item has been selected for comparison

A high-performing product comparison UX design will help guide users to a suitable product — making it more likely they’ll wind up finding a product that they end up purchasing.

If wanting to see how major e-commerce sites have designed their “Compare” tools, then see our free Page Design tool, which shows the “Compare” tool designs of 57 of the largest e-commerce sites.

Furthermore, to learn more about how to have high-performing spec sheets (obviously crucial to the performance of the “Compare” tool) see our article on improving spec sheet scannability and our article on explaining industry-specific filters.

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” user experience for product lists, filtering and sorting.