Beware the button, Shakespeare never wrote.
But if the Bard was a web designer, he would understand the perils that can come with picking the wrong button. Buttons can be cute, because people often compare babies to them. When it comes to UX, however, buttons are just one of many possible control components that users have come to expect when navigating an app or website.
The way users interact with your design is the bedrock of UI, and poorly executed UI feeds into the experience that users have. Thus is the relationship between UI and UX. If users are confused by the mechanism of selecting options or inputting information, they will be less inclined to return to your site.
So don’t be scared of buttons. Just make sure you have the right button for the right job.
So Many Options
When it comes to control components, there are many ways of letting users pick options. In other words, options have options. The three most used are the toggle switch, the checkbox, and the radio button.
Let it be said and repeated: these are not interchangeable. You can’t sub out one for the other and get the same result. Each must be used according to context and purpose. Before you deploy one of these components, make sure that you understand where (context) and why (purpose) you are putting a checkbox vs a radio button vs a toggle switch.
Inclusive and Exclusive
Let’s first go back to school, where we first encountered the concepts of mutually inclusive and mutually exclusive. When we speak of things being “mutually inclusive,” typically this means that several states can be true at the same time. For example, you might have three favorite types of pasta or own two different kinds of pets. By contrast, things that are “mutually exclusive” can only exist in one state. On or off. Yes or no.
Fans of quantum mechanics will delight in pointing out that modern physics has shredded notions of binary states, but this is web design, not Einstein’s brain. For good UI, you need to offer binary choices in certain situations. Music can’t play and pause at the same time.
So which control component goes with what element? Most users don’t process the information flow on an app or website in terms of mutually inclusive or exclusive. Designers employ these concepts, but users just read labels and then start clicking. Labels then have a very crucial role to play if you want UX to be optimized. Be clear, concise, and use plural nouns if more than one choice is allowed.
Now it’s time to get out your thumb.
Thumbs Have Rules
Here’s another rule of thumb, to go along with all the others. If you are offering users choices that are mutually inclusive, the best option is a checkbox aligned vertically. It’s true that checkboxes have a binary element, in that they are either on or off, but if you are allowing users to pick multiple answers, then it’s the least confusing method.
Typically, a checkbox format will involve several steps. The user will assess the information, make choices, review these choices, and then submit these choices. Often the contextual space for a checkbox will be inside a form, and it’s important to note that the checkboxes won’t create changes unless approved by the user.
Since checkboxes serve a similar purpose, they should look uniform in appearance across your platform. Nothing confuses the user more than inconsistency in design.
Either/Or
For any user choice that is mutually exclusive, you have two options: a radio button and a toggle switch. Again, these are not the same, and the subtle differences between them can boost or bust your UX. But they do share one common feature, in that when users activate the button, the state changes immediately. There is no extra step required to enact change that the user controls..
Radio Button
The radio button is exactly that, a classic round circle that users press to activate or deactivate some feature. For mobile devices, this interface can be very useful because the touch area can be expanded to fit in the area of an average thumb print. It is a feature that has long been a design tool, although it could use some updating.
Toggle Switch
This component is more pervasive as a design tool, familiar to anyone who has ever turned on or turned off Wifi on their mobile devices. For most binary choices, the toggle switch is the best design option. The labels need to clearly show the current state when the toggle is activated, however. Users should know precisely what they’re getting into.
Final Thoughts
But there are mutually exclusive scenarios where the user can pick between more than two options. In that case, a list of radio buttons, stacked vertically, is more preferable than some kind of slapdash array of toggle switches. In addition, toggle switches shouldn’t be used in forms, as radio buttons offer a more precise look and feel. Basically, if you have anything with multiple options, avoid toggles in favor of checkboxes or radio buttons.
And never, ever, never mix and match between radio buttons and switches. No matter what you do, remain consistent in your visual presentation.
YOU MAY ALSO ENJOY
