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

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 of all available items is on the left.
• The list of current items in the order they exist is on 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.
  • The buttons to move items left and right are sensitive to the item selection and disabled if no items are selected.
  • 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.
  • 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.

Related patterns:

/Selecting Items from a Pool; /Picker Dialog