Enterprise Commerce Blog

Brought to you by

20 Tips for Product Comparison Tools

What are the ingredients for a usable comparison table? We’ve updated our 17 comparison matrix tips to 24, using examples from the telecom industry, though these tips can be applied to any e-shop that uses compare tools.

Category and search pages

1. Make smart use of filters and sort tools

Users make better comparisons when they can winnow their choices down first. The best filters are tailored to the product and include its important attributes, rather than universal across the catalog. For mobile phones, this includes features like 4G, camera, email and touch screen. For cameras, megapixels, optical zoom and display size.

Consider adding customer reviews to sort tools.

Price sliders are also useful, especially for service bundles like mobile contracts.

2. Don’t push the comparison callout to the side

Sidebars are high-risk for “banner blindness.”

It’s better to enable comparison right from product listings, as below.

3. Have a clear call to action to compare next to each checkbox

Keep calls to action like this within the user’s eyeflow whenever possible.

4. Don’t uncheck

One of the most fundamental rules of web usability is “make links look like links.” Links should look clickable, with a different color, underline, or label “click to [____].”

A few sites actually unchecks the selection when you click what appears to be the “launch table” function. Make sure the item is only unchecked by re-clicking a checked box.

5. Provide visual feedback when an item is added to compare table

We expect visual feedback when we add an item to cart, or in this case to a comparison table. Make it as obvious as possible to avoid confusion.

6. Offer comparison on search pages

Don’t forget that some will use the search box to navigate, so ensure they get the same benefit on search result pages.

Many large telcos and software companies use a Google-like SERP that incorporates all content, not just store (as above). It helps to show clearly which results are “buyable” or allow the customer to scope their search to the Store instead of all content.

Comparison tables

7. Make the close button obvious

As with any lightbox, design the “close” button to be very obvious.

8. Use large thumbnail images

Customers have poor recall. Allow them to visualize their options in the table.

Vodafone goes above and beyond, showing multiple images on mouseover.

9. Make the thumbnail clickable

Surprisingly, some compare tables include images that are not clickable. Remember web conventions.

10. Include star ratings

Customer rating might be the deciding factor. It’s a great idea to include this metric in comparison.

Like what you're reading?Subscribe to our weekly newsletter.

Join over 20,000 ecommerce leaders who have subscribed and receive expert advice about the world of enterprise commerce.

11. Make the price visible

Whenever possible, include the price, even if it’s “from [price].”

12. Clear add to cart at top and bottom

Avoid white and gray buttons. As with any call to action, make your add to cart or “Select” buttons stand out.

Include them both at the top and the bottom of the table.

13. Link to the product detail page

Surprisingly, some tables I tested had no links to product detail pages. Don’t be one of them. Some folks want to experience multiple images and read all product reviews.

14. Use clear editing tools

Make it easy to remove an item from consideration and return back to results to add another to the mix.

Some tables I tested wiped comparison contents clean when you return to results. Test to ensure that doesn’t happen!

15. Print / Save and email feature

For considered purchases like mobile devices bundled with services, the ability to save or email to yourself or another person is helpful. (A nice to have, but not a must-have.)

16. Expand / collapse sections

Long tables with lots of information is difficult to process. Enable expand and collapse to show and hide details.

Again, make the links obvious and clickable.

17. Hide similarities or highlight differences

Bonus points for helping customers hone in on what’s really different between options.

18. Mouseover jargon busters, product attributes explained

Help customers understand what you mean by those fancy terms — especially when they are specific to your own products (like VZ Navigator).

19. Convert units into local formats (grams, etc)

If your sites are localized, contextual units for each market is helpful. If you have one site for all nations, you can use geolocation tools to serve appropriate versions of content.

20. Lightbox that scrolls

For long pages of information, a scrollbar helps customers match up attributes to products easily with out losing context as the device disappears out of sight while scrolling.

It’s a much more pleasant experience than without.

If you missed our webinar series for telco, catch parts 1-3 on demand at ElasticPath.com: