6

I'm building a quiz-type web application in which the user must answer a series of multiple-choice questions. I need to decide whether to use radio buttons or checkboxes.

I'm familiar with the standard conventions for radio buttons and checkboxes:

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

However, in my particular application - the user may choose only one option, or make no choice at all (i.e., they may not choose more than one). In other words - it's perfectly OK for users to skip any question that she thinks isn't relevant.

A relevant detail - ALL the questions are visible at once on a single, scrolling page (i.e., there is not "Next" or "Skip" buttons. The user will scroll down, answering the questions that are relevant to her, and skipping those that are not.

So - I can think of three options:

  1. Use radio buttons, and include an extra choice for each question labelled "No choice", "Not relevant", or something like that.

  2. Use check boxes, and JavaScript to make sure that, if they choose a second check box, it deselects the first.

  3. Use radio buttons, and JavaScript to allow them to deselect a selection (e.g., by clicking it again. SurveyMonkey.com does this)

The big problem with option #1 is that it adds a lot of clutter and unnecessary cruft, and it makes the list less scannable (i.e., it's harder to see which questions you haven't answered). It also makes it seem like skipping the question altogether isn't OK, even though it is.

The big problem with option #2 is that it misleadingly suggests that you may choose more than one option.

The big problem with option #3 is that it involves a hidden behavior (e.g., clicking a selected radio button to deselect it).

This must be a fairly common requirement, so I'm wondering what the best practice is.

  • 1
    No-choice decision are non-trivial to design. Can you describe what the no choice means? For example, in a multiple choice question, no choice might mean skip, I don't know, none of the above, etc. Would a user ever make a choice and then switch to no-choice? – tohster Jul 25 '15 at 0:39
  • @tohster - Good question. So, in the app - the user only needs to answer those questions that are important to her. In other words - she can provide one answer to those questions that are relevant, and skip those that are not. So, it's possible that she may answer a question, and then decide that it isn't important after all. So, she should have the option to "unanswered" a question. I realize that I could have an additional answer choice of "Not relevant", but that seems like more UI cruft than necessary. – mattstuehler Jul 25 '15 at 3:05
  • Got it, thanks that's helpful. Two more queries: 1. What's the length of an average question (a couple words or a paragraph?) and 2. How many question appear on a page at a time? Eg one question per page then user hits next, or is this a scrolling website like survey monkey where lots of questions are on the page, with maybe 3 visible at any given time – tohster Jul 25 '15 at 5:41
  • 1
    @tohster - more good questions. In the app - each question is VERY short. And, all the questions are visible on a single, scrolling page. So, I envision that the user will quickly scroll through the page, answering the questions that are relevant, and skipping those that are not. The number of visible questions will obviously depend on screen size, but 3-4 is probably typical. – mattstuehler Jul 25 '15 at 17:07
6

Neither, sort of.

  • Classic radio buttons are intended for mandatory, single selections. I don't really like radio buttons because they are hard to click and it's not obvious (or consistent) that the labels can be clicked.
  • Classic checkboxes are intended for single on/off selections.
  • Button groups are sometimes used in situations where there is one or zero choices:

    button group

But in your case...

  • You have a lot of questions on a page, so the boundaries of a button group are difficult to deal with visually (clutter).
  • Classic radio buttons aren't a good option because users need to be able to unselect an answer. Adding a "no answer" choice likely creates unnecessary cognitive load.
  • Checkboxes can work, but it needs to be clear how they are related (i.e. clicking one deselects another.

An approach to this...

Is to use hybrids. Here are two examples of controls which are:

  • Large/easy to use .
  • Deliberately designed not to look too much like classic radio buttons or checkboxes so that the user is (a) more likely to understand she can click again to deselect an option; and (b) less likely to be surprised when clicking on one answer deselects another.
  • Grouped together (different font, indented) to provide some spatial grouping/islanding for the answer groups so that it's clear they are related.
  • Work pretty well in terms of calming a long page of questions.

two designs

I prefer the left one, because checkboxes convey the deselection affordance better. Keep in mind that the check symbol is often associated with positive affirmation, so it may create bias with questions.

  • 1
    Has anyone seen research to show that this radio-check hybrid is understood? Specifically, is the deselection affordance understood? Because the whole design hinges on that. – JeromeR Jul 26 '15 at 1:09
5

This sounds like you're trying for a "none of the above" option. A simple radio button option at the end of the list would do just fine. No need to make things complicated.

e.g.

Which of the following is an animal?

( ) Tree

( ) Car

( ) Radiowave

(o) None of the Above

  • I can see many situations in which this approach would be correct. However, in my case - the user only needs to answer those questions that are important to her. In other words - she can provide one answer to those questions that are relevant, and skip those that are not. So, it's possible that she may answer a question, and then decide that it isn't important after all. So, she should have the option to "unanswered" a question. I realize that I could have an additional answer choice of "Not relevant", but that seems like more UI cruft than necessary. – mattstuehler Jul 25 '15 at 3:07
  • @mattstuehler You may be giving greater importance to this idea—someone who answers and question and then wants to unanswer and skip it—than it is deserves. Why bother with this edge case? What is the downside of simply providing a Skip button or a None-of-the-above radio button, as others have suggested? What is the benefit of the more complicated solution you are seeking? – JeromeR Jul 25 '15 at 4:15
  • @JeromeR - you may be right. But here's my hesitation - all the questions are visible at once on a single, scrolling page (i.e., there is not "Next" or "Skip" buttons. The user will scroll down, answering the questions that are relevant to her, and skipping those that are not. Assuming I have 15 questions, and each question has 4 answers, adding an extra "Not relevant" option below each question adds 15 options (25% more choices) the user needs to process. – mattstuehler Jul 25 '15 at 17:14
  • Moreover, since the user is perfectly able to just skip a question (skipping is the same thing as clicking the "Not relevant" option) - all those choices are actually redundant. The only time to actually need that option is if you click a choice, and then decide you'd rather "unanswer" it. – mattstuehler Jul 25 '15 at 17:15
2

Have you considered putting each choice on a button and allowing the buttons to have distinctive depressed and undepressed images? Javascript coding them as you describe in option 3 would allow your users to choose zero to one of the provided options. Meanwhile, the use of buttons might make the hidden behaviour more intuitive.

0

You could implement it the way typeform does it: Scroll and skip the questions you don't want to answer, and let radio buttons and checkboxes retain their default behaviour.

0

I'm assuming your user will move from one question to another question/page with the help of a button, let's Call is 'Next'.

All you have to do is rename you button as 'Skip' till the time when no check-boxes/radio boxes are selected. As soon as the user selects at least an option the button changes to 'Next'.

Note: Use the standard convention only, for Radio/check boxes.

Hope this solves the problem. And plz do tell me if I've misunderstood something.

  • this is a great point. IF each question was presented on its own screen, with "Next" buttons - I think this would be the best solution. But in my application, ALL the questions are visible at once on a single, scrolling page (i.e., there is not "Next" or "Skip" buttons. The user will scroll down, answering the questions that are relevant to her, and skipping those that are not. – mattstuehler Jul 25 '15 at 17:11

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.