Lead: Vainerman Ziv, Revital (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
...
| Table of Contents | ||
|---|---|---|
|
Description
The
...
info pane is
...
located on the right side of the
...
page. It may contain:
information and actions relating to selected items within the main page content, or
additional content related to the main workspace.
...
Types
There are two types of details pane:
Type | Usage | Image |
|---|---|---|
Collapsible details pane |
|  |
Static details pane |
|  |
Usage & Behavior
General guidelines
...
Structure
The
...
details pane
...
Page related content and options -
summary, more information and/or actions related to the the contextual workspace
Can be presented as an empty state for the page before selecting an item
Item/s related content and options -
summary, more information and/or actions related to the selected item.
in some areas multi item selection is available and may present other content and options
Structure
Header
The Details Panel may contain a header with general information
In WFM there header is as presented below:
It’s elements are - Main title, Secondary title (optional), Thumbnail (optional)
the dimensions are - width is 320px and height is 50px
...
...
The Details Panel may contain tabs
It may have up to 5 tabs
The tabs can be changed contextually
The tab caption will be truncated + tooltip when there isn’t enough space
...
...
In case of one tab (or no tabs) the details pane wont show the tabs and his name will be presented as a title
Tab may contain -
Header
Content area - card/s, table, list, text, form, and visual graphs
Action area - may be along the data and below in a designated area (optional)
Vertical scroll when needed, and horizontal scroll only when there is no other alternative (should be discussed with UX team)
Some tabs may include drill down options or links to other areas
...
In case used there may be a contextual actions area at the bottom of the pane
...
Placement & Positioning
The Details Panel is part of the entire workspace, on the right side of the screen (when in LTR mode)
The Details Panel in WFM can be pinned (keep being expanded) or unpinned (expanded by selection)
When collapsed - the details pane will present the collapsed area with an expanding option, hovering will highlight it as presented below
...
Empty state
In case of contextual details pane, an empty state mode may be presented with guiding text or actions
...
Transitions (LTR mode)
When the Details Panel is being expanded from collapsed mode, the transition will be a slide from right to left
When the Details Panel is being collapsed, the transaction will be slide from left to right
When details pane is being loaded a corresponding a animation should be presented
...
Validations and Errors
The Details Panel may have validations and errors within the content (cards, forms, etc)
Best practices
When to use Details Panel
1. When there is a lot of information/meta data to present on an item
2. When there is additional secondary information and actions to present on an item/page
3. when there is a benefit of viewing some content see side by side
Detail pane examples:
WFM
...
Path Manager - Page related
...
Knowledge Management - Page related
...
Form designer - Page related + tabs
...
Future Version (TBD)
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 Keyboard & Focus Management Guidelines >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>
Contrast & size compliance
<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>
Design
...
Zeplin link
...
Screen thumbnail
...
contains:
a header.
tabs (optional).
the content area.
an action area (optional).
a collapse/expand area (optional).
Header
The header may contain:
a pane title, which may wrap onto 2 lines. Longer titles will be truncated, and show a Tooltip on hover.
a secondary title.
a thumbnail image (for example, an avatar).
a contextual help icon.
Where the pane is collapsible, the header will also contain:
a pin icon (see Interaction below).
 |  |  |  |
Tabs (optional)
Where relevant, the details pane can include up to 5 tabs.
Tabs may not exceed the width of the panel; there should be no horizontal scroll.
All tabs will be of the same width, regardless of label length.
Titles will not wrap onto multiple lines. Long titles will be truncated, and a tooltip will appear on hover.
...
The Content Area
The main area of the details pane may contain various types of content (see Content below).
If the content exceeds the height of its container, a Scrollbar will appear. The scrollbar will apply only to the content area, excluding the header and the action area, if exists.
Action Area (optional)
Where relevant, an action area will be shown at the bottom of the details pane.
The action area may include elements such as Buttons and Action menus.
Primary actions (e.g., Save and Cancel) will be aligned to the right. Other actions will be aligned to the left, shown as a toolbar (see example below).
A line will appear above the action area.
 |  |  |
Collapse/Expand Area (optional)
Where the details pane is collapsible, a collapse/expand area is shown.
The collapse/expand area will appear only when the details pane is unpinned.
When shown, it will be located on the left side of the details pane.
An arrow is shown in the middle of the area:
when expanded, the arrow will direct to the right.
when collapsed, the arrow will direct to the left.
Placement & Positioning
The details pane should:
stick to the right side of the page.
have a fixed width.
fill the vertical space to the bottom of the page.
Where the pane is Static:
there will be a small amount of white space between the pane and the right and bottom edges of the page. This spacing should be a consistent fixed size.
the top of the pane should be beneath the relevant section header.
Where the pane is Collapsible:
depending on the application, the top of the pane should start from either:
beneath the VerinTop, aligned with the top element in the header area, or
beneath full-width header area.
where a Ribbon is also used, the height of the details pane should reduce when the ribbon is expanded. The top of the pane should align to the bottom of the ribbon. (See example image in the Description).
Static (non-collapsible) | Collapsible |
|---|---|
|  |
Default state
Where the pane is collapsible, the default state will be determined for each application separately.
Content
The content area may contain any combination of elements, such as text, lists, cards, tables, forms, graphs, links etc.
Examples
 |  |  |
 |  |  |
Internal logic
Where the details pane content relates to selected items within the main page:
the pane’s title, secondary title, and thumbnail image may all be inherited from the selected item(s).
when no items are selected, the details pane will show an empty state (see States below).
when two or more items are selected, depending on the application the pane may show either:
the number of selected items, or
a combined view, aggregating data from all items.
States
Where the details pane is collapsible, it has three basic states:
State | Description | Example |
|---|---|---|
Collapsed | The only visible part of the pane is the collapse/expand area, allowing users to expand it. |  |
Expanded, pinned | the pane is shown next to the main content area, so nothing is hidden. |  |
Expanded, unpinned | the pane overlays the main area of the page, hiding the content behind it. |  |
Empty State | When no items are selected, the details pane will present an empty state with guiding text, guiding actions, or a page summary. |  |
Loading | While the content is loading, a loading state will show, including a Progress Indicator. |  |
Interaction
Interaction only applies to collapsible panes.
The Pin Icon
Clicking the pin icon will:
When the pane is unpinned |  |
When the pane is pinned |  |
The Collapse/Expand Area
Hovering the collapse/expand area switches it to the hover state.
When the pane is expanded, clicking the area switches it to the collapsed state.
When the pane is collapsed, clicking the area switches it to the expanded state.
When unpinned, clicking anywhere outside of the pane will close it.
Selecting items within the main page content
A collapsed pane may automatically expand when items are selected within the main page content, where the details pane contains extra information related to that item. See Table actions for more information.
Validations and Errors
The details pane itself does not require special validations.
For validations and errors related to content, see Field validation.
Transitions
When the details pane is expanded from collapsed mode, the pane will slide from right to left.
When the details pane is collapsed, the pane will slide from left to right.
Best Practices
Use:
Where items in the main page content have a lot of related information that needs to be displayed.
Where there is a need to perform actions on sub-elements of items (e.g. cards).
Where there is additional content related to the main workspace.
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.
Pane width
The details pane has a fixed width, and does not respond to the width of the screen.
A static details pane may become collapsible at smaller screen widths, where appropriate.
Where the details pane is collapsible, the default state of the details pane may change at different widths.
For screen sizes of 1366 px and below, it is recommended that it is closed and unpinned by default.
For screen sizes of 1367 px and above, the default state will be determined for each application separately.
At 960px and below, the pin and expand options should be disabled.
Pane height
When the screen height changes, the details pane height should also respond.
the pane header and tabs should not move.
the content should remain fixed to the top of the pane.
an internal Scrollbar should be used if the content does not fit vertically.
where they exist, action buttons and additional information in the pane footer should remain fixed to the bottom.
Design
Collapsible details pane examples
Zeplin link | Screen thumbnail |
|---|---|
 | |
WFM |  |
WFM |  |
Form designer |  |
...
Static details pane examples
Zeplin link | Screen thumbnail |
|---|---|
WFO | |
WFE Risk Management https://app.zeplin.io/project/5b2a0bd07406ff8d18bcf70e/screen/63c7b9fb2f4be80d103a3a54 |  |
Code
...