Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
the cross and tick, are they only visual indicators or do they have a function upon click or something...??? –  sree Jul 5 '12 at 17:41
    
visual cues that indicate whether or not a feature exists for that product –  Andy Jul 6 '12 at 4:29
    
add comment

5 Answers

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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:

mockup

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! :)

share|improve this answer
add comment

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!

share|improve this answer
    
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 '12 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 '12 at 6:52
    
So its rather a marketing question than UX. What do you think? –  FrankL Jul 6 '12 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 '12 at 6:56
add comment

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?)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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