- Comparing multiple spec-driven items in product lists is inherently difficult due to the number of attributes these products have and how hard it is to compare items that are not adjacent to each other in the list
- During testing on spec-driven sites, 67% of participants used comparison features
- There are 2 implementation details that are important to get right in order to optimize the product selection process
Enabling users to compare products easily and efficiently is one of the primary purposes of product lists.
Users can of course compare product features by scanning list item information, but spec-driven product types often have differentiating specs that are too numerous to fit in list items.
At the same time, our large-scale testing of product lists during our large-scale Premium UX research reveals that visiting multiple product pages to compare specs can be time-consuming and troublesome (especially if users are not brought back to the same place in the product list on return).
As a result, many users will hesitate to visit multiple product pages and could therefore miss out on suitable items and spend too much time working out which items could be dismissed.
On the other hand, comparison features can help users by displaying many specs for multiple products side-by-side. During our testing on spec-driven sites, 67% of participants used comparison features – yet our e-commerce UX benchmark shows that 17% of sites with spec-driven products fail to offer comparison tool.
In this article, we’ll show you some of our Premium research findings, discussing:
- Why comparing spec-driven products in product lists is difficult
- How comparison features help users
- How to facilitate easy selection of products for comparison
- Comparison features on mobile
- Provide comparison features that are optimized for ease of use
Why Comparing Spec-Driven Products in Product Lists Is Difficult
Users on spec-driven sites are hindered by 2 issues when comparing items in product lists:
- Not all specs can be shown in list items
- It’s difficult to compare products that can’t be viewed together
1) Not All Specs Can be Shown in List Items
Spec-driven products typically have many features and attributes that factor into purchasing decisions.
During testing, while many users considering laptops sought out details on hard disk size, screen resolution, and the amount of RAM, other specs were critical to some and of no interest to others.
For example, while a backlit keyboard was of importance to one user, the version number of the Wi-Fi connection was important to another.
Neither of these specs would be considered key attributes to the majority but they might be deal-breakers to some.
With such specs not being important enough to the majority of users to appear in list item info, a subset of users would have to visit product pages to find out about them, with the potential of the troublesome back-and-forth between these pages and the product list.
2) It’s Difficult to Compare Products That Can’t Be Viewed Together
Given the vertical space needed to display the essential and category-specific features in list items, no more than 2 or 3 products will be visible in a typical viewport.
Even if the key comparison criteria are shown in list items, users would find it very hard to weigh up multiple product attributes across many items while scrolling through product lists or search results if the items weren’t adjacent to each other.
For example, if the products of interest were located at different points in the list, users would have to memorize the key specs of one product, then scroll to find another that matches those, and scroll up and down to compare the specs.
This process would become very tiresome if there were multiple products to compare.
Of course users could try to use filters to reduce the number of items shown, and sorting to bring items closer to each other in the list, but with just a few items visible at once, comparison would still require significant scrolling and memorizing to compare the items.
One workaround is to open each item in a different tab (for desktop users; mobile users were observed to rarely use multiple tabs during browsing), but users would need to either separate the tabs into new windows so that all could be viewed at the same time, or memorize the specs from each product as they switch between the tabs.
How Comparison Features Help Users
To enable users to compare many specs of multiple products on a single page, sites with spec-driven product types should always provide comparison features.
During testing on spec-driven sites, 67% of participants used comparison features, with many positive comments; for example:
- “I do like that I can compare several laptops at once, which is pretty good because then I could kind of compare the features against all of them, especially if I’m looking for a variety of features.”
- “So, going to the page where you can just compare them side by side, you could really get the in-depth comparison.”
A well-implemented comparison feature allows users to see every product spec for up to 5 products at once.
In fact several test users felt comfortable enough during testing to add laptops or printers to the cart directly from comparison tables without ever viewing product pages.
Comparison features, therefore, can significantly speed up product finding on spec-driven sites.
How to Facilitate Easy Selection of Products for Comparison
2 implementation details observed during testing made the process of adding items to the comparison table easier:
- Provide persistent “compare” checkboxes in list items
- Provide a persistent reminder of what products have been chosen for comparison
1) Provide Persistent “Compare” Checkboxes in List Items
If “Compare” checkboxes aren’t visible without interaction from users, they may not know that the compare feature exists.
Not every user will be familiar with comparison features and, if they are only visible on hover, some may overlook them.
“Compare” checkboxes should therefore be visible by default within list items.
Note: previously, we recommended that “Compare” checkboxes should only appear on hover. Recent testing has shown, however, that they should appear without any action needed from users to advertise the presence of the comparison feature. In effect, the positive benefits of communicating the existence of comparison features via persistent checkboxes outweighed the negative consequences of additional list item “clutter”.
2) Provide a Persistent Reminder of What Products Have Been Chosen for Comparison
Sites generally have a limit of 3-to-5 items that can be added to comparison tables.
When users are adding multiple items for comparison, they’ll need to be able to see how many items have already been selected.
Also, they may need to amend the list as they are doing so; for example, to add a more suitable item and remove one that is less so.
To make this process as easy as possible, sites should provide a reminder of items that have been selected that stays in the viewport that also shows how many more can be added.
During testing, users found that a persistent overlay panel at the bottom of the viewport showing each item already selected, along with a clear indication of how many more could be added, worked very well.
Comparison Features on Mobile
During mobile testing, it was clear that comparison features were less useful to users than on desktop sites.
In fact, of 38 mobile testing participants that visited the 2 sites that had comparison features (Walgreens and B&H Photo), only 3 used the feature at Walgreens, while the feature at B&H Photo was not used at all — despite the fact that B&H Photo contains mostly spec-driven products, caters to highly knowledgeable users, and some users during mobile testing were actually seeking ways to compare products at B&H.
A number of mobile-specific factors reduce the usefulness of comparison features.
“Compare” checkboxes could well add to the clutter of list items that have to fit in a small viewport, and which have to contain essential elements and selected nonessential elements, with the risk of adding height to list items.
Furthermore, because checkboxes can’t take up a disproportionate amount of space, they can’t be too large. This means that they are often difficult to tap, especially if they don’t meet the minimum required size of 7mm x 7mm.
Finally, and most critically, tables that allow easy comparison of specs on desktop do not lend themselves well to the small and narrow mobile viewports.
In portrait mode, only 1 full column would be visible at once so users would be unable to see the specs of 2 or more items together.
Even in landscape mode, where up to 3 columns might be visible at once, vertical space would be very limited, allowing users to see only 1 row at a time.
In either case users on mobile would be forced to scroll to view information about each item being compared, making it very difficult to see, understand, and maintain an overview of specs for multiple products at once — minimizing the usefulness of the feature.
Many sites have come to the conclusion that users don’t find comparison features helpful enough on mobile to justify the time and expense to develop them.
While there may be a number of reasons for sites not to offer comparison features on mobile, the lack of demand for them from users on mobile sites — as demonstrated by the very low usage of comparison features during testing — is likely to be foremost.
So, while well-implemented comparison features may be useful for users of some spec-driven mobile sites, the evidence doesn’t support designing and developing new comparison features for mobile sites (although keeping and maintaining an existing mobile-optimized comparison feature may be worthwhile).
In lieu of a comparison feature on a mobile site, resources are typically better spent optimizing the existing product list instead.
Also, sites should facilitate comparison in other ways such as by providing “Save” features for guest users so they can view items later, and enabling users to store items temporarily in the cart.
Provide Comparison Features for Spec-Driven Products
For spec-driven products, therefore, comparison features should be provided for desktop sites to allow users to comprehensively weigh up multiple attributes across products, enabling them to make informed purchasing decisions.
Despite the clear need for comparison features, it’s surprising our e-commerce UX benchmark shows that 17% of sites with spec-driven products fail to offer them.
Comparison features allow users to overcome the inherent difficulties associated with comparing spec-heavy items in product lists:
- Not all specs can be shown in list items
- It’s difficult to compare products that can’t be viewed together
To make it as easy as possible to select items for comparison, spec-driven sites should provide:
- Persistent checkboxes in list items
- A persistent reminder of what products have been chosen for comparison.
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.