18

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?
  • 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 '17 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 '17 at 6:15
17

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.
  • 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 '16 at 14:37
3

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.

  • Depending on the use case and other fields, there can be a "Reset" button for the entire form. – virtualnobi May 3 '17 at 6:06
2

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.

-2

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

  • 3
    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. – Evil Closet Monkey Apr 10 '15 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 '15 at 17:22
  • or in other words: testing and empirical evidence >>>>>>>>>>>>>>> theory – Devin Apr 10 '15 at 17:23
  • 2
    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. – Evil Closet Monkey Apr 10 '15 at 17:29
  • ok, you're right, what can I say... – Devin Apr 10 '15 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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