Wednesday, September 10, 2008

Alternative List Box UI

A better way to show list boxes ...

"List boxes can act as a set of radio buttons (allowing people to select exactly one choice from a set of mutually exclusive options) or as a set of checkboxes (allowing people to select any number of choices from a list of options). List boxes can be configured to show more options than a drop-down menu while still taking up less screen real estate than a list of radio buttons or checkboxes. Despite these advantages, the dual nature of list boxes (mutually exclusive single selection or multiple selection) tends to cause problems for many people. As a result, list boxes are rarely used in Web forms.

Joe Mako recently pointed me to an alternative solution for selecting multiple options within a form: Alternate Select Multiple.

* Doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.
* Selected elements are always visible while unselected elements are always hidden (within a drop-down).
* Unlike regular list box elements, those on Alternate Select Multiple are optionally sortable with drag and drop.
* If a user does not have javascript, then the regular list box element is used instead (progressive enhancement).
* Check out the demo.
* Article about the advantages & disadvantages of this approach and others for multiple selection in Web forms."    (Continued via Functioning Form, LukeW)    [Usability Resources]

Selecting multiple options within a form. - Usability, User Interface Design

Selecting multiple options within a form.


Post a Comment

<< Home

<< Home