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.

I use a dropdown menu with checkboxes to select multiple options for field.

I am not sure if I need a "validate" or "save" link, or if the user will understand that they just have to click outside the dropdown.

Which design should I use: method A or method B?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

EDIT of November 26th : Many of you are wondering why I need checkboxes in a dropdown, it is because I need to select many functions for a same data in a small space.

enter image description here

share|improve this question
3  
not really answering, just wanted to ask why did you choose to use a dropdown with checkboxes instead of just using the checkboxes? was it a matter of space? thanks :) –  Victor Nov 22 '13 at 19:22
    
I'd suggest a close [x] in the upper right. –  DA01 Nov 22 '13 at 22:50
    
Actually I work on a statistic tool and for each data listed, you have to choose which functions you want to display (min, max, average, cusum). I found this solution to not overload the screen –  Renaud Nov 25 '13 at 8:40
    
@frntk that's exactly what I was wondering. Was about to comment that until I noticed your comment. This is weird to me too since a drop down's interaction is for a single selection, while check boxes is multiple selections. I'm intrigued to know the reason behind this! –  Majo0od Nov 25 '13 at 19:47
    
I updated the post to show how it works –  Renaud Nov 26 '13 at 15:42

8 Answers 8

up vote 7 down vote accepted

I choose A.

  • It's not really necessary to have a save button in my opinion, providing there is sufficient space to click outside of the drop-down. Don't forget to make selecting the ▾ button allow the drop-down to be closed when clicked if the drop-down is currently open.

  • Normal drop-downs will save the selection when clicked outside of them or keyboard navigation is used to select another element — this would simply be an extension of this by requiring such an action to exit the drop-down.

  • Real-time updating of the contents of the drop-down box itself is a much better option than waiting for a save button to be pressed.

share|improve this answer

The use of a validate/confirmation button is usually tied to whether or not the clicking of that button is required for the user's choices to take effect.

I would ask questions such as:

  1. Is the data being filtered by these options visible and changing live on this page? If so, the button would make zero sense.

    1b. Is the click of the button required in order for the user's selection to take effect? If so, would clicking outside the box, which also closes it also have the same effect of saving the data?

  2. Why is a drop down being used to begin with? Drop downs are typically not intuitive for multi-selection options.

    2a. Where you list "option 1, option 2" because two options are selected, what happens when 3 options are selected? Does the drop down become wider? If not, then the user cannot view all selected options and may think only 2 are selected. Where you say "option 1, option 2" when the drop down is closed, this is typically either the currently selected option, or a category of the available options if no option is selected.

    2b. Is the drop down being used simply because there is not enough space to view all the options all the time, or this might feel cluttered? If so, perhaps there is a similar way to hide/show the options, without a drop down. I would reccomend this, assuming you are not restricted by the use of a button to actually save the data and have the user's option take effect.

Try:

Deciding a category that each group of options falls into. Either: display this category name when all the options to select are not visible, OR reliably display all currently selected options. (i.e. showing only 1 and 2 when 1, 2, and 3 are selected is misleading).

When deciding if you should use a 'validate' or 'save' button, consider if this extra click is necessary for task completion. Keep number of necessary clicks low.

share|improve this answer
    
I agree that the button is not necessary. the data are refreshed lively. But a dropdown menu use to close itself when you select an option and maybe the user will not know where to click once the selection is done –  Renaud Nov 25 '13 at 8:45

I'm guessing the drop-down isn't open by default, but instead opened in response to a user action and thus you could assume the user will likely understand they can just tab out or click off to close it again.

Of course assumptions being what they are, you shouldn't leave it at that. If there are any problems or issues with this field-control it would quickly be made apparent when you do the usual usability testing later.

You will be doing usability testing, right?

share|improve this answer
    
Thank you Erics, i agree with your point. Of course this will be tested with real users. i will let you know the conclusion –  Renaud Nov 25 '13 at 8:51

B is the better option of the two. Still, it might be better to simply include the button, but do not require its use: Thus, a combination of A and B. Your web analytics should show whether users are clicking the button or not (and it can be removed at a later stage).

However, I suggest instead a multiple-select drop-down menu. This form element has been in use for many years and some users will be familiar with this convention.

share|improve this answer
1  
I presume you're referring to <select multiple> elements, which I personally detest due to the fact that accidentally clicking without holding ⌘/ctrl deselects all my selections except the one I clicked. Also, can you expand on your reasons for selecting B as the better option? –  grgarside Nov 22 '13 at 17:01
    
I agree: multiple-selection does not work well at all. The solution you propose above is definitely a legitimate way to deal with the shortcomings. However, whenever replacing a convention, it is important to balance the learning curve with the strength of the convention. –  MXMLLN Nov 22 '13 at 22:29

Out of these 2 option is better. But i would suggest you to use some "Validate" or "Continue" button because it'll acknowledge the user better. The user will surely understand its purpose i.e. To click it in order to submit selected options and continue.

share|improve this answer

I choose option A.

Drop downs and check box are the most primitive building blocks we have. Hence, we can axiomatically assume the user knows how to use them. I see no other choice, though it is a combined controller here, made of both.

share|improve this answer

maybe you can use two selects with the multiline property and move items from one box to the other ... comboboxes with checkboxes are hard to use, and validate.

share|improve this answer
2  
Hi @Erik Bij de Vaate, can you elaborate a bit why comboboxes with checkboxes are not a good option? IMHO there are out-of-the-box solutions available that work fine, e.g. labs.abeautifulsite.net/archived/jquery-multiSelect/demo - but I might be wrong. –  greenforest Nov 25 '13 at 15:13

(Okay, i wanted to REPLY to MXMLLN, but i can't because i don't have 50 reputation).

I had a similar problem for selecting 1 or more items from a pretty long list. I went with a different "multiple-select drop-down menu" from "Select2"

See here in the demo (2nd in the list called "Multi-value select box")

It's basically, a search & combobox in one, and you don't force clicking upon the user.

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.