What is better: yes / no radio, or simple checkbox?

  • In a very big form on my company's website, there's this tendency to use Yes / No radio buttons combination.

    enter image description here

    I can think of one argument of not using it, but it is not UX related: we need to maintain three states instead of just two: null, true and false for those fields.

    Is there any argument, UX-wise, to use the checkbox instead?

    enter image description here

    Edit: We do not need to cover all 3 cases, the null case is just the initial state and it is impossible to go further in the form without selecting either "Yes" or "No", hence the maintenance difficulty mention.

    In case you are going to use the checkbox remember to change the text accordingly. "Do you have whatever?" in a checkbox makes no sense, IMO. The text should be "I have whatever".

    *"We do not need to cover all 3 cases, the null case is just the initial state and it is impossible to go further in the form without selecting either "Yes" or "No", hence the maintenance difficulty mention."* -- If you use a checkbox, users will be allowed to skip the question by keeping the box unticked. Is that a desirable behavior, or do you need the user to provide an answer?

    @KarlNicoll you *cannot* skip a question using checkboxes. Unless your only two choices are "opt-in" or "skip" in some fashion. With a question of "Do you have whatever?", not ticking the box would be an implicit "No, I do not have it" and wouldn't mean "I skip this question".

    Have you thought about switch/sliders, they look better then the checkbox

    @VLAZ The question can be "skipped" in the sense that the user has not provided an answer. If you give inputs a default value you have to accept that for every answer that is the same as the default value you don't know whether the user has chosen that answer or overlooked / forgotten to put something.

    Using a question style label and a checkbox is not a good idea. (I know it’s only a sample phrase but after all it’s a nitpicking question to start with)

    You can also use a single switch control for that purpose.

    Although an unchecked check-box must be interpreted and counted as "No"; the user may have left it open because he 1) missed it, 2) skipped it or 3) refused to answer it.

    You might want a 3 state button: codepen.io/HerrSerker/pen/LaxZoN

    @Karl Nicoll has it right. When you use a checkbox, you don't force the user to make a decision.

  • denR89

    denR89 Correct answer

    2 years ago

    Depends on whether the question is mandatory. You need radio buttons if you want to be sure that a user answered the question, as with an empty checkbox you'll never know whether a user just forgot this question.

    +1 My first thought as well, but in cases where the field is not mandatory I would prefer the checkbox-version for the reasons outlined by ralien

    @Bananenaffe Even if the question is not mandatory, it depends on how you want to treat the negative. With a single check box, you combine the "I have answered the question, and the answer is no" response with the "I have not answered this question" response into a single observable (no check in the box). While that may be fine in some cases, in others you do want to be able to separate out an active "no" from a passive "no answer", especially if the question is not mandatory.

    Thanks for your answer, it makes perfect sense.

    @wscourge – Note: While the answer may solve the problem in your specific website, it should not be applied as an universal principle for all future work. There is more than the above single factor to consider when deciding between check boxes and radio buttons even in case of simple yes/no answers.

    `[ ] Male (leave unchecked if female)`

    Windows supports 3-state checkboxes so you can support yes/no/not set with a checkbox.

    I'd like to make a suggestion here that if your initial state is neither yes nor no, then *the radio button should have three visible states*, e.g. `Not answered yet (•) Yes ( ) No ( )`. With only two options, the user may click "yes", then think "ooh, actually I'm not sure", and there's no way for them to restore the "neither option is selected" state; so the validation of "user has positively affirmed this choice" is lost.

    @JohnDvorak. You nailed it. As I read this, it seems apparent that OP's problem also includes **how the question is written**. Both question examples in OP are quite badly designed, and rephrasing would do a world of good.

    @IMSoP The original HTML specifications said a radio group MUST have one option selected. So your solution is valid, the OP's question starts in an invalid state.

    @IMSoP For that exact reason I always use checkboxes that force-deselect the other checkbox when I need a multiple-choice but optional question. So selecting Yes will deselect No, selecting No will deselect Yes, and you can manually deselect both.

    @Clonkex I'm not a fan of that either, because it's non-standard, and therefore surprising to users; and it relies on fragile scripts to capture the user's interaction with the control. A group of radio buttons is trivial to implement, supported everywhere, and users will know at a glance how it's going to behave.

    Note that it might make sense to use a radio button to help enforce that an answer was interactively provided. However, after that selection is saved, on a later screen it might make sense to condense this to a checkbox (where the default is, naturally, whatever was selected at a previous time).

    If the answer is not mandatory, but the datum is Boolean, it can still be handled with a binary radio button, which is pre-selected by default to one of the two values. So then the question is: that or a checkbox.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM