Product Comparison


The users need to compare similar products


Show a matrix of products and features


Use when

Shopping sites, company products, auctioning sites. The users have arrived at a product page or they have reached a list of products. Now they need to decide for the product or for similar products. Users may differ in what they consider important of a product. Users must be able to easily compare individual features of the product. Products may differ in attributes.


Show the features on the rows of the matrix and the products in the columns. If a feature is present, mark it. Otherwise don't mark it. If the feature has specific interesting data for users, show the data instead of the mark.
If there are many features, they can be grouped so that users can select which aspects they want to compare. When there are many products to compare, let users select which products they want compare. This can be done in one page when there are not so many products, otherwise it is done in two steps.

> open wireframe <


The product/features matrix gives immediate overview and facilitates easy comparison. By only marking available features visual clutter is minimized.

More Examples

This example from nicely combines a product comparison with Search Box results. A search result can be selected for comparison and by clicking the link "compare selected cruises" the comparison is show. At the comparison screen itself, users can deselect one.

An example from with a selector for the aspects and models:

and an example from

plml logo


1 comment has been added to this pattern.

John Gibbard, 3rd February 2008
A useful approach on product comparison executions is to allow the user to hide similiar items. So, for example, if all the products have a particular attribute then you could hide that attribute in the table. This reduces the area and provides a simpler experience.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below