Should multi-select dropdown/box have an "all" option?

Question

We have a situation where we have an optional "multiple select" box, that looks something like this:

<select size="5" multiple="true">
 ...
</select>

This select box allows you to select multiple items which will then be submitted with the form. I'm wondering, does it make sense to have an "All Options" or default option at the top of the list? Is it redundant? The HTML would look something like this:

<select size="5" id="lol" name="lol" style="width: 100px;" multiple="true">
    <option value="all">All Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Here is a jsFiddle demonstrating the HTML and how a "clear fields" button may work: http://jsfiddle.net/m3Zu2/

Answer 1

To answer the question you asked, I would strongly recommend not adding an 'All' option to a multi-select dropdown. You'd be providing two methods to accomplish the same thing: selecting all individual items OR selecting 'All', which is confusing for users (violates Neilsen's heuristic of Consistency & Standards) and likely would introduce data fidelity issues unless you made sure that both selection methods are recorded as the same in the database.

However, to answer the question you didn't ask... don't use a multi-select dropdown at all. Seriously. According to Alan Cooper (et. al) in About Face 3 (p. 451):

The selection idiom in list controls is very well suited for single selection but much weaker for multiple selection... It is thus far too easy, in the case of multiple selection, for users to select an item, forgetting that they have now deselected the first item because they can no longer see it...

When objects can scroll offscreen, multiple selection requires a better, more distinct idiom... the check box.

Quince has some potential solutions to the problem that don't involve a multi-select dropdown, and this previous UX.SE question has some more ideas.

Answer 2

It's a bad idea to have an "all options" option at the top of your multi-select. However, when you have a large number of selections, it is appropriate to have select all and select none options available.

I would do it like this:

See it in action — jsfiddle.net/Ry9LX/1/

---

The key is to differentiate the actions. Similar to the example you provided, you wouldn't want to have a checkbox that says "select all".