Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Tabs enable content organisation at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual screen support, and workspace customisation.
Types
| Type | Example |
|---|---|
Main tabs Use it as a tabbed navigation - Single row above their associated content |  |
2nd level tabs Single row above their associated content |  |
Details pane tabs Single row above their associated content in the details pane |  |
Ribbon tabs | TBD |
| Side tabs | TBD |
Usage & Behaviour
General guidelines
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
| Structure Element | Description | |
|---|---|---|
| Hierarchy | 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. | |
| Node | 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. | |
| Default Sorting | Alphabetically (between and within the hierarchy level/group) | |
| Loading | When a user expands a node, if the nodes are not shown immediately, provide "loading" indication at the place below the expanded node. | |
| Interaction | Click on the expand/collapse button will do the respective action. Click on the node label (+counter) will select the node. | |
| Keyboard functionality | <TBD>Container | Display a navigation text element arranged together with the active inactive highlighted |
| Tab item |
| |
| Active tab | To differentiate an active tab from an inactive tab, apply an 3 px underline and color change to the active tab’s highlighted. |
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
A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.Order
Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
Labels
- user
- .
States
Main tabs | 2nd level tabs | Details pane tabs | Ribbon tabs |
|---|---|---|---|
 |  |  |  |
Interaction
You can Click on the entire tab section itemlabel
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 closeanother tab the display will change for the selected tab
- 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.
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 tab label
- A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.
- Use clear labels
- Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
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> |
| Table of Contents |
|---|