IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

User Lists

User lists are common for those who play on the same team, or follow the same brand. They must remain legible so our users can easily find who they're looking for.

Scale

When choosing the avatar size for each user list, consider the interface as a whole and how it will fit in. Stick with small, medium and large.

Large: When space is plentiful, opt for large user lists that list primary, secondary and nonessential information in an order.

Usage

List Items

Regardless if the list will display one user or more than fifty, each item should be identical. In some cases the list may grow over time, like when a user joins another team. There is no minimum list requirement to use this pattern, but be wise when displaying long lists.

Don't force the user to scroll through infinite lists to find who they’re looking for.

Don'tforce the user to scroll through infinite lists to find who they’re looking for.

Do use search and scrolling to easily find people.

Douse search and scrolling to easily find people.

Layout

User lists should always be displayed vertically. Vertical space is abundant on both the web and mobile application, and scrolling is second nature. Don’t go against the grain and display user lists in unexpected layouts.

Don't format user lists in multi-column layouts.

Don'tformat user lists in multi-column layouts.

Do divide items in long lists.

Dodivide items in long lists.

Microcopy

Hierarchy

Each item in a user list should repeat the information in the same format, in proper hierarchy. Primary information should always appear first, then secondary, and finally supporting, nonessential information (if applicable).

Don't organize content in a random order.

Don'torganize content in a random order.

Do use nonessential text to support the information hierarchy.

Douse nonessential text to support the information hierarchy.

Limit Information

Depending on the context of the list, it’s easy to accidentally cram in a lot of relevant information. Be intentional with what is displayed and choose to limit to the most important pieces of content.

Don't overload the list item with all available content.

Don'toverload the list item with all available content.

Do pick and choose the most important pieces.

Dopick and choose the most important pieces.

Content and Color

Use text for all content in a user list. Make use of small and micro sizes, both in default and bold weight. To further emphasize each piece of information, stick to using Contrast, Default and Nonessential content colors.

Don't mix and match text sizes.

Don'tmix and match text sizes.

Do follow a consistent format for each.

Dofollow a consistent format for each.

Don't use one color for all elements in a list.

Don'tuse one color for all elements in a list.

Do use content hierarchy to inform color choice.

Douse content hierarchy to inform color choice.

Don't switch up content that the user can interact with.

Don'tswitch up content that the user can interact with.

Do keep interactions between items orderly.

Dokeep interactions between items orderly.