26

I feel like there's an answer out there but I can't find it.

We have a situation where customers need to choose one of two options for billing their services, but we can't choose it for them.

I've toyed with a dozen options, including some proposed by co-workers.

Here are the scenarios:

1. Use checkboxes like radio buttons:

Checkboxes as radio bittons

Here, neither is checked by default, clicking one or the other activates it and deselects the other.

I don't like this option as it doesn't follow checkbox conventions.

2. Radio buttons with a checkbox "enabler".

Radio buttons enabled by checkbox

This has the advantage of making clear that no option is currently enabled (especially if they're greyed out) and enabling the checkbox then enables the radio buttons.

The problem here is that a radio button "must" be checked (traditionally). I've been struggling to find a precedence where no radio button is already selected but haven't found one.

If an unselected radio button is an option, there's no need for the checkbox.

3. Dropdown/pop-up box

A drop-down menu will allow for a "null" option but, given that there are only three options (including null), it seems like overkill.

It's also important to note that, once they choose either option, they cannot go back and choose the null choice.

Even as I write this, I'm leaning toward the "radio buttons with none selected but once one is chosen, they just toggle like normal radio buttons."

I guess the questions are:

  1. Is there a better way?
  2. How much of a sin is an unselected radio button?
Improve this question
4
  • I think to summarize the answers, you have to know a rule to know when to break the rule (or when it is sensible to make an assumption that it is okay to break the rule), but then you need to test and see if it is indeed a suitable use case to break the rule (otherwise it is just another unvalidated assumption that may or may not cause issues later on). So I don't think you'll know until you pick a sensible starting point and just try it out.
    – Michael Lai ♦
    May 3, 2017 at 3:08
  • I am not quite sure what you mean by "we can't choose it for them". If you have site statistics, they might tell you the preferred option. Or do you mean you looked at site statistics and they say both options are used 50%? If there is a solid preference in this data, I'd recommend selecting the more frequent option. (If it's an even split, I'd recommend the unselected radio buttons... but I would try hard to avoid that and any other solution :-)
    – virtualnobi
    May 3, 2017 at 6:15
  • All radio buttons placed inside a groupbox will be unchecked by default.
    – gavatom
    Jan 6, 2021 at 23:11
  • Is there any reason you can't leave unselected radios and just present an error message if the user tries to proceed without providing a response?
    – Aaron
    Jan 8, 2021 at 6:56

6 Answers 6

Reset to default
25

Don't make checkboxes behave like radio buttons and don't make radio buttons behave like checkboxes.

It is perfectly acceptable for the radio group to have no default selection in some situations. For example, Microsoft's guidelines for radio buttons give the following examples:

Don't have a default selection if:

  • There is no acceptable default option for safety, security, or legal reasons and therefore the user must make an explicit choice. If the user doesn't make a selection, display an error message to force one.
  • The user interface (UI) must reflect the current state and the option hasn't been set yet. A default value would incorrectly imply that the user doesn't need to make a selection.
  • The goal is to collect unbiased data. Default values would bias data collection.
  • The group of radio buttons represents a property in a mixed state, which happens when displaying a property for multiple objects that don't have the same setting. Don't display an error message in this case since each object has a valid state.
Improve this answer
2
  • 1
    I've seen un-defaulted radio buttons work well. My one (minor) reservation in some cases -- as Adria Perez Pia says -- is the option of returning to a "clean" state. One option, that possibly makes radio buttons too much like check-boxes for some people, is have clicking a selected radio button un-select it, so all are cleared (as at the start). Another might be to have a "Clear/reset" button/action, possibly in the bottom-right of the group of buttons.
    – TripeHound
    Jun 14, 2016 at 14:37
  • And why shouldn't radio button behave like checkboxes?
    – Florian F
    Sep 28, 2021 at 6:45
5

About the default non-selected radio button - whether it is a good or bad idea - I think it depends on whether you want to give the user the option (or not) to go back to the original state.

If you want the user to be able to undo his/her action, then the radio button is a bad idea because there is no way to uncheck, otherwise it is a perfect way to control that the user shouldn't undo his/her selection.

Improve this answer
3
  • Depending on the use case and other fields, there can be a "Reset" button for the entire form.
    – virtualnobi
    May 3, 2017 at 6:06
  • All good points. This is a billing system and, unless one or the other is chosen, the whole thing won’t work. In other words, while we can’t choose a default option for them, they definitely need to choose one or the other and they are free to configure the other option if needed. There is no scenario where nothing checked is a good idea so giving them the option of neither selected isn’t useful/valid/wanted.
    – Daniel Brown
    Oct 2, 2020 at 17:56
  • The solution to "unselect" is simple. Clicking the selected button again unselects it. You usually can hack the control to behave like this. This is both intuitive and non-intrusive. I have no idea why this is not a standard behaviour when "none selected" is meaningful.
    – Florian F
    Sep 28, 2021 at 6:32
4

Your answer is two ( or three ) radio buttons. In your example, I would leave them unselected. I assume you are requiring them to choose one, so in this case, it's PERFECTLY acceptable to leave it unselected.

( ) Bill on the last day of the previous month

( ) Bill on the last day of the next month

If you want them to be able to deselect it simply add another radio button:

( ) Bill on the last day of the previous month

( ) Bill on the last day of the next month

(•) I'll choose later / I have a Prepaid Account / Don't bill me :) / etc.

Improve this answer
1
  • Ooh, I like this approach too! It could be the first option and read something like “I don’t want to have revenue flowing in right now” to make clear they need to choose one or the other.
    – Daniel Brown
    Oct 2, 2020 at 17:57
1

You could use a segmented button / radio buttons to hide the radio icons a bit more. TaxFix makes great use of this:

For simple questions that function like radio buttons (only one answer can be chosen) → This could work well for your problem, as the default state doesn't give the impression of a bullet list: enter image description here

For more lengthy questions that function like checkboxes (multiple answers can be chosen):

enter image description here

Improve this answer
1
  • segmented button might not be a good option since it is often used to switch between views of some data, not 2 options.
    – harshikerfuffle
    Jan 7, 2021 at 15:46
0

Daniel. I'm working on my first html/javascript/css/nodejs/SQL project, so I don't know that I can help. I have a similar problem where the user must choose what SQL table to update, so a "default" would not be appropriate, but one must be chosen. I go by the advice of tutorials that recommend always having a label to go with each radio input, and I make the input Display:none;.

My answer to your problem is then to make an extra radio button, non-display, with no label, and being the default "checked" option. Users can't see it and can't check it. They can't return to the original state, but if you're sure they must provide a choice to continue, they can always cancel the whole thing.

BTW, if you do use labels, be sure to consider the css selection option "input:checked + label", which can highlight a choice to stay visibly chosen.

Improve this answer
1
  • What happens if the user proceeds with the default selection?
    – Nash
    Jun 9, 2021 at 6:56
-1

Most modern sites nowadays uses option as checkboxes or toggle-able selects. Conventions are conventions and are bound to be overridden in the next upgrade, so to speak. The first scenario you mention and you don't like sounds like PERFECT. I mean, you're working with enabled/disabled selections, one option disables the other, the message is clear and sounding, there's no confusion at all.

On the other side, unselected radio buttons are visually connected to bulleted lists. There's a reason why you didn't find anything about that: because it's not recommended. I gotta admit Matt Obee's is really interesting and quite an argument, but I can't totally agree, despite some valid points. See http://www.nngroup.com/articles/radio-buttons-default-selection/ for a counter argument.

Now, I'm sure you have seen hundreds or probably thousands of sites using toggle-able selects or fake checkboxes which in fact are just options. And I'm sure you'll recognize the biggest sites (as well as frameworks) in the world use that approach, including those leading UX development. Now, let me ask you: how many times did you see non-selected radio buttons? Am I wrong if I say you could use one hand to count those times?

There you have your research: consider Google, Apple, Zurb, Bootstrap, WordPress, Foundation, Android (and the list goes on and on) vs the couple sites using the "non selected" approach.

In the end, it's your decision and it should be based on research and testing, but as a a default, I'd always go for "bar none" options: If you find a solution where there's no doubt at all for the user... I'll choose to stick to it 100% of times. Bar none.

Remember: you won't get a badge for sticking to theory, you'll get a badge for improving usability

Improve this answer
8
  • 5
    The first paragraph sounds like treating checkboxes like radio buttons no big thing. That's not good advice. Theory is theory because it has demonstrated evidence for improving usability.
    – Nicholas Pappas
    Apr 10, 2015 at 17:08
  • Do you REALLY think all the big names in todays web development are wrong and didn't test behaviors enough to know what they're doing? Because I do UX testing for one of those companies, and unless they are fooling me, the level of testing and research is really intensive. btw, up to not so far ago, theory dictated that the Earth was flat, X-rays were harmless and computers had to be giant machines. Like I said, your theory will be overridden in a next upgrade. And that is something that has been tested thoroughly since mankind exists
    – Devin
    Apr 10, 2015 at 17:22
  • or in other words: testing and empirical evidence >>>>>>>>>>>>>>> theory
    – Devin
    Apr 10, 2015 at 17:23
  • 3
    Your comments further confuse me. Good UX is not using checkboxes as radio buttons - "big names" know that. Also, none of your examples of "theory" were ever theory and show a lack of understanding of what a true scientificly valid theory is.
    – Nicholas Pappas
    Apr 10, 2015 at 17:29
  • ok, you're right, what can I say...
    – Devin
    Apr 10, 2015 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.