Checkbox or radio button

Question

I have about 20 checkboxes, each corresponding to a data source. The user is able to select 1 or more data sources ("0 or more" is OK too, if it's handy when coding it).

The issue is that, almost surely, the user will eventually reach a point where they want to experiment with a single data source at a time. Now, since the data sources affect one another, the user will select the first checkbox (and look at the result), then they will select the second and deselect the first (and look at the result), then they will select the third and deselect the second (and look at the result), and so on.

The ideal thing would be to have the possibility to transform checkboxes into radio buttons and vice versa. But maybe another button that says "disable multiple selection" is confusing. What do you think?

Answer 1

Adding complexity to the interaction does not help the user's work flow for a limited use case. TL;DR: Don't flip between check boxes and radio buttons. Doing so just adds unnecessary controls and complexity.

Understand the work flow.

Don't just think about all the possible interaction scenarios and come up with a solution. Understand the user's actual work flow and design for that. If the user needs to select multiple options on a regular basis, that's the dominant work flow.

Use the proper metaphors.

Use the control the illustrates the potential interactions. Checkboxes are a widely understood metaphor that allow for single or multiple selection. Users get this. When they see this, they know what they can do:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you present them with radio buttons, the user understands what they can and can't do. The radio button metaphor is known for single selection. So now you're adding a situation where a button totally flips the active metaphor the user is familiar with.

^{download bmml source}

Avoid Modes when possible

When you introduce modes to a user interface you increase the possibility of confusion and error. If the mode switch is not brilliantly obvious it can be lost amongst the other controls and a user can fail to notice the state they are in.

Why can't I select more than one? How did I get here? How do I get back?

Modes can be necessary in certain situations, but should be avoided otherwise.

Don't make the users wonder what will happen next.

1. What happens when the user hits this button with multiple checkboxes selected?
2. What happens if I immediately hit the button again, do I get my selections back?
3. When the radio buttons are visible, why can't a select more than one... I have to find that trigger to let me do what I want.
4. Why do I have so many options laid out in front of me?
5. Why the heck do I have to "explore" to figure these all out in the first place!?

Don't be a helicopter designer

If you try to coddle to every possible interaction, you will overcomplicate the interaction for every interaction. Use the interaction that best fits your primary workflow, while still supporting other interactions.

Wait a second... what's up with those last two bullet points above?

To point 4: 20 checkboxes is a lot of options to push in the user's face. An alternative pattern might be a better choice.

To point 5: Why doesn't the user already understand what the options do? If the user "almost surely... will eventually reach a point where they want to experiment with a single data source at a time" then something is likely wrong with how those data sources are being presented.

The interface should not hide meaning. If I select a checkbox, I should know exactly what is going to happen when I do!

Okay, sure... there are scenarios where exploration makes sense. Not being familiar with exactly what is happening with these checkboxes, that may be the case here. But be sure you're not using the idea of "exploration" as "just let the user figure it out so we don't have to."

Answer 2

There are several ways to tackle the problem. First, I do want to mention that you should validate the assumption that one would, in fact, test things out.

Really consider if just keeping with the checkbox isn't the solution already. If you aren't really solving a pain-point to begin with, I don't think its really worth trying to fix something that ain't broken. I don't know your product, but perhaps there are more urgent things that could be solved? That is, ofcourse, totally depending on your situation :-)

Now, for the sake of an answer, I'll assume that you've done the research and it is, in fact, a real pain point.

I wouldn't enable the change to a different input type, as this might confuse the user more than it would help. As you state in your question, you want to have >= 0 sources. Which is a very valid reason to use checkmarks. What you could do, however, is figure out if a preview button couldn't help. I don't know your exact case, but if the results where observable nearby, this could definitly be an unobtrusive way to do it. It could then look something like this:

Or any other wording like "test this source" or something. I'd go ahead and make it only visible on hover, as this would otherwise look pretty dense.

Another way, closely related to the preview solution, is to call it "select only this source" or something shorter, which would deselect the rest and select...just that source.

You could also helpfully accomdate by just adding select all/none buttons, in case the user has many sources selected and only afterwards wants to select one. Which, in longer lists could just be as problematic.

In the end, you must really make up for yourself if the solution is really a remedy for the pain, or in other words: does anyone really care if it takes a few clicks more?

Answer 3

Why not use the space that the radio/checkbox switch would occupy for a drop-down combo-box?

The checkbox array already serves to show all options at once and you don't have a chance of momentary confusion for people temporarily thinking the radios are checkboxes and vice versa.

Answer 4

The simple answer

Changing the input type seems reasonable for this scenario.
Just give users a switch so they can easily initiate the change.

Alternate source selection controls

On the topic of alternate control types (discussed in the comments), here's the scrolling selector box I referenced. Similar to a dropdown, but persistently exposed. I think that has a lot of value in any scenario where multiple selections are encouraged.

Answer 5

You could do what OSX Finder or Windows Explorer do, which is click selects one and using CTRL + click allows multiple selection.

In Windows 8 for touch interface if clicking the row body, it's a single selection. But on the leftmost side there are checkboxes to make multiple selections. If after several checkboxes have been selected the user clicks on a row body, then all previously checked checkboxes become deselected.

Another touch interface that deals with this problem is one in which normally a tap is a single selection, but a long tap makes checkboxes appear at each row to allow multiple selections.

Answer 6

Sounds like you need a list.

Selection of item in the list is like selecting a check-box in your example. User can use CTRL and SHIRT to select multiple items (or clear selection of some). You can provide shortcut buttons on top of the list for Select All, Clear All.