Comparison
Putting options side by side so differences can be seen rather than remembered.
Definition
Comparison presents multiple options against the same attributes simultaneously. It removes the working memory cost of holding one option while evaluating another.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Users must choose between similar options.
- Differences are the deciding factor.
Common mistakes
- Too many options at once.
- Attributes chosen to favour one option.
- Headers that scroll out of view.
- Comparing on the attributes you have data for rather than the ones the decision turns on.
Design rules
- Align attributes in rows so the eye can sweep across a single dimension.
- Highlight the differences and de-emphasise attributes where all options are identical.
- Limit to three or four options at a time on desktop, fewer on mobile.
- Keep the attribute column and the option headers visible while scrolling.
- Use identical units and formats down each row, so magnitudes are directly comparable.
- Give a recommendation where you honestly have one, with the reason.
Comparisons that are actually comparable
Do
- Keep attribute rows aligned, with the same units and precision across columns.
- Show differences plainly, and let the reader hide rows where everything matches.
- Keep the attribute labels visible while scrolling horizontally.
- Say when a value is unknown rather than leaving a blank that reads as absent.
Do not
- Pad one column with attributes only it has.
- Use ticks and crosses where the answer is actually a number or a condition.
- Highlight the option you would prefer them to choose and call it a recommendation without saying who it suits.
- Allow more columns than fit, so the comparison needs horizontal scrolling at the widest screen.
Rendering each kind of attribute
Most comparison tables fail by flattening everything into ticks and crosses, which destroys exactly the detail the reader came for.
| Attribute | Render as | What goes wrong |
|---|---|---|
| Present or absent | Tick and a dash, with text for anything conditional | A tick that means available as a paid add-on. |
| A quantity | The number, with the unit, same precision down the row | Unlimited in one cell and 10,000 in the next, so neither can be judged. |
| A tier or quality level | Named levels, defined once above the table | Good, better, best, which carries no information. |
| Conditional on plan or region | The condition, in the cell | A footnote marker the reader has to hunt for. |
| Not known | Not published, said plainly | An empty cell, which readers correctly read as absent. |
In practice
- i.
Sticky headers in comparison tables
Pricing pagesKeeping plan names visible while scrolling through fifty feature rows is the difference between a usable comparison and a scrolling exercise.
- ii.
The row that only one plan had
Manufactured differencesA comparison table with eleven rows unique to the top plan is an advertisement in the shape of a table. Readers spot it, and it costs the whole table its credibility.
Local chart
PAT·006 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Anchoring BiasBIAS·001 · Cognitive bias
- Decoy EffectBIAS·012 · Cognitive bias
- Hick's LawLAW·001 · Law
- Choice OverloadPSY·002 · Psychology
- Cognitive LoadPSY·001 · Psychology
- ColumnsFND·040 · UI foundation
Often used with
These usually appear in the same screen or the same decision.
- Data TableCMP·025 · Component