12

Which way to answer the following question is more user friendly and more clear?

A)

enter image description here

B)

enter image description here

edit: Because I have to stick to the drop-list and don't really like options A and B, I thought of an third option. In this case the checkboxes are always visible when dropped down, and it isn't possible to select 'No' without selecting one of the options underneath it:

C)

enter image description here

4
  • 1
    If you pick "No", do you have to pick at least one of Option A, B, or C? A) suggests that you don't have to, but B) suggests that you do have to.
    – Jeff Roe
    Aug 13, 2014 at 22:56
  • 3
    A) looks like a bug, not a feature.
    – PTwr
    Aug 14, 2014 at 7:03
  • 1
    Am I the only one that wonders whether Yes or no? (and yes, I'm aware that's just an abstract version of the actual question) is the right question, given these answers? Aug 14, 2014 at 10:06
  • Options A and B are different. A seems to allow a user to select multiple sub-options, while B only allows a single selection. Aug 14, 2014 at 12:49

3 Answers 3

53

Use either Responsive Disclosure or Responsive Enabling depending upon the standards in the format you're working in.

Responsive Disclosure would mean first showing a radio button like this...

mockup

download bmml source – Wireframes created with Balsamiq Mockups

...and then revealing the additional option in the whitespace if the user selects no, like this...

mockup

download bmml source

Responsive Enabling would mean first showing the options greyed out instead of hidden, like so:

mockup

download bmml source

You can also find Responsive Disclosure and Responsive Enabling in the Quince Infragistics pattern library and on pages 179-185 of Designing Interfaces, Second Edition by Jenifer Tidwell.

Note: I've changed from a droplist to radio buttons because there are only two options. Unless space is severely constrained or you're trying to nudge your user to stick with the default, radio buttons are the better pattern in this case. Also, if at least one of the options A, B, or C must be selected, it may be better to use a droplist with 7 explicit options instead of checkboxes, especially if you don't want an option selected by default.

4
  • Hi 3nafish. Thank you for your answer, it's very helpful. It is indeed the case that space is severely constrained. That's the reason for the droplists. I don't want to nudge my user to stick with the default or select an option by default. But indeed at least one of the options A, B or C must be selected.
    – Niek
    Aug 14, 2014 at 7:59
  • 2
    If space is at a premium, you could consider making option 1-3 a dropdown, or something popup-like. I would stick with the radiobuttons for yes and no though.
    – Mr Lister
    Aug 14, 2014 at 9:11
  • 3
    When I see scenarios like your second image for 'responsive enabling', I always get confused because I'm not sure if it's saying "Yes and also A,B,C" instead of just "Yes". So I always select "No", deselect A,B,C, and reselect "Yes", which is highly frustrating. Aug 14, 2014 at 22:12
  • This is exactly how I would have done it. Nicely done.
    – UXerUIer
    Aug 15, 2014 at 17:12
11

I don't think either of these is the best option. Do you have to go with one drop down? I would prefer to see two. The first would display and the second would be hidden until the user selected either yes or no from the first. Once selected the second would display with the appropriate options.

2
  • Hi Johnny. Thank you for you answer. This is an option I didn't think of. I didn't want to ask two questions, but in this case you don't. So this is certainly something I will consider.
    – Niek
    Aug 14, 2014 at 8:18
  • You're quite welcome Niek. Best of luck to you on your project.
    – Johnny UX
    Aug 14, 2014 at 14:41
1

If space is a consideration, you could also make a second step with a popup, or a second page. The first page consisting of a single Yes/No Choice, for example two buttons.

If the user chooses No, he will get a second page with the checkboxes to choose Options.

If you are at all concerned with people using touchscreens, this should be the best options, because they are used to having information and menus spread over several steps/pages in a work flow, but they would probably break their fingers with those combo-boxes...

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.