I'm trying to design a product comparison chart, which provides details of various features (10-15) available across different similar products (25-50) in the market.

The first thought I get is to create a table with cross and tick marks to provide visual cues. However, the exact same table is available in one of our competitor's website. If I go for it, it'll look like a rip off from them.

Would you have any suggestions on how I can handle the design?

  • the cross and tick, are they only visual indicators or do they have a function upon click or something...???
    – sree
    Jul 5, 2012 at 17:41
  • visual cues that indicate whether or not a feature exists for that product
    – Andy
    Jul 6, 2012 at 4:29

5 Answers 5


By the very nature of a comparison table it's going to follow a similar format to your competitors; it's a table that compares items with each other and you're limited with just how else you can do that. They are familiar concepts to web users and are pretty ubiquitous, there's no need to re-invent the wheel. I'm sure your competitor also has primary navigation options, a logo, some tabs, a footer... you're not ripping them off by including these either.

You can still use the same concept of a comparison table, but display it in a different style to your competitor. That's what your branding and visual-design is for - to make the core functionality and concepts stand out and differentiate your site from others.

Here are just a couple of examples showing the same type of concept but displayed dramatically different enough so that they're not confused with eachother:

enter image description here

Source: http://www.shopify.com/

enter image description here

Source: https://www.crazyegg.com/pricing


If you want to do something different, and I'm just being creatively wild, as I haven't seen this before; you might want to try something like this:


download bmml source – Wireframes created with Balsamiq Mockups

This filter allows the user to focus on those elements that you really care, and compare products with the features they care about without having to go through the whole list.

If it's web based, doing it with JQuery to show and hide elements from the table with animations would be neat! :)

  • This is more what I'm leaning towards for comparison of 100+ items (businesses). The "closable pills" which show active search filters usually give me a great experience when implemented and so long as you expect the user to interact with the filter. That said, what I'm after and what this describes may be more of a search filter with results than a comparison as one would see with a handful of like items.
    – ljs.dev
    Dec 31, 2014 at 6:10

Instead of giving a solution I would recommend you this TED video about the Art of Choosing. Sheena Iyengar explains how humans choose and what makes them efficent:

  1. Set your limits (price,etc),
  2. Narrow down your choice to your basic needs,
  3. categorize the rest.

I think if you look for a solution that suits this strategy you will have more benefits for users than your competitor. May be faceted search as edgarator showed is the way to solve.


I would suggest a simple technique, highlight the entire table data with a green color (or any color) along with the borders to indicate that it is available and the orher with a red color (or other color) to indicate it is already in use or ticked.

Do not forget to mention the color code and meaning in the legend!

  • I wouldn't do this. 1) Why not use ticks, becuase everybody understand it. You mentioned a legend for the color. Why this complicated and not using ticks? 2) For red-green-blind people is it hard to differentiate or even no difference. Here 9% of all male are not able to distingish.
    – FrankL
    Jul 6, 2012 at 6:47
  • @FrankL 1) As mentioned by Andy, his competitor already has used this UX and hence he wanted some other UX method and hence i had suggested something new way to do the same. 2) Yes i agree with this point and perhaps its my idea of using UX that i want to put forward rather than color. U can give any color that suits the situation.
    – sree
    Jul 6, 2012 at 6:52
  • So its rather a marketing question than UX. What do you think?
    – FrankL
    Jul 6, 2012 at 6:53
  • Not exactly!, he wants a different methodology of representation of the same situation.can it be a marketing quest?
    – sree
    Jul 6, 2012 at 6:56

There are many other types of indicators available. One way is to use tick marks where the feature is available and leave the others blank or with a hyphen sign (preferably blank as it can cause cluttering and visual noise).

The tick marks also doesn't have to be 'ticks' per se, just an icon that makes it clear the feature is available for that product. I found a simple black circle is often pleasant to the eye, perhaps more so than a tick.

Example Database Comparison Chart from PennState University Libraries:

enter image description here

This a similar chart to yours, comparing about a dozen features between many products. I know it's ugly visually but it gets the point across (can you see what I mean about potential clutter and visual noise?)

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.