Lead: Shani Laendler (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
<< Short description of the component and when it is used >>
...
| Table of Contents |
|---|
Description
A widget is a container element which holds a distinct set of content. They are used to organise elements into Layouts and Dashboards within the main workspace.
 |  |
 |  |
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 in comparison to other widgets will determine the possible expansion directions.In dashboards and dashboard-like pages, the widgets should be visually distinct from one another and from other elements on screen. The background of such spaces should support that, for example:
Content
...
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 space is constrained, it will be truncated. The full information will be presented in tooltip.
Action icon buttons:
...
Each widget consists of:
a header, which includes:
either:
a widget title, with or without additional information, or
Tabs (see below).
widget controls (optional), including Icon Buttons and an Action Menu (see below).
a collapse/expand icon to the left of the title (optional - not to be used within customisable dashboards).
the content area.
Widget Title
The widget name will be aligned to the left.
Additional information (if exists) will be aligned to the widget name, separated by a line separator.
Where space is constrained, the widget name and the additional information will be truncated. In this case, the full information (both name and additional information) will be presented in a Tooltip on hover.
 | |
Widget controls
Only controls that relate to the widget itself may appear in the header area. These include:
maximize, such as into a Popup or separate page.
expand/collapse (not to be used within customisable dashboards).
add, remove, and resize (only in customisable dashboards).
configuration.
Content-related actions will be presented in a toolbar within the content area
only.
Actions are presented in hover
Up to 3 main actions will be presented using 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:
When space is constrained, all actions may be moved to the actions menu.
Internal Logic
Tabbed Widget
...
All widget controls (except for expand/collapse) are aligned to the right of the header area, and may include up to 3 elements, including:
Icon Buttons, usually used for primary actions.
an Action Menu, usually used for secondary actions. Where there are no primary actions, all widget controls may be presented in one action menu (without any icon buttons).
Tabbed Widgets
Different content types can be gathered under a single widget
...
using
...
The Tabs. In this case:
tabs replace the widget
title and
any additional information
.
any widget controls refer to the widget as a
Widget Configuration
Generally speaking, all configurations should be saved per user for future sessions, so that if a user changes a widget location or resize it, it will remain in its new position/size for future sessions.
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
Drag
some widgets, especially on dashboard or dashboard-like pages, can be dragged to change their location.In hover over the header area the mouse cursor will change to dragging state:
A drag handle may also be presented (always or in hover only), and will be placed left to the header:
Resize: Some widgets can be resized.
In hover over the resizable boundary line:The mouse cursor will change to drag horizontally/vertically/diagonally
The boundary line will be visually presented as resizable
The hover and resize area should be at list 6 pixels wide.
...
whole (and not to each tab individually).
|  |
Placement and Positioning
A widget can be placed anywhere within the main workspace.
For standard pages, see Layouts for guidance on how to arrange widgets within the workspace.
For data overview pages, see Dashboards.
States
State | Image |
|---|---|
Regular |
 |
Hover (only when draggable) |
 |
Active (only when draggable) |
 |
Disabled
TBD - graphic design
Error
-
Focused
-
Focused Hover
-
Focused Active
-
Focused Disabled
-
Interaction
...
State
...
Image
...
Description
...
Regular
...
Hover
...
Action buttons are presented
Text truncated (when relevant)
...
Hover - header
...
Hover - boarder line
...
Resize
...
Text truncated (when relevant)
All actions are moved to the action menu (when relevant)
...
Collapse (click on Collapse icon button, or select ‘Collapse’ in menu)
...
The content area is collapsed in animation
The ‘Collapse’ button is changed to 'Expand'
Validations and errors
No validation or error
Transitions
Expand collapse will be in animation. TBD - Graphics
Best practices
<<e.g. Slider should display a label its on>>
Use:
In dashboards
When an item stands by it’s own and should be configurable in size and location
On spaces with more than 1 widget
<…>
Don’t use:
As a single widget in a page
<…>
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
<…>
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
<<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?>>
...
Focused |  |
Edge Cases
State | Image |
|---|---|
Empty state |  |
Loading… |  |
Loading error |  |
Interaction
Expand/Collapse
Clicking the expand/collapse icon will show or hide the widget content using an animation. In this case the workspace layout may be changed.
Note: expand/collapse may not be used for widgets within a customisable Dashboard.
Expanded | Collapsed |
|---|---|
|  |
Drag and drop (customisable dashboards only)
Hovering over the widget will switch the widget to the hover state.
Hovering over the header area (including the handle) will change the mouse cursor to a dragging state.
The user can drag the widget to a new location.
See Dashboards and Drag and Drop for more information.
Note: widgets not within a customisable dashboard cannot be moved.
...
Maximize
Widgets may include a maximize option to show the content in a larger space, such as a Popup or separate page.
Validations and errors
Widgets has no special validations.
When there are errors in the content area of a collapsed widget, an indicator will appear next to the widget title.
...
Transitions
Expand and collapse will be animated.
Best practices
Use:
for all content containers within the main workspace.
in dashboards.
Don’t use:
scroll within widgets, where possible. Instead:
make sure the allocated space is appropriate for widgets which contain a lot of data.
limit the content shown, and include an option to show the full content in a larger space such as a Popup or separate page.
General
Widget title and additional information should be short and informative. Avoid long text that will not be fully presented in various responsive states.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
The layout of the content within each widget should fluidly respond to its width. This may include changing text, graphics, table, and spacing sizes.
Where possible, avoid using internal scroll within widgets, either vertical or horizontal.
Where widget size is limited:
See Layout workspaces or Dashboards for guidance on the responsive behavior of widgets relative to one another.
Design
Zeplin link | Screen thumbnail |
|---|
<<Short Zeplin link. You
Use this >>
<<Screen with 200 width>>
Code
...
Code
...