| Table of Contents |
|---|
Description
Tabs enable content organization at a high level. They allow the user to switch between views, data sets, or functional options.
...
...
Note: these guidelines do not apply to navigation items in the Verintop.
Types
Type | Usage | Image | |||
Main Horizontal tabs | Single row above the associated content. Use it as tabbed navigation. |   | |||
2nd level horizontal tabs | Use only as a second level to main horizontal tabs. |  | Details panel . |  | |
Vertical Tabs | Use where there is not enough space to show horizontal tabs, for example:
|  | |||
Details pane tabs | Use only in the Details Panel. |   | |||
Ribbon tabs | Use only in the /wiki/spaces/UserExp/pages/1390479038 Ribbon as tabbed navigation. |  | Vertical Tabs | TBD |   |
Usage & Behavior
...
Tab items, shown using short text labels.
An active tab, which is visually different.
Vertical tabs also include a horizontal line underneath each tab.
The horizontal layout of tabs never changes:
They always appear side by side in a single row or column.
They always remain in the same order.
There's only one active tab at any given time.
Tab widths
Horizontal and Ribbon tabs
Each individual tab hugs its label. A row of tabs may therefore have varying widths.
A maximum tab width may be applied. Where a tab label is longer than the maximum size, it will be truncated with a Tooltip shown on hover.
Where the container is wider than the entire tab row, the tabs will be aligned to the left. The grey tab underline should always extend to the full width of the container.
Tabs should never be wrapped onto multiple rows. See Responsive design below for guidelines within narrow containers.
Details pane tabs
Details pane tabs all have equal width, and always fill container.
Where a tab label does not fit, it will be truncated with a Tooltip shown on hover.
Default state
By default, :
the left tab is the first active horizontal tab.
...
the top tab is the first active vertical tab.
Note: the default may change in specific use cases.
Content
The label describes the content contained within each tab, and sets user expectations.
States
| Main Tabs | Horizontal tabs | 2nd | Levellevel horizontal tabs | Vertical tabs | Details | Pane Tabspane tabs | Ribbon | Tabstabs | Ribbon | Tabs - CollapsedVertical Tabstabs - collapsed |
|---|---|---|---|---|---|---|---|---|---|---|
Regular |   |   |   |   |  |  | ||||
Hover |   |   |   |   |  |  | ||||
Active |   |   |   |   |  |  | ||||
Selected |  |   |   |   |   | Expands the Ribbon  | ||||
Focused, Regular |   |   |   |   |  |  | ||||
Focused, Hover |   |   |   |   |  |  | ||||
Focused, Active |   |   |   |   |  |  | ||||
Focused, Selected |  |   |   |   |   | Expands the Ribbon  |
Interaction
Only one tab can be selected at a time.
A tab can be selected by clicking it.
Selecting a tab will change the view below in the container to the new tab’s associated content.
Clicking on a new tab will automatically remove the selection from the previously-selected tab.
When the a tab label is truncated, hovering over it will show a Tooltip with the full label.
Where necessary, vertical tabs may be scrollable. (Not recommended).
Validations and errors
...
Error type | Regular tab | Selected tab | Alongside other tabs |
|---|---|---|---|
Horizontal tab item error |  |  |  |
Horizontal tab item warning |  |  |  |
Vertical tab item error |
 |  |
 |
Vertical tab item warning |
 |  |
 |
Best practices
Use
to switch between views, data sets, or functional options.
when the content needs to be organized into exclusive groups.
...
when there is not a lot of content. In this case consider using an Accordion.
when there are dependencies between tabs. In this case, consider using a Wizard.
when all the data needs to be visible in one place.
horizontal and vertical tabs together within the same container.
more than four tabs within the Details Pane.
General
Use clear and short labels.
Do not use icons for tab labels.
Keep in mind reduced mobile widths and space for translated labels - the character length of a label will impact the experience.
A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.
In the Details Panel, a maximum of four tabs is recommended.
Tabs should be ordered by importance, popularity or user’s workflow. The order should be consistent across the experience.
Tabs with related content should be grouped adjacent to each other.
...
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
For Main and 2nd level tabs, where the Horizontal tabs
Where the container width does not allow all tabs to be shown at once:, Back and Next arrows should be shown,
...
allowing users to scroll
...
along the
...
On touch devices, click and drag should be supported, allowing the user to drag the tabs list horizontally.
tab line.
Once the focus is removed from the tab area, the selected item should automatically move into view.
...
For Details panel tabs:
Where tab labels do not fit within the tab width, the end of the labels should be truncated with an ellipsis ….
...
Click and drag should be supported on touch devices, allowing the user to drag the tabs list horizontally.
...
Vertical tabs
When the screen is narrowed and there is no longer room to show the full vertical tabs alongside the main content, the tabs column may be narrowed.
Design
Zeplin link | Screen thumbnail |
|---|---|
Main Tabs |
 | |
2nd Level Tabs |
 |
Details Pane Tabs |
 | |
Ribbon Tabs - Expand |
 |
Vertical Tabs |
 |
Code
...