List guidelines

Lists contain rows of text, which allow for easy scanning.

Styles and types

Lists can take on many styles and forms depending on their required use.

Plain

A plain list has no visual indicators to let the user know when a new item starts or where the previous one finishes. This is fine so long as the item text is short and looks like a list.

Lines

Lines can be used to separate each list item.

Alternating rows

Alternating between colors makes it much easier for users to visually separate different content. This is called zebra stripes or alternating rows.

Title

Adding a title makes it clear to the user what the whole list is about.

---

Uses

Lists can have 3 main uses: static display, a preview of content, or navigation.

Static display

A static list can be used as a graphic element to display content more attractively. The items in the list don’t have to link out to anything if it isn’t needed.

List of content

Lists are often used to display content previews or information. The content can be the line item itself or a preview.

Navigation

Lists can be used as navigational elements. They can work like tabs to change the appearance of a section or pane.

---

Best practices

One of the most important things a list does is allow users to quickly scan and take in items. Because of this, it’s very important to clearly separate out the different line items.

Alternating rows

Having alternating row colors makes it easier for the user to distinguish one row from another. This is especially helpful if there’s a lot of copy per line.

Use negative space to improve scannability

When line items are too close together, it makes a list more difficult to read. Having a slightly wider spacing gives the user a visual pause between each item.

Keep consistent line lengths (where possible)

Ideally, you would like all the items in your list to have a similar length as it’s more visually appealing and makes skim-reading easier. However, depending on your content, this may not be possible.

---