3

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?

2
  • 1
    Would it be possible to provide a bit more context to this question? So we could understand what the datasource is? It's a bit hard to relate to it :) Sep 1, 2015 at 19:39
  • @AnnaRouben the context is: each data source is a type of expense (e.g. "stationery", "medicines", "rubbish", and so on), and when you select 1 or more of these, you get a diagram of the sum of the expenses you selected.
    – William
    Sep 1, 2015 at 21:07

6 Answers 6

4

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:

mockup

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.

mockup

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

7
  • The question explains that there is need for two patterns. What [complex] apps have you designed where there is only one workflow to accommodate. IMHO, this sounds like an academic, rainbows and unicorns solution. Sep 1, 2015 at 19:02
  • This question does not explain why it needs two patterns. The questions points out that multiple options need to be selected, and that the user might want to flip selections for "exploration" at some point. That doesn't explain the need to overly complicate the work flow with two completely different selection patterns, when 1 pattern does the job of both. Sep 1, 2015 at 19:20
  • But one pattern doesn't do the job of both in terms of how the OP would like it to function (select one, deactivate others). Sep 1, 2015 at 20:43
  • The OP did not say he wishes it to behave as a "select one, deactivate others" - if that is what was meant to be asked, it was asked & answered here: Select multiple options or only one exclusive. The OP asked "what do you think [about switching between check boxes and radio buttons]?", referring to the option as "the ideal thing". To the question asked by the OP: (1) switching is not the ideal thing, and (2) a single pattern works for the described work flow. Sep 1, 2015 at 20:59
  • I don't want to get into a pissing match here, but ... the user will select the first checkbox ... then they will select the second and deselect the first ... then they will select the third and deselect the second ... Sep 1, 2015 at 21:21
0

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:

enter image description here

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?

1
  • Only this source on hover is a great option. Sep 1, 2015 at 19:06
0

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.

0

The simple answer

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

single / multiple switch for data sources

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.

enter image description here

6
  • could you give more detail on what the input types you would change between when using this switch?
    – Dave Haigh
    Sep 2, 2015 at 7:43
  • Just like the OP explained: checkbox for multiple sources, radio button for single. Sep 2, 2015 at 15:37
  • I like this answer but i'd suggest a dropdown over radio buttons (due to the large number of options that could exist)
    – Dave Haigh
    Sep 2, 2015 at 15:39
  • Drop downs are pretty terrible for large lists. Some kind of widget that allows you to scroll through a list and/or perform a search-to-filter might be better. But I don't think a list grid is terrible either. It provides quick point and click access. Sep 2, 2015 at 15:41
  • 20 items isn't large enough to say a dropdown would be terrible. "Some kind of widget that allows you to scroll through a list" - sounds like a dropdown list to me ;)
    – Dave Haigh
    Sep 2, 2015 at 15:52
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.