How Do You Compare 4 Items or Products?
If you have a few products, plans, services, or any other offerings that differ in included features and you want viewers to easily see the similarities and differences between items, your website might have a need that pricing and comparison tables can supply.
The most optimal way of comparing 4 items or products is to use a comparison table, or multiple pricing tables.
Comparison Tables
This table was created using the Comparison Table Generator.
What is a Comparison Table?
A comparison table is a tool used to compare a small number of different items or services in the columns, based on the attributes being compared in the row headers. The table data includes an indicator icon or text that signifies if the attribute is included in a corresponding offering. Comparison tables that are well-designed have proven to be the superior method for comparing products, plans, services, locations, and a multitude of other things, but even still, a comparison table is better suited for certain scenarios than others.
When to Use a Comparison Table
No More than 4 Offerings Need to be Compared
Let me start off by saying sometimes, this rule is just impossible to follow; it really depends on the context of the scenario. That being said, the purpose of comparison tables for products or services is to reduce the amount of cognitive load (how much work a user has to exert to understand something) required when comparing different items. Typically this works optimally when the number of offerings is 5 or less, but when you start adding more products, the cognitive load in the user is increased, because of the following reasons:
The user now has to visually scan more columns which takes more time
On mobile devices, horizontal scrolling is required to view all columns, which requires more work from the user.
Since it isn’t feasible to have sticky row headers and column headers at the same time, the user will inevitably lose the context of one of these. This will force them to remember the corresponding items or attributes for the table data cells they are focusing on.
Amazon utilizes a comparison table to show the similarities and differences of 6 different external batteries. They do a pretty good job considering the number of products being compared is more than the ideal amount (4), but there are two things that can be improved:
The dash “-” symbols signifying that an attribute is missing should be consistent with the rest of the table by using words or phrases to signify if an attribute is included or not.
The number of products being compared is more than 5, which means the user will have a slightly more difficult time consuming the information. Sometimes, this cannot be helped because it is necessary to compare more than 4 offerings, although it is not ideal, especially for mobile viewers.
If you have a need for a comparison table that has no more than 4 offerings being compared, generate your own custom comparison table for your website using the Comparison Table Generator.
Squarespace uses a comparison table to display the pros, cons, differences and similarities between heir 4 pricing plans.
What If I Need to Compare More Than 4 Products?
Sometimes it is necessary and unavoidable to include more than 5 products in a comparison table. If you think your site has a need for more than 5 products, here are a few suggestions that will make your table as user-friendly as possible:
Make row headers sticky when the table is horizontally scrolled. This will make sure the user still has some context when scrolling through the table. The only downside to this solution is that the user will have to remember all of the column headers if they scroll past them, but this is a tradeoff of this solution.
Put the most important columns being compared towards the front of the table so that users will see those first.
You Want Users to Weigh the Pros and Cons of your Offerings.
For product- or service-based comparison tables, users might want to know the positives and negatives of each different offering. If your products or services provide different benefits for users, a comparison table is an optimal way of letting the user decide what they should choose. In fact, the comparison is one of the most critical activities on the web, and in many cases, it’s a necessary step before your site visitors will perform a desired action (Source: the Nielson Norman Group), whether it’s enrolling in a course, purchasing a product, or becoming a member.
Consider the following example from Apple.com, which uses a comparison table to list out the different attributes of 3 different apple watches. When a user looks at this table, they can clearly see what each watch has to offer and what each might be lacking by horizontally scanning the table rows.
Apple does a relatively good job of utilizing a comparison table to show the similarities and differences of 3 different Apple Watches. They kept the number of items being compared to 3, which makes this chart less overwhelming for a user. There are three things that can be improved:
The dash “-” symbols signifying that an attribute is missing should be consistent with the rest of the table by using words or phrases to signify if an attribute is included or not.
The table should have row headers to the left of the table so that users know what attributes are being compared. For instance, the last row could have a row header “Family Setup”, and the table cell content for the three products could be “Pair multiple watches with one iPhone”, “Pair multiple watches with one iPhone”, “N/A”.
This table does not use adequate web-accessibility features that a table should have. Learn more about what makes a comparison table web-accessible.
Pricing Tables
These pricing tables were created using the Pricing Tables Code Snippet and Tutorial Video.
What Are Pricing Tables?
Pricing tables allow users to easily compare the pros and cons of different services and offerings. They are a great way to differentiate between different services or offerings in a minimalistic layout that is easy to comprehend. There are some instances, however, where individual pricing tables work better than comparison tables and vice versa.
When to Use Pricing Tables
Use When Your Products Only Differ by a Few Features
Pricing tables work optimally for a small number of products or services that differ on just a few features included. If you have a large number of features by which each offering must be compared, a comparison table, which is explained in the first part of this article, is a much more comprehensive option.
Think your offerings are a good candidate for a comparison table or individual pricing tables? Generate your own custom comparison table for your website using the Comparison Table Generator, which lets you add unlimited products or service offerings, or learn how to code multiple pricing tables using the Pricing Tables Code Snippet and Video Tutorial, both available on my website
