Projects/Usability/HIG/Selecting Items Final Pattern

Summary

The user has to select from a pool of items or options. Order or sequence of the items may have some relevance to the user.

Factors that influence the proper solution to this pattern are number of available items and the frequency of actually changing the selection.

Solutions

List of Checkboxes

Ten or less available items.

(image)

If the number of items or options is ten or less, use checkboxes integrated in the list.

Two Lists with Arrow Buttons

Selecting from many (10 or more) available items is a major use case.

(image)

If changing the selection is a major use case – that is it will be performed whenever the user opens the target list – provide available and selected items in two listboxes.

The box on the left represents the pool of available items, the box on the right represents the selected items.

Between the two boxes are two buttons: They are for moving the items selected in the left box to the right box and vice versa. Multiple selection is possible, but only items in one list can be selected at a time. The buttons to move items left and right are sensitive to the item selection and disabled if no items are selected.

Drag & drop between the boxes is allowed. Double-clicking an item has the same effect as pressing the corresponding button.

Picker Dialog

Many Available Items and Selecting is a minor use case.

(image)

If changing the selection is not a major use case – e.g. it is important to display the selection for reference, but the actual selection is not changed often – provide available items in a dialog.

In the dialog, items are usually provided in a list view with multiple selection enabled. For each item, a checkbox or icon should indicated if the item has already been selected. Confirming the dialog will add the items to the list of selected items in the parent window.

Add-Ons

Sequence matters. (isn't this a part of the appropriate solutions above? - B)

If the sequence of selected items matters, two buttons are placed right of the box with selected items.

(image)

They are for moving one or more items up or down in the right box. They enabled only when an item is selected and can be moved.

Items can also be moved up and down the right list be dragging.