
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><style type="text/css">.felamimail-body-blockquote {margin: 5px 10px 0 3px;padding-left: 10px;border-left: 2px solid #000088;} </style></head><body>I moved the old HIG/SOU_Workspace/Two_Lists to HIG/DualList. The new page includes a short description, the substructure like other pages, and the harmonized appearance section.<br><br>We should discuss accessibility questions like "<font color="blue">Use different keys (e.g. page up/down) when more lists should be accessible."</font> and <font color="blue">"Create a buddy relation so access keys are assigned.</font>". <br>I suggest to provide up/down by cursor keys for the actual list, perhaps left/right to switch between the lists (rather than tab) and Ctrl+cursor left/right to move the selected items.<br>* Switch from the left to the right list by using the cursor right. To switch back use cursor left. Keep ctrl pressed to move (or copy) the selected item thereby.<br>* Do not override tab behavior.<br><br>Additionally, the caption cannot be aligned at top left but only above the control. I have no idea how to deal with this issue.<br><br>== Purpose ==<br>Multiple selection in lists with more than a few items might become difficult because selected as well as available items are not visible at once. As an alternative approach the ''dual-list pattern'' (also known as list builder, or paired lists) was introduced. It consists of two standard list boxes with the option to move items from one list to the other and back. Dual-lists are useful for extended multiple selection in general, especially for huge sets of items or in case of elaborate selections. The trade-off is the rather large amount of space that is needed to show two adjoined lists.<br>== Example ==<br>[[Image:twoLists.png]]<br><br>== Guidelines ==<br>=== Is this the right control === <br>* Use a dual-list pattern for multiple selection and in case of large lists.<br>* In case of limited screen real estate consider to change the workflow into repeated selections of smaller lists or by applying a hierarchy to the data.<br>* Do not use a dual list to show data primarily.<br>=== Behavior ===<br>* Make the left list the standard list containing all available options. The right list holds all currently selected items.<br>* Place move/remove buttons (right and left arrows) centered and in between the two lists.<br>* Disable a button if the respective list is empty.<br>* Provide drag ‘n drop of items between lists.<br>* Double click on an item adds it to the current list, or removes it respectively.<br>* Allow multiple selection of items within one list.<br>* 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.<br>* 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. <br>* Do not have blank list items; use meta-options, e.g. (None) instead.<br>* Place options that represent general options (e.g. All, None) at the beginning of the list.<br>* Sort list items in a logical order. Make sure sorting fits translation. <br>=== Appearance ===<br>* Ensure that the list boxes are of equal height and width.<br>* Alternate row color (use theme settings). <font color="blue">Use different keys (e.g. page up/down) when more lists should be accessible.</font><br>* Make both list controls large enough that it can show at least four items at a time without scrolling.<br>* If the lists appears in a dialog or utility window, consider making the window and the lists within it resizeable so that the user can choose how many list items are visible at a time without scrolling. Each time the user opens this dialog, set its dimensions to those that the user last resized it to.<br>* Label the list view with a descriptive caption <font color="blue">to the top </font>(cf. [[Projects/Usability/HIG/Form_Label_Alignment| alignment]]).<br>* <font color="blue">Create a buddy relation so access keys are assigned.</font><br>* Do not use ending punctuation (neither dot nor colon) for caption.<br>* Use [[Projects/Usability/HIG/Capitalization|sentence style capitalization]] for list view items.<br><br>=== Implementation ===<br><br></body></html>