...
Description
...
| 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 |
...
Horizontal tabs | Single row above the associated content. Use it as |
...
tabbed navigation |
...
2nd level tabs
Single row above their associated content
...
Details pane tabs
Single row above their associated content in the details pane
...
Ribbon tabs
...
Usage & Behaviour
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Tabs can be switched by clicking on a different tab.
Each tab label describes the content contained within it.
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 tab label
General guidelines
Structure
The horizontal layout of the tab bar never changes. The tabs always appear side by side
- Navigation items
- Separators
- Selected item (displayed)
...
Parent for the entire tree is optional. A tree should have a parent if the parent has meaning or to allow the user to select the entire tree in case there is a use case that will require it.
When you do use a parent node for the entire tree, expand this node by default.
...
Collapse/expand button: in case the node has descendants.
Icon (optional): should be used only if the tree can contain several types of nodes. If all nodes are of the same type, an icon should not be used.
Label (node name) + tooltip in case the entire name does not fit.
Counter (optional): the number of elements the node contains
States: Focus, Hover, Selected, Disabled.
...
Click on the expand/collapse button will do the respective action.
Click on the node label (+counter) will select the node.
...
Default
By default, show the first tab as open. This is the initial setting provided by the control.
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.
Number of tabs
...
Order
Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
Labels
- Each tab label describes its content and sets user expectations.
- Tabs with related content should be grouped adjacent to each other
- Labels are concise and use one to two words maximum.
- Tab labels should succinctly describe the content within.
- Icons are not permitted as a tab labels.
States
...
Main tabs
...
...
Interaction<TBD>
You can Click on the entire tab section item
Theres always one tab open, and only one
Only 1 content can be viewed at a time, when clicking on other tab, the open tab will close
- Hovering over tab will show a tooltip with the full ?????????????? name of the section header
Transitions<TBD>
Clicked tab will side open while the former open section in the accordion will close at the same time
Best practices<TBD>
Use:
For long lists, consider using search
Use clear labels - Accordions hide content, so the labels need to be clear.
If users will only need a few specific pieces of content within a page.
If you have only a small space to display a lot of content.
Don’t use:
If users need to see most or all of the information on a page. Use well-formatted text instead.
If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.
Usability guidance<TBD>
Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)
TBD
Current appearances in our products
Resources
https://tympanus.net/Development/TabStylesInspiration/
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
- Tab + Filter - how it works together
- Align tab solutioan between mobile and desktop (card / line)
- Tab title - text / icon / icon and title
- Missing connection between the current tab to the content area in horizontal
- 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
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Main Tabs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
<div class="tab-content">
<div id="design" class="tab-pane fade active show"></div>
<div id="collect" class="tab-pane fade"></div>
<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
<div class="tab-content">
<div id="design" class="tab-pane fade active show"></div>
<div id="collect" class="tab-pane fade"></div>
<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div> |
...
. |  | |
2nd level horizontal tabs | Use only as a second level to main horizontal tabs. |  |
Vertical Tabs | Use where there is not enough space to show horizontal tabs, for example:
|  |
Details pane tabs | Use only in the Details Panel. Shown as a single row above the associated content. |  |
Ribbon tabs | Use only in the Ribbon as tabbed navigation. |  |
Usage & Behavior
Tabs organize content into groups and allow navigation between them. Content should be:
related.
at the same level of the content hierarchy.
General guidelines
Structure
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 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
Horizontal tabs | 2nd level horizontal tabs | Vertical tabs | Details pane tabs | Ribbon tabs | Ribbon tabs - 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 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 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.
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
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Focus management
Keyboard | Description |
|---|---|
Tab |
|
Shift + Tab |
|
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 |  |
2nd Level Tabs |  |
Details Pane Tabs |  |
Ribbon Tabs - Expand |  |
Vertical Tabs |  |
Code
...