Lead: Omer.Glazer (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Info |
|---|
Convert old Wiki pages to the new Wiki page. Steps
|
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
Lists are continuous, vertical indexes of text (or images).
| Expand | ||
|---|---|---|
| ||
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
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
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>