Lead:  Omer.Glazer (Unlicensed)  ONGOING 

Description

Lists are continuous, vertical indexes of text and images. 

They are composed of items containing primary and supplemental information, which are represented by icons and text.

They help improve the visual comprehension of the content they hold.

The component may be part of a page layout as well as popover dialog box.  

Types 

Simple list	The most common list, a flat collection of objects.
Checkbox list	list of options where the user may select multiple options
Tree list	a hierarchical list with expanding and collapsing nodes

Related components

List components serves many time as a sub component within larger UI components like: Tree list, Drop Down Menu, Multiple selection drop down menu, Drag and drop and Combo box

Usage & Behaviour

General guidelines

Structure

a list item can have a leading icon/image or not, it can non or up to 2 secondly lines.

Single-line list	Two-line list	Three-line list

Icon (optional)

should be used only if the list can contain several types of objects . If all items are of the same type, an icon should not be used.

Label

Object name + tooltip in case the entire name does not fit.

Secondly text (optional)

One or two Secondly text, they should not have their own leading icons.

Meta data (optional)

Can be text , tag or an icon. Should be aligned to middle and right side of the list item.

Action icons (optional)
Should be aligned to middle and right side of the list item. should appear only on item hover or selected (instead of the meta data if exists)

States:

State	Image	Comment
Regular
Hover
Active
Focus

Content

Can include: image, tags, icons, secondary text.

Internal Logic

Logical ordering - Lists should be sorted in logical ways that make content easy to scan

Choose one of the following styles to order the list:

• Alphabetical: Sort the list items alphabetically if more than 8 select options are available. This helps the user find the right option quickly. Sort currencies, names, and similar content alphabetically.

• Numeric:Sort numeric values into a sequential order, with the lowest number first.

• Chronological:Sort time-related information into chronological order, with the most recent first.

Interaction

• Mouseover an item will highlight the row and show a checkbox or action icons if exist.

• Clicking a single list item will select it.

• Clicking a checkbox will select / deselect the relevant item

• Click on the item label (+counter) will select the item.

• When the label is truncated (item name), hovering over it will show a tooltip with the full label

Selecting:

1. Single select: One item of the list can be selected. To select an item, click anywhere on the item row. Always keep one item selected. For single selection, this is the preferred mode.

2. Smart selection: Single or multiple selection in a single interaction.

3. Multiple selections: Allow the selection of one or more items. For this, the list provides checkboxes on the left side of each line item. Each item is selected independently of the others

Scrolling:

wide lists/long tables - sticky areas. When the user scrolls, the title and the filter info bar should stick to the top of the surrounding layout container

Best practices

• Use data lists when

  • A flexible layout is more important than arranging information in a grid

  • You want to support relevant content like a charts

  • Content displayed may vary between rows

• Don’t use

  • For a more complex and longer lists grouping and categorisation can be applied (see Tree view)

  • For more complex items with multiple attributes that should be displayed use Data Tables

Other principles

• Actionable - Lists present content in a way that makes it easy to identify a specific item in a collection and act on it.

• Searchable- When a list is really long (more than the visible container)and a scroller is displayed beside the list . the sorting and the grouping alone are not sufficient and search should be applied (see search)

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Focus management

We already set a general guidelines described in Keyboard & Focus Management Guidelines

Screen reader support

Make sure the components support screen reader for content or behavior where needed - see Screen Reader Guidelines

Design

Code

<<a box containing the code - discuss with Femi>>