Difference between revisions of "Projects/Usability/HIG/SOU Workspace/Picker"

Jump to: navigation, search
(use subpages)
Line 26: Line 26:
 
** the complete list of available items
 
** the complete list of available items
 
** a title of the available items located at the top of the list
 
** 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 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
 
** a close button to the bottom right of the dialog
  
Line 32: Line 32:
  
 
=== Related Patterns: ===
 
=== Related Patterns: ===
[[Edit Lists]]; [[Two Lists with Arrow Buttons]]
+
[[../Edit Lists|Edit Lists]]; [[../Two Lists with Arrow Buttons|Two Lists with Arrow Buttons]]

Revision as of 21:24, 2 September 2008

Picker Dialog

Summary

A group of items that might be changed on a rare occasion (such as added, removed or re-ordered) 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.

Solution

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.

Related Patterns:

Edit Lists; Two Lists with Arrow Buttons


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