As a user I want to compare different product variants and evaluate the one matching best my needs.

Most websites using comparison tables to show at a glance every single differenct feature.

For me this approach is massivly overloaded. If you'll search for a hair dryer and won't have any preferences, you whould always purchase the cheapest one. So to motivate the user I'd like to show him the advantages of a better and more expensive product. So in my eyes the user should get informed well why any other variant is more expensive and highlight the USPs at a glance.

Does anyone has a good example or an idea how a module like this should look like? The difficulty is to present all information inside one viewport without scrolling.

I'll be glad about every idea, recommendation and example.

1 Answer 1


I think this is quite a tricky topic. The first step would be to determine your goal and user group. As far as I get your idea it's more a product comparison website.

1) To compare things you need a quality metric - or more than one. Price, durability, design, efficiency whatever. Basically these are the "rows" in a tabular comparison.

2) You have to display the products. Typically you'll have more than 5 choices. But you don't want to have a tabular comparison. Find a better way! (this is what you asked for I think...)

Suggestions: A) Similar to pricing tables of companies/startups. something like this: Example: https://blog.kissmetrics.com/wp-content/uploads/2012/04/kissmetrics-pricing.png This is the typical display. Usually one is highlighted and recommended and the prices/features are stacked - so less people will buy the cheap one.

B) Videogame Carshop: those typical showrooms/carousel where you can see the difference between to cars via the barchart - aka performance metrics - see 1) Example 1: http://www.carlosvk.info/wp-content/uploads/2014/02/Rivals_004.jpg Example 2: https://lh5.ggpht.com/NmUdxqbacLozAueds1NsBcQ_ShuzFY1gn2S6wiyS46pSJsl2qXgwdpPZJIguBD5uKZWX=h900

C) Use only key metrics - see 1) and use the typical market position chart: Example: http://2.bp.blogspot.com/-Y597OhoXzXU/T55JqiCyzqI/AAAAAAAABkE/WTovUhZlL9k/s1600/Clipboard01.jpg for advanced Users you could use more complex ones (spidercharts): Example: https://upload.wikimedia.org/wikipedia/commons/1/18/Spider_Chart2.jpg

just a few thoughts!

  • I will upload my sketches and research in a few days/weeks regarding your answers. Sep 1, 2016 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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