Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
colourYellow
titleOngoing

Table of Contents

Description

Tabs enable content organization at a high level, such as switching . They allow the user to switch between views, data sets, or functional aspectsoptions.

...

Types

...

Main tabs

...

Note: these guidelines do not apply to navigation items in the Verintop.

Types

Type

Usage

Image

Horizontal tabs

Single row above the associated content. Use it as tabbed navigation

- Single row above their associated contentImage Removed

.

image-20240731-101247.pngImage Added

2nd level horizontal tabs

Single row above their associated content. Appear

Use only as a second level to main horizontal tabs.
Shown as a single row beneath the main

tabs hierarchyImage Removed

horizontal tabs, above the associated content.

image-20240731-101257.pngImage Added

Vertical Tabs

Use where there is not enough space to show horizontal tabs, for example:

  • the container or workspace is in a portrait orientation.

  • there are a large number of tabs.

  • the tabs require longer labels.

image-20240731-094544.pngImage Added

Details pane tabs

Single

Use only in the Details Panel. Shown as a single row above

their

the associated content.

Appear only in the details paneImage Removed

details-pane-tab.pngImage Added

Ribbon tabs

Use

it

only in the Ribbon as tabbed navigation

in the ribbon onlyImage Removed

.

Image Added

Usage & Behavior

Tabs organize content into groups and allow navigation between groups of content that are related and them. Content should be:

  • related.

  • at the same level of the content hierarchy.

General guidelines

Structure

The horizontal layout of the tab bar never changes. The tabs Tabs consist of:

  • 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 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 always only one active tab selected at a any given time.

Structure Elements

Tab

...

  • Display a navigation text element arranged together with the active/inactive highlighted

...

Active tab

  • To differentiate an active tab from an inactive tab, apply a 3 px underline and color change to the active tab’s highlighted.

Content

  • The label describes its content and sets user expectations

  • Each tab label describes the content contained within it

  • one to two words maximum

  • Icons are not permitted as tab labels

Default

...

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:  Technically, you can also override the initial selection. However, this is not recommended.

  • Later on, you can show the tab last selected by the user.

States

...

Regular

...

Hover

...

Active

...

Selected

...

Not selected focused

...

Not selected focused hover

...

Not selected focused active

...

Selected focused

...

Interaction

...

You can click on the entire label

...

Tabs can be switched by clicking on a different tab

...

Only 1 content can be viewed at a time when clicking on another tab the display will change for the selected tab

...

the default may change in specific use cases.

Content

  • The label describes the content contained within each tab, and sets user expectations.

States

Horizontal tabs

2nd level horizontal tabs

Vertical tabs

Details pane tabs

Ribbon tabs

Ribbon tabs - collapsed

Regular

image-20240730-103129.pngImage Addedimage-20240730-103911.pngImage Added_Vertical Tab States.pngImage Added_Tab Pane.pngImage AddedImage AddedImage Added

Hover

image-20240730-103329.pngImage Addedimage-20240730-103919.pngImage Added_Vertical Tab States-1.pngImage Added_Tab Pane-1.pngImage AddedImage AddedImage Added

Active

image-20240730-103336.pngImage Addedimage-20240730-103927.pngImage Added_Vertical Tab States-2.pngImage Added_Tab Pane-2.pngImage AddedImage AddedImage Added

Selected

image-20240730-103356.pngImage Addedimage-20240730-103948.pngImage Added_Vertical Tab States-3.pngImage Added_Tab Pane-3.pngImage AddedImage Added

Expands the Ribbon

Focused, Regular

image-20240730-103825.pngImage Addedimage-20240730-104542.pngImage Added_Vertical Tab States-4.pngImage Added_Tab Pane-4.pngImage AddedImage AddedImage Added

Focused, Hover

image-20240730-103836.pngImage Addedimage-20240730-104550.pngImage Added_Vertical Tab States-5.pngImage Added_Tab Pane-5.pngImage AddedImage AddedImage Added

Focused, Active

image-20240730-103844.pngImage Addedimage-20240730-104559.pngImage Added_Vertical Tab States-6.pngImage Added_Tab Pane-6.pngImage AddedImage AddedImage Added

Focused, Selected

image-20240730-103854.pngImage Addedimage-20240730-104616.pngImage Added_Vertical Tab States-7.pngImage Added_Tab Pane-7.pngImage AddedImage Added

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 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 a tab label is truncated, hovering over it will show a tooltip 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

_Tab 1st level - Error.pngImage Addedtab-regular-error-selected.pngImage Addedtab-error.pngImage Added

Horizontal tab item warning

_Tab 1st level - Warning.pngImage Addedtab-regular-warning-selected.pngImage Addedtab-warning.pngImage Added

Vertical tab item error

Image Removed
Vertical Tab - Error.pngImage AddedVertical Tab - Error selected.pngImage Added
Image Removed
Vertical Tab - Error with other tabs.pngImage Added
Tab

Vertical tab item warning

Vertical Tab - Warning.pngImage Added
Image Removed
Vertical Tab - Warning selected.pngImage Added
Image Removed
Vertical Tab - Warning with other tabs.pngImage Added

Best practices

...

Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in the tab label

...

A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.

...

In the details pane, a maximum of four tabs is recommended.

...

Use clear and short labels

...

Use

  • to switch between views, data sets, or functional options.

  • when the content needs to be organized into exclusive groups.

Don’t use

  • 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.

  • 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.

Accessibility compliance

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

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 behavior where needed - see Screen Reader Guidelines

Contrast & size compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Focus management

Keyboard

Description

Tab

  • Navigates between tabs (left to right, top to bottom).

  • On the last tab navigates to the next component.

Shift + Tab

  • Navigates between tabs (right to left, bottom to top).

  • On the first tab navigates to the previous component.

Space

Changes the view to the focused tab.

Enter

Changes the view to the focused tab.

Esc

N/A

Arrows

N/A

Responsive Design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

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 tab line.

  • Once the focus is removed from the tab area, the selected item should automatically move into view.

  • 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

https://zpl.io/

bPkL1ma

Edm9O1D

Image Removed

Main Tabs - Status.pngImage Added

2nd Level Tabs

https://zpl.io/

2ZqjW0X

LL4nrnM

Image Removed
2nd Level Tabs - Status.pngImage Added

Details Pane Tabs

https://zpl.io/

VODWzzr

kKDz8oZ

Image Removed

Details pane Tabs.pngImage Added

Ribbon Tabs - Expand

https://zpl.io/bJvqAmE

Image Removed

Code

TBD

Current appearances in our products

Resources

Image Added

Vertical Tabs
https://

...

https://material.io/guidelines/components/tabs.html

Needs to be designed

Open issues

  • Maximum tab number - vertical and horizontal

  • Scroll tab - out of the window

  • Align tab solutioan between mobile and desktop (card / line)

  • Decide about maximum letter on title

Next Steps/Tasks

  • UX design

  • To see full view of tab with other components

  • General suggestion - implementation more interaction for update system to today design

New LUX design 

...

sanitizefalse

...

zpl.io/6JNo9mR

Verint LUX Vertical Tabs - Status.pngImage Added

Code

...