Tabs
<a name="Tabs-Tabs"></a>Tabs
Read <a href="https://scratch.boomi.com/styleguide/#tabs" class="external-link" rel="nofollow">Tabs</a> on the Style Guide. Note: This page describes in-page <a href="/display/ux/Navigation" title="Navigation">Navigation</a>, not global navigation.
Tabs are a set of containers that allow a user to view related content in a non-serial way.
<a name="Tabs-Usewhen"></a>Use when
- You have two or more related concepts that can go under a central header. The tabs should alternate between views within the same context. This is the single most important point of the information architecture of tabs - it is the reason they exist.
- Ideally there's a sibling relationship between the tabs, such as three views of a set of data.
- The information on the non-default tab can be skipped or ignored with no consequence to the user.
<a name="Tabs-Don%27tusewhen"></a>Don't use when
- You are designing a serial process. Use the <a href="/pages/createpage.action?spaceKey=ux&title=Wizard+Framework&linkCreation=true&fromPageId=24413608" class="createlink">Wizard Framework</a> instead.
- Users need to compare the information you're displaying. They shouldn't have to flip between tabs to complete a task.
- All of the information must be viewed together and cannot be ignored or skipped. (People will scroll down long pages, we promise!)
- You have more information than will fit on one row. If you have >1 row of tabs, see the UX Team for an alternate solution.
<a name="Tabs-"></a>Behavior
Tabs have three states of interactivity:
- Selected: The tab the user is currently viewing. Only one tab can be Selected at any given time.
- The default selected tab should be the most critical information for the user to view. Ideally, it's also the leftmost tab.
- Enabled: Other tabs in the tabset that the user can access, but that are not the default tab. They can take focus, be clicked, be tapped, be activated with the keyboard. On activation, they become the Selected tab.
- Disabled: The tab can not be interacted with in any way. Disabled tabs should not have a hover state or any other affordance that implies they're enabled. (They should, however, still be read out by a screen reader, which should mention that they're disabled.)
These states have been designed to align with <a href="/display/ux/Accessibility" title="Accessibility">Accessibility</a> standards.
<a name="Tabs-Whenaretabsenabledanddisabled%3F"></a>When are tabs enabled and disabled?
By default, a tab should be enabled at all times unless the UX Designer has specified a situation where we want it disabled. In the general case, if a user does not have access to a tab (because they don't have a high enough level of security, for example), the tab should not display.
In some specialized cases (such as a read-only view of a page) we may want to show a user what tabs are available without allowing them to actually view the tab, in which case the Disabled state would be used. This is very rare -- as of 3/2/2017 we're not even sure if we have any.
<a name="Tabs-Styles"></a>Styles
We currently have three styles of tabs:
- Standard - Standard tabs display using the default text color in semi-bold, and a Dell Blue bottom border. The display does not change on hover.
- Enabled - Enabled tabs display using the Link Blue text color in normal weight, and no bottom border. On hover, the tab displays using the Dell Blue text color in normal weight and a Dell Blue bottom border.
- Disabled - Disabled tabs display using #757575 (not finalized) text color in normal weight, and no bottom border. The display does not change on hover. <img src="/download/attachments/24413608/tabs.png?version=1&modificationDate=1488480934000" style="border: 1px solid black">
<a name="Tabs-Additionalreading"></a>Additional reading
- <a href="https://www.nngroup.com/articles/tabs-used-right/" class="external-link" rel="nofollow">Tabs, Used Right</a> by Jakob Nielsen of the Nielsen Norman Group.
<a name="Tabs-Tabs"></a>Tabs
Read <a href="https://scratch.boomi.com/styleguide/#tabs" class="external-link" rel="nofollow">Tabs</a> on the Style Guide. Note: This page describes in-page <a href="/display/ux/Navigation" title="Navigation">Navigation</a>, not global navigation.
Tabs are a set of containers that allow a user to view related content in a non-serial way.<a name="Tabs-Usewhen"></a>Use when
- You have two or more related concepts that can go under a central header. The tabs should alternate between views within the same context. This is the single most important point of the information architecture of tabs - it is the reason they exist.
- Ideally there's a sibling relationship between the tabs, such as three views of a set of data.
- The information on the non-default tab can be skipped or ignored with no consequence to the user.
<a name="Tabs-Don%27tusewhen"></a>Don't use when
- You are designing a serial process. Use the <a href="/pages/createpage.action?spaceKey=ux&title=Wizard+Framework&linkCreation=true&fromPageId=24413608" class="createlink">Wizard Framework</a> instead.
- Users need to compare the information you're displaying. They shouldn't have to flip between tabs to complete a task.
- All of the information must be viewed together and cannot be ignored or skipped. (People will scroll down long pages, we promise!)
- You have more information than will fit on one row. If you have >1 row of tabs, see the UX Team for an alternate solution.
<a name="Tabs-"></a>Behavior
Tabs have three states of interactivity:- Selected: The tab the user is currently viewing. Only one tab can be Selected at any given time.
- The default selected tab should be the most critical information for the user to view. Ideally, it's also the leftmost tab.
- Enabled: Other tabs in the tabset that the user can access, but that are not the default tab. They can take focus, be clicked, be tapped, be activated with the keyboard. On activation, they become the Selected tab.
- Disabled: The tab can not be interacted with in any way. Disabled tabs should not have a hover state or any other affordance that implies they're enabled. (They should, however, still be read out by a screen reader, which should mention that they're disabled.)
<a name="Tabs-Whenaretabsenabledanddisabled%3F"></a>When are tabs enabled and disabled?
By default, a tab should be enabled at all times unless the UX Designer has specified a situation where we want it disabled. In the general case, if a user does not have access to a tab (because they don't have a high enough level of security, for example), the tab should not display.
In some specialized cases (such as a read-only view of a page) we may want to show a user what tabs are available without allowing them to actually view the tab, in which case the Disabled state would be used. This is very rare -- as of 3/2/2017 we're not even sure if we have any.<a name="Tabs-Styles"></a>Styles
We currently have three styles of tabs:- Standard - Standard tabs display using the default text color in semi-bold, and a Dell Blue bottom border. The display does not change on hover.
- Enabled - Enabled tabs display using the Link Blue text color in normal weight, and no bottom border. On hover, the tab displays using the Dell Blue text color in normal weight and a Dell Blue bottom border.
- Disabled - Disabled tabs display using #757575 (not finalized) text color in normal weight, and no bottom border. The display does not change on hover. <img src="/download/attachments/24413608/tabs.png?version=1&modificationDate=1488480934000" style="border: 1px solid black">
<a name="Tabs-Additionalreading"></a>Additional reading
- <a href="https://www.nngroup.com/articles/tabs-used-right/" class="external-link" rel="nofollow">Tabs, Used Right</a> by Jakob Nielsen of the Nielsen Norman Group.