Skip to content
Article

How to Use the Secret, Overlooked Power of Radio Buttons

For those in the know, the difference between check boxes and radio buttons seem obvious. Check boxes are for a variety of selections. Radio buttons are for agreed upon exclusive options. It is usually easy to select the proper web form element, but it can get tricky in some situations.

Old Car Radio
Car radio buttons used to have depressible buttons for presets.

History of the Radio Button

Let’s review how radio buttons came to be.

Once upon a time, graphical user interface elements were being developed. During this time of innovation, metaphors were often used for icons and actions. For example, an icon with scissors was for the Cut action and a home icon was for a Homepage. Tim Berners-Lee and Dan Connolly were the first to define radio buttons, as well as checkboxes. At the time, car radios most often had buttons for presets, where a person could only press one button down at a time.

Young web designers may not recognize the metaphor. Most modern car radios have preset buttons that do not depress. Some people think that the term came from “radius” or “radial”. Ah, youth. The good news is that most end users do not need to be familiar with the term “radio button”. Yet, there are plenty of endangered metaphors. Remember the floppy disk icon for Save?

3 User Experience Tips

Designing web forms here at Atlantic BT is our jam. Most of the time, it’s pretty easy for us to determine which form element to use. But, here are some situations that have made us think.

Radio Buttons or Drop-Down

For a list of reciprocal and exclusive items, should you use radio buttons or a drop-down? Answer: It depends. Use radio buttons when the options underneath are not obvious. This allows users to see every option at the same time. If users understand the options underneath a drop-down, then they work very well.

For example, selecting a country requires a long list to choose from. A drop-down used in this example makes sense because the user can navigate through it with ease. The user will have natural expectations from other web experiences with the drop-down. They will assume the countries will be in alphabetical order. If the website base is from the United States, users will expect that it will most likely be the first list option.

Navigational Form Elements

Which form element do you use when the user is making a choice that will determine the next web page they see? Radio buttons may seem like the obvious choice. Yet, users will not expect radio buttons to perform an action (e.g. launch a new web page). So, regular buttons with proper labels are actually the best choice.

Default Radio Buttons

Do you have one radio button in a group selected by default? This is an interesting one. In a 2004 Alertbox, Nielsen recommended to always have a radio button selected by default. There are two benefits to not having a radio button selected:

  • It won’t introduce any bias if you are doing a survey.
  • Users will have to pay attention to the question (if required).
The drawback of not selecting an option by default is that it may take more time for a user to fill out a form. Select a radio button by default if there are frequent responses to a question and/or a lot of user inquires.

There are so many other unique situations to list here. Contact us to collaborate on more strategic web projects.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More about What is web design and development?
What is JavaScript used for in web development?
Historically speaking, JavaScript was only commonly but sparingly used in web development. The multiple browsers in use at the time each supported different versions of JavaScript and were slow to render more complex Javascript.
Learn More about What is JavaScript used for in web development?
What is bootstrap in web development?
Bootstrap is a framework used in front-end development to save time, specifically for mobile-first development. It combines CSS and JavaScript templates and libraries to speed up the development process.
Learn More about What is bootstrap in web development?
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More about What is front end vs. back end development?
How do I create, organize, and write a digital strategy?
Nearly every time, good execution outperforms good ideas. For the most effective execution, it's essential to have a strong underlying strategy. Try organizing an offsite multi-day retreat with a facilitator.
Learn More about How do I create, organize, and write a digital strategy?
How do I avoid digital strategy pitfalls?
Like any strategy, there are more ways to find pitfalls than success. The first step in planning is to clearly articulate the overall strategy in a way that is easy to understand at all levels of the organization. 
Learn More about How do I avoid digital strategy pitfalls?