Also known as: List of Items, Form Widgets, Input Fields.

This pattern is a stub. There are more input controls, such as list boxes, buttons, sliders controls etc, which will be described later.

Why

Text box

• Pros: Fast to use and flexible.
• Cons: Easy to make input errors.

Group of check boxes

• Pros: All options are always shown. Fast and easy to use.
• Cons: High screen estate usage.

Stand-alone check box

• Pros: Simple if the question is clearly worded. Low screen estate usage.
• Cons: Only the “on” state is expressed and therefore it requires some extra concentration to understand what it means when it is unchecked (especially if the question is negatively worded, e.g. “Don’t add me to the mailing list”).

Group of radio buttons

• Pros: All options are always shown.
• Cons: High screen estate usage.

Drop-down list

• Pros: Saves screen real estate.
• Cons: The user needs to open the list to see other options than the one currently selected.

How it works

General for all controls

• Label input controls clearly.
• Associate label elements with controls using tag.
• Highlight the control / control group currently being active using a light background color.
• Provide good default values.
• Try to be consistent. Prefer controls you have already used on the page.
• When you have a list of options, sort options in a logical order, and show meta options such as “None” and “All” at the beginning of the list.
• When you disable an input control, disable also labels associated with it.
• Don’t use the change of these controls to perform commands on the page.
  • (Exception: You can reveal dynamically follow-up question(s) based on user’s answer on the initial question. In other word, you can reveal more controls related to the selected control depending on the selection).

Text box

• Use Autocompletion if possible to help the user to provide the right answer quicker and without typographical errors.

Stand-alone check box & Group of check boxes

• Use positive phrasing for labels to make it easier to understand what it means when it is checked (Exception: “Don’t show this again”-checkbox).

Radio buttons

• If possible, make one of the options selected by default.
• Sometimes it is wise to provide a neutral “empty / none” option so that the user can cancel the selection.

Drop-down list

• Avoid blank items in the list since they might cause confusion. Prefer meta options such as “None” and “All”.

History

This pattern was created by Janne Lammi. It is inspired by “Control Choice” from Jenifer Tidwell’s book “Designing Interfaces: Patterns for Effective Interaction Design” and several other books and articles.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with input-controls