Checkboxes may be switched independently of each other, while radio buttons are part of a group where only one may be active at a time.
Suppose you open a new application and see something like this:
Try clicking on these radio buttons. You should find that this “application” can walk, and it can chew gum, but not both at the same time.
What if you later upgrade to version 2.0 of the same application, and see this:
Try clicking on these checkboxes. You should find that the “application” can now walk while chewing gum.
Did you see square checkboxes and round radio buttons? This user interface convention is common across many different platforms. It is worth learning to recognise it.
Sometimes a checkbox has to display the state of a group of items, some “off” and some “on”. While checkboxes may have a common shape, this is not consistent between platforms.
Clicking on an indeterminate checkbox will usually start switching it between its “on” and “off” states. You may not be able to restore it to its original state1.
Sometimes options affect each other in ways that can’t be expressed as checkboxes (all independent) or radio buttons (select one and only one). A common example of this is the Microsoft Word dialog box for changing font properties:
Checking several of these checkboxes will cause other checkboxes to uncheck.
- Strikethrough and Double strikethrough are mutually exclusive.
- Superscript and Subscript are mutually exclusive.
- Shadow and Outline may be enabled simultaneously, but both are mutually exlusive to Emboss and Engrave.
- Emboss and Engrave are mutually exclusive to each other.
- Small caps and All caps are mutually exclusive.
The Strikethrough/Double strikethrough, Superscript/Subscript and Small caps/All caps options could have been implemented with radio buttons. Why weren’t they? Probably because each group would have needed a “Nothing” option. Each group of radio buttons would have also needed space to separate it from the other groups.
There is no simple way to show the dependencies within the Shadow/Outline/Emboss/Engrave options.
Radio button problems
The name was probably a bad start. I have never seen a real-world radio with buttons that look like computer “radio buttons”.
Checkboxes always do something when clicked2. Radio buttons do not always do something when clicked. If a radio button is “on”, the only way to switch it “off” is to select one of the other options.
It is possible to have multiple groups of radio buttons on a single screen. A good designer will group them clearly, but this doesn’t always happen.
Checkboxes and radio buttons have been around for decades, but have never been fully understood. When the designers of iOS created its standard set of user interface components, they left out both checkboxes and radio buttons. Checkboxes were replaced with switches. Radio buttons were replaced with segmented controls.
Switches are used quite a bit. Segmented controls do an excellent job of showing that they are a group of mutually exclusive options, but don’t allow much writing to describe those options. Instead, iOS user interface designers often use a single-column table with checkmarks to show a list of mutually exclusive options.
Why do I need to know this?
User interface conventions can tell you a great deal. Learn the conventions, and you can tell what an application does before you even use it. Checkboxes and radio buttons are just two of the conventions. They are common, yet frequently mistaken for each other, causing confusion and annoyance.
Learn to recognise them and their behaviour, and you will avoid this common source of confusion.
The people who make operating systems publish detailed guidelines for software developers. Even if you are not a developer, you may be interested to know what Apple and Microsoft think of your thought processes.
Ancient History Supplement
While most checkboxes now contain ticks, this was not always the case. Windows versions up to 3.11 put used a cross instead of a tick3. This was easier to program, but was also confusing. Did the X mean “on” or “off”? Clicking on the X made it disappear, suggesting (correctly) that blank was “off” and X was “on”.