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.

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?

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

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.

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.

Another example of this generational gap is the Save icon.

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.

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.

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.

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.

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.

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

Step 1. 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

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

Step 3. Visual hierarchy between the 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)

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)

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.

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.