Many people don't know how to multi-select items in a HTML <select> control, so...?

Question

I know many people who use computers every day, who do not know how to select multiple items in a HTML select box/list. I don't want to use this control in my pages any more:

Please pick 3 options:
<select name="categories" size="10" multiple="yes">

So what user-friendly alternatives do you suggest? Perhaps have 10 tickboxes...or maybe just have each option in a coloured block which changes colour when they click to choose it? This gets messier when I consider my current list of 20 options might grow to 50 eventually.

Whatever way I pick it's gonna be a pain to validate it (using Javascript), to make sure the person picks at least 1 item and not more than 3. It's not about detecting how many options they have picked, the problem is more about how to convey this to the user in a friendly way!

Edit: I suppose I could use tags, like right here on stackoverflow, but I feel these are less appropriate if the users are non-technical (and half of them will be).

Answer 1

You could just use a manual list of items (Say as simple links), that have Javascript onclick behavior that deselects/selects manually. Basically by changing the css class between two values, and checking these css (Or some other attribute) during submission to determine the selections.

This would allow the user to simply select an item by clicking, and deselect by clicking, rather than the standard Ctrl+Click requirement.

Answer 2

Alternatives I used in past are:

1) For small number of items use a checkbox list. The checkboxes are much more intuitive and simple to use, but for large number of items it can became an issue. Still, when the number of items is growing you can add a:

<div style="overflow: scroll" />

with a fixed height.

2) For very large number of items it becomes difficult to see what is really selected especially when there are few items actually selected. In this case two lists side by side with the possibility to move items from one to another is a much better approach.

3) When the number of items is not very big but greater than a few, I used a dropdown with checkboxes build in-house that has the advantage of occupying only a small space. Something like this might be of help.

Answer 3

For unfrequent users having three drop downs might work the best>:

<select><option>Capa Verde</option></select>
<select><option>Holiday</option></select>
<select><option>Competition</option></select>

Alternatively, you might have a range of buttons that stick once clicked. However it is going to be difficult then to convey the limitation of up to three options.

If it is needed to mark each photograph individually and there is a limited number of categories you could display a list of categories (may be in several columns) right on top of the photograph (obviously you'd need to make sure the items a readable and indicate that they afford clicking) and let users select and de-select the tags by a single click. It is not very keyboard friendly, however its mostly impossible to use web without some sort of pointing device. In this case you'd use spacial positioning to connect categories and photographs.

There are various options with two piles (available and selected) etc.

Can you do at least a "hallway" usability testing?

What is the actual task in user terms and who are the users?

Answer 4

I suggest using two list boxes, one with the available ones, and one with the selected ones. Clicking or double-clicking an item in one of the lists should move the item into the other list. For convenience, I'd also include two "Move" buttons to do the same. This approach works surprisingly well with average users, in web applications as well as desktop applications.

Answer 5

I hate multi-select, especially when the item can later be edited (if you click without holding CTRL, you lose what you already had selected). The best two options in my experience are:

1. Having three separate select options (if you're limiting to three). The benefit here is that you're instructions of "select up to three" hold very well with the user experience and with a little JavaScript you can remove the first selection from the second dropdown thus removing confusion.
2. Using check boxes. The benefit of check boxes is that it probably matches your database better, plus the information is pretty intuitive to the user and with a bit of thought of how you present the options the user experience can be pretty solid. Ex. grouping your check boxes into areas that make sense.