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.



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.

Related Articles

12 Responses to “17 Comparison Matrix Design Tips”

  1. [...] 17 Comparison Matrix Design Tips | Get Elastic [...]

  2. Pass through here found that you are so rich and colorful. Thank you

  3. Stewart Walker says:

    Just wondering if you’ve seen any good examples of how to do product comparisons on mobile sites?

  4. Albie Attias says:

    The flaw with most of the examples I’ve seen is that when selecting products for comparison on a product category or list page, the link to go to the comparison page is shown in a fixed location usually at the top of the product list. The problem with this is that if you’re viewing a long list of products and have scrolled way down the page – you must scroll all the way back again to get back to the link/button. I’ve yet to come across anyone using AJAX to display the selected product set on the page regardless of user scrolling. If anyone knows of any good examples, please share.

  5. Ashley says:

    Can you recommend a software company that provides a product comparison tool to plug into your exiting website? I’m having trouble finding solutions through google searches.


  6. Vanina says:

    Hello @Ashley and @Linda,

    For a 3rd party tool, you can either use http://socialcompare.com to build and embed nice comparison table (free version), or you can use the pro version to build your own comparison engine/site or also be able to embed “add to compare” button to an existing ecommerce or website: http://socialcompare.biz

    @Linda, would it be possible to get an article about our innovative service, I think it could interest your readers…

    Best regards
    Co-Founder of SocialCompare

    • Hi Vanina,
      Thanks for the comment, I checked out your site and it’s really cool. I may use it to display data in a future post.

      • Vanina says:

        Yes do not hesitate to try it, the solution is really flexible (vairous criteria types: video, ratings, yes/no/other, images…), you can also customize the embed version of the table (colors, size…). Do not hesitate to contact us if you have any question or send us your feedbacks/suggestions.

        Best regards

  7. [...] Was sind die Zutaten für eine brauchbare Produkt-Vergleichstabelle? Wir haben unsere “17 Vergleichsmatrix Tipps” anhand von Beispielen aus der Telekommunikationsbranche auf 24 erhöht. Doch diese Tipps [...]

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS