Comparison is one of the most critical activities users perform on the web. In many cases, it’s a necessary step before your site visitors will perform a desired action, like buying your product, signing up for membership, contacting you, or requesting a quote.
However, this essential information is often distributed across detail pages, forcing users to remember information or open multiple windows or tabs. This is where the comparison table comes in.
Definition
Comparison table: A table that uses columns for products (or services) and rows for the attributes. It allows for quick and easy comparison between each offering’s features and characteristics.
When You Need a Comparison Table
Comparison tables are often misunderstood as tools for ecommerce only. It’s true that the most common instances of comparison tables are for mid-range to expensive consumer goods, especially electronics (think microwaves, fitness trackers, vacuum cleaners, or cars). But, in addition to products, comparison tables are equally well-suited for:
- Services
- Membership levels
- Pricing packages
- App features
- Tuition rates
- Locations
They can be used to compare similar items from the same organization or to compare one organization’s products against those of a competitor. The comparison table is a much more versatile tool than it gets credit for.
Types of Decision Making: Compensatory vs. Noncompensatory
When people have to choose among many alternatives, it’s hard to compare the pros and cons of each individual alternative. As a result, people engage in noncompensatory decision making — in other words, using one factor as the basis for decision-making.
For example, a user looking to buy a new car might filter out all the cars that are more expensive than $20,000, even though some of them are only slightly above their budget. This nonnegotiable filter helps the user restrict the set of results to a reasonable size.
When people have to select among a small set of alternatives (usually under 5–7), they usually engage in compensatory decision making: looking at the individual merits of each item and comparing their advantages and disadvantages according to a number of criteria.
For example, a user researching a new laptop might be willing to consider a heavier computer if it has better battery life and computing power.
Filters and facets support noncompensatory decision-making. In contrast, compensatory decision making is best served by comparison tables. They allow users to easily see and compare multiple important attributes at a glance.
When You Don’t Need a Comparison Table
There are certainly cases when a comparison table is unnecessary. In addition to the noncompensatory decision situation discussed above, you probably don’t need a comparison table if the items are:
- Not mutually exclusive
- Simple
- Cheap or replaceable
- Unique or hard to compare
Outside of these exceptions, a comparison table’s applications are limited only by your imagination. Any time your users want to choose among similar offerings, it’s an opportunity for a comparison table — especially if multiple factors contribute to the decision.
Not Mutually Exclusive
Similar items are not necessarily mutually exclusive. A shopper may only need to purchase a single microwave or laptop, but that isn’t the case for items like shirts, toys, or lightbulbs. For example, a consumer probably doesn’t need a comparison table to help them choose a dress, because they aren’t limited to one.
Simple Items
When a product or service is very simple, users don’t need to analyze its characteristics. For example, a coffee mug doesn’t have many meaningful, comparable attributes. Someone shopping for a coffee mug online might be interested in the style (and possibly size) but probably won’t want to compare many attributes of several coffee mugs.
Comparison tables tend to be unnecessary for items that are primarily chosen for aesthetics, like furniture, home décor, clothing, or accessories.
Cheap or Replaceable Items
When a product or service is cheap or easily replaceable, users are likely to engage in satisficing behavior and not spend much time analyzing alternatives. People don’t need to compare various rolls of paper towels, for example.
Unique, Hard-to-Compare Items
Finally, products or services that are unique and hard to compare with others aren’t well suited to comparison tables. For example, it’d be hard to come up with a set of attributes to compare works of art.
Types of Comparison Tables
There are two types of comparison tables:
- Static comparison tables contain preselected products and are best used for small (under 5 items) product selections.
- Dynamic comparison tables allow users to decide which items they want to compare and are best for large product selections.
Static Comparison Tables
If you have a small number of products your users will need to compare, you may want to create prebuilt, static comparison tables.
For example, Apple’s most recent release only features three different models of the Apple Watch, so it provides a ready-made comparison table for users trying to decide.
A good rule of thumb is to take this approach if you have 5 offerings or fewer, but we’ll get into limiting the number of compared items later in this article. Static comparison tables usually work well for membership levels or pricing packages.
With this kind of comparison table implementation, you’ll be able to control how the information is displayed on the page.
For example, you can change the copy to fit the space constraints of one cell. Note, however, that this implementation is not as easily scalable as dynamic comparison tables; You’ll have to update the comparison table if you offer a new product or service.
Dynamic Comparison Tables
Dynamic tables allow users to select which items they want to see in the comparison table. They are appropriate when you offer more than 5 products or services.
While dynamic comparison tables scale well as your set of offerings increases or changes, they are usually implemented using a flexible layout, and their appearance cannot be as closely controlled as that of static tables.
Selection of Items in a Dynamic Comparison Table
Two popular ways of allowing users to select which items to add to the table include: compare buttons or checkboxes, and direct manipulation of the items of interest.
Compare Buttons or Checkboxes
Compare buttons or checkboxes appear directly on listing pages. With this method, users can select the items they’re interested in, and then move to a dynamically created comparison page.
Product listing pages tend to be overcrowded, so one major challenge for this implementation is making the Compare buttons discoverable without giving them too much space on the page. The safest option is to include Compare buttons as secondary action buttons, either at the top and bottom of the page, or beneath all product descriptions.
Direct Manipulation of Items
With this method, users can click or drag the products that they want to add to the comparison table. Usually, this action is possible because, like in Garmin’s example below, a special Compare mode disables the regular meaning of clicking on a product. This can also be achieved by adding a separate Compare page, seen in the bottom right-hand corner of the example.
One advantage of this direct-manipulation approach to selection is the opportunity to separate the comparison activity from the product-listing page, keeping that view visually cleaner.
A separate comparison page (like Fitbit’s) is a good option when you don’t have enough products or offerings to justify a traditional listing page in the first place.
Best Practices for Comparison Tables
Regardless of which type of comparison table you choose, follow these best practices to support your users’ decision making.
Use Comparison Tables for Up to 5 Items
Comparison tables support compensatory decision making, in which people engage only when they have relatively few alternatives to consider. When more than 5 items need to be compared, add other mechanisms such as filters to help users narrow down the larger set of possibilities to 5 or fewer.
For static comparison tables, err on the side of simplicity. If you can’t keep a static table down to at most 5 comparable options, reconsider if it should be a static comparison table at all. Depending on the complexity of the information you’re presenting, even 5 options may be too many.
For dynamic tables, consider whether the layout will scale gracefully up to 5 items if users have the freedom to select what those 5 items will be. Most dynamic comparison tables accept 3–4 items only. Consider how much text will need to be included for the attributes, and how that will impact layout and readability.
Also consider the size of the user’s device or browser. You may need to reduce the number of items to two for presentation on mobile. On the other hand, don’t force users to compare only two items at a time if you have the space to show more.
Whatever your limit, make sure you clearly communicate it to your users to avoid confusion and errors. And don’t forget to let users remove items from the comparison, as they narrow down their selections.
Be Consistent
The biggest problem with most comparison tables isn’t design, it’s content. When attribute information is missing, incomplete, or inconsistent across similar offerings, otherwise handy comparison tables quickly become useless. This is especially problematic for dynamic comparison tables, when you’re dealing with many offerings with slightly different metadata available.
Support Scannability
Comparing the pros and cons of different products is a cognitively demanding process. You want to make sure your users can focus on the essentials. An effective way to do this is to make the table easy to scan for differences, similarities, and keywords.
Stick to the standard table layout: options as columns, attributes as rows, with row labels on the left and column labels above. Use consistent text alignment in each column.
When using text within comparison tables, keep it short. Whenever possible, avoid full sentences.
Color coding can help as well — either lightly shading the backgrounds of each column, or coloring the text of the cells. Just make sure you’re maintaining enough contrast and not sacrificing readability.
It’s also important to clearly indicate rows so users can easily tell which attribute a cell refers to, especially when using symbols like checkmarks that can’t stand alone. Row borders, row shading, or extra spacing can help keep the rows distinct and separate.
Sticky Column Headers
Especially when dealing with long lists of attributes that occupy several screenfuls, keep column headers fixed as users scroll. Human short-term memory is limited, and users will easily forget which column is for which product.
Meaningful Attributes
Your comparison table should include attributes that your users will actually care about. Don’t just throw every piece of metadata you have into the table, because it will make the job harder for users.
As much as possible, try to define unfamiliar terms in context, and connect vague attributes to something concrete.
For example, Anker’s comparison table has attributes that are useful in the context of comparing portable power banks: battery capacity in mAh, charging speed, and weight. What really makes this a good comparison table is the fact that it translates those attributes into things that would be meaningful for the average consumer. The battery capacity is 3350 mAh, which is approximately 1.2 iPhone 6 charges. The size is 3.5 x 0.9 x 0.9 inches — about the size of a tube of lipstick. The weight is 2.7 oz, which is similar to an egg’s weight. The average consumer may have trouble imagining what 2.7 oz feels like, but can probably imagine the weight of an egg.
Another effective way to make obscure attributes meaningful is to include links to more information or in-context tooltips with definitions or clarifying information.
Give Users Control
Even if you do a good job making the entries scannable or the headers sticky, it can be hard for users to compare products with many attributes, especially when these attributes span several screenfuls. In those situations, users may have to scroll back and forth between different rows as they compare the pros and cons of different products.
In order to make the task manageable, consider allowing users to select which attributes they want displayed in the table. Collapsible rows are an easy implementation for this feature.
Alternatively, let users hide the rows for which all offerings are similar, and only show the differences.
For simple static comparison tables, consider presenting a simplified table with those attributes you expect will be most important to users, but also allow access to a more detailed table.
Simplify the Comparison for Mobile
Some websites just remove their comparison functionality altogether for small devices. If at all possible, you should try to support some level of comparison on mobile, but it’s unlikely that you’ll be able to show more than 2 items at a time in a comparison table. Remember that on smaller screens, fewer rows will be visible at a time and more strain will be placed on the user’s short-term memory. Therefore, following the previous recommendations (especially making entries scannable and giving users control to choose what they want to display) will be even more important on mobile.
If a true comparison table on a mobile devices is impractical for your offerings, you might alternatively consider converting the table to tabs or lists for small screens. Just remember that these formats do not support compensatory decision making as well, because users have to remember the attributes for each products in order to weigh pros and cons.
The Golden Rule of Comparison Tables
To sum up many of the guidelines we’ve listed here: Above all else, do the work for the consumer. Don’t slow them down with nonstandard or overly long tables with repeated information; don’t ask them to hold things in their memory; and don’t make them Google terms they aren’t familiar with.
Make your users’ decisions as easy as possible: you’ll be happy, and they’ll be happy.
