Tabs

Anatomy

Tabs in user interfaces are structured with several key parts: Container, Tab items, Label, Active indicator, and an optional elements like Badges and Icons. In some situations, Tabs may be icon-only when the icon's meaning is clear without a label, and space is limited.

Container: The foundational structure that holds all Tab items.

Tab items: Individual elements within the Container, each representing a different view or section.

Labels: Provide clear identification for each Tab item; they should be concise and align with the interface's typography.

Active indicator: Marks the currently selected Tab, facilitating user orientation.

Optional Icons and Badges: Icons for visual distinction, and Badges for alerts or counts.

Divider: Used to distinctly separate Tabs, enhancing visual clarity.

Tab view: Shows the content related to the active Tab for a cohesive experience.

States

Tabs generally have two main conditions: inactive, which is their default appearance, and active, indicating they have been interacted with. Within these primary conditions, a Tab can display different states like enabled, hovered, focused, pressed, and disabled, each representing a specific interaction or accessibility status.

Enabled: This is the default state of a tab, indicating it is interactive and ready for user engagement.

Hovered: When a user moves their cursor over a tab, it enters the hovered state, often highlighted by a subtle change in color or shading to indicate it's under the cursor.

Focused: This state occurs when a tab is the target of keyboard navigation or similar input methods. It's usually marked by a distinct border or outline, signaling that it's ready to be activated via keyboard commands.

Pressed: Activated when a user clicks or taps on a tab, the pressed state typically features a more noticeable visual change like a deeper color shade. This provides tactile feedback to the user, indicating that their interaction is recognized and an action is being initiated.

Disabled: A tab in this state is non-interactive and usually appears faded or greyed out. This indicates that the tab is currently not available for user interaction, either due to contextual limitations or other reasons.

Behavioral

A single tab item can be selected at a time, altering its state upon selection. When a user selects a tab item, the indicator smoothly transitions along the tabs' base to the newly selected item. During this movement, the colors of the text and icon for both tab items subtly fade. Simultaneously, the tab views update immediately to reflect the new selection.

Usage

Tabs are used in user interfaces to segment and organize content into separate, easily navigable sections within the same window or space. They are ideal for situations where users need to switch between different views or sets of information without leaving the current page. Commonly found in web browsers, settings menus, and data-driven applications, Tabs enhance the user experience by reducing clutter, streamlining navigation, and presenting information in a structured, accessible manner.

Switch between views

Each tab is responsible for a unique view or content area, so when a user selects a tab, the main content area refreshes to display the relevant information or controls.

For example, consider an e-commerce product page, where tabs such as "Description", "Specifications", "Reviews", and "Related Products" organize the page into distinct, easily navigable sections. This setup allows customers to access detailed product information, technical specifications, user feedback, and related product suggestions effortlessly, all without leaving the product page.

On-page navigation

Tabs can function as anchor links, facilitating easy navigation across different content sections on a single page. Unlike main tabs that change the content view, these tabs, particularly when vertical, act more like shortcuts. They scroll users to designated sections instead of switching to new views. This is similar to segmented control, but it's used not for filtering content within one view, but for seamless navigation.

Consider a dashboard for an online course, featuring vertical tabs labeled "Overview", "Curriculum", "Instructor", "Reviews", and "FAQs". Each tab, when clicked, scrolls the user directly to the corresponding section on the same page. For instance, selecting "Curriculum" brings up the lesson list, while "Reviews" scrolls to student feedback.

Tabs vs Segmented control

When you interact with a tab, it usually opens a new view showing distinct content specific to that tab, not duplicated in other tabs. In contrast, using a segmented control means filtering or changing the display of a part of the content within the same view. Unlike tabs, in a segmented control, it's typical for some content to be shared across different segments.

For instance, consider a financial dashboard application. Here, tabs enable navigation between sections like Accounts, Transactions, Reports, and Settings, each containing unique information. Within the Reports section, a segmented control could allow users to toggle between different report types – such as income, expenses, and investments – adjusting the displayed data without leaving the Reports context. This setup demonstrates the distinct roles of tabs and segmented controls in managing and displaying information.

Segmented Control: This is mainly utilized to filter or modify how content is presented within a single view. Often, the content in one segment overlaps with that in other segments.

Tabs: These are designed to facilitate navigation between diverse views or content areas, each tab uniquely containing content not found in others. However, an exception arises when tabs serve as navigational tools within the content of a single page.

Best practice

Effective tab design in user interfaces requires adherence to several key practices: using tooltips for icon-only tabs to clarify their function, maintaining consistency in icon use to preserve visual balance, avoiding multiple tab levels in favor of simpler organizational structures like side navigation or accordions, and ensuring all tabs segment content of equal importance.

Default to having one tab selected upon page load, keep tab labels concise, ideally under three words, and limit the number of tabs to prevent overwhelming users.

To delve deeper into best practices and real-world examples, take a look at the Tabs in Design Systems from leading design teams and top tech companies.