Problem solving with a time limit

[davidquill_ux]

Hello all!

I’m a little stuck on a design problem and thought i’d post here to get everyone’s feedback on how they would solve this little problem - would be interesting to hear your thoughts. The multiple select dropdown below shows a list of possible bonuses for a particular job role.

When they click on an option, the options appears like this:

Now, if they click ‘Select none’ they all become void and disappear. But where do you place this option? Should it have such significance on this drop down? Should it even be on the drop down? Would you have ‘None’ as default (considering there are many of these drop downs on the form)? I’m struggling to find examples of this on semantic UI and Bootstrap! Any help would be appreciated!

[joshua_shuv]

My two cents, the default copy should make it more obvious this is optional.

“None” might make sense when you have to select only one option for clarity, but for a “chip filling” field (Does someone else have a better name for this field type?) I’d expect all options in the drop down to result in a “chip”, and if the field is optional then i should not have to go into the drop down to find that out.

Maybe you were thinking of a “clear all” style function? Which might be useful, but with relatively few options maybe not important.

An alternative to this chip filler field is the more traditional checkbox list - e.g.

or - perhaps a little easier to read, but of course takes up more space.

As always, test to be sure!

[lykc]

like Joshua mentioned, maybe a checkbox component could be more fit for purpose? If there aren’t that many options, then checkboxes will work and you won’t need to introduce a ‘select none’ option, as you would just uncheck them all. However, if there are lots of options, then I can see why you have this tagged filter approach.

By having ‘select none’ in the dropdown, it could be annoying if the user has made their selection and then accidentally presses ‘select none’. An option is to make it more descriptive e.g. ‘clear all’ and put in closer proximity to the tags?

[dotafxoc]

Who’s your target audience?

[dougcollins]

If you’re looking at things from a perspective of purely solving a similar UX question in a vacuum, the Prime UI has a good solution to a similar problem. This affords for searching, selection, and de-selection all in one tool.

However, I think @joshua_shuv’s point is very pertinent here. Why are we using a multiselect dropdown here to begin with? Checkboxes have a lower cognitive load, as they make all choices readily visible for comparison and reflection. From an accessibility perspective, they’re also much more friendly to users with cognitive impairments. Unless there were a space limitation, I would advise a switch to a standard checkbox format.