Projects/Usability/HIG/DualList
Edit Lists: Two lists with arrow buttons
Summary
The user may choose to select from a pool of items on a regular basis. Two lists are used so that the user can see the list of available items and the list of current items simultaneously.
Solution
[image]
Optional items include scrollbars and a drop-down list if available items must be categorized. The buttons used to sort the target list should only used if the list is sortable and it makes sense to sort it.
- The list representing the pool of available items is on the left of the dialog and the current items in the order they exist is to the right. Ensure that the list boxes are of equal height and width.
- Place move/remove buttons (right and left arrows) centered and in between the two lists. Items are moved from the available pool of items to the list of current items. If an instance of one item can be repeated (such as a spacer), copy (rather than move) the item from the available pool of items to the list of current items.
- 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 in addition to the move/remove buttons. Double-clicking an item has the same effect as pressing the corresponding button.
- If the list of current items can be reordered, place up/down buttons to the right of the list of current items.
- Only enable the up/down buttons when an item is selected and can be moved.
- Drag and drop may also be used in addition to reorder the list.