Lists

A list can be used to display content related to a single subject.

Overview

Lists are used to present information in well-formed and organized way. The user can view or take action on list line items. A list displays related content in a vertical format. A list is typically the focus of the screen and composes the main body of the screen layout. Lists are composed of list items. List items should be of a similar and obvious category of information (i.e., a list of design files, or a list of point locations). A list item contains at least a label in a consistent format that helps the user to scan and read the content efficiently. The list order should be carefully considered. Examples of list orders include most recently used first, date created, alphabetical, or numeric value. The user may also filter the list to show certain content. Use filters judiciously.

List Items
  • Crate just odor
  • Daffodil ac facility in
  • Morbid leo risus
  • Port ac consecutive
  • Vestibule at eros

Usage

Use when

  • Creating vertical navigation.
  • Displaying options within a menu.

Don’t use when

  • Displaying tabular data. Instead, use a Table.
  • Making lists of uncategorized information. Use groups of list items to organize similar content.

Specifications

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

  • Default list: 40px height; 16px font size.
  • Small list: 32px height; 12px font size.
  • Large list: 48px height; 16px font size.

Condensed List

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox

Large List

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox

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.