For purchases where features and specs most influence the decision, product comparison tools are very helpful. They support shoppers with serious purchase intent, allowing them to make faster and more confident decisions without pogo-sticking between product pages or relying on recall.
But comparison tools suffer from common usability issues that must not be overlooked in your implementation.
Product Compare Tips
Category and search page design
Make it easy to launch compare tables from last product selected
Many sites make it unclear how to launch the Compare feature after product selection, hiding the Compare button at the top right corner of the product list. Not only does this require the customer to unnecessarily scroll, many who have scrolled past the first “fold” of results may not be able to find it. (In the worst cases, the Compare button blends into a background of another color, making it even tougher to spot).
PetMedExpress pops a Compare Now button after each product is selected, making it very clear how to launch the table.
Lululemon changes text color to provide visual feedback that a product has been selected, and transforms red text into executable links in addition to the conventional, top-right Compare button.
Offer compare on search pages
ATT’s category pages offer compare, but search pages do not. Make sure the compare features is available on both.
General compare table “stakes”
- Make the table’s “close” buttons obvious
- Use large thumbnail images (for products where aesthetics are important)
- Make thumbnails clickable, and link to product detail pages
- Use expand / collapse to hide and reveal detail sections
- Include customer rating (star average)
- Provide clear editing/removal tools
- Provide a clear link “back to results” linking back to category or search page
- Have a clear add-to-cart at top and bottom
Moosejaw’s table has no add to cart buttons at the top or bottom of the table
Evo’s buy buttons are clear at the bottom of the table, as well as the top
- Ensure all products can be compared
Not all of BH Photo’s catalog can be added to a compare table
Advanced product comparison features
- Pin product thumbnails to the top of the grid
BH Camera’s product images are always visible as the customer scrolls through specs, keeping product context in view
- Allow customers to save, print or email your compare tables
- Provide consistent units and terminology across brands and products (e.g. choose either metric or imperial across your catalog)
- Provide tooltips for jargon and any other information that may benefit from clarification
- Ensure each product in a given category is populating similar fields (no empty cells)
- Don’t pull entire descriptions, they’re not readable, and excessively expand cells
Evo’s “More information” section is inconsistent and for some products, difficult to read
- Allow user to highlight similarities and differences
Verizon’s compare table supports highlighting similarities and differences
Do you need a product comparison feature?
Comparison tables make most sense for products that customers buy a single unit, for which comparing by features and specifications is most helpful. While compare tools are commonly used with consumer electronics, they can also be useful for other product types, including apparel for which attributes like fit, warmth, waterproofing, denier or inseam are important and can’t be discerned by product images or titles.
Avoid using the compare feature when differentiating features are best exposed in product list information. Not only does it clutter your product list information (and even cheapen your aesthetic), it can confuse and frustrate customers who try it if the table doesn’t deliver additional value.
It’s also wise to avoid compare tools if product information populates inconsistently. Shoppers expect to see details, and when they’re missing, it suggests your product detail pages are also missing information, and could boost exit rates and lower conversion.
Many ecommerce platforms offer product comparison out-of-the-box, and some support application of compare tools to only select categories. Ensure you’re using them only on categories that make sense, and when product details properly populate to add value at-a-glance to the purchase decision.
Need help with your ecommerce UX strategy? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.