Lead: Shani Laendler (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
<< Short description of the component and when it is used >>
<< Most communicative screenshot of the component >>
Basic Flow
<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>
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 >>
<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>
...
Type
...
Usage
...
Image
...
<< Link to the relevant page >>
...
<< Link to the relevant page >>
Usage & Behavior
<< Use a visual for each sub-section >>
General guidelines
<< Describes the component, use sub-section when they are relevant to the components >>
<< In case of a complex component duplicate this section, describing each sub-component separately >>
Structure
<<A description of the structure of the component, including areas, sub-components etc.>>
Placement and Positioning
<<For example, in popups and toast messages>>
Default State
<<When there is more than one state for a control or area. Including default values>>
Content
<<Including labels, microcopy, number of items, order of items etc.>>
...
Usage & Behavior
General guidelines
Structure
Header:
Widget name and additional information
Actions: action icons and/or action menu
Content area
Placement and Positioning
A widget can be placed anywhere in a page.
Its location on the page and the location of other widgets will determine the possible expansion directions
Content
...
<<Including labels, microcopy, number of items, order of items etc.>>
Widget header is aligned left.
Additional information is aligned to the header, separated by a line separator. It should be short and informative.
Avoid presenting a long description that will not be presented to its full under various responsive states.
When there’s not enough space to show the full information, it will be truncated. The full information will be presented in tooltip.
Action items:
Includes only actions that are widget-related and NOT content-related (e.g. expand/collapse widget, maximize widget, delete widget, configure widget, etc.)
Actions are presented in hover only
Only up to 3 main actions will be presented, represented with icon buttons. additional, secondary actions will be presented in an actions menu.
In some cases all actions can be presented in the action menu, especially when no action is a primary or important or when space is constrained:
Internal Logic
<<For example, controls dependencies in a form>>
In hover, the additional information should be truncated when space is constrained:
Expand-collapse: in some cases the widget can be collapsed. This option will be available from the action buttons area.
The widget will be collapsed and expanded in animation
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
...
<<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
<<Does this component/Pattern requires specific handling?>>
See general guidelines described in /wiki/spaces/UX/pages/308969693
Screen reader support
<<Does this component/Pattern requires specific handling?>>
See general guidelines described in /wiki/spaces/UX/pages/308248620
Contrast & size compliance
<<Does this component/Pattern requires specific handling?>>
Are taken into consideration. For more information see general guidelines described in Contrast + Font Size Guidelines
...