User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
I quite like how phonearena.com handles this.
You have 2 options to compare items:
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
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.
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:
From high-level to very detailed you've got:
Checkmarks
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
Stars
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
Specs
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
