1

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

mockup

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:

mockup

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?

  • This does seem very confusing. How many properties are there? More than four? – Matt Obee Oct 30 '14 at 16:31
  • @MattObee I have several sets of these properties, and within each set, there are two to four properties. – sawa Oct 30 '14 at 16:32
  • If that's the case it seems like a complicated solution for a very trivial problem. 2-4 checkboxes in a group is very easy to scan and configure with a few quick clicks. If there were significantly more properties in a group I can see it might be useful to have some shortcuts though. – Matt Obee Oct 30 '14 at 16:37
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.

mockup

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.

  • That is interesting. – sawa Oct 31 '14 at 8:19
  • It is a standard pattern of progressive disclosure or conditional input where you allow the user to make a choice before presenting them with other choices. – Michael Lai Oct 31 '14 at 8:22
  • 1
    On a touch device, you can also consider using a tap + hold versus a tap to differentiate between the selection one only and selection multiple behaviour. – Michael Lai Oct 31 '14 at 8:31
  • Right. And a PC counterpart could be using right click. – sawa Oct 31 '14 at 8:57
  • It might be a bit difficult to use a right click to trigger a selection behaviour over a control because it is also used for shortcut menu. But it would be interesting to see what you end up doing. – Michael Lai Oct 31 '14 at 10:27
0

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.

Shift-click to select multiple elements

  • The essence of your idea is to use the shift button to distinguish between independent selection and only-one selection. That can be done with checkboxes. That may be a good idea. – sawa Oct 30 '14 at 17:22
0

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

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.