Segmented Control

‍Best Practices

Limit the number of segments. Too many options can overwhelm users on smaller screens. Aim for roughly two to five segments for quick scanning and easy selection.

Label each segment clearly. Use concise text or icons that leave little room for ambiguity. Long labels may wrap or become truncated, especially on mobile devices.

Ensure a clear selection state. The currently active segment should stand out (e.g., through a bolder color or contrast), letting users quickly confirm which option is selected.

Maintain tap-friendly sizing. Each segment should remain comfortably tappable (at least 44×44 pt), preventing accidental taps on adjacent options.

Style

Segmented tabs typically occupy a slim horizontal area at the top of a screen or view, appearing as a set of adjacent, uniformly shaped segments.

Consistent Coloring. Align background, border, and text colors with your app’s theme. Ensure enough contrast between selected and unselected segments for clear readability.

Subtle Separations. Light dividers or spacing help define each segment, especially when multiple tabs share a similar color.

Rounded Corners (optional). Some designs favor rounded corners for a more modern look, but squared edges can also communicate structure effectively.

Content

Each segment should reflect a distinct category or action:

Short Labels or Symbols. Keep text labels brief to avoid truncation. An icon may work if it has a universally recognized meaning.

Selected State Indicators. The active tab often uses a distinct fill or underline to highlight the user’s choice.

Dynamic Updates (if relevant). In some apps, tabs may update with small badges (e.g., for unread counts) or reflect real-time data changes.

Role

Segmented tabs streamline navigation and encourage quick comparisons or context-switching within a single screen:

App Sections. Users can jump between high-level content areas (e.g., “All,” “Missed,” “Favorites”) without going to separate screens.

Filtering or Sorting. In data-heavy views, segmented tabs allow quick toggling of different filters or sorting methods.

Mode Switching. Tools or design apps often employ segmented tabs to switch modes (like “Draw,” “Erase,” or “Select”) in a single, compact control bar.