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?
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)