PatternCraft conventionIntermediate
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.
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.
In practice
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.
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 BiasCognitive bias
- Decoy EffectCognitive bias
- Hick's LawLaw
- Choice OverloadPsychology
- Cognitive LoadPsychology
- ColumnsUI foundation