The “Comp Chart Product – 4 columns” is a table containing a list of items displayed in rows, where each item is represented by a dot. Depending on the purpose of the list, each row may also be accompanied by a control (expand/collapse – see 2-column tab for example). Tables provide users with a legible format for sets of information, which can include text or numeric data. Consistent table treatment helps users to comprehend information across screens and site sections. Text in tables should be concise to ensure readability and protect the presentation of the data within the grid.

Usage

Comp charts are used in main website as well as landing pages. Comp charts need to be organized in the same way and list features in the same matter in order for the customer to orient themselves easily and allow them to compare between products.

Fixed and flexible

Fixed
Fixed
• The dots indicating the availabiliy
• Type sizes
• The colors
• Same features should always be described the same
to ensure easy orientation and absorption

Flexible
• Number of features listed, (ideally the order should be synchronized to ensure recognition accross several encounters and products)
• The number of products to compare no more than 2—4.

Appearance and behavior

• Columns within tables are differentiated in color: QuickBooks Online uses QuickBooks green and QuickBooks Dk gray is used whenever there is a comparison against QBO. In the above example, it is Self-Employed.
• Tables include column headers and may include an optional text footer.
• Column headers are center aligned with the content in the column; the color of the header indicates the color of the column dot.

• When multiple tables appear on the same screen, their fields should align vertically.
• Product “burst” is optional and the title is editable by the author.
• If the section background color is light gray, a 1px gray line (Gray 05 is added between columns; it the
section background color is white, a 1px white line (White) is added between columns but not on the far right or left columns.

Do’s and dont’s

Do’s
• Add and substract features as needed.

Do’s
• Don’t change the type size within a breakpoint
• Do not randomly adjust the order of the features.
• Do not use elements of the comp chart in the ‘Structural Section’ of the page including: Header, Hero, On-page Nav, or Footer.

Copy guidelines

• Body 1 optional section subhead is sentence case and limited to one line
• Body 2 sentence case and limited to three lines max.
• Keep the feature description concise

Usage

Please refer to the Desktop tab for sub-section overview, copy guidelines, interaction rules and 
behaviors, when to use/when not to use.

Appearance and behavior

Usage

The mobile version of the comp chart has not been sufficient developed and requires further 
exploration to be meaningful on smaller devices.

  • Was this Helpful?
  •