Lists

Specifications

Lists are available in three sizes: default, condensed (small) and large.

Default list

Condensed list

Large list

Behaviors

• Basic lists contain a set of items displayed in rows. Each item is represented as a text label. Depending on the purpose of the list, each row may also be accompanied by a control, such as a checkbox or radio button. The user can also select a row to perform an action on the corresponding item.
• Complex lists contain a set of items displayed in rows. Each item is represented as a text label. In addition to the item label, the rows in a complex list contain multiple pieces of information for each item. Depending on the purpose of the list, each row may also be accompanied by a control. The user can also select a row to perform an action on the corresponding item.
  • Use when the user can benefit from viewing more information about each list item without needing to select the item first.
  • Use when the available space in the design does not let us display a table.

Editorial

Length

• Generally, lists should be used to present simple pieces of information. For more complex sets of data, consider using a Table.

Order

• Arrange list items in a logical way. For example, if the list is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.

Text

• Use list items that are grammatically parallel. For example, do not mix passive voice with active voice or declarative sentences (statements) with imperative sentences (direct command).
• We don’t always have control over the content in a list. Sometimes a list displays user-generated content, such as customer names. The default order of such a list is alphabetical or numeric by date.
• When we have control over list content, present the list items in sentence case (example: Your business name). The default order is alphabetical or numeric by date.
• In instruction copy, use the words, “select” and “clear” to guide users to make selections. Don’t use the word “deselect.” It’s robotic and can’t be translated easily.
• Don’t use punctuation in list items unless one of the list items includes more than one sentence. In that case, all the list items will have end punctuation.