Design Pattern Library - Segmented Control
Problem
(What’s the problem that this pattern solves? Why is it worth solving?) Dropdowns are much to common on the web in general and we seem to use them quite a lot at GitLab as well. The problem with them is that they hide the content that the user is looking for, it takes extra effort to look for it. Besides, dropdowns can be really hard to use on touchscreen devices and are recommended to be the UI of last resort.
Solution
Consider using a segmented control instead of a dropdown if there are only two to five fixed options and there is enough horizontal space.
This pattern reduces the impact on cognitive load because the content that the user looks for isn't hidden behind a click to open a dropdown. It also reduces the average time of interaction and can be easier to use because of that. At my previous company, we researched the difference between this pattern and dropdowns quite a lot (we had an in-house usability lab) and saw a significant decrease in time required to complete the tasks (even up to 40% on mobile) and an increase in task success when Segmented control was used.
Example(s)
Mocked up based on our button states: active and default.
Usage
Label
For label positioning follow the guidelines for input fields - #154 (closed)
In some cases it can be used without a label (if the options in the segmented control are labels themselves).
Sizing
The options should have equal prominence and be of the same size, for example: 3 options - 33% each. The total width of the pattern must therefore be determined like this:
Dos and dont's
Related patterns
Dropdowns, radio selection
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Add a merge request that includes any new or updated guidelines to the Design System -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application) - no need, not a new pattern
/cc @cperessini @dimitrieh @hazelyang @jkarthik @pedroms @sarrahvesselov @sarahod @tauriedavis @katokpara @matejlatin