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?

3
  • This does seem very confusing. How many properties are there? More than four?
    – Matt Obee
    Commented Oct 30, 2014 at 16:31
  • @MattObee I have several sets of these properties, and within each set, there are two to four properties.
    – sawa
    Commented Oct 30, 2014 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
    Commented Oct 30, 2014 at 16:37

3 Answers 3

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.

5
  • That is interesting.
    – sawa
    Commented Oct 31, 2014 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
    Commented Oct 31, 2014 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
    Commented Oct 31, 2014 at 8:31
  • Right. And a PC counterpart could be using right click.
    – sawa
    Commented Oct 31, 2014 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
    Commented Oct 31, 2014 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

1
  • 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
    Commented Oct 30, 2014 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 and acknowledge you have read our privacy policy.

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