Difference between revisions of "Projects/Usability/HIG/DualList"

(New page: == 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...)

* 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.

+

** 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.

−

* 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.

* 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.

** Only enable the up/down buttons when an item is selected and can be moved.

Revision as of 19:41, 2 September 2008

Contents

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 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.