2

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.

mockup

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.

  • Do you have any real world examples of this? I'm also not clear as to where you feel there's a difference in 'clicks' between the two. They appear to require the same amount of clicks (though note that we should rarely assume # of clicks is a key factor). As for which layout is 'better' I think it's entirely dependent on the context of the data being selected. – DA01 Jan 6 '15 at 22:25
  • I found this example for an airline's online survey. I think the question was something like whether you used the in-flight entertainment system. So the option was NO (for the radio button) or you used the checkboxes to indicate the types of devices you used to access the system. – Michael Lai Jan 6 '15 at 22:59
  • I think that's more along the lines of (what I call) contextual form fields. In that particular example, I'd simply show the two radio buttons. If YES was selected, I'd then progressively reveal the sub-question which would entail the checkboxes. It's not so much a question of efficiency but of context. (That said, web site surveys tend to be good examples of bad form design in general... :) ) – DA01 Jan 6 '15 at 23:20
  • @DA01 I can't think of any examples outside of contextual form fields. But I am not prepared to rule out that it is not a suitable pattern for some other purposes, which is why I am looking for any other input or answers for this question. – Michael Lai Jan 6 '15 at 23:50
  • It seems that it is more of a sequential process. The user selects Option A or B and then chooses the relevant option 1,2,3. Why not have this as a sequence? Make him choose A/B and then only show the corresponding list – JustAnotherPM Dec 7 '16 at 7:41
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.

  • A related issue is how to make some action irrevocable, and the classic (and highly amusing) method is to provide a single radio button which begins unselected. Once the user clicks it, they cannot unselect it. This would be for a case like "I have read the terms and conditions" - there is no valid reason to let them un-do that choice. – user67695 May 7 '15 at 16:03
1
  • 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.

Option A - Improved

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:

  • +1 This is a well-thought out response and the interaction design required to create the option experience for the user is important. I wonder if this applies equally in the context of a desktop versus mobile device user interface design... – Michael Lai Apr 19 '18 at 0:42
0

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!

0

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.

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.