User Interface: Multiple choice select boxes

Question

I have a form in which a user can select multiple options in a select menu. From a user experience perspective, what do you think is the most intuitive / best option?

A) Use the "multiple" attribute for select element (then you can hold down control and select multiple options). ADV: Simple, no coding required. DIS: Not intuitive.

B) Have multiple checkboxes and a select all/select none control. ADV: Fairly simple. DIS: Will get cluttered when there are many options

C) Have two select multiple menus side-by-side and have buttons to add/remove options. The chosen options will be on the right and be submitted. ADV: Clean DIS: Will break if JS is not on.

Can anyone think of better options?

Answer 1

A) Good if you don't have a very long list. It will be very annoying to use if you have lots and lots of items. Bad because it is not searchable, unlike option B.

B) Good because this will not require the user to understand holding down control. Because of this, the user won't be able to accidentally clear their selection either, which is obviously a good thing. It will also display much more cleanly what options you have chosen. Good because you can group related options under a single headline or other graphical indication. This approach will work without JS, with the exception of a select all button, a select none button can be done using a input type="reset".

C) I think this can be good if the user is clearly adding to a list, instead of selecting options. But as you say, it will not function without JS. I would consider A and B instead of this. Also not searchable unless you provide a custom filter box (which again depends on JS)

Answer 2

I vote for B.

Option A is the "vanilla" option, but I hate having to hold down Control and scroll through a long list. Inevitably something will slip and clear the whole list. I'm sure the folks with arthritis hate it too.

Option C is a common enough paradigm, but when you have more than a few options it gets a little difficult to keep track of, especially if the options have any order or relation to them. I prefer to have one list where I can relate all the options to their neighbors. It depends on your specific use case I suppose.

Option B is easy to code, can be used 95% without JS, and gives you complete flexibility in your layout. It's only as cluttered as you design it to be. This is the way I do multiple-selects and find it very easy to work with.