As annoying as threading a needle, marking a tiny tick box is a chore we’ve all experienced, sometimes at our own cost. Fail to tick or untick a particular box and you’ve accidentally signed up to a subscription you never wanted.
That’s why I think miniscule tick boxes make for a poor user interface. They can also be confusing and deliver inaccurate data. Radio buttons are better; they require less concentration and make forms more accessible to mobile users and those with disability. Based on hours of analysis of hundreds of online forms, here’s my case for radio buttons over tick boxes.
Radio Buttons vs. Tick Boxes
Even designers sometimes mix up radio buttons with tick boxes. And it’s no surprise. Not only do they look similar but they serve a comparable purpose requiring users to enter a response with a single click.
However, there are two significant differences:
1. Tick boxes allow more than one response to be selected whereas radio buttons restrict users to a single response
2. Radio buttons force users to make a choice; tick boxes can allow people to progress without making any choice at all.
Where a single response must be provided, radio buttons are the right option. The image below shows radio buttons being used to elicit a yes/no response. In this instance, it’s not possible for the user both to have and not have a passport. And the information is important so a response must be given making radio buttons the right choice.
This approach is also a great way to ask people to sign up for items like company newsletters because it makes it crystal clear whether they are electing to sign up or not.
So far so different. Yet despite their differing uses, there are visual similarities between radio buttons and tick boxes.
Traditionally, radio buttons are round circles which, when selected, are populated with a smaller circle (see number seven in the image below). However, they can also be square or rectangular in shape as in this image.
Source: UX Stack Exchange
In comparison to tiny tick boxes, radio buttons tend to be bigger making them quicker and easier to select. This makes the other breed of radio button – a tiny dot – a nonstarter. These teeny targets are more difficult to hit and should be avoided.
Building buttons that are the right size for multiple different operating systems is not straight forwards. Smashing Magazine provides this helpful button size guide summary for three of the bigger manufacturers:
- Apple – 44 pixels wide 44 pixels tall
- Microsoft Windows – 34px with a minimum touch target size of 26px
- Nokia – 28 x 28 pixels
Source: UX Stack Exchange
Is a Switch a Radio Button?
There’s an argument that switches, like numbers five and eight in the image above, could also be called radio buttons. Why? Because although there are only two options to choose from, like radio buttons, users must select a single answer.
Replace the radio buttons in the passport image with a switch and the outcome is the same. Make that switch nice and big to make selection simplicity itself.
As mobile device use continues to increase, button size is increasingly important for good iOS. When users find themselves tapping repeatedly on their mobile screen in a futile attempt to tick a tiny box, form abandonment rates soar along with frustration levels. For single responses, larger radio buttons provide an easy target.
Fine motor skills, like those used to complete tiny tick boxes, decline with age and may be compromised for some disabled people. Larger radio buttons are easier to operate for such users.
The best way to assess whether a switch delivers the same usability as radio buttons is to conduct A/B testing backed up with form analytics.
Sensitive Tick Box Error Zones Are an Option – But Only Some of The Time
Is there nothing that can be done about teensy tick boxes to improve UX? Well, yes. Designers can provide error zones around the box; these effectively extend the tick box’s sensitivity to the surrounding areas. Which means users don’t have to be exact when selecting their tick box.
This is particularly useful for mobile users, but can realistically only be used when the tick box is standalone or well away from other tick boxes. When there are a number of tick boxes close together, sensitive error zones may not be possible due to overlap. Not only would this generate incorrect responses but it would be seriously annoying for users.
Tick Boxes Compromise Data Integrity
Depending on the way your form is set up, tick boxes don’t always require an individual to submit a response. This means it’s unclear whether forms submitted without ticked boxes are intentionally blank.
In the earlier example of pizza toppings, accidentally submitting a form having failed to check the anchovy box is mildly irritating. For important information, this is not an option.
One solution would be to build in an error message requiring the user to make a choice. However, this means the tick box becomes a radio button forcing people to select at least one option.
This registration form seems to get around this issue by only giving users one option to choose from.
Source: The Talk of Manchester
However, in this case, this is part of a ticket booking form that allows an individual to book multiple tickets for a dinner. If the person wants two tickets, and only one person is vegetarian, they will need to purchase each ticket separately making the right food selection for each person. Which could mean they end up on different tables.
In this case, where one dietary response is required per person, the best option is to use radio buttons. Providing one line per attendee, the user would indicate whether they want vegetarian food with yes/no radio buttons – or a switch.
Radio Buttons Require Sufficient Options
Despite making the case for radio buttons, they aren’t without their challenges. Because they’re used to provide a single response, they won’t allow users to leave the field blank. Which means it’s important that there are sufficient options to enable all users to respond.
Traditionally, gender is presented on forms as ‘male’ and ‘female’. But today, gender is no longer so clear cut. In the example below, an individual undergoing gender reassignment or someone who identifies as cisgender would not be able to respond or would be forced into a false choice.
Providing the option ‘other’ in this instance enables users to progess through the form whilst remaining true to themselves. Making people feel uncomfortable while completing your forms is not an emotion you want associated with your brand.
Use radio buttons wisely and you can provide comprehensive options that are meaningful to your users and demonstrate that you understand them and consider their feelings to be important.
The Unethical Tick Box Option
Both radio buttons and tick boxes can be pre-completed on forms. This is often used in situations where it’s possible to predict a user’s answer. For example, most Dropbox users won’t require the advanced setting so the typical setting button is helpfully pre-selected.
Source: Nielsen Norman Group
But pre-completion has a darker side and can be used to an organisation’s benefit. For example, pre-selected radio buttons that sign users up to newsletters generate higher sign up rates because some people will fail to deselect the button. Whether you choose to take this approach comes down to your organisation’s ethical stance and your knowledge of the impending GDPR.
Arguably, this is preferable to the double negatives that are frequently associated with tick boxes.
They can be tricky for users to interpret correctly and some businesses use them to purposefully bamboozle users to increase participation or sales.
Active, positive wording helps tick boxes become more fathomable. Make it clear what will happen if the user selects the box. Avoid asking people to do something to opt out – negative statements like ‘don’t send me more mail’ means the user needs to take positive action in ticking the box to opt out of email.
Take a look at our blog on this very topic for more detail.
In summary: if you want your user to be able to choose more than one option form a list of choices, tick boxes tick the box. But if you want to force users to respond and provide one response only, radio buttons should be used. Where possible, make your radio buttons large, easy targets so users can click and move quickly on with minimal effort. Your customers will thank you with improved form conversion rates and reduced drop-off.