User Interface: Multiple Choice Flags

Question

I have a form in which the user can select several options in the selection menu. From the user's point of view, which, in your opinion, is the most intuitive / best option?

A) Use the "multiple" attribute for the selected item (then you can hold down the control key and select several options). ADV : simple, without coding. DIS : not intuitive.

B) You have several checkboxes and a select all / select none element. ADV : Pretty simple. DIS : will clutter when there are many options

C) You have two choices of several menus side by side and there are buttons for adding / removing parameters. Selected options will be on the right and will be presented. ADV: Clear DIS : will break if JS is not enabled.

Can anyone think of better options?

Answer 1

A) Well, if you do not have a very long list. This will be very annoying if you have many, many items. Bad because it is not searchable, unlike option B.

B) Good, because it does not require the user to understand while holding control. Because of this, the user will also not be able to accidentally clear his choice, which is certainly good. It will also display much more clearly which options you have chosen. Good, because you can group related parameters under one heading or another graphical indicator. This approach will work without JS, with the exception of the select all button, the select none button can be executed using the input type = "reset".

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

Answer 2

I vote for B.

Option A is the vanilla option, but I don't like to hold down Control and scroll through a long list. Inevitably, something slips and clears the entire list. I am sure that people with arthritis also hate this.

Option C is a fairly common paradigm, but when you have several options, it's a little difficult to keep track of, especially if they have any order or relationship to them. I prefer to have one list where I can link all the options of the neighbors. I suppose it depends on your specific use case.

Option B is easy to code, can be used 95% without JS and gives you complete flexibility in your layout. It is only as cluttered as you imagine it. This is the way that I do multiple selections and which is easy to work with.