Rich List

Usage

When to Use

Use a rich list to show a preview of multiple items of one category, like issues in YouTrack or builds in TeamCity. Each row of the rich list displays one coherent item. When users click on one of the list items, they will see more detail about that item. This can be done in several ways, e.g., by showing a dialog, by opening a new page, or by unfolding the row.

When Not to Use

If you just want to display a set of data, use a data table instead. In contrast to a rich list, the rows of the table do not display a preview of some item but show the whole relevant data of the corresponding dataset, similarly to a spreadsheet.

Variants

Single-Line Rich List

The single-line rich list is the simplest list variant and consists of only one line of content per row. The biggest advantage of single-line lists is that users can quickly scan and compare multiple items.

Multi-Line Rich List

Lists can consist of two or more lines of content per row. Multi-line lists have the advantage of giving more information for each list item. However, they are harder to scan. It is generally best to not surpass three lines per item.

Selectable Columns

It is possible to add a checkbox to each list item. This enables users to take actions on multiple list items at once.

Content

Since rich lists usually have no column heading, make sure that each item of your list is understandable by itself. This can be archived by adding icons, units, or even labels. A single list item should always make sense on its own.

Give the information within your list items a hierarchy and a logical structure. Vary your font color and font size according to the importance of specific information on your list items.

Only include the most important information of your items in your list. Remember that rich lists are only supposed to give a preview of some data, not to display the whole data. Offering less information in that preview will help your users to quickly find the item they need without feeling overwhelmed.

Each list item should be consistent with the others. Most importantly, don’t change the position of items if some item is missing.

Layout

The layout of lists can be very different, depending on the individual requirements. The following illustrations only serve as examples. However, always stick to the rules defined in the Sizing and Spacing Guidelines when creating a layout.