Making Sense of Radio Buttons: Leave One Selected by Default, or Keep All Unselected?

The smallest details can have significant effects to the usability of a web design, so much so that usability experts the Nielsen Norman Group (NN/g) was able to find problems in the improper use of the radio button.

Radio buttons are used to display a set of options from which web users can only make one selection. This is what makes them different from checkboxes, the GUI widget that allows users to select either multiple choices, or none at all.

radio button example                                                             Radio button example                                                                        

For many years, the first radio button in a list of options was always selected by default, but trends and changes in web design schools of thought eventually challenged this practice. There’s a lot of inconsistency across today’s websites, web forms, and applications when the use of radio buttons, with many pages not only selecting one button, but also leaving them all blank by default. If no buttons are selected by default, users can’t go back to leaving them blank after they’ve made a choice, thus creating confusion.

We agree with NN/g’s assessment that it’s always best to have one radio button selected by default, as this offers consistent usability and elegant design. Furthermore, this gives users more control over their web experience, it makes things faster, and gives you the power of suggestion.

Below are some guidelines on radio button use, as recommended by NN/g.

  1. Offer users More Control and Anticipate their Expectations

One of the tenets of UI design says that people should have the ability to revert and repeat their actions—in this case, on a web page. For most radio button sets, you can change an option you made or one selected by the page for you, but you can’t click on that radio button to deselect it.

Users are not as compelled to make a choice when no radio buttons are selected off by default. Furthermore, an unselected list of buttons is confusing, and because users can’t deselect, it can lead to unwanted actions by users, ranging from refreshing the page, going back to the previous page, and or abandon what they’re doing completely.

  1. Speed up Tasks

You can dramatically speed up users’ tasks by selecting the radio button that’s most desirable or most used by default. Doing so eliminates unnecessary clicks and saves time, while also reducing the interaction cost.

One way of using this setup effectively is with  club/service memberships. When members terminate their membership or subscription to a service, it’s a good idea to present two options: one where they can cancel their membership, and one where they can keep their membership and save a particular percentage on their next order or service transaction. The second option should of course be selected by default.

Although you’re presenting a compelling reason for your members to stay, choosing the attractive option also gives you the power of suggestion. Which brings us to our next recommendation.

  1. Use the Power of Suggestion

When choosing which radio buttons are selected by default, think of your choice as a strong suggestion, a prod in the direction you want them to go.

radio button suggest

However, you also want to do it in such a way that actually helps the user rather than just controlling him. Default radio buttons should help users, especially in situations where the choices can be complicated and not easily understood.

Market researchers are usually prohibited from doing this, as it means leading people to make ‘tampered’ decisions. But in web design, there’s no need to be neutral. If you can help users while also helping yourself, then why not?

These are just some ways to use radio buttons in a sensible manner, keeping in line with usability guidelines while also swaying users to make favourable actions.