Lead:  Omer.Glazer (Unlicensed)  ONGOING 

Related Pages: << Links to related pages, if relevant >>

Description

Lists are continuous, vertical indexes of text (or images). 

Types 

Type	Usage	Image
Simple list	The most common list, a flat collection of objects.
Checkbox list	list of options where the user may select multiple options

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 can have 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 nodes 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:

 Focus, Hover, Selected, Disabled.

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, such as alphabetical, numerical, chronological, or by user preference.

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

Best practices

• Use data lists when

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

  • You want to include active content like a chart

  • 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 slider is displayed beside the list . the sorting and the grouping alone are not sufficient and search should be applied (see search)

Design

Code

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