...
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
...
and images
...
.
...
They are composed of items containing primary and in some cases supplemental information, which
...
can be shown as text, icons, or images.
The component may be part of a page layout
...
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>
...
Type
...
Usage
...
Image
...
or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-down Menu, Drag and Drop, or Combo Box.
 |  |  |
Types
Type | Image | Usage |
Simple list |  | The most common list |
...
is a flat collection of objects. |
...
Checkbox list
...
Checkbox list |
...
Up to one line of text.
...
Two-line list
...
Up to two lines of text.
...
Three-line list
...
Up to three lines of text
...
 | A list where the user |
...
can 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
Icon (optional)
...
 | A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page. |
Usage & Behavior
General guidelines
Structure
List items must have a label, with the main object name. If the entire name does not fit, it can be truncated and a Tooltip can be used on hover.
List items can optionally also have:
A leading icon. These should only be used 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)
...
A leading image.
Up to 2 secondary lines of text. Secondary lines cannot have their own leading icons
...
Meta data (optional)
...
or images.
Extra metadata, such as a tag, text, or an icon.
...
These should be
...
positioned to
...
the right
...
of the
...
item, centered vertically.
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.
...
Default State
By default list items are in regular state.
Content
<<Including labels, microcopy, number of items, order of items etc.>>
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
<<for example, how to change a value – type, arrows, use slider>>
<<use Click target to describe the 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
If at least one item is selected the Add to Search button will be enabled
Clicking the Add to Search button will:
Close the popover
Add the selected terms or phrases to the search bar. Multiple items will be managed as if they had the OR operator between them
To complete the search the user will press Enter or click the magnifying glass icon on the search bar (as usual)
The popover will also be closed in clicking outside the popover
Validations and errors
<<used for specific components e.g. slider>>
Transitions
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
<<e.g. Slider should display a label its on>>
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
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 visabule container) , the sorting and the grouping alone are not sufficient and search should be applied (see search).
When not to use
Groupable -For a more complex and longer lists grouping and categorisation can be applied (see Tree view)
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
...
Zeplin link
...
Screen thumbnail
...
<<Short Zeplin link. You
Use this 
>>
...
<<Screen with 200 width>>
Code
Up to 2 action icons, such as delete. These should only appear on hover or when an item is selected. They should be positioned to the right of the item, centered vertically (replacing the extra metadata, if exists).
For lists which support multi-select, the number of selected items will be displayed in brackets to the right of the total number of items. If no item is selected it should display “(0 selected)”.
Single-line list | Two-line list | Three-line list | |
|---|---|---|---|
Full list |  | |  |
Single Item |  |  |  |
Single item with icon / image |  |  |  |
Single item with multi select |  |  |  |
Lists can also have:
A preceding label at the top of the list, showing the total number of items included in the list.
A Search field on long lists, allowing users to find items easily.
...
Internal Logic
Lists should be ordered in logical ways that make the content easy to scan. Order the list using one of these rules:
Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric. Sort numeric values in a sequential order, with the lowest number first.
Chronological. Sort time-related information into chronological order, with the most recent first.
States
State | Image |
|---|---|
Regular |  |
Hover |  |
Active |  |
Active, Hover |  |
Disabled |  |
Focused |  |
Focused, Hover |  |
Focused, Active |  |
Focused, Disabled |  |
Interaction
On hover, the row will be highlighted and Checkboxes or Icon Buttons will appear, where applicable.
When the label is truncated (item name), hovering over it will show a Tooltip with the full label.
Items in the header area, including the search bar and list title, should remain sticky when the list is scrolled.
Selection
There are three possible selection modes:
Interaction | Screenshot | |
|---|---|---|
Single Selection |
|
|
Multi-select checkboxes |
|
|
Smart Selection |
|
|
Search
When the list includes a search field and the user starts typing the characters, the text “<number> found” or “<number> found out of <total no.>” will be displayed instead of the total no. of items.
...
Best practices
Use:
when there is a need to select one or more items from a list.
when you want to show relevant content for each list item.
when content may vary between rows (contrary to a data table, which is more strict in nature).
Don’t use:
For long, complex lists where grouping and categorisation could be applied → use a Tree.
For items with multiple attributes which need to be displayed → use Data Tables.
General:
An optional Search field can be used for long, scrolling lists, to help the user find items easily.
Visual elements, such as leading icons and images, can help the user to scan and grasp a large amount of information.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
|---|---|
Tab |
|
Shift + Tab |
|
Space | Selects or actions the item. |
Enter | Selects or actions the item. |
Esc | N/A |
Arrows |
|
Page Up/Home | Navigates to the first item. |
Page Down/End | Navigates to the last item. |
a-z, A-Z |
|
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 | |
| |
 | |
 |
Code
...