Comparison table

Comparison table

image

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

image

Netlify

image

Tesla

image

Google cloud

image

AWS

image

Apple

image
image

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?

Sketches

01

image

02

image

03

image