Conservative Design: Option List

This is another post in the series entitled Conservative Design Patterns for Form Elements.

Next we'll look at a web component that is almost ubiquitous among user interfaces today, the Option List. The Option List can take any one of the following three forms.

1. Multiple Selections: User can select any number of the options presented to them. Types: Checkbox Group, Multiple Select Element
2. Single Selection: User can select none or one of the options available. Types: Radio Group, Select Element
3. User Input List: User types in the options that they want to use. All inputs are marked as selected. Types: Group of Textboxes

We'll describe each of these variants separately.

Multiple Selections:

Minimum Feature Set:

• Validation: The user can select at least one, an integer range of options, or any number of the options presented.
• Quick Links: optional links to select all options, clear the options, and toggle the options to the opposite value of what they currently hold.
• Customizable Values: optionally allow the user to add their own options (one, an integer range, or many) to the list.
• Other Variants: Any Select+ Element, as described in the original post.

Single Selection:

Minimum Feature Set:

• Validation: The user can select at most one of the options presented.
• Quick Link: optional link to clear the options
• Customizable Value: optionally allow the user to add their own option (only one is required, since only one can be selected).
• Other Variants: Any Select1 Element, as described in the original post.

User Input List:

Minimum Feature Set:

• Validation: The user must have at least one of the text fields with a value (doesn't matter which one). Or the user must have an integer range number of fields with values.
• Quick Link: optional link next to an element to remove that element from the list (not clear it, remove it)
• Customizable Values: optionally allow the user to add their own options (up to an integer limit).
• Other Variants: Any List of InputX Elements, as described in the original post (could be passwords or textareas).

The images above for all three component types show a textbox for the addition of another option, but this should also allow customization to allow any type of (Select+ or InputX) element for the addition of another option.

Technorati Tags: Design Patterns, Interface Design, HTML, JavaScript

Thanks for reading. If you found this article useful, and you've read through some of my previous articles, you might as well subscribe to my blog. You'll save me some bandwidth that way.