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 nonnegociable 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 compensatorydecisionmaking: 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.
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 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.
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.
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.
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.
Everybody who shops on the web compares. They don't just compare products from different vendors, but also different products from the same vendor. This comparison behaviour goes for visitors of both b2c and b2b websites.
Allow users to compare
Comparing is a top task so make sure it's easy to do on your website. If you make it hard to compare your products, there's a good chance your website visitors will not become customers.
What do your visitors expect?
- Main characteristics of the product or service on the product page, pereferably as a bulleted list.
- An overview of the similarities and differences of comparable products on 1 page. It's really annoying if you have to get out pen and paper to write down product characteristics and then look for the differences between the products.
What do you need in order to compare?
- Clearly differentiated products or services. If you're not sure what the difference is between product A and B, how is your customer supposed to know?
- If you want to compare products in a meaningful way, you need to know what the deciding factors are for your customers. Seems easy, right? Wrong. In about half of the projects we do, the company doesn't know what their customers deciding criteria are.
What if you don't meet these criteria?
The choice is simple: adapt or lose customers.
Less than 10 products or services to compare?
Basic principle: all on 1 page
A search feature or wizard is not needed here. Your users probably aren't rocket scientists but they aren't idiots either.
Option 1: table
- Users love this. If it's in any way possible, try this.
- Recent tests show that putting the most expensive products first is the most effective.
Top row: good examples by Shopify en Combell, lowest to highest price. Basecamp (bottom row) does slightly better: from highest to lowest price and with extra information on mouse-over.
Option 2: separate blocks
- Clear heading.
- Main characteristics in bullets, preferably in such a way that it's easy to compare the different products or services (a.o. by the same order and approach).
- Each block should be clickable in its entirety.
- Line up blocks horizontally whenever possible. That creates a better overview.
The blocks on the Telenet website offer a pretty good overview.
More than 10 products or services?
All products on 1 page with faceted search on the left.
2 good examples of refining results by faceted search: Bol.com (left) en Booking.com (right)
7 things to keep in mind about faceted search
- Put the faceted search on the left. You can put it on the right, but less people will notice it. You can put it at the top of the page as well, but that will push the actual results down and that's not ideal.
- Limit facets to the main product characteristics. Don't cram every detail in there.
- Take your customers' view on what the product's main characteristics are. Remember: what you think, doesn't matter. It's all about your customers.
- Make selecting and deselecting the facets easy.
- It should be impossible for users to make a selection that delivers zero results.
- In many cases, it's helpful if the user can order the results list (alphabetically, by price, by size, …).
- If there are more than 20 products in your list, it's best to go for numbered results pages (cfr. Google).
A more detailed comparison, that sums up all characteristics of comparable products in a table can be very handy for certain products.
Have you seen other good examples? Maybe you came up with one yourself? Feel free to share it in the reactions.
P.S. A clear view of the strengths and weaknesses of your website, intranet or app?
Would you like to sell more through your website? Get more leads? More subscribers on your newsletter? More visitors who reach their goal on your website?
Don't wait any longer. Order a usability review. We look at the most important pages on your website and give you real-world solutions to tackle your website's problems.
Stop losing money with your website. Take the lead on your competitors - just like the 387 companies and organisations who went before you.