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). They
| 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. List components serves many time as a sub component within larger UI components |
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 >>List components serves many time as a sub component within larger UI components
Type | Usage | Image | Drag and drop | Tree list | Checkbox list | ||
|---|---|---|---|---|---|---|---|
Basic line list | The most common list, a flat collection of objects. | ||||||
| Up to one line of text. | ||||||
| Up to two lines of text. | ||||||
| Up to three lines of text | ||||||
Checkbox list | |||||||
Tree list | Hierarchically arranged collection of objects | ||||||
Drag and drop | |||||||
Usage & Behaviour
<< Use a visual for each sub-section >>
General guidelines
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
Logical ordering - Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference.
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, the sorting and the grouping alone are not sufficient and search should be applied (see search).
Groupable -For a more complex and longer lists grouping and categorisation can be applied (see list view)
Structure
<<A description of the structure of the component, including areas, sub-components etc.>>
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 top right side of the list item.
Action icons (optional)
Should be aligned to top right side of the list item. should appear only on item hover (instead of the meta data if exists)
States: Focus, Hover, Selected, Disabled.
Placement and Positioning
...