Checkboxes or Radio buttons: Only one or zero choices

Question

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.

Answer 1

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:

  

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.

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.