Product Comparison Grid


What are your thoughts about the effectiveness of “product comparison grids” like the following…

My website currenty offers three different types of subscription plans. I am trying to come up with a design that allows potential customers to quickly and easily compare these plans and choose the best one.

Right now I have a spreadsheet that probbaly looks closest to Example 1 below, except that in addition to the left column with attributes, there are ony 3 columns to the right, representing the subscriptions that I offer.

I’m using a simple “X” to denote that a feature applies.

In the heading, beneath each subscription plan is the proce.

And similar to Example 3, I have a button labeled “Select” at the top and then bottom of each column so regardless of where the person has scrolled, they can easily choose a given plan and move on to checout.

I also plan on “freezing” the column headings, so similar to a spreadsheet, if you scroll down, you can still see the column headings.

Below are a couple of examples I found online that are reasonably close to what I am doing, with Example 1 being the closest.


Example 1

Example 2

Example 3

Example 4


This pattern is a pretty well proven sales technique – the focus is on the plan that they want people to buy, with a ridiculous option thrown in to make the lower one seem like a good deal.

I like them because it’s easy to get your head around the options at a glance.


Definitely not better. This is way too much. Pick the important ones and then people can click through for more info.

The button at the top and bottom is a good idea, but if you have to pick one, go for bottom as it’s a more common pattern and therefore expected.

Styling wise, go simple. The purpose of these tables is to give people an overview that they can absorb quickly.


How many features is too many for my grid?

I have them broken into sub-groups, so I feel it’s pretty easy to read. The number in parentheses denotes the number of important features for a given section.

  • Written Content (14)
  • Audio Content (5)
  • Gift Subscriptions (4)
  • Services 10)
  • Library (1)
  • Promotions (2)

I understand “KISS”, but why not spell out all of the features my website offers and use that as a means to encourage people to subscribe and upgrade? (It seems infinitely difficult to get eople to pay for content online, so I figure I better spell out everything I am offering and how that is different and better than what they can get for free online!!)


Which of the four examples do you like best as far as formatting/styling?

Do you think Example 3 is easier to read, or does all of the multi-shading make it too loud?

What do you think about alternating shading on each row of features?

Any other suggestions on formatting/shading?


My personal preference is for Example 3. I don’t think the shading makes it too loud. For me, it pleasantly delineates the differences.

I also think putting all your features into the table may be too much. I would be overwhelmed by too much information. I understand what you’re trying to do with freezing the columns, but perhaps you could have a drop down menu for each of your major sections with the sub-groups underneath?


@TupperLake I feel the Example 4 looks better because

  1. There is a good use of whitespace which makes it look more neater.
  2. Improves readability.

And I agree with @Piper_Wilson that putting all your features into the table may be too much. The user will be overwhelmed by too much information.



So what about the mockup I posted today?

And what do you say to my questions?

  1. Try to stick to only one colour for the pricing table column headers and just highlight the most popular one among them.
  2. You can try some other background colour for the feature column header may be gray.
    3.To be honest I am finding it a bit difficult to relate from this as to which feature is related to which pricing. The features in the left column in not aligned properly with the price comparison rows.

Here is the link to some guidelines to consider while designing pricing tables


I don’t understand what you referring to.

This was created in a spreadsheet, so obviously all items in a row line up.


Examples 1 and 3 above use color to distinguish the different Products.

Example 2 aboves uses color to distinguish the different Features.

Example 3 technically uses color to try and distinguish different Products and different Features.

Personally, I find the color in Example 3 to be too much. (I’m a geek and I just want to focus on the data!)

In my example, I choose to use color to help tie in all Features related to a given Product.

I think maybe you are complaining because as you read from left to right your eyes are having trouble connecting the Feature and the “X” which signifies if it applies to a given Product.

If I had to choose between colored columns to group Products or “green bar” shading to help the reader follow the rows, which is more important?

BTW, thanks for the link to the article, but to be honest, I tought that most of the examples in the article sucked! (Hard to read, too much color, etc.)

Sorry you didn’t like my design, because as a non-designer I think it looks great. But then i am not the customer.

This is why I prefer coding, because it either works or it doesn’t. This artsy stuff can be challenging!!


So are you designing this comparison grids for yourself or for your users?


For both. Obviously I want my users to like it, but I have to like it too.

For instance, a lot of consumers like environmentally unfriendly products, but that doesn’t mean I would sell them! :wink:

There has to be a balance…


But they don’t look lined up in the image you gave us. Maybe some faint grid lines would help?


In my spreadsheet mockup, I chose option A thinking that was best.


This is a BIG ask from me to you –
Please consider your responses carefully. If you start a topic asking for advice and then get frustrated when you don’t get the answers you want, we’ll stop responding. I am sure you don’t intend it, but you are coming across as very passive-aggressive and it makes it unpleasant to interact with you.