Radio buttons vs checkboxes for true/false/null options
Asked Answered
W

3

6

I'm designing a generic survey engine and I've ran into some UI design related difficulties.

I've decided that all survey elements that support multiple choices will invariably use combobox control. I think this is a good practice and Microsoft design guidelines promote this practice as well.

However, I don't want to use comboboxes for Yes/No choices. These also need to support indeterminate state if the user doesn't select anything. My first choice was using two radio buttons which would read "Yes" and "No", but the problem with radio buttons is that they can't be deselected once selected (unless I break design guidelines and make radio buttons uncheck themselves upon another click). Alternatively, I could present the third option which would read "Unknown" or better yet, a small button which would remove any selection.

The problem with using checkboxes is the way they handle indeterminate state. Most end users who will be using this software won't be very computer savvy and I don't expect them to realize that the small square in checkboxes representing indeterminate state DOES NOT in fact mean that the selection is positive. Check mark and square are probably the same to many users.

To summarize:

For YES/NO/NOT SELECTED types of items, should I use:

  1. Radio button with three choices reading "Yes", "No", "Unknown".
  2. Radio buttons which can be deselected by clicking.
  3. Radio buttons which can be deselected by clicking a small X button
  4. Checkboxes and hope that users will realize what indeterminate state is

Thanks

UPDATE:

Alright, thanks to everyone who participated.

I've opted for option #3 (Radio buttons which can be deselected by clicking a small X button), except that I use linkbuttons instead of buttons. I also provide a tooltip on the linkbutton in case the user isn't aware of its meaning.

It looks like this:

enter image description here

I'm pretty happy with this. Thanks again.

Willams answered 11/9, 2011 at 14:28 Comment(2)
As user, I vote for option 1, using Add Comment feature not mentioned in your list.Source
@Vex: you're making a bad decision with that "x" button. Nobody will know what that does. Stick with a standard way of doing things -- don't invent a new way to represent a third choice. Yes, they can hover over the "x" for a tooltip. but why make them do that when using a third radio button is completely obvious? Also, don't accept an answer so quickly -- you've given the community only one hour on a weekend to respond. Don't be so hasty. Give people a chance to give some quality answers.Carboxylase
C
6

You have precisely three states or choices and are asking the user to choose. The choices you want to give the user are "yes", "no", or "I don't have an opinion" (though you can word that however you want, obviously). This is precisely what radio buttons are for. Radio buttons are specifically to choose exactly one out of several possible choices. Also, make sure the "I don't have an opinion" button is selected by default. There should always be a radio button selected, there should be no indeterminate state.

Checkboxes are definitely the wrong choice in this specific case.

Carboxylase answered 11/9, 2011 at 15:43 Comment(1)
I've rethought everything and realized that you're probably right. I've created a design time property which allows developer to choose what kind of presentation he prefers (yours or the one I initially created)... that way whoever is designing the form can decide whatever is more suitable at the time.Willams
I
1

I am no UX expert but I like the first option, which is called the themed radiobuttons here

Importunate answered 11/9, 2011 at 14:43 Comment(0)
D
1

I believe that option 3 is the more logic one.
You should have the yes-no radio button and had (above it or below) a checkbox with something like "N\a" or "Not relevant".

Delocalize answered 11/9, 2011 at 14:45 Comment(1)
If the "N\a" is checked then the radio button should be unactive. while it's value should be ignored later.Delocalize

© 2022 - 2024 — McMap. All rights reserved.