Skip to end of banner
Go to start of banner

Tabs

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 48 Next »

ONGOING

Description

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual-screen support, and workspace customization.

Usage & Behavior

Tabs organize and allow navigation between groups of content that are related and at the same level of the hierarchy.

General guidelines


Each tab label describes the content contained within it.

Structure

The horizontal layout of the tab bar never changes. The tabs always appear side by side

Structure Elements

  • Container

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

  • Tab item

    • Describes its content and sets user expectations

    • one to two words maximum

    • Icons are not permitted as tab labels

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

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.

States (TBD - not final design)

Main tabs

2nd level tabs

Details pane tabs

Ribbon tabs

Special States (TBD - not final design)

Interaction

  • You can click on the entire label

  • Tabs can be switched by clicking on a different tab

  • There's always one tab open

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

  • Hovering over a tab will show a tooltip with the full ?????????????? name of the section header

Validations and errors

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



  • No labels