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?
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:
Source: http://www.shopify.com/
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! :)
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:
- Set your limits (price,etc),
- Narrow down your choice to your basic needs,
- 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!
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:
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?)
