How to design radio buttons: prototyping tips for designers
Your guide to prototyping interfaces with the radio button, the meager yet mighty asset for UI/UX designers
Radio buttons are everywhere. They help us configure user settings, fill in forms online, and even order food from apps like Deliveroo and Glovo.
They’re a nifty way to make user interfaces more accessible, and user experiences more meaningful. Designers, you simply can’t do without them.
So whether you’re brushing up on your UI design skills or just getting your feet wet, our post will guide you through the do’s and don’ts of radio button design. Get the lowdown on when to use radio buttons, and when to avoid them. Plus, see how getting started early on with a prototype can make your radio button design stronger.
Get ready to create delightful user experiences with radio buttons!
What is a radio button?
The radio button is a selection control element, allowing the user to select one option from a set of several mutually exclusive options. It’s represented as a small circle that has a solid dot inside it when selected.
The radio button has two states: checked (enabled) and unchecked (disabled)
The user selects a radio button from a list of many in order to progress through a web or mobile page.
When to use radio buttons in UI design
Radio buttons are typically used when the user is required to fill in a form, configure settings or complete a survey.
They should be used for exclusive selection in a list with two or more options, when all list options need to be visible at the same time. For instance, if you wanted to emphasize all available options in a menu at once or enable users to scan all the options quickly.
Top tips for designing radio buttons with a prototype
#1 Keep your radio button layout simple and coherent
Visual clutter and redundant on-screen elements can overwhelm users. So when it comes to creating a set of radio buttons, consider how you might reduce the cognitive load.
To maximize usability, make sure your radio button list has a logical layout. UX guru Jakob Nielsen advises that radio button lists should always be vertical, introducing each new option on another line. This will help to improve readability.
Additionally, avoid nested radio buttons that hide parts of your list — the whole point of radio button design is to keep options visible!
With Justinmind, designing a prototype with radio buttons is a piece of cake. There’s no need to fiddle around with shapes and styles — our pre-built Radio Button widget has been designed to reflect UI design standards and is ready to use in any web or mobile prototype. You’ll also find Android and iOS custom-made icons in our Mobile widget library collections.
With the drag-and-drop canvas, building a list of radio buttons is easy. Simply drag each Radio Button widget from the widget library to the canvas and use rules, guides and grids to keep your list aligned.
#2 Have a pre-selected default
According to UXpert Nick Babich’s 10 Usability Heuristics for UI Design, the user should always be able to undo their actions.
When it comes to radio button design, pre-selected defaults allow the user to revert to the original page settings to start over. This makes filling in forms quicker and easier, with fewer actions needed from the user.
To create a default radio button in your Justinmind prototype, follow these steps:
- First, you’ll need to decide on a default radio button. We recommend having the most common response selected by default
- Then, select your chosen radio button from the canvas and go to the Properties tab. Change the Value in General properties to “Checked” — this will ensure that the selected radio button will be checked by default during simulation
- To restrict the user to selecting a single option, simply group your Radio Buttons together in the canvas
- If you click “Simulate”, you’ll see that the radio button you just edited will be checked by default
- Now make a different selection from your radio button list. Notice that you can only select one radio button at a time
- Then, refresh the screen and see the page revert to its original state, and the radio buttons back to their default status
#3 Don’t bend the rules
Radio buttons are used to change settings, but they are not action buttons. Once the user has made the selection, they must click or tap a command button to make the desired changes. The change should not take effect until the button has been clicked.
Actions triggered by radio buttons may confuse the user, increase the time it takes them to complete a task and interrupt their journey through your site or app. To avoid leading the user into unfamiliar territory, design all the touchpoints for your radio button experience — from making a radio button selection to hitting that command button.
In Justinmind, you can design a complete and clickable prototype that will bring your radio buttons to life. Combine them with Button widgets to complete the navigation flow.
Why use radio buttons for selection control?
There are loads of reasons to design with radio buttons. Consider the following:
- They avoid incomplete or inaccurate data entry. When filling in a form, text entry can be ambiguous and difficult to validate prior to form submission. In contrast, data entry with radio buttons is specific and requires the user to choose from pre-defined options
- They provide quick and immediate access to options in a list
- They reduce the cognitive load and avoid wasted time and energy (particularly for users who have trouble selecting options from a drop-down list for mobility reasons)
When not to include radio buttons in your UI design
Indeed, radio buttons have their place in UI design. However, they’re not the only selection control. Choosing the correct way to display data and have users interact with it is an important part of the user experience. Here are a couple of rules to keep in mind:
Radio buttons v drop-down lists
When the user needs to make a selection from a large number of options, drop-down lists may be used instead of radio buttons in order to save space. According to UX Movement, drop-down lists should replace radio buttons when there are more than 5 options in a set.
Tip: for particularly large selections, consider a drop-down list with search. Learn how to design both in your prototypes here.
Radio buttons v checkboxes
In contrast to single-selection radio buttons, checkboxes allow the user to select multiple options. Each checkbox is independent of the rest in the list, and the user can check one without unchecking the others.
They can also be used when they are only two options, such as Boolean (true or false) options. Learn how to use checkboxes in Justinmind here.
Ready to get tuned in to radio button design? Download Justinmind free now!
