Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
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 at 22:56
3  
A) looks like a bug, not a feature. –  PTwr Aug 14 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? –  O. R. Mapper Aug 14 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. –  FreeAsInBeer Aug 14 at 12:49

3 Answers 3

up vote 52 down vote accepted

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.

share|improve this answer
    
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 at 7:59
1  
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 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. –  Roddy of the Frozen Peas Aug 14 at 22:12
    
This is exactly how I would have done it. Nicely done. –  Majo0od Aug 15 at 17:12

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.

share|improve this answer
    
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 at 8:18
    
You're quite welcome Niek. Best of luck to you on your project. –  Johnny UX Aug 14 at 14:41

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...

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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