101

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.

  • 79
    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". – undefined Mar 1 at 10:57
  • 51
    "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? – Karl Nicoll Mar 1 at 12:01
  • 9
    @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". – VLAZ Mar 1 at 13:11
  • 37
    @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. – hsan Mar 1 at 14:01
  • 6
    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) – eckes Mar 2 at 0:48

13 Answers 13

232

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.

  • 40
    @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. – R.M. Mar 1 at 16:22
  • 2
    @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. – miroxlav Mar 3 at 9:06
  • 35
    [ ] Male (leave unchecked if female) – John Dvorak Mar 3 at 18:50
  • 21
    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. – IMSoP Mar 4 at 13:41
  • 4
    @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. – IMSoP Mar 5 at 9:40
81
+100

There is no single proper answer but the control depends on the context.

Checkbox is suitable to minimize clutter but its use is limited for cases where described choice has also clear opposite meaning (without need of mentioning it) :

[X] include subdirectories

Radio buttons are suitable when making something more explicit or if choices need separate descriptions:

Overwrite files when copying (cannot be undone):

(•) Yes, overwrite   ( ) No

Radio buttons are also the best control to initiate with no choice made.

Dropdown menu (still with 2 choices) is suitable for choice which users should not typically change etc. Other choices are not seen and the change needs 2 clicks:

Format drive for the following file system:   exFAT32 ▼

(after opening, the other choice is NTFS).

Of course, these are not the only criteria. If you already have a prevailing cluster of similar controls, you add another one to match them. Or sometimes it is layout which rules the primary control type to use, for example some options look more gettable if they are aligned in table. And sometimes you need to add multi-line labels or icons to the choices, what implies the control to use.

So the choice is on you, the goal is make the UI streamlined, but making important choices explicit and some others stand out of user's way.

  • 2
    I believe that, on your 3rd example, the choices would be FAT32, NTFS or exFAT. – Ismael Miguel Mar 5 at 18:41
  • 2
    @IsmaelMiguel – I know. Kindly please understand it was for illustration purposes only and it is not connected to any specific application which might offer between 2 and 15 options there. :) – miroxlav Mar 9 at 10:04
22

I would use the checkbox, because:

  • it is visually concise (vs. radioboxes taking more screen space)
  • it is the bare minimum necessary to get the job done
  • it is a classic UI widget and people are familiar with it (though this applies to radio boxes too)
  • a paper version of the form can look the same (though some paper surveys use radioboxes)

Radioboxes would be a better choice if you had more than 2 states. For example, in a survey you might need {yes, no, I don't know, prefer not to say} in order to differentiate between the nuances of any option other than yes.

It would help if you asked the previous generation of people who made this interface about the rationale behind the use of radioboxes. Maybe there is a good reason for that, but it has not been documented.

  • 3
    What if the choice is binary but the answers aren't as simple as answer and not answer thus you really want to have two answers. Assuming there are only two answers to "do you like cats or dogs", then using a checkbox, what would you ask "[ ]Do you like cats" or "[ ] Do you like dogs"? – VLAZ Mar 1 at 13:08
  • 5
    Your example is different from what the OP described. Checkboxes would be inappropriate in your hypothetical scenario. Radioboxes would be OK if you're sure there are only 2 options to choose from; when there are more - dropdown lists might be a better choice. – ralien Mar 1 at 13:26
  • 7
    "a paper version of the form would look the same" - disagree. I have come across plenty of paper forms that had me put an X either at "yes" or at "no". – O. R. Mapper Mar 1 at 18:36
14

If you really need to cover all the use cases:

  • Checkmark won't work because it can only cover two cases.
  • Radio buttons should cover it, but you are missing the third option. Something in the line of "I would rather not say." Because the current setup would break if you accidentally selected something (but by the look of it you probably support unchecking the radio button?) which I don't think is a good practice.

You can read this interesting article on radio buttons by Norman Group if you need some more insight.

  • 2
    I 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" – wscourge Mar 1 at 8:58
  • 2
    @Kevin It depends. If it is something that isn't very important or most people would leave unchecked because it doesn't apply to them then checkboxes make sense, but if it is very important the user thinks about the choice or if people are about 50% as likely to choose either than radio buttons are fine. – Captain Man Mar 1 at 14:51
  • 12
    @Kevin: "Why have an invalid default state?" To ensure that the user actually makes a choice rather than skipping the question and thereby providing bad/wrong data. – R.. Mar 1 at 18:05
  • 3
    @Kevin: I think you misread or something. Validation does nothing to tell you whether a user chose to keep the default you preselected for them or just skipped it. – R.. Mar 3 at 14:31
  • 1
    @Kevin "Not filled yet" may not be a valid state for your database, but it's a perfectly valid state for a form. Imagine a textbox for a first name. Empty names are invalid in your database. But empty textbox on a form is valid and it means "not filled yet". What else would you do, fill the textbox with a default value like "John"? That would be silly. – user31389 Mar 8 at 15:26
6

The checkbox is used to select or affirm a choice. The question "Do you have...?" is not offering a choice so a checkbox does not apply to the question. It even appears to select the question alone.

So a choice must be offered--yes or no. Then use the checkbox for choice selection.

  • 1
    However, if the label were "I have whatever." then the checkbox is completely appropriate. – Chris Cudmore Mar 1 at 14:50
4

For your particular case it sounds like you need to add a third "N/A" option that is selected by default.

With regard to use of checkboxes vs. yes/no radios, I think checkboxes work better for situations where fields tend to remain "as they were" when the user first entered the form.

For example:

sample of multiple check boxes grouped together

With proper grouping by the UX designer, this allows users to quickly skip over areas of the form that are not relevant.

The radio button, in the way you show it being used, emphasizes that a choice is required, better than a checkbox that could be left blank would.

4

@hsan 's comment on the question is important: if you need to be sure that the user has truly intended 'No' as their answer, you need them to actively make a selection, so the form is not submittable until they have made it.

For this, a select control with an disabled first option of 'please select' works well: https://codepen.io/anon/pen/LaZzzP

<label for="mandatory-yes-no">Do you need the thing?</label>
<select id="mandatory-yes-no">
  <option disabled selected> Please select</option>
  <option> Yes </option>
  <option> No </option>
</select>

By making the default state a valid 'choice', you risk the user just overlooking or not considering it. Whether that risk is acceptable or desirable depends on the situation.

  • 2
    Note that this takes more time than what OP already proposed with radio buttons. If the options are hidden, the user needs to read the text, click on the menu to open it, read the answer options, and click again to select the right answer. If the radio buttons are visible like in OP's first screenshot, the user only needs to read once and can immediately click the right button. This pattern would annoy me. – Luc Mar 4 at 12:23
  • I think it depends - yes, it takes more time, possibly more interactions (you can make a selection from a select with a single mouse click, or two key presses, but that's not the only metric to consider. I like them in some cases because it visually simplifies the form. – Beejamin Mar 4 at 21:58
3

As many other answers have said, it depends on the context

I would like to add though that it depends on not just the question you're asking but also how much you want the user to think about the question and their response. A radio box requires some action to move on while a checkbox can be skimmed over.

As DenR89 says, you can never be sure if a checkbox has been answered negatively or ignored. Sometimes this is ok. Sometimes you need to be certain that the user has understood the question and provided an honest response. For example, on a car insurance application, you might use a radio box for:

Do you own the car?
( ) Yes ( ) No

As there might be legal implications for assuming this incorrectly. However, you might use a checkbox in the same form for:

[ ] Include breakdown cover

Where the default (no breakdown cover) is correct for most people and it won't affect the validity of an insurance policy if this is missed.

Very big forms

People get bored/frustrated with very big forms. For these cases, I would suggest radio buttons as it forces people to read the question and make a choice, preventing laziness from letting people skim over checkboxes.

This only really applies while we're talking about a yes/no/null radio box vs a single checkbox. If the radio box is initially in a "no" state, it is essentially the same as a checkbox. If you can replace the several questions with:

Do you have:
[ ] Thing 1
[ ] Thing 2
[ ] Thing 3
...

Then this is a completely different question.

  • I'm not sure I agree with your last point. In very big forms, replacing two radio buttons with one checkbox will help in reducing the amount of info the user has to take in. Also, if the form is so large that the user tends to skim questions, that is probably the designer's fault rather than the user's! – Mr Lister Mar 7 at 7:19
2

IMHO

Radio buttons

  1. User should only be able to select one single option

    (o)Duck ( )Goose ( )Avenging Condor of Death

  2. NO answer is not an Answer. Once you select (click on a radio button) one of the 3 options in the previous example, you can only change your selection, not unselect.

Checkboxes

  1. User can select multiple options

Toppings: [ ] Swiss Cheese [x] Strange Cheese [ ] Mystery Meat [x] Soylent Green

  1. NO answer is a valid answer. i.e. in the previous example you can decide you want no toppings.
2

Neither one is correct.

Radios and checkboxes are both designed for lists. Therefore they would be used in a case like this where there are multiple adjective (numbers/quantities) or noun (object 1, 2, 3) options asked (at least two items).

Which of the following do you have?
- Whatever 1
- Whatever 2
- Whatever 3

The difference is that radios limit your selection to just one option while checklists allow you to select multiple options (ie. what's your favorite color? (radio) vs. what color(s) do you like? (checklist)).

What you are trying to accomplish requires neither radios nor checkboxes as it is not a list but rather a this or that statement. This instead requires buttons. This is commonly seen on software following questions like "Are you sure you want to delete this?" or "Do you want to install this software?"

enter image description here

Since this is a web form, chances are it's using HTML Radio Buttons. I would edit the code like this to hide the radio circles as you are only showing the options yes or no.

-1

I will also go with the first option (yes/no radio). But here is the most important thing to understand. And that is, why to go with the first option:

You are bounding user with the choice. User's self-esteem is playing a crucial role; in sub-conscious, he is the decision maker in the first case. So "most of the people" will choose the first option only.

But in some cases, like terms and conditions, the checkbox is the better option as you don't want the user to bother clicking or not clicking. (already checked!)

Some of the information contained in this post requires additional references. Please edit to add citations to reliable sources that support the assertions made here. Unsourced material may be disputed or deleted.

  • 1
    "So "most of the people" will choose the first option only." Is this true? Do you have a citation for this? It seems unlikely. – JonW Mar 6 at 16:31
  • Why so angry? I am picking up the problem from a different angle. It's more like an observation than a fact. Is that "wrong"? – Kabir Mar 7 at 18:10
-1

I prefer the material design convention for selection controls (radios, checkboxes, switches) as it makes things immediately intuitive for the user:

  • Radio buttons to select a single option from a list

  • Checkboxes to select one or multiple options from a list

  • Switches to toggle a binary option (on/off, yes/no)

In your case, I would go with switches.

  • 3
    Hi, but material design suggests switches mainly for settings which have immediate effect, I quote from the Behavior section: When a user toggles a switch, its corresponding action takes effect immediately. They do not seem to be preferred control for entering yes/no data. – miroxlav Mar 4 at 23:57
-4

For yes/no questions I preffer checkboxes:

The answer

The last one is my preference because is the cleanest and easier for the user to understand.

@Wscourge indicated that he is not interested on the "null" option. In this case, radio buttons and a single checkbox are acceptable. But without a "null" option there is no way to know when the user pressed save without reading the form. I believe the human interfaces should call the attention of the user in such a case. Therefore the form should support the null selection even when the field is required.

References:

  • 7
    This is a misuse of checkboxes and would violate most HIGs. – jamesdlin Mar 2 at 17:30
  • 4
    What does "[×] yes - [×] no" even mean as a reply? And why would a user need to uncheck the box if the reply is mandatory? If you want the user to be able to skip a question, and want an explicit "no", just use "(•) yes - (•) no - (•) n/a". – CJStuart Mar 3 at 16:05
  • 2
    What about using "Unspecified" instead of "N/A"? Such an answer may not always be the most useful, but it's never "wrong". – supercat Mar 4 at 21:22
  • 1
    The last one is what I would do. Selecting Yes deselects No, selecting No deselects Yes, or you can deselect both. – Clonkex Mar 5 at 3:41
  • The way I interpret Apple's HIG is that mixed-state checkboxes should be preferred over mixed-state radio buttons, not that checkboxes in general should be preferred over (mixed-state) radio buttons. – jamesdlin Mar 11 at 15:45

protected by JonW Mar 6 at 16:34

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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