Difference between revisions of "Projects/Usability/HIG/SOU Workspace/Edit List"

Jump to: navigation, search
Line 10: Line 10:
  
 
==== Picker Dialog ====
 
==== Picker Dialog ====
 +
 +
A group of items that is displayed regularly but is changed (items being added or removed) only rarely is available to the user. Because of the infrequency of use, save valuable screen space by only showing the full list of items on demand.
  
 
If the typical user in a typical context will need to know what items are selected, but is unlikely to add or remove items from the list, use the Picker Dialog.
 
If the typical user in a typical context will need to know what items are selected, but is unlikely to add or remove items from the list, use the Picker Dialog.
 +
 +
[[Image:PickerList1.png]]
 +
 +
''A list of items from which a picker dialog is launched.''
 +
 +
 +
* The target list is not directly editable. Provide an "edit" or "add" button at the bottom left of the list.
 +
** If the order of available items can be changed, provide up/down buttons to the bottom right of the list. Drag and drop may also be used in addition.
 +
 +
 +
[[Image:PickerList2.png]]
 +
 +
''The Picker Dialog displayed.''
 +
 +
 +
* On clicking the "edit" or "add" button the Picker Dialog is displayed above the target list while ensuring that the target list can still be viewed.
 +
 +
* The Picker Dialog includes:
 +
** the complete list of available items
 +
** a title of the available items located at the top of the list
 +
** a checkbox for each item to the left of the item name (see [[../Rich Lists|Rich Lists]] if more information must be displayed)
 +
** a close button to the bottom right of the dialog
 +
 +
* Upon selecting a checkbox the item is immediately displayed in the target list.
 +
 +
 +
Example image:
 +
 +
[[Image:Picker.png]]
 +
 +
  
 
==== Two Lists with Arrow Buttons ====
 
==== Two Lists with Arrow Buttons ====

Revision as of 19:08, 16 September 2008

Summary

The user has to select from a pool of items or options. What items are displayed and their order or sequence may have some relevance to the user.

In some cases this list must be accessed on a regular basis, on others very rarely.

Solution

Determine when the user will need to access the pool of available items.

Picker Dialog

A group of items that is displayed regularly but is changed (items being added or removed) only rarely is available to the user. Because of the infrequency of use, save valuable screen space by only showing the full list of items on demand.

If the typical user in a typical context will need to know what items are selected, but is unlikely to add or remove items from the list, use the Picker Dialog.

PickerList1.png

A list of items from which a picker dialog is launched.


  • The target list is not directly editable. Provide an "edit" or "add" button at the bottom left of the list.
    • If the order of available items can be changed, provide up/down buttons to the bottom right of the list. Drag and drop may also be used in addition.


PickerList2.png

The Picker Dialog displayed.


  • On clicking the "edit" or "add" button the Picker Dialog is displayed above the target list while ensuring that the target list can still be viewed.
  • The Picker Dialog includes:
    • the complete list of available items
    • a title of the available items located at the top of the list
    • a checkbox for each item to the left of the item name (see Rich Lists if more information must be displayed)
    • a close button to the bottom right of the dialog
  • Upon selecting a checkbox the item is immediately displayed in the target list.


Example image:

Picker.png


Two Lists with Arrow Buttons

If it is likely that the items will be changed on a regular basis, use Two Lists with Arrow Buttons.


Related

with Arrow Buttons]]


Content is available under Creative Commons License SA 4.0 unless otherwise noted.