VizualBusiness: 20 Tips for Product Comparison Tools

Thursday, August 2, 2012

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.

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.