justinmind

Radio button design: easy selection and decision-making

guide to radio button design

What separates a good radio button design from a bad one? Radio buttons are simple but do come with some rules. Read on for the full story on a familiar face!

Radio buttons are a classic UI component. We all know them, we’ve all interacted with them. But of all the radio buttons we’ve experienced over time, how many had terrible usability? These buttons are meant to help users make decisions quickly and easily – which means that bad usability may keep them from their main goal.

Design web and app prototypes with fully-functional radio buttons!
Download Free

So, let’s take a closer look at a familiar face. Radio button design is simple in both theory and practice – but like all other games, it comes with a set of rules. We’ll start by going over the basics, before moving on to awesome radio button examples and how you can prototype and test your design with the Justinmind prototyping tool.

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). There’s a brief but key interaction where the user changes the states of the buttons by selecting an option.

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.

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. However, dropdowns do require more from users, both in terms of clicks and cognitive effort.

That’s why it’s a smart move to use radio buttons when you have few options. Just lay your options bare to users from the get-go, and allow them to simply select the right option. Where’s the line that separates a radio button list from a potential dropdown list? Some designers, like folks over at UX Movement, say 5 options is the limit for radio lists.

when to use radio buttons or dropdown lists in ui design

There’s a bit of a margin here for designers. You want the list to be short enough that it doesn’t eat up a lot of space, while not asking too much from users.

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.

There may be some confusion as to when checkboxes are better suited for the job at hand. For example, a single checkbox alone can give the user the power to select or not, to give consent of not and so on. That can be a handy way to save on screen space.

when to use checkboxes or radio buttons in ui design

However, checkboxes do come with an issue: data metrics. If you use a checkbox, you may not be sure that users even read the label – much less actively made the decision to leave the checkbox as is. Because of that, radio buttons might offer a clear result that can’t be second-guessed.

Checkboxes have also been used when there are only two options, such as Landscape or Portrait options. Again, that comes with a usability issue: the label alone might not be enough to get users to understand that the two options are alternatives to each other – whereas radio buttons would make that crystal clear.

Check out the full story on our post on the epic battle between radio buttons and checkboxes.

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 predefined 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)

Guidelines for radio button design

1. Always ensure good usability

Usability shouldn’t be an issue with such a simple UI component, right? Turns out, there are a few rules to radio button design. An important rule is that your radio button alone shouldn’t be the only clickable area. Instead, always make it so that users can click anywhere between the actual button and the label – so users won’t need to be perfectly accurate.

ensuring usability in radio button design

Mobile design tip: The clickable area is particularly important in mobile radio buttons. The buttons tend to be small, and users can have large fingers!

Additionally, avoid nested radio buttons that hide parts of your list – the whole point of radio button design is to keep options visible! Plus, you don’t want to confuse users by adding hierarchy in the possible options. Keep the list as brief as possible, and maintain a single aligned column.

The general UI layout needs to make the relationship between options obvious. It needs to show which label corresponds to which button. You want users to immediately see the options as a whole, while also giving enough space between options to allow the user to breathe. That crucial spacing between options will also help users when selecting an option – which is especially important in small mobile screens.

2. Readability is crucial

Visual clutter and redundant on-screen elements can overwhelm users. So when it comes to creating a list of options in radio buttons, consider some moves that could reduce the overall cognitive load.

One of those moves is making sure your radio button list has a logical layout. Users are used to seeing vertical lists, with each line presenting in option. Having horizontal radio lists represents a usability problem, because if there are more than two options users might not know which button corresponds to each label.

how to offer good readability in radio button lists

Aside from the list needing to be vertical, the labels also need to be concise. The longer a label is, the more time and effort users will need in order to grasp the list as a whole. It’s important to keep you labels short, especially if your radio list already requires a lot of options listed at once.

3. Don’t use radio button design for actions

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. If the button in question triggers any action, a good old button will work best.

4. Use a default selection for complex things

Imagine that a user downloads a brand new software for editing images. The user knows very little about the software, but right off the bat, is presented with a question. A pop-up presents two setups for the tool: classic setup and modern setup.

using preselected options for complex settings

The problem, as you might have noticed, is that the user doesn’t really know what they’re selecting. Even with a bit of descriptive copy, the user wouldn’t be sure about their choice. In cases like these, it’s better to have a default selection. The default could be the most commonly selected option, or the best suited option for a beginner.

Your metrics are key in deciding which option to use as default. You want to work with the numbers, not against them!

5. Mobile radio buttons are about the whole screen

If we focus on the actual radio buttons alone, we’ll find that there are no real differences between their visual and interactive cues in web and mobile format. Much like with toggle switches, the real changes are about how the radio button relates to the other components.

When designing your mobile radio button, pay close attention to the size of the button, as well as the size of the clickable area. This is very important, as any user with slightly chunky fingers will tell you with a sigh.

In fact, the sizing of everything is important. You want to maintain the visual hierarchy and grouping of elements, while also giving users plenty of empty space for visual relief. Remember to space the radio list options, so it’s easier to read and interact with them.

10 cool radio button examples

1. Radio Button

This radio button example is brought to us by Cosimo Scarpa. It’s simple design places the animation in the spotlight, making it fluid and unique. A classic radio button, with a twist!

animated radio button example

2. Splat Radio Button

Chris Gannon created a wildly popular and creative radio button. The flat and minimalist design makes the animation stand out, resulting in a fun and memorable experience.

splat button example

3. Card theme

Jan Hoffmann bring us a colourful example of radio buttons used in a checkout process. The visual hierarchy is reinforced by the defined border on the buttons, including the  radio buttons, labels and icons – tidy and functional!

radio buttons used for credit card checkout

4. Pulse Radio Button

Marvin Rudolph bring us a straightforward radio button example that still has plenty of personality. The structure of classic radio buttons is kept, but the eye-catching color palette and enjoyable animation gives the experience a good twist.

example of pulsating radio button

5. Radio Button

Rasika Warnasuriya also went for the bright colors. In this radio button example, it’s all about soft lines and the modern feel of the entire mobile screen. We love the play of shadows and highlights to give the sense of depth.

mobile radio button example

6. Animated Radio

Julien Perrière delivers a great example of a radio button that takes button states to a new level. With a brief animation, the use of grey and a bright orange – the whole thing feels unique and effortless. it goes to show that when it comes to radio buttons, the details matter!

radio button example of change states

7. Light and Switch

Sebastien Gabriel created a wonderful set of UI components, set in smooth lines and delicate changes in colors. The radio buttons blend in with the soft UI style, but also get the job done in sending context and feedback to users. Better yet? Sebastien uploaded the PSD file for everyone! Thanks, Sebastien.

example of radio button for neumorphism in UI design
Check out out post on Neumorphism if you want to know more!

8. Radio Button

Mitchell Geere offers a great example of button states in radio button design. Looking at the three different states, we can  fully appreciate the feedback users get while interacting with the button. Sometimes, you don’t need anything more than a solid and classic design!

classic radio button design example

9. Radio Button Animation

Aaron Benjamin designed another wonderful example of a radio button that uses animation to create a memorable experience. The good readability of the available lists and the pop of yellow make for a smart design that showcases how details can elevate any design.

example of radio button list with great readability

10. Radio Button

Trapti Rahangdale offers a creative approach to radio button design. This example still delivers the same functionality, but changes the generally simple look of the individual buttons. It’s fun, memorable and certainly unique!

creative example of radio button design

Top tips for prototyping radio buttons

Making use of radio buttons in Justinmind is as easy as can be. The radio buttons in our UI kits are already interactive, leaving you with a practical component that is ready for action.

First, you’ll need to decide on a default radio button. We recommend having the most common response selected by default, making the user’s life easier.

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.

how to prototype radio buttons with justinmind

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.

Testing your radio button design

If only user testing your radio buttons were as easy as a single test and that the design passed or failed. In reality though, testing is hardly ever a straight line. Even validating something as simple as a radio button is never about the button as a single component – it’s about seeing if the screen works as a whole.

Let’s go over some types of testing you could use in validating your screen design, with a particular focus on the radio buttons.

A/B testing

We just love A/B testing at Justinmind. It’s a great tool in creating a healthy testing process for the entire project, and even a testing culture in the team. The secret is to make slightly different versions of your radio button design and compare them with an A/B test – with each new round of testing, you test another aspect of your screen.

how to test radio buttons in ui design
You can see the full theory and implementation in our A/B testing guide.

Eye tracking

Eye tracking is another popular way to test your choice of UI components. Radio buttons are practical, but the whole point of using them is to get the user closer to their goal, faster and easier. With an eye tracking software, you could analyse where users paused, where they got confused.

using eye tracking to test radio buttons in ui design

That’s crucial knowledge with radio buttons. You want the radio button design to make it so users only need a glance to understand the function the button deals with, the context and meaning of the labels and the actual button interaction. If you find that many users had to pause and read the labels three times… you may want to revisit the microcopy, for example.

Accessibility testing

Accessibility is important. Today, just about all sorts of people use the internet, which makes it the designer’s responsibility to make sure the product reaches certain accessibility standards. What are those standards, you may ask. There are some basic legal requirements, such as Section 508 in the United States.

But to a certain extent, it’s up to the design team to set those accessibility standards and ensure the product meets them. Depending on the type of product of the users you’re going for, you may want to make sure the visually impaired can use your product, for example. Or perhaps your product is related to medical help, which means you may want to help users with illnesses such as Epilepsy to use your product safely.

It can be tough to recommend certain types of accessibility testing in general terms. More often than not, each team has their own way of approaching accessibility. The important thing, however, is that you cover some minimum ground and open your product up to users with disabilities too.

If you want to know more specifics about testing methods and which common disabilities impact the user experience, check out our full guide to accessibility testing.

The wrap up on radio buttons

Radio button design is a powerful tool in Ui design. It’s a way to lay down all the options in front of the user in a concise and efficient way – free of clutter or complication. Must users already know radio buttons, making them a wonderful ally in making your product discoverable, usable and functional.

With that said, they can also represent a window of opportunity to add flare and personality to your UI design. Be it with eye-catching animations or fun uses of colors and copy, your radio buttons can make a big impact on the user experience!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers