Published in · 8 min read · Apr 10, 2018
--
Checkbox vs radio button — revisiting the ultimate design debate. Your guide to designing with the right widget every time. Learn more here!
Every UI designer will be familiar with checkboxes and radio buttons. These widgets help the user progress through many online tasks and can often be found hanging out in the same site or app.
But although now commonplace, checkboxes and radio buttons are still used incorrectly and interchangeably across web and mobile interfaces. Improper use of these widgets causes confusion, increases cognitive load and affects the overall user experience — as you’ll see in our post.
So make the most of checkboxes and radio buttons with this article. Learn how to recognize, understand and wireframe both of them with Justinmind, and start improving the usability and desirability of your designs.
Checkbox vs radio button — what’s the difference?
The checkbox
In UI design, the checkbox is presented as a small square box on the screen. It has two states: checked and unchecked. When checked, the square will be filled with a check mark.
Checkboxes are used to present the user with a range of options, from which the user may select any number of options to complete their task. Within a group of checkboxes, each operates individually, so the user can check or uncheck options independently.
The radio button
The radio button is presented as a small circle on the screen. It also has two states, and when selected, the circle is filled with a solid dot.
In contrast to checkbox groups, radio button groups behave as a single control and limit the user’s choice to just one option from the range provided.
When to use checkboxes and radio buttons in UI design
As Michael Meadhra mentions here, people frequently confuse checkboxes and radio buttons in UI design. Nevertheless, each has its own distinct job.
Checkboxes are used in forms and databases to indicate an answer to a question, apply a batch of settings or allow the user to make a multi-selection from a list. Alternatively, a single checkbox may be used for making single selections — such as Boolean True or False statements (e.g. “Do you wish to join our mailing list? Yes or no”).
In turn, radio buttons are used to configure a specific setting, switch between options or turn something on or off. They can typically be found in surveys where the user needs to scan a list and make a single selection from it.
We’ll take a look at some specific use cases next.
3 examples of checkbox design
Checkboxes are often used to capture user preferences, as you can check as many boxes as you wish.
#1 Making a reservation
When reserving a hotel, checkboxes allow the user to select options from a wide range of hotel amenities. Booking.com uses a series of checkbox groups to help the user filter search criteria and find their ideal accommodation more efficiently. In fact, Renee Lin’s article shows that the Booking.com’s users frequently use the checkbox filters when making a booking.
#2 The Signup experience
Checkboxes are often found in signup experiences when the user is creating a new online account or profile. When you create a new Medium account, you’ll be prompted to customize your interests, a task that involves checking any card(s) that matches your interests.
We love this UI pattern that combines checkboxes with cards. Learn how to create cards in your UI design here.
#3 Personalizing your order
Checkbox design can also be seen in food delivery apps that allow the user to personalize their order. Some apps like Uber Eats, Deliveroo and even Taco Bell give the option to add extra toppings and inform the kitchen of special dietary requirements, using a list of checkboxes. Learn how to use lists and grids in your UI design here.
Accepting or refusing an offer (the single selection checkbox)
Additionally, there’s the single selection checkbox. You’ll find these at the bottom of any online form you fill in, asking you to accept or refuse an offer. For instance the “Tick to receive our newsletter” and “Tick to confirm you have read and agree with the terms and conditions” checkboxes. Check out the Levi’s example below:
Interested in form design? Take a gander at our sign up and sign in forms here.
3 examples of radio button design
As a general rule of thumb, radio buttons should be used to allow the user to select one option from a set. This is what makes them the ideal candidate for making a selection from mutually exclusive options.
#1 The Checkout Process
You’ll often see radio buttons in the checkout process when making an online purchase. For instance, on Amazon. When you get to the payment screen, you’ll be prompted to choose a payment option:
Notice that you’re only able to choose one option. Radio button heaven.
And then on to the delivery options. Amazon offers the following options: standard, expedited and priority shipping:
#2 Customizing your workspace
Radio buttons can take the heavy lifting out of profile or workspace customization. Laying out all available options in a logical order and having the user pick one takes a lot of the guess work out of UI personalization.
This is an example of how radio buttons are used in Android Oreo:
#3 Ordering food (strictly for mutually exclusive options)
In food delivery apps, radio buttons do the exact opposite to checkboxes. While checkboxes help to personalize the user experience, radio buttons put constraints on the user’s options to ensure each order is carried out successfully.
If you’ve ever ordered pizza from Uber Eats, you’re required to choose a size: small, medium, large or extra large? Thick or thin crust?
Here, a single selection is absolutely necessary, and radio buttons ensure that your order is complete and coherent before you checkout and that accessibility isn’t damaged.
When not to use checkboxes
When not designed for the user, checkboxes pose some potential design challenges.
For starters, they imply a default answer. While this may not sound particularly disruptive, if the pre-selected option is in favor of the brand and not the user, they can be a bit pesky. Get signed up for mailing list without even realizing or have your details sent to third parties. Both having to deselect these options and later realizing you missed this step are equally frustrating.
Solution: if you want to offer a default selection, choose the safest or most convenient option.
Additionally, don’t use checkboxes if you require the user to make an active choice. As the Salesforce team points out, it’s not always clear if a user has left a checkbox intentionally or unintentionally blank in forms.
Solution: to avoid compromising your data’s integrity, opt for radio buttons or error messages when the user is required to engage with a section.
When not to use radio buttons
Never split up a radio button list into sub-categories. As Jakob Nielsen advises, a list of radio buttons must always appear unified so that the user knows that all options form part of the same set.
Another thing to keep in mind is that radio buttons should never be made directly actionable. Once the user makes their selection, a button should be provided to allow them to apply/confirm/save their selection.
Solution: for each radio button selection, keep list options grouped together and accompanied by a button to avoid cognitive load.
And remember, sometimes neither will do the trick. As we mention here, if you have more than 5 options in a set, consider using a drop-down list instead. It’s a great space-saver and much tidier.
Getting started with checkboxes and radio buttons in your UI design
So maybe you’d like to try designing with checkboxes and radio buttons. If you’re looking for a tool with pre-made elements to get started, you might try Justinmind.
For those of you who are already familiar with Justinmind, you’ve probably already sampled our UI widget libraries. For anyone new to the prototyping tool, let’s run you through a quick summary:
Our tool has over 2000+ readymade UI widgets, screens and icons (including Android and iOS-friendly UI kits) to help you create wireframes and prototypes.
Our Basic widgets, those commonly found in both web and mobile designs, are pre-loaded in the Widget library palette. You’ll find the Widgets library palette as soon as you open a new prototype in the Justinmind editor. In this library, you’ll find both our Checkbox and Radio button widgets.
The Checkbox widget
The Checkbox widget displays one of two states (checked/unchecked). You can easily change its default state by double clicking on it in the canvas.
The Radio button widget
The Radio button widget displays one option from a set of mutually exclusive items. Change its default state in the same way as with the Checkbox.
Use these widgets to create online forms, surveys, settings and more for you web and mobile prototypes. Get started now!
