Comparison table
Description
This table compares different types of services or price plans within a product. It could also be used for other types of comparison
When to use this pattern
For use on product websites and in marketing material to help users choose a product.
When not to use this pattern
This pattern should not be used within an application.
Variations of this pattern
It may vary by the number of columns, but shouldn’t be more than the screen width can comfortably allow.
Other close relatives:
- Table
- Expanding table cell
Attributes
- Headers
- Description text
- Links
- Highlighted section
- Ticks
How it works
This pattern is mainly read only but could contain links to the product.
Principles
- Clear
- Concise
- Scannable
- Honest
- Reliable
Key components from Vanilla
- Table
- Button
- Tick icon
Recommendations
Do
- Use clear headings
- Group content sensibly
- Don’t use repetitive language
- Describe the differences
- Use helpful links
- Add tooltips to help explain the product
Don’t
- Don’t overload the table with information
This pattern in use
The current pattern
Good
- Horizontal scanning is easy
- Information dense
- Ticks are easily recognisable
- Flexibility
Bad
- It may not scale well if more levels of support are added (an upper limit of the number of columns)
- The grey highlight is ambiguous as it could mean disabled
- Subtle column titles
- Sectioning could be helpful
- No filtering to allow the narrowing of comparison
- Column headers are lost when you scroll
- No colour - even though ticks are coloured elsewhere
- Does not use vanilla
- No overview or context is given
- The first column header should be something like “Feature”
Some examples
Ubuntu
Netlify
Tesla
Google cloud
AWS
Apple
Ideas for improvement
- Add a sticky header so that column title are always visible
- Emphasise the most important differences
- Split the table into obvious sections, instead of having one long table
- Add tooltips for more info
- Add some short descriptions at the top of the table or each column
- Add some colour to make the comparison easier
- We could try removing horizontal lines to reduce the visual repetitiveness
- Scroll horizontally when many columns are needed?
