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.
The first step to enabling comparison is providing consistent information for all comparable products or services. However, when that information is distributed across detail pages, the interaction cost and the cognitive load both increase: users are forced to remember information, take notes, flip between tabs, or open multiple browser windows.
This is where the comparison table comes in — a well-known, yet often neglected or misused pattern. The basic comparison table uses columns for the 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 comparison tables are equally well-suited to services, membership levels, pricing packages, software features, tuition rates, or 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.
To understand when you should use a comparison table, you have to first consider how people make decisions.
When people have to choose among many alternatives, it’s hard to compare the pros and cons of each individual alternative, and as a result they engage in noncompensatory decision making. To narrow down the number of alternatives to a manageable one, they usually use one hard criterion that outweighs any other considerations. For example, a user looking to buy a new car might filter out all the cars that are more expensive than that $20,000, even though some of them may be surpassing the budget by a very small amount. 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: they look at the individual merits of each and compare their advantages and disadvantages according to a number of criteria. People might accept a negative attribute as a tradeoff for a positive one. 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.
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:
- Similar items are not necessarily mutually exclusive. For example, unlike a microwave or a laptop, consumers are unlikely to purchase only one shirt, so Zara doesn’t need to put together a comparison table to let users see several shirts side by side.
- The product or service is simple, and users wouldn’t be interested in analyzing the 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.
- The product or service is cheap or easily replaceable (e.g., a pen, paper towels) and users are likely to engage in satisficing behavior and not spend much time analyzing alternatives.
- The product or service is unique and hard to compare with others. For example, it’d be hard to come up with a set of attributes to compare works of art.
Outside those exceptions, a comparison table’s applications are limited only by your imagination. Pretty much any time your users want to choose among similar offerings, especially if multiple factors contribute to the decision, it’s an opportunity for a comparison table.
Types of Comparison Tables
Some comparison tables are static — they contain preselected products; others are dynamic and allow users to decide which items they want to compare. The type you need will largely depend on how big your product universe is: static tables are used for small (under 5 items) product universes and dynamic tables are appropriate when your product universe contains many items.
Static
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 currently only sells 5 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
Dynamic tables allow users to select which items they want to see in the comparison table. They are appropriate for situations where your product universe is larger than 5 items.
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 directly on the 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 the items of interest. With this method, users can click or drag the products that they want to add to the comparison table. Usually this action is possible either because, like in Garmin’s example below, a special Compare mode disables the regular meaning of clicking on a product (which normally takes users to the product-detail page) or because, like in Fitbit’s example, the site has a special dedicated Compare page.
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, an extra consideration is 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 a design problem, it’s a content problem. 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 cons and pros 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. An example of this is on an Amazon page for an Anker portable power bank.
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. Additionally, 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.
Think of a comparison table as a tool to help each user find the option that suits them, rather than a way to upsell them. It may be tempting to manipulate users toward buying the most expensive option, but an honest presentation will be more profitable for your company in the long term.
Helping users determine the solution that’s best for their needs helps you in several ways:
- Don’t try to manipulate your users, and you’ll avoid losing their trust. Many users will detect manipulation which will drastically reduces the credibility (and thus persuasiveness) of your site.
- When people buy what’s best for them, they’re more likely to be satisfied customers, and promote your brand to others (also improving your NPS).
- Beyond valuing the next click, you should value the next year: the more somebody values their current interaction with your website, the more likely they are to turn into loyal users who’ll return.
Make your users’ decisions as easy as possible: you’ll be happy, and they’ll be happy.
For more tips on supporting your users’ cognitive processes, like decision-making, check out our full-day training seminar on The Human Mind and Usability.
Share this article: