Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:multiple select widget.

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?

share|improve this question
add comment

4 Answers 4

up vote 18 down vote accepted

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

share|improve this answer
1  
We use Jira to record bugs. Our techie support team and developers still mess up selecting items from list boxes, usually removing the previous selection by mistake. –  Simon Apr 19 '11 at 8:59
2  
+1, normal users don't know. When you don't need to scroll, a hint like "Hold down Ctrl to select multiple items" sometimes is enough, but it's still not user friendly. When you need to scroll, it's bad bad bad bad. –  peterchen Apr 19 '11 at 10:12
add comment

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 select from a list

Examples / best practices for dropdown menus with checkboxes

share|improve this answer
add comment

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
share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.