Difference between revisions of "Tabs"
Jump to navigation
Jump to search
(Created page with "<h1><a name="Tabs-Tabs"></a>Tabs</h1> Read <a href="https://scratch.boomi.com/styleguide/#tabs" class="external-link" rel="nofollow">Tabs</a> on the Style Guide. Note: Thi...") |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[Category: Containers]] | |||
Tabs are a set of containers that allow a user to view related content in a non-serial way. | |||
==Use when== | |||
Tabs are a set of containers that allow a user to view related content in a non-serial way. | <ul> | ||
<ul><li>Ideally there's a sibling relationship between the tabs, such as three views of a set of data. </li></ul></li><li>The information on the non-default tab can be skipped or ignored with no consequence to the user. </li></ul> | <li>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. | ||
Tabs have three states of interactivity:<ul><li>'''Selected''': The tab the user is currently viewing. Only one tab can be Selected at any given time. | <ul><li>Ideally there's a sibling relationship between the tabs, such as three views of a set of data. </li></ul> | ||
<ul><li>The default selected tab should be the most critical information for the user to view. Ideally, it's also the leftmost tab. </li></ul></li><li>'''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. </li><li>'''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.) </li></ul> | </li> | ||
<li>The information on the non-default tab can be skipped or ignored with no consequence to the user. </li></ul> | |||
==Don't use when== | |||
<ul><li>You are designing a serial process. Use a wizard instead.</li> | |||
<li>Users need to compare the information you're displaying. They shouldn't have to flip between tabs to complete a task. </li> | |||
<li>All of the information must be viewed together and cannot be ignored or skipped. (People will scroll down long pages, we promise!) </li> | |||
<li>You have more information than will fit on one row. If you have >1 row of tabs, choose an alternate solution. </li></ul> | |||
==Behavior== | |||
Tabs have three states of interactivity: | |||
<ul><li>'''Selected''': The tab the user is currently viewing. Only one tab can be Selected at any given time. | |||
<ul><li>The default selected tab should be the most critical information for the user to view. Ideally, it's also the leftmost tab. </li></ul></li> | |||
<li>'''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. </li><li>'''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.) </li></ul> | |||
==When are tabs enabled and disabled?== | |||
A tab should be enabled at all times unless there's a really compelling reason to disable one. | |||
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 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. | |||
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. | |||
==Additional reading== | |||
<ul><li>[https://www.nngroup.com/articles/tabs-used-right/ Tabs, Used Right] by Jakob Nielsen of the Nielsen Norman Group. </li></ul> | |||
Latest revision as of 13:50, 1 June 2020
Tabs are a set of containers that allow a user to view related content in a non-serial way.
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.
Don't use when
- You are designing a serial process. Use a wizard 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, choose an alternate solution.
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.)
When are tabs enabled and disabled?
A tab should be enabled at all times unless there's a really compelling reason to disable one.
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.
Additional reading
- Tabs, Used Right by Jakob Nielsen of the Nielsen Norman Group.