What are some UI patterns where an option in a multi-select acts like a radio button choice and clears other selections?

Question

Problem

Typically, a survey question will ask for someone to select one option or select many. Also, the system would like to clear any choices, if Don’t know is selected.

Constraints

• Cannot change the question
• Unlikely to be able to change the system behavior, but I will recommend allowing users to decide what to do or revert if selected and something was selected/entered.

Goal

Prevent any confusion or errors when all other selections are lost after selecting Don’t know. Letting them know what just happened, and helping them recover.

Your gut reaction O1 or O2?

What do you think of O1 and O2? What if the word grouping label repeats the question? The goal here is to show that Don't know is different or to allude to the system behavior.

Answer 1

No Don't Know option

In your scenario, Don't know is equivalent to selecting none of the options. Your list of options is implemented with checkboxes, and selecting none of the options is a valid input.

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.

So, a possible alternative would be to remove the Don't know option from the list and encode no selection as Don't know in the application logic if necessary.

O1 alternative 1

In O1 you display Don't know as a checkbox even though it has the behaviour of a radio button. I don't think that's acceptable. Consider implementing Don't know as a checkbox and once it is one of the options selected encode the answer as Don't know only in the application logic. If you explain what selecting Don't know does in your question I don't think it would be necessary to deselect the other options.

O1 alternative 2

Again, Don't know is not an actual option so you can implement it as a button instead of as a checkbox. This may be the strongest way in which you can signal this special status to the user and also signal that Don't know is equivalent to not making a selection. Much in the same way that a Skip button is commomly used in UIs to allow you to avoid making a choice.

Answer 2

My gut reaction is O1.

With O2 you have a problem with the "Grouping" label and the use of a radio button for both the "Grouping" label and the "Don't know" label. If the layout is the way you currently have it, you could run the risk of repeating information in the "Grouping" label, or it simply being useless. By having the "Don't know" option be a radio button with the same hierarchy level as the "Grouping" label, you put their importance and purpose on the same plane, which is incorrect, since "Don't know" should be on the same level of purpose as checkboxes nested under "Grouping".

With O1, you avoid the issue of what to put in the "Grouping" label, as well as keeping the "Don't know" option on the same plane as the other options for the question. The key here is to visually signify that the "Don't know" option has a different behavior than the rest of the options, which I think you've done by spacing it further down and having it separated by a horizontal line.

Answer 3

In the O2 you highlight the option "I don't know" and I think this shouldn't be your goal.

If in development is covered this functionality, deselect the others checkboxes on click on the last, I think O1 is clear and preferable and the horizontal line is all you need.

If you still think the O1 is not a good idea, you can improve O2 (if you are able to modify the code) and add a switch on top or the radio buttons with that choice and keep the checkboxes in the next sections. For me, this option highlight less "I don't know", even is a separate row, on top.