Does the average user understand the standard HTML multiple select box?

Question

If I want the user to select one or more items the HTML symantecally correct form element would be <select multiple>.

So the code would be:

<select multiple id="sel">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

Which looks like this:.

The user can choose multiple elements by Ctrl or Shift clicking items.

This is the standard widget used by browsers, but is this the best way to display this kind of input? Do users understand it?

I could add instructions, but in my opinion if it needs instructions like that it's probably a bad design. Is there a good alternative? Maybe a JavaScript widget that replaces it?

Answer 1

In short: No, average users don't understand that.

You could either just show all options with checkboxes or try something fancy like a dropdown with checkboxes (example, see features dropdown). This would have to be tested though.

Hope that helps, Phil

Answer 2

This pops up quite frequently in discussions, but I'm not sure if a definitive alternative has been found yet. Previous UXExchange / StackExchange discussions might give you some ideas:

What is the best UI for multi-selecting from a list?

Examples / best practices for dropdown menus with checkboxes

Answer 3

http://www.suumit.com/projects/bsmSelect/examples/index.html

That is, by far, my favorite implementation of 'preferred' functionality for multiple select. It's drop-down based instead of list as you describe. The selections aren't checkboxed, which is really hard to handle for any list over like 6 values--you can't see everything you've checked at one time! It's better than quite a few that I've seen, that put the selections in the input field--you quickly run out of space in the input field, and this is useless.

I've seen some that do '3 selections', which again is useless--I need to know what I've selected. To me, this fulfills all criteria for usability:

• allow user to see immediately what they have selected
• allow user to continue to see what they have selected
• allow them to remove an incorrect selection
• allow them to 'filter' the list by typing partial match
• minimize screen real estate with basic, unfilled control

Answer 4

Phil is right. You could also use the same widget but remove the use of the CTRL/shift key. That would be a fairly self documenting solution if the checkboxes turn out to be unsuitable.