The Tabs is a progressive disclosure component. Such components truncate information for the general layout/design and are intended to deliver optional additional content, depending on users' interest. They help keep the interface clean and reduce scrolling by saving vertical space.
Tabs display easy to scan labels of the relevant information, indicative of the additional content that is available through extra interaction. For this reason, Tabs labels should be as descriptive and concise as possible, helping users form a mental model of the information available.
Do's
- order serially or in a logical fashion (such as 1st quarter, 2nd quarter, 3rd quarter; January, February, March)
Don'ts
- don't hide important information in the tabs that should be present at all times
When to use
- when users can benefit from alternating between views/content within the same context, not to navigate to different areas
- when users can benefit from easy scanning and shortening of the page
When not to use
- when the tabs' content differ significantly, as there is a risk users will interpret them as site navigation (e.g. Q1, January, 2020)