8

I am working on system which is intended for rather technical users - engineers, etc. The system consist of several windows, each provide the user with the option to configure (create/edit) some object in the system. Each object has many attributes, distributed to different panels according to some sub-object relevancy. Each panel consist of list of attributes where some are of Enable/Disable type. The last usually represent on/off state of some attribute in the object.

My question is: for these Enable/Disable options, what is the preferred method: A single check-box or two radio buttons? Or maybe, a mix of them depends on the attribute?

Some examples:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    If you are open to another option, you could use Toggle Switches. However, this may/may not work with the UI you've suggested in the mockups. – Swapnil Borkar Jun 19 '16 at 8:34
10

I would go with the rules of GUI standards and official W3C Web standards:

  1. 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.

  2. 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.

  3. A stand-alone checkbox is used for a single option that the user can turn on or off.

From Nielsen Norman Group Checkboxes vs. Radio Buttons

  • 4
    Thanks. Yet I am unable to decide from this text (and the full article) where does my specific case falls and why? – Assimiz Jun 19 '16 at 12:54
  • @Assimiz It falls on the 3rd option, hence it is bolded. Some examples: #1 is for setting a background color; you can only pick 1 color at a time, but can be red, green, blue, white. #2 is buying shoes. They sell RGBW and you can buy multiple colors. #3 would be about using a color or an image. A binary choice with only 2 options. You have only 2 options per setting. Although you have multiple settings it's the amount of options per setting that matters. – PixelSnader Jun 19 '16 at 16:02
4

The radio buttons add cognitive load to the user and clutter the interface without providing any additional clarity.

You can increase clarity and reduce clutter further with this approach:

Enable:
[] Administrative state
[] Graceful restart
[] Default route
[] Multiple paths
1

The checkbox group implies optionality rather than default states. That would not be the right method to use if you want to show the user what the default states are. The first group using radio buttons is a better use. In iOS settings pages, they use toggle switches to indicate if something is enabled or disabled. That seems like the best way show this use case you are describing.

  • 1
    A toggle like in iOS is a binary choice, just like a checkbox. Radio buttons are functionally different because they are not binary but can be any amount of options. In fact, switches like proto.io/freebies/onoff and w3schools.com/howto/tryit.asp?filename=tryhow_css_switch are built on HTML checkbox functionality. – PixelSnader Jun 19 '16 at 16:12
  • You can have a checkbox checked by default. The user can see what the default state is: sometimes yes, sometimes no. – Eric Stoltz Jun 22 '16 at 23:17
1

To simplify and rephrase Samuel's answer:

Use 1 checkbox if the choice is one out of two options. Or rather, a binary choice.

Use radio buttons if the choice is one out of X options.

Use X checkboxes if the choice is Y out of X options. This is actually not a single option with multiple selection options, but a series of options that you can select individually.


There is, as always, an exception. Or rather, a complication. If you have one out of two options, you might still want to use radio buttons. If the option is 'side dish of french fries', having a checkbox makes sense. You either want it or want no sidedish. Something or nothing.

But if the option is 'side dish salad or french fries'... which one does the checkbox mean? A set of two radio buttons makes it much more clear which one is being selected. As an additional benefit, it offers better options for future expansion, when the restaurant wants to have fried, salad, and garlic bread as side dishes.


But in your examples, all the option are about enabling or disabling functions. So go with checkboxes.

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.