COMPARATIVE TABLES AND ANALYSIS

Comparison is one of the most critical activities users perform on the web. ... 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
Comparative research, simply put, is the act of comparing two or more things with a view to
discovering something about one or all of the things being compared. This technique often
utilizes multiple disciplines in one study.
What are the main objectives of comparative analysis and why are they important to
external users of the financial statements, such as investors? A comparative analysis on a
financial statement is used to identify any new trends for specific or multiple time frame; used for
straight across comparison.

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.

apple.com: Ensure users can find a static comparison table by including a link
to the table in your information architecture alongside your product menu.
Apple includes a link to its static comparison table in the Watch secondary
navigation menu, alongside the links to the various Apple Watch models.
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:

1. 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.

Checkmarks (left, homedepot.com) and buttons (right, lowes.com) are the two
most common ways of allowing users to select items for an interactive
comparison table.

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.

delta.com: Delta’s interactive comparison tool is only revealed when users

hover over products. Don’t hide the comparison tool behind hover effects.

2. 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.

garmin.com: Garmin features a COMPARE button at the top of its product-

listing page. When that button is pressed, clicking on a product adds it to the
comparison table instead of leading to that product’s detail page.
Unfortunately, this grey ghost button fades into the UI and is not easily
noticeable.
fitbit.com: FitBit offers 7 models of fitness trackers. A dedicated comparison
page lets users choose the products to compare. Note that this solution is
impractical when the product universe is big, and may be unnecessary if you
already have listing pages.

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.

Apple’s dynamic comparison table for its Mac computers unnecessarily

restricts users to comparing two items, even at very large screen sizes
(shown here on a 3008x1692 resolution monitor.)

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.

bestbuy.com: This comparison table displays the attributes for 4 different

mirrorless cameras sold by Best Buy (two Sony cameras, one Canon camera,
and one Panasonic camera). The metadata for the Panasonic camera is
much richer than for the others. It can be challenging to keep the metadata
consistent and up to date, especially when companies sell many products
from many different manufacturers. However, if the information isn’t complete
for all compared products, it might as well not be in a comparison table at all.

four membership levels, each column has a different value for the attribute
Ads and spam: Zip, Zero, Zilch, and Nada. Comparison-table values aren’t a
good place to showcase your site’s personality — it’d be better to leave these
values equivalent and not distract users while they scan for differences.

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.

williams-sonoma.com: Williams Sonoma does a good job categorizing pans

for this static comparison table. Unfortunately, the horizontal row headers are
nonstandard and impede scannability. The narrow paragraphs under
DISTINGUISHING FEATURE are not scannable or easy to read.
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.

FitBit.com uses a different color for each column’s checkmarks to help users
clearly differentiate between each product’s features. This color-coding
approach wouldn’t work quite as well for more complex attribute values that
can’t be expressed in checkmarks.

techsmith.com uses color-coded columns to show the different features

available in its software offerings, as well as which platforms they can be used
on.

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.

disneyworld.disney.go.com: Disney offers a dynamic comparison table to help

its customers compare different annual passes. Unfortunately, it doesn’t have
fixed column headers, so users are forced to remember column names, or
scroll back up the page to check which column is for “Disney Platinum Plus
Pass” and which column is for “Disney Platinum Pass.”
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.

amazon.com: The manufacturer’s product-comparison table translates

technical attributes into language that is understandable by the average
consumer.

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.

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.
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.