Using mixed radio and checkbox buttons - is there any efficiency or usability gain in the design?

Question

I have noticed that many online forms and surveys these days are starting to use a mixture of radio and checkbox buttons for the same question, that is, for a question that gives the person a number of choices, you can either make a selection from radio buttons or checkbox buttons.

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

Although it looks a little bit confusing to start with, it is not too difficult for the user to realize that the buttons behave as they should (option A or a combination of option 1-3). However, to me this feels like designs are starting to rely on the interaction to indicate the behaviour to the user rather than going back to good structure and logic used in the question.

Is the argument that because Design A saves the user one extra click that it is a 'more efficient' design? I think the amount of time saved on the extra click is not as much as the time spent on understanding what the options are, so Design B still seems to be a more efficient design overall. It also makes changes easier to implement because the logic is clearer. I hope this is not actually a trend I am noticing here, or if it is then I am looking for the rationale behind it.

Answer 1

I think that the underlying issue is that the form designer is trying to be sure they got a response and the user didn't simply ignore the question. No checkboxes checked means... absolutely nothing! If the choice is the example given - "did you use the entertainment system No / Yes" + checkboxes for which components used - then they want an answer, not just a non-answer if none were selected. If you have multiple optional things but at least one is required, how do you coerce that? It is no longer about efficiency but getting actual info from the user.

This is more to do with information design than form design, but it obviously has to be implemented in the form. It is a very old problem, from before the development of radio buttons and checkboxes (or the GUI at all). I think that you will find that this is the rationale behind what you saw. It is inherent in information-gathering, even by pencil or voice.

Answer 2

• Option A is a relatively uncommon metaphor for representing these input constraints and will increase cognitive load of users trying to parse meaning
• Option B is probably more easily parsed, but takes more clicks to physically accomplish

In weighting them, I would distinguish between Usability vs. Learnability

• If you have repeated users, the new input format can be learned and quickly processed in the future by returning users

• If you have a kiosk like environment, then I would aim for the highest degree of discoverability between the two options, even at the expense of additional clicks.

---

Also, to iterate over Option A, as IronBasset pointed out, adding a visual separator between the radio selection and checkboxes should add clarity and separation between those two distinct option sets.

No matter the case, additional interaction logic should be added so that the appropriate state is synchronized and enforced programmatically, without users having to regress and undo a particular action. If the top radio button is ever selected, it should deselect any checkboxes as those option sets are mutually exclusive.

Further Reading:

• Do users understand this hybrid checkbox/radio control?
• Adding a “none of the above” option to a list of checkboxes
• Combining radio and checkboxes

Answer 3

I highly recommend Design B, as it is the most logical and shows the user it's options in greater detail. I think that saving the user an extra click is far less important than having them explore more possibilities in greater detail, with the only downside being as small as 1 extra click. This is also the most logical, thus being more compatible with the user's natural thought path, leading to an overall more 'compatible' user interface, rather than saving the user a mere click.

---

Good Luck!

Answer 4

Layout A, is flawed with the radio button group almost blending in with the checkbox groups below it, with no apparent separation (horizonal line etc.) Layout B requires more input from user, but is laid out almost like a tree with indenting to separate the parent and children.

Understanding the application is essential, where as convenience is a second priority.