Basic and complex lists help us organize and present customer business information in a way that’s scannable and useful.

Usage

When we don’t have the space or don’t want to complicate a screen with a full table, lists are a useful way of clearly presenting information about a customer’s business. We have two options for displaying this information:

  • A basic list includes a relatively simple set of content, such as a list of names.
  • A complex list includes more tricky content, such as a list of names and related currency amounts.

Appearance and behavior

Let’s look at the two types of lists in more detail.

Basic lists

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.

Appearance:
50 px height rows, horizontal dividers 1 px, #D7D4DC

Complex lists

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.

We often use the complex list style in the split view layout. List items may also include status information similar to those shown when indicating status in tables.

When do we use complex lists?

  • When the user can benefit from viewing more information about each list item without needing to select the item first.
  • When the available space in the design does not let us display a table.

Appearance:
50 px tall rows, 265 px width

Responsive behavior

Lists style on mobile devices
50px height rows, horizontal dividers 1px #D7D4DC

Lists style on mobile devices – selected
50px height rows, horizontal dividers 1px #D7D4DC

Content guidelines for lists

  • 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.
  • Recommended voice and tone attribute: straightforward

Demo

Launch Preview
x
px wide

  • Was this Helpful?
  •