Are there any good practices when it comes to "Compare products" functionality on product listings? I would like to do some A/B testing with different ones, but to be honest I have not seen something that would look really usable, assuming products listed horizontally (not in tiles) and search refinement on left sidebar.

TL:DR - how to convince users to compare products using "Compare Products" instead of scanning product attributes on their own?

  • One thing that puts me off of compare products pages is when the business doesn't take the time to enter all information for all the products they sell. Too often I get presented with "n/a" or "unknown" for attributes when the description and/or the manufacturer's site clearly does provide the data. – Marjan Venema Jun 10 '14 at 19:14
  • Except if they don't provide those attributes in feeds / databases, manually adding attributes to not-so-popular products would take a lot of manpower. – Matt Jun 12 '14 at 14:52

I quite like how phonearena.com handles this.

Example: http://www.phonearena.com/phones/compare/Samsung-Galaxy-S,Samsung-Galaxy-S-III,Samsung-Galaxy-S5/phones/4522,6330,8202

You have 2 options to compare items:

  1. In the left sidebar, there is a link called "Compare phones". Click it and it will send you to a page where you can search for an item. Hovering over an item will reveal a "Compare" button. This could be done a little bit better, so instead I would show the compare button on each product tile. Pressing the compare button will add the product to the comparison queue, where the final Compare button lights up green when you have selected 2 or 3 products

  2. Go to the specifications page of a product, there, just above the specifications, you will see a compare button. A page will be loaded with the specifications of the product, and 2 white columns with a textbox above it and the text "Add phone to compare". In the textbox you can search for a phone and while typing, it will show a list of products. Choosing one will add all specifications for that product in the blank column.

When in the comparison, you can delete a product by clicking on the X button, or you can add a product by typing in its name.

Something else I really like what they did is give visual cues as to how big/strong/fast everything is, by including 3 icons, where one is blue and 2 are grey. The one that is blue shows whether the phone is in the top of its class in that department, the middle or the bottom. One problem with this is (espacially with smartphones) is how they evolved over time, whereas 233 pixels per inch was ultra-high end back in the day, now it's comparatively low, so in thos cases some extra work has to be done, like comparing the spec against the average of all products with that spec or some other calculation. Depending on the subject you are covering, this doesn't have to be a problem though, as for example fruit will have (almost) the same nutrition values for decades.

  • 1
    A friend sent me telus.com/en/bc/mobility/catalog This example is pretty good, they have big comparison checkboxes and once you select 2 the compare label changes into a CTA. – Matt Jun 12 '14 at 14:50

There are several ways you can approach this and it depends on how detailed the data is you want to present to the user. One thing all designs seem to have in common is that they are presented in grids, with products being columns and product features being rows or the other way around. Common functions you would expect to find include:

  • Drag and drop, to drag a product or a selection of products to the grid on which you are making the comparison;
  • Right click and select an option like "add this product to comparison chart", and its conceptual opposite, to remove a product from the product comparison;
  • (especially intuitive if the product features are in columns) click on a column header to sort products by feature

From high-level to very detailed you've got:

This is the most basic comparison you can do and the thinking is the more checks the better. Easily understood at a glance and has the benefit of being categorical. An example is http://www.oxiclean.com/images/OxiClean_ComparisonChartNew.gif

When things aren't black and white but subjective qualification on product suitability is appropriate, this format lets you get the message across. An example is http://tme1.com/wp-content/uploads/2012/06/product-comparison.png

When you want to give the user fully detailed objective data, so they can make their own evaluation. An example is http://www.trolleybasket.de/images/product%20comparison.jpg

  • Nice, informative answer with examples. – Vikram Deshmukh Jun 10 '14 at 18:11
  • Good answer, but it seems I have mislead you with my question. We have a pretty good comparison page, the problem is, people don't use compare products functionality, so they never get to the comparison page. – Matt Jun 12 '14 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.