Feature Comparison Tables
Somebody shopping for a washing machine opens four product pages in four tabs and switches between them, scrolling each one to find the spin speed.
Help buyers decide faster: a pricing-table lesson for your commute.
Listen to the full Feature Comparison Tables course on DesignPath
Three of the four list it. The fourth has an empty field. They now have to decide whether that machine has a bad spin speed or whether nobody filled the form in, and there is no way to tell from the page.
An hour later there are seven tabs and no decision. This is the state a comparison table exists to prevent: too many similar options, a real cost of choosing wrong, and no way to lay them side by side.
The pattern has one precondition that decides everything. A comparison is only as good as the data behind it, and a table with empty cells tells somebody the shop does not know its own products.
Anatomy of a Comparison
A comparison table is not one screen. It is a set somebody builds while browsing, then reads somewhere else, and the parts live on both sides of that move.
On the Listing Page
Three parts do the assembling.
The selection control on each product, usually a checkbox. The confirmation that a selection registered, which is what stops somebody clicking twice. And the comparison bar, docked at the edge of the listing page, showing what is currently selected with a way to open it. Without the bar, a selection made three pages ago is invisible and probably forgotten.
On the Comparison Itself
Five more parts carry the reading.
The column headers, one per product, which have to stay visible while a long attribute list scrolls. The attribute rows. The row groups, gathering rows into named sections. The view filter, switching between everything, only what differs, and only what matches. And the share link, which is the part that makes the comparison survive the session.
Where This Sits Against a Pricing Page
The two patterns look identical and answer to different rules.
A pricing page compares a fixed set of plans a vendor chose, so there is no selection step and the audience is deciding whether to buy at all. A comparison table compares a set the shopper assembled from a catalog, so selection, persistence and sharing are half the design. Pricing Pages covers the first.
Pro tip: Select two products on a site you shop from, then browse away and come back. Whether your selection survived tells you more about that team's comparison design than the table itself does.