33

This question started out on the Pro Webmasters SE. See: https://webmasters.stackexchange.com/q/8578/1847

I am a web developer. My designer gave me a mock-up of a web form. In it, there are several long winded yes or no questions. Some of which include background information. Here is an example of how it was mocked up:

Some long winded yes or no question?   ◉ Yes   ○ No

As a web developer my intuition tells me that the right way to do a "yes or no" question is with a checkbox and turn the "question" into a statement:

The positive answer to the long winded question ☒

I'm not asking you to tell me how to mark either way up in HTML. I'm interested in if there are "industry" best practices on how yes or no questions should be displayed. Please share any original research, or references to best practices on this matter if you know of any. I have thus far been unable to locate any papers or resources through the usual channels. (read "Google")

UPDATE: I'd like to clarify that this is not an opt-in/out. This is an answer to a question which is completely unrelated to any marketing effort.

14 Answers 14

45

I'd go for the radio buttons. The checkbox is too easily ignored, so a lot of people might answer "no" when they really meant "what, I have to read through all this?"

But instead of just offering "Yes" and "No", use longer labels, e.g.

( ) Yes, I want to become a member of the eat-all-you-can-club right now.

( ) No, I don't want to become a member.

6
  • 9
    One advantage of this method is that you can make the question shorter, make the short answer obvious ("yes" and "no" at the beginning, maybe in bold), and then provide the clarification in the answer. This means the user is more likely to read the question.
    – ICR
    Feb 3, 2011 at 11:36
  • 1
    I like this and with ICR's suggestion this is possibly the most accessible method not to mention it's superior usability IMHO.
    – sholsinger
    Feb 3, 2011 at 14:51
  • 2
    Agreed. I was the web developer for Techinsurance.com for 6 years, and one thing I got to know really well is how questions should be presented to the user. Checkboxes absolutely will get ignored. Yes/No radio buttons are preferred. And expanding on the Yes/No answers like in your example can make good sense, depending on the question. Feb 3, 2011 at 16:57
  • 2
    Alternative sentences often lead to narrow explanations. Simple example: Do you like your coffee with sugar: () Yes, I like it sweet/ () No, I dont't like it sweet. While the person to answer likes it sweet, but would say No though, because of health reasons, for example. Feb 8, 2011 at 9:31
  • I would like to add, that the Microsoft Windows 7 UX Guide has a lot of information on this type of design under the sections on CheckBox and RadioButton controls. msdn.microsoft.com/en-us/library/aa511452.aspx
    – jpierson
    Feb 9, 2011 at 6:24
27

I like the approach of Paint.Net. Instead of presenting a dialog box like

"If you cancel this process all your data will be lost. Really cancel? [Yes] [No] [Cancel]"

it does this:

Cancel this process?

[Cancel without saving] The process will be canceled and all your data will be lost.
[Cancel and save] The process will be canceled but your data will be saved.
[Resume] This will resume the process. No data will be lost.

If I can find a screenshot I will post it.

Here it is:

enter image description here

I use this for binary decisions as well a multiple options.

4
  • 1
    This is my preferred method if the question is "which action should I take".
    – ICR
    Feb 3, 2011 at 11:34
  • 1
    This is the way that's required by the HIG on Mac OS. Definitely one of the conventions Windows and Linux should copy. eg
    – MJeffryes
    Feb 3, 2011 at 20:55
  • 2
    Windows introduced TaskDialog in Vista to do this Feb 3, 2011 at 21:57
  • 2
    @Konrad Same here. The "I just clicked OK to make the window disappear" rate went way down. Feb 4, 2011 at 6:11
10

Just raising a point none of the other questions addressed - Because they are smaller and less obtrusive, checkboxes are much more appropriate for when you have several yes-no questions.

[ ] Yes, I want to sign up for your newsletter.
[ ] Yes, I want to sign up for all your associate's newsletters.
[ ] Yes, I want my email to be sent to spammers for $1 per million.
[ ] I would like to be contacted regarding great price savings in the future.

A single checkbox, on the other hand, is not easily identified as a clickable control at first glance. So the number of yes-no questions you're asking is important.

2
  • Wouldn't this be confusing for the layman? When I check a "later" checkbox (say "associate's newsletters") does it automatically cover the former ("your newsletter")? You probably gave this as an example, but there are some pages out there doing something very similar, and are very confusing (for me).
    – Nivas
    Feb 4, 2011 at 5:19
  • 1
    Checkbxes are for multiple-out-of-multiple options, radio buttons are for one-of-of-multiple options. So which you use depends on how many choices the user can make, not the number of options. Feb 4, 2011 at 6:09
4

When using a checkbox for a Yes/No question you're also forcing a default answer. Unchecked defaulting to 'no', for example. Radio buttons force the user to explicitly select an answer if the field is mandatory; or if the field is optional allow the user to not answer at all.

6
  • See my comment on ICR's answer. Feb 3, 2011 at 20:31
  • Fair point, but I don't think any user agents implement this by auto checking the first radio in the group. I also notice its not in the current HTML5 spec. It seems quite logical to me that if I want the user to explicitly provide a YES/NO answer to use this approach, as is often required for legal reasons. How else would you do it? Feb 3, 2011 at 20:45
  • Dropdown with a "please select" option selected. Or have them literally type something in a text box to confirm their choice, since legally, selecting a radio button (or checking a checkbox) typically isn't valid anyways. Feb 3, 2011 at 21:37
  • Well, an unchecked group of radios for an answer with two possible fixed values seems more elegant to me than a dropdown list. Feb 4, 2011 at 11:13
  • If you think invalid HTML is elegant, then sure. And like I said, your caveat ("required for legal reasons") isn't really going to apply because that isn't really legally binding. Also, see Guideline #9 from Jakob Nielsen here - useit.com/alertbox/20040927.html He advocates the same thing - radio buttons should always have a default selection. Feb 4, 2011 at 20:55
3

In most situations I would say you would want to use a checkbox, but there are some situations where radio buttons are better.

With a checkbox, you must always provide a default answer - checked or not checked. This might affect the users answer (companies use this to sign people up to newsletters that they wouldn't otherwise opt-in to)

There are also some situations when a question doesn't translate well into a statement without altering how the person would answer the question. The most common example of this is when asking for an opinion:

Do you think x? ( ) Yes (o) No

vs.

I think x: [ ]
1
  • 3
    Technically, at least in HTML land, you must always provide a default answer for radio buttons as well. The spec requires it. Admittedly, many people ignore that requirement, but it is there. Also, from a logical user experience standpoint, a set of radio buttons should always have SOMETHING selected. Feb 3, 2011 at 18:49
3

The others above have touched on the good alternative, which is to provide full and well-descriptive labels. In this case, radio buttons are an obvious choice.

However, when the question set is long, or when they really do require little thought, my selection policy between a checkbox and radio button is as follows:

  1. Is "yes" the only important answer?

If the answer is yes, then a checkbox suits best. If the answer is no, then, as above, a radio set works best.

The reason for this is that with the default state of a checkbox, you only need to make a decision about whether or not to answer yes. With a radio set, you have to consciously choose one (or swap from no, if it is selected).

3

Survey research and market research folks have studied this exact question for years.

The short answer is that the yes/no version is preferable. You will get better, more complete, responses with this version of the question.

For those interested in more, I'll refer you the article titled "Comparing Check-all And Forced-choice Question Formats In Web Surveys" from Public Opinion Quarterly, Volume 70, No. 1, Spring 2006, pp. 66 - 77. This link may or may not work for you: http://cofc.academia.edu/MikeStern/Papers/72390/Comparing_check-all_and_forced-choice..

1
  • Thank you very much for sharing the paper. I was able to view it. It does require flash, though.
    – sholsinger
    Feb 6, 2011 at 15:58
2

@ammoQ's answer is great, but I wanted to include my main reason for using radios over checkboxes. Those long-winded descriptions that end up next to checkboxes are VERY difficult to write in a clear manner that people are going to understand explicitly. Too often I hear someone saying "wait, does checking this mean that I WANT [X] or that I DON'T WANT [X]. Radio buttons with good answer text make this much more clear.

Of course, of you want the question to be intentionally vague (like most marketing people seem to want with their "opt-in/opt-out" questions, then a checkbox is the way to go :)

1
  • I think it's important that you're pointing out that in each of the proposed solutions the copy must be different. Clarity is very important. I think we've all been in that "Does this mean I do or don't?" situation. The copy must cater to the presentation of the decision.
    – sholsinger
    Feb 3, 2011 at 19:41
2

To back up what the others said, the important point here is to avoid the use of UI widgets simply labeled "Yes" and "No". A button should always say what it is going to do rather than more simply answering a question.

3
  • 2
    Radio buttons labeled yes/no are definitely appropriate. You're asking a question and have two options. Feb 3, 2011 at 20:30
  • To be clear, I am talking about single-selection multiple-answer form inputs. Not really a "button" but hey, that's what it is called. Are you suggesting I label my radio buttons, "Set the value of foo to 1"?
    – sholsinger
    Feb 4, 2011 at 20:48
  • Well, yeah. But what's the case where you're using radio buttons for something involving numeric values? You're getting edge-casey in a hurry here.
    – Jim Puls
    Feb 8, 2011 at 23:36
1

If you are doin e.g. a political survey / enquete its important to present options balanced , I.e. not loaded . For this reason you should never ask a positive loaded question. The importance of this is well established in psychology and political science. If that is what you plan to do I will later find some ref. For you. Right now I am on a cafe and in a bit of hurry.

1
  • Please do share the research if you can.
    – sholsinger
    Feb 4, 2011 at 14:03
1

Sholsinger,

+1 for Great question.

Answer of this question may lie in the marketing psychology. With your web form do you want to push the user psychologically towards selecting "Yes" then just show Checkbox with "Yes" word.

i.e. [] Yes I want to sign up for this new letter.

If by design your page has to give neutral message then you should provide "Yes" or "No" radio button.

i.e. Are you a US citizen ? Yes() No()

Other then this I do not see any difference. Both actions are simple enough for your to determine what they want to do.

If you visit any e-commerce website where you can customize your product like Laptop or Car, you will see this pattern.

[] Yes upgrade the memory to 1 GB [] Yes I want to get Dell's best awarded customer service for 3 years

vs

Have you ever committed felony ? Yes() No()

Thanks Ved

1

I know this is an old question but I came across it researching a "toggle" UI element (a la iPhone -- which led to helpful stuff nearby...) and, in regards to the OP's request for "references to best practices", I wanted to drop this in the mix: Checkboxes vs. Radio Buttons

0

Checkbox please.

My phone uses radio buttons in selection lists. This is not too bad if there are more than two items in the list, because you can then tell which graphic presentation is the "on" state and which is the "off" state. But, as soon as you have only two items in the list, I can never tell which one is on and which one is off. (And I sure as heck cannot remember the graphic representations the phone uses for each state, I don't go into the configuration often enough for that).

Update: This is not just a matter of graphical presentation. A choice between two options should in my opinion never be presented as radio buttons, but always as checkboxes. And doing so ensures that (bad choices in) graphical representation of radio buttons never pose an interpretation problem.

7
  • That's rather a problem of the graphical representation of the radio buttons on your phone.
    – ammoQ
    Feb 3, 2011 at 7:48
  • @ammoQ: That may be, but I think a selection out of two should never be represented by radio buttons, but always with checkboxes. And then (bad choices in) graphical representation will never come into play... Feb 3, 2011 at 9:26
  • 3
    I would like my background to be: ( ) red ( ) blue as opposed to: [ ] I would like my background to be red, instead of blue.
    – zaratustra
    Feb 3, 2011 at 20:21
  • @zaratustra: Most two option examples I can come up with that aren't deliberately limited to two choices to make a point, are yes/no choices. A more realistic example would have been red/blue/green/yellow blackground (not limiting the colors two a mere two) versus the choice between black and white or color. And the latter can be asked as: do you want to use color or not. Feb 3, 2011 at 21:07
  • But I get the picture. Most of you prefer radio buttons. The reasons given in the other answers make a compelling case. And they do so much better than the comments on my answer, but maybe that is due to the nature of comments versus answers. Feb 3, 2011 at 21:17
0

I think it is because of your wording that most suggest Radio Buttons.

You're asking "How Yes or No Questions Should be Represented in Forms" which implies it is about making a descision between two possible XOR-answers. In that case, checkboxes are inappropriate.

If one reads your question as either:

How to indicate something that one may opt in (one single option)

or

How to indicate something that one may opt out (one single option)

The result would possibly be quite different. Note that the question implies how many options are given.

So, all you need to is to just decide based on your given context which question of the above fits best.

Your Answer

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

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