Segmented control
Segmented control is a user interface element for toggling between views or subsets within an application or webpage. It highlights the current selection and is ideal for closely related, exclusive options competing for the same space. This component offers a compact, intuitive solution for organizing content or controls, facilitating easy transitions without leaving the current context, thereby improving user experience and interaction efficiency.
In this Blueprint we will explore the anatomy, states and behavioral of the Segmented control component, best practices and usage examples.
Anatomy
A segmented control typically consists of a minimum of two segments, each accompanied by an active tile housed within a track. This active tile moves seamlessly to align with the chosen segment. Each segment can include icons that either stand next to the label or replace it when needed to save space.
States
Enabled: In the enabled state, the segmented control is fully functional and responsive to user interactions. Users can click or tap on the different segments to make selections.
Hover: When a user hovers their mouse pointer over a segment of the control (typically in web applications), that segment enters the hover state. It provides visual feedback, such as highlighting or changing color, to indicate that it can be interacted with.
Focus: This state occurs when a segment of the control gains keyboard focus, often through the "Tab" key navigation. It's visually emphasized to show which segment is currently selected using the keyboard.
Pressed or Mouse down: When a user clicks or taps on a segment, it enters the pressed or mouse-down state. It typically appears visually as if the segment is being pushed down, giving feedback that the user's interaction is registered.
Disabled: In the disabled state, one or more segments of the control are non-interactive and appear grayed out or visually muted. This state is used to indicate that certain options are unavailable or not applicable in the current context.
These different states help users understand the current status and functionality of segmented controls, enhancing the overall user experience and ensuring clarity in selecting options.
Behavioral
When a user activates a previously inactive segment, it becomes the selected option, automatically deselecting the one chosen before. Concurrently, the tile accompanying the active segment glides along the track to align itself with this new selection.
Usage
Employ a segmented control when you need to give users the ability to select one option from a group of up to five. This control is particularly useful for presenting options that are closely related, facilitating actions such as inputting data, filtering results, altering how content is displayed, or navigating through different content within the same view.
Switch view
Implement a segmented control for alternating between various representations of the same data, enhancing the browsing experience by catering to different user needs.
Consider, for instance, a travel app that displays accommodation options. A segmented control could allow users to switch between a grid view showcasing photos of hotels and a list view for faster browsing. This way, users seeking visual appeal can use the grid view, while those who want to see more at a glance can use a list view.
Refine viewing filters
Employ a segmented control for dividing a substantial collection of data into distinct, smaller groups. This functionality allows users to adjust the scope of content in the view, aiding them in their search for specific information.
Take, for instance, a news app. A segmented control in this context could be used to filter news articles by topics such as 'Wealth, 'Business', 'Tech', 'Politics', and 'All News'. This approach helps users to immediately access news in their area of interest, whether they are looking for tech or business updates.
Navigate within a single view
Implement a segmented control to navigate between different categories within a single view, particularly useful when the content spans across multiple segments.
For example, in a fitness app, a segmented control can be used to switch between workout categories like 'Cardio', 'Strength', and 'Yoga'. This allows users to easily browse through various exercise types within the app, enhancing their experience by providing a streamlined way to access specific workout content.
Choose a single option
Opt for a segmented control to enable users to make an exclusive choice, serving as an alternative to using radio buttons or dropdown menus.
For example, in a survey or feedback form, a segmented control could be used for a question with limited options like 'Great', 'Fine', 'Okay', and 'Poor'. This method provides a clear, concise way for users to express their opinion without navigating through a dropdown list or clicking multiple radio buttons.
Difference from Tabs
Interacting with a tab typically introduces a fresh view to display new content. Generally, the content in one tab is exclusive to that tab and not replicated in others. Tapping on a segmented control filters or alters the presentation of a smaller portion of content within the existing view. It's common for content to overlap across different segments in a segmented control setup.
For example, in an advertising management tool, tabs can be used to navigate between analytics, campaigns, audiences, and ad sets, each with its own distinct content. Segmented control within the analytics allows users to switch between time ranges of data and change the appearance of graphs while remaining in the same context.
Segmented Control: Primarily used for filtering or changing the presentation within the same view. The content in one segment often exists in other segments as well.
Tabs: Used for navigating between different views or content areas. Each tab typically contains unique content not found in other tabs.
Best practice
Avoid using segmented controls for binary options like 'yes' or 'no'; a switch is more suitable for these cases. When using icons in segments, pairing them with text labels is recommended for clarity, unless the icons are universally recognized. Segmented controls are ideal for providing related choices that affect an object, state, or view, such as switching views in a toolbar, but not for actions like adding or editing content.
Keep the number of segments to a maximum of five to seven in wider interfaces and around five on smaller screens. Ensure consistency in segment size for visual balance and avoid mixing text and images in the same control to prevent confusion.
Use nouns or noun phrases for segment labels, with title-style capitalization, and maintain content uniformity within segments for a cohesive look.
To delve deeper into best practices and real-world examples, take a look at the Segmented control in Design Systems from leading design teams and top tech companies.