Independent selection but can also be alternative

Question

I have binary properties, say A, B, C, D, that a user can independently switch. This is usually done using checkboxes as so:

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

But I also want to add the functionality so that when the user wants to turn on just one of them (which frequently happens), it can be done easily (ideally by one click). I came up with an idea of using radio buttons in combination with the checkboxes as so:

^{download bmml source}

so that when the user clicks on one of the checkboxes, the radio button selection becomes irrelevant, and when the user clicks on one of the radio buttons, then the checkboxes will be synchronized automatically with the state of the corresponding radio buttons.

But this looks complicated to the user, and I am not sure if it works. Is there a better way?

Answer 1

What you probably need if you don't want to break any conventional UI design patterns would be to first have a radio button group that allows you to decide whether you want to choose just one or have multiple selections. Then once you make the selection it toggles the behaviour of options A-D into either radio buttons or checkboxes.

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

But I think you should also try to explore new design or UI patterns if you think it is suitable for the users.

Answer 2

I definitely wouldn't put two different types of selection inputs on the same items. Even if the inputs respond display the correct number of selected elements based on the user's clicks, he or she will likely be confused about whether or not both methods of selecting the item is required.

It would be better to just leave them as checkboxes because that allows for both forms of input (single selection and multiple), but if you really want single element to be the default, you could use one of those lists from back in the day. The input defaults to single selection, but if the user wants to select multiple elements, he or she can shift-click.

Answer 3

Since you know there will be at most 4 per group, how about a drop down followed by a clickable hyperlink that reveals the checkboxes:

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

I feel like the change between single and multi-selection is more explicit to the user.