Reducing ambiguity in the design of Segmented Controls

Segmented control Is a horizontal set of two or more segments, each of which acts as a button, usually configured as a toggle. Segmented controls provide closely related choices that affect an object, state, or view. Like buttons, segments can contain text or icons. (Human Interface Guidelines)

A few months ago, I looked at the call history on my iPhone, and suddenly I started thinking about the Segmented Control component.

Call history screen in iPhone 11

Regarding the segmented control presented above, I was confused if the segment was “All” or “Missed”. If I looked at it closely, I could figure it out from the contour and corner radius of the segment. And yet, why did I intuitively feel that the “All” segment was selected?

Reducing ambiguity in the design of Segmented Controls
Other examples of Apple products misleading me

I am Gen X. In the 90s, we listened to music on cassettes or compact discs (CDs).

A cassette tape player
Cassette audio player
Upcoming Workshops

We had to press a button to play or stop the music. In this case, the selected button (activated) is pressed. She had both tactile and visual aspects.

This mechanism has been used in other devices as well. For example, we operated a washer and dryer by pressing buttons.

A Korean brand Gold Star electric washer
Washing machine of the Korean brand Gold Star

Sometimes the button would sag and the electronics would malfunction.

Based on this personal experience, the control appears to be activated when it is dimmed, as if it were pressed.

However, today’s youth thinks that the button is activated when the light on it comes on. For example, an elevator button.

An interaction cycle with an elevator button
Loop of interaction with the elevator button

Another example of this generational gap is the Save icon.

Floppy disks
Floppy disks

People used the floppy disk icon for the Save function, but that doesn’t make sense anymore. Floppy disks are extinct, and the younger generation has no idea what they are, because they have never seen them.

I was wondering if only people who have experience with old-fashioned electronics or not have a similar problem with a button. To satisfy my curiosity, I conducted a user survey.

User survey form for Segmented Control research
User survey form to explore segmented controls

The survey results were quite interesting.

While my hypothesis was that the experience of older generations of gadgets would affect their perception, more than half of the respondents chose “Label A” in the light theme and “Label B” in the dark.

User survey results
User survey results
User survey result (light theme)
User survey result (light topic)
User survey result (dark theme)
User survey results (dark theme)

These results indicate that the extra layer on the object grabs the user’s attention.

Some people said: “You don’t need to consider this issue because many users are already familiar with this type of interface.”

In fact, it doesn’t really matter if there are more than two segments represented, as our eye can quickly distinguish between them.

A segmented control with 4 segments
Segmented control with 4 segments

However, if one has to choose a segment of two buttons, it can be difficult to distinguish between the options, because the design depends entirely on the intent of the designer and the world experience.

A segmented control with 2 segments
Segmented control with 2 segments

Also, I believe that good user experience design can be understood by people of all ages who are not familiar with design.

Why does the user have to spend extra energy and time to understand the design? So, I aimed to highlight their inherent flaws in order to improve the overall experience.

Examples of misleading segmented controls
Examples of Misleading Segmented Controls

I would like to suggest some simple tweaks that might help improve user understanding of segmented controls.

Step 1. Add a Featured Layer

Add a featured layer

As I mentioned earlier, the extra layer contains the differences between the two select buttons.

Step 2. Sufficient padding and corner radius on the selected segment

Sufficient padding and corner radius on the selected segment

Adequate space for border and corner radius provides users with visual distinction.

Step 3. Visual hierarchy between the two segments

Visual hierarchy between two segments

Moderate visual distinction allows these options to be distinguished. However, you should be careful otherwise you might get a “disabled” button.

Step 4. Add clear visual indication (optional)

Add a clear visual indication

In this case, the visual indicator is extremely useful for differentiating the choices. However, it can break the design aesthetic. This option should be used when functionality is more important than aesthetic quality.

Step 5. Examine the elevation (optional)

Explore elevation

Elevation helps create visual hierarchy and focus by creating dimension in a 2D user interface. The raised shadow effect can be very useful if it’s not too obvious. A subtle shadow allows you to subconsciously think that this is a floating slider.

A complete example with step1 to step5.

It is necessary to take into account different generations of users, for this you need to think progressively and take a broad look at things. I look forward to seeing a world that no longer uses the floppy disk icon.

PS I would like to say thank you to my colleagues at Splunk (and Ueno), friends and my wife who helped me organize the survey, gave advice and strongly supported my first Medium article. ❤️

If you have a better solution please advise. I am always open to discussions.

Thanks to Alexis Lucio.

Author: Clark Douglas

Leave a Reply

Your email address will not be published. Required fields are marked *