17 Comparison Matrix Design Tips

For certain industries and product categories, product comparison matrices are very helpful for customers to make their decision between a small set of products. For example, most consumer software, telecommunications (mobile, telephone, TV and Internet) and consumer electronics sites offer product comparison. Comparison tools are helpful when the purchases are considered, where the customer is likely looking to make a purchase for one product/service only (vs apparel or food where you're likely to make frequent purchases of the same or similar things). They are also helpful when the products differ greatly in their features and functions.

But comparison matrices are not always designed optimally. The following is a collection of tips for improving the design and usability of your comparison tools.

Category/Search Pages

1. If you've built a comparison feature into your category pages, use it in site search results too. You'll be amazed how many sites don't do this. A site search results page is essentially a customized category page.

2. Make the maximum number one can compare at one time very clear, rather than camouflaging it.

Clear:

Camouflaged:

3. Have a clear call-to-action to compare next to each checkbox, and make it look like a link (blue text or underlined black). Many sites force you to scroll all the way to the top of a page to hunt for the "Compare" button. Don't do this to your customers.

Verizon Wireless makes it very clear you can launch the matrix without scrolling up or down:

Radio Shack does a nice job, using the active words "Compare Now":

Matrix Usability

4. If you load the matrix in a new page rather than a pop up or lightbox, have a clear link back to the category. Consider "Back to [category] or "Compare more [category]."

5. Make the CLOSE link easy to spot.

6. Link to the product detail page (surprisingly, some do not link through).

7. Allow products to be added directly to cart from the comparison.

8. Large thumbnail images are a plus.

9. Allow easy editing (remove or add device). See example above.

10. Allow customers to highlight the differences between phones or plans, like Best Buy:

Another approach is to Hide Similar Features, like Crutchfield:

11. Allow customer to click-to-expand or use a mouseover to expose product attribute details. Make sure, however, it's very obvious that there is information that can be expanded. In the example below, it's not intuitive that you can expand the "Technical Specification" for more information.

12. Allow customer to save or print comparison. This is especially helpful when the purchase decision may be made by another person, for example, comparing mobile phone plans and presenting them to a parent.

Offer a call-to-action to call a customer service representative using "Need Help Deciding?" or a similar phrase:

13. Provide a clear link to return to the category/search results at both the top and bottom of the comparison table.

Product Description Content

14. Whenever possible, include product pricing (this may not be possible for some B2B situations where pricing is negotiable or dependent on volume.)

15. When you carry a number of brands and product lines, make sure units of measurement are consistent across manufacturers (example: 3 days standby vs. 72 hrs). Default to the one that's most easy to understand (easier to figure out 3 days than to mentally convert 72 hours into 3 days).

16. Avoid jargon whenever possible. If you must use it, define it for your customers, as Verizon Wireless does:

17. Include links to reviews and average customer ratings, like AT&T:

Verizon does a nice job with AJAX hover, showing the breakdown of review attributes:

Some of these recommendations require custom programming that may not be feasible with your current ecommerce platform, but hopefully you can take away at least one idea for improving your comparison matrix.