Screen-Based Controls (Widgets)

13

Screen-Based Controls (Widgets) In order to interact with a Web site, users

usually require the use of screen-based controls (sometimes known as widgets). Besides the pervasive link, commonly used screen-based controls include pushbuttons, radio buttons, check boxes, drop-down lists and entry fields. Designers should ensure that they use familiar widgets in a conventional or commonly-used manner. When pushbuttons are used, ensure that they look like pushbuttons and that they are clearly labeled. In some cases, the pushbuttons will need to be prioritized to facilitate their proper use. Radio buttons are used to select from among two or more mutuallyexclusive selections. Check boxes should be used to make binary choices, e.g., yes or no. Drop-down lists are generally used to select one item from among many. To speed user performance, show default values when appropriate, and do not limit the number of viewable list box options. Entry fields are used when completing forms and entering text into search boxes. Designers should try to minimize the amount of information entered by users. Each entry field should be clearly and consistently labeled, with the labels placed close to the entry fields. Designers should also clearly distinguish between required and optional data entry fields, and attempt to minimize the use of the Shift key. To facilitate fast entry of information, designers should automatically place the cursor in the first data entry field, provide labels for each field (e.g., pounds, miles, etc.), and provide auto-tabbing functionality. In order to increase accuracy of data entry, partition long data items into smaller units, enable the software to automatically detect errors, and do not require case-sensitive data entries. Showing users their data entries can increase accuracy. For experienced users, the fastest possible entry of information will come from allowing users to use entry fields instead of selecting from list boxes.
Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

13:1 Distinguish Required and Optional Data Entry Fields

Guideline: Distinguish clearly and consistently Comments: Users should be able to easily
between required and optional data entry fields. Relative Importance:

121

Headings, Titles, and Labels Links Headings, Titles, and Labels Screen-Based Controls (Widgets)

Strength of Evidence: determine which data entry fields are required and which are optional. Many Web sites are currently using an asterisk in front of the label for required fields. Other sites are adding the word required near the label. One study found that bolded text is preferred when compared to the use of chevrons (>>>), checkmarks, or color to indicate required fields.

Sources: Bailey, 1996; Fowler, 1998; Morrell, et al., 2002; Tullis and Pons,
1997.

Example:
Asterisks (*) and labeling data entry field names with 'required' are two popular and effective methods of distinguishing between optional and required data entry fields.

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

122

13:2 Label Pushbuttons Clearly

Guideline: Ensure that a pushbuttons label clearly
indicates its action.

Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: The label of a pushbutton should clearly

indicate the action that will be applied when the pushbutton is clicked. Common pushbutton labels include Update, Go, Submit, Cancel, Enter, Home, Next, and Previous.

Sources: Bailey, 1996; Fowler, 1998; Marcus, Smilonich and Thompson, 1995. Example:
Effective use of short phrases leaves no doubt in the users mind as to what will happen when the pushbutton is clicked.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

See page xxii for detailed descriptions of the rating scales

13:3 Label Data Entry Fields Consistently

Guideline: Ensure that data entry labels are worded Relative Importance:
consistently, so that the same data item is given the same label if it appears on different pages. Strength of Evidence:

123

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: If possible, employ consistent labeling

conventions. For example, do not use single words or phrases for some labels and short sentences for others, or use verbs for some and nouns for others.

Sources: Evans, 1998; Mahajan and Shneiderman, 1997; Smith and Mosier, 1986.

13:4 Do Not Make User-Entered Codes Case Sensitive

Guideline: Treat upper- and lowercase letters as
equivalent when users are entering codes. Relative Importance:

Comments: Do not make user-entered codes case

Strength of Evidence: sensitive unless there is a valid reason for doing so (such as increased security of passwords). If required, clearly inform users if they must enter codes in a case specific manner. When retaining data entered by users, show the data as it was entered by the user.

Sources: Ahlstrom and Longo, 2001; Smith and Mosier, 1986. Example:

A capital H is all that keeps a user from finding this Help page.

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

124

13:5 Label Data Entry Fields Clearly

Guideline: Display an associated label for each data
entry field to help users understand what entries are desired.

Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: Employ descriptive labels that clearly, concisely, and unambiguously

define the required entry. Make labels distinct enough so that readers do not confuse them with the data entries themselves. This can be done by bolding the labels or providing other visual cues, such as an asterisk.

Do not create new jargon when labeling data entry fields. Use common terms (e.g., male, female) rather than arbitrary labels (e.g., Group 1, Group 2). If the meaning of a proposed label is in doubt, conduct usability testing with an appropriate sample of qualified users.

Sources: Pew and Rollins, 1975; Smith and Mosier, 1986. Example:
A good design: Each data entry field has an associated descriptive label.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

See page xxii for detailed descriptions of the rating scales

13:6 Minimize User Data Entry

Guideline: Do not require users to enter the same
information more than once.

Relative Importance: Strength of Evidence:

125

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: Requiring re-entry of data imposes

an additional task on users, and increases the possibility of entry errors. When entries made by users on one page are required on another page, the computer should retrieve the original entries, rather than requiring re-entry of the same information. In general, require users to make as few entries as possible.

Sources: Czaja and Sharit, 1997; Smith and Mosier, 1986; Zimmerman, et al.,
2002.

Example:

Clicking this button will prompt the server to copy information from the Billing Address column to the Shipping Address column, thus eliminating the need for users to re-input the data (if it is the same).

This Web site minimizes user data entry by remembering IDs.

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

126

13:7 Put Labels Close to Data Entry Fields

Guideline: Ensure that labels are close enough to
their associated data entry fields so that users will recognize the label as describing the data entry field. Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: All labels and related information should

be close to the data entry field to enable users to easily relate the label and entries required.

Sources: Engel and Granda, 1975; Evans, 1998; Galitz, 2002; Smith and Mosier,
1986.

Example:

Placing labels very close to the data entry fields allows users to rapidly relate the label and the required entries.

Placing labels away from the data entry field slows users entry rates.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

13:8 Allow Users to See Their Entered Data

Guideline: Create data entry fields that are large
enough to show all of the entered data without scrolling. Relative Importance: Strength of Evidence:

127

Headings, Titles, and Labels Screen-Based Controls (Widgets)

Comments: Users should be able to see their

entire entry at one time. There always will be some users who will enter more data than can be seen without scrolling; however, try to minimize the need to scroll or move the cursor to see all the data for that field. If there is a character limit for a particular field, state that near the entry field. Designers should be particularly aware of the length of data entry fields used for entering search terms. One study found that this entry field should be at least 35-40 characters long to accommodate ninety-five percent of search terms being used.

Sources: Bailey, 1996; Bailey and Wolfson, 2005; Czaja and Sharit, 1997;
Fowler, 1998.

Example:
The text expands vertically so that a user can see even very long entries without having to scroll horizontally.

Data entry fields should be wide enough so that the user can see their entire entry without scrolling.

See page xxii for detailed descriptions of the rating scales

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

128

13:9 Use Radio Buttons for Mutually Exclusive Selections

Guideline: Provide radio buttons when users need to Relative Importance:
choose one response from a list of mutually exclusive options. Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: Radio buttons should be used when there

is a need to select from among mutually exclusive items. Users should be able to click on the button or its text label to make their selection. Assign one of the radio button choices as the default when appropriate. One study reported that for making mutually exclusive selections, radio buttons elicit reliably better performance than dropdown lists. Radio buttons are also preferred over both open lists and dropdown lists.

Sources: Bailey, 1983; Bailey, 1996; Fowler, 1998; Galitz, 2002; Johnsgard, et al.,
1995; Marcus, Smilonich and Thompson, 1995; Tullis and Kodimer, 1992.

Example:
If a user must be constrained to selecting one item in a list, employ radio buttons rather than check boxes.

Only one option is clickable for each individual task below.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

See page xxii for detailed descriptions of the rating scales

13:10 Use Familiar Widgets

Guideline: Use widgets that are familiar to your
users, and employ them in their commonly used manner.

Relative Importance: Strength of Evidence:

129

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: Do not assume that all users are familiar with all available

widgets. Unfamiliar widgets will slow some users, and cause others not to use the widget because they do not know how to make it work properly. For instance, one study showed that some users, particularly older users, do not know how to use a drop-down list. In choosing widgets, designers typically consider such issues as the amount of available screen real estate, reducing the number of user clicks, and whether the user will be choosing one from among many items, or several items at once. Usability test the performance and acceptability of widgets to ensure they do not confuse or slow users.

Sources: Bailey, Koyani and Nall, 2000; Nall, Koyani and Lafond, 2001. Example:
The circled widget is used in an unconventional manner. Users might expect this widget to be a text entry box. However, when a user places their cursor in the entry area, it invokes the linked text in the box at left from which the user must select the car type. A dropdown box would be a more suitable widget.

Users do not expect radio buttons to be used in this manner.

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

130

13:11 Anticipate Typical User Errors

Guideline: Use the computer to detect errors made
by users.

Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: Do not expect that users always will make

correct entries. Anticipate possible user errors, and when possible, allocate responsibility to the computer to identify these mistakes and suggest corrections. For example, if a date is entered as February 31, the computer should generate an error message asking for a revised entry. Design the sites search engine (and other places where users enter data) to accommodate common misspellings and certain other errors.

Sources: Bailey and Koyani, 2004; Bailey, 1983; Pew and Rollins, 1975; Smith
and Mosier, 1986.

Example:

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

See page xxii for detailed descriptions of the rating scales

13:12 Partition Long Data Items

Guideline: Partition long data items into shorter
sections for both data entry and data display.

Relative Importance: Strength of Evidence:

131

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: Partitioning long data items can

aid users in detecting entry errors, and can reduce erroneous entries. For example, it is easier to enter and verify a ten digit telephone number when entered as three groups, NNN-NNN-NNNN. Similarly, ZIP+4 codes and Social Security numbers are best partitioned.

Sources: Mayhew, 1992; Smith and Mosier, 1986. Example:

The Phone Number entry field is partitioned correctly. However, the ZIP+4 field should be broken out into two fields (one five digits long, and one four digits long, separated by a hyphen).

In this example, the first and last names, along with the social security number, should be partitioned.

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

132

13:13 Use a Single Data Entry Method

Guideline: Design data entry transactions so that
users can stay with one entry method as long as possible.

Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: Do not have users shift back and forth between data entry

methods. Requiring users to make numerous shifts from keyboard to mouse to keyboard can substantially slow their entry speed.

Sources: Czaja and Sharit, 1997; Engel and Granda, 1975; Foley and Wallace,
1974; Smith and Mosier, 1986.

Example: In this example, data entry methods are used consistently so that users do
not have to shift back and forth between mouse entry and keyboard entry.

This design forces users to switch between keyboard entry and mouse entry methods, and will slow the users data entry task.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

See page xxii for detailed descriptions of the rating scales

13:14 Prioritize Pushbuttons

Guideline: Use location and highlighting to
prioritize pushbuttons.

Relative Importance: Strength of Evidence:

133

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: If one pushbutton in a group of

pushbuttons is used more frequently than the others, put that button in the first position. Also make the most frequently used button the default action, i.e., that which is activated when users press the Enter key. One study reported that designers should place the button most likely to be clicked on the left side of a two-button set of buttons. This button arrangement allows the user to read the first button label, and since it is the most likely selection, click on that button immediately. Some users look at the left and then right button before making a selection, preferring to be fully informed before submitting a response.

Sources: Bailey, 1996; Fowler, 1998; Marcus, Smilonich and Thompson, 1995;
Walker and Stanley, 2004.

Example: The Search button is placed in the first position.

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

134

13:15 Use Check Boxes to Enable Multiple Selections

Guideline: Use a check box control to allow users
to select one or more items from a list of possible choices. Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: Each check box should be able to be

selected independently of all other check boxes. One study showed that for making multiple selections from a list of non-mutually exclusive items, check boxes elicit the fastest performance and are preferred over all other widgets. Users should be able to click on either the box or the text label.

Sources: Bailey, 1996; Fowler, 1998; Galitz, 2002; Johnsgard, et al., 1995;
Marcus, Smilonich and Thompson, 1995.

Example: Check boxes are most

appropriately used in these examples because users may wish to order more than one product or select more than one file format. Convention dictates that check boxes be used when more than one item in a list may be selected.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

13:16 Label Units of Measurement

Guideline: When using data entry fields, specify
the desired measurement units with the field labels rather than requiring users to enter them.

Relative Importance: Strength of Evidence:

135

Headings, Titles, and Labels Screen-Based Controls (Widgets)

Comments: Designers should include units such as minutes, ounces, or

centimeters, etc. as part of the data entry field label. This will reduce the number of keystrokes required of users (speeding the data entry process), and reduce the chance of errors.

Sources: Pew and Rollins, 1975; Smith and Mosier, 1986. Example:

See page xxii for detailed descriptions of the rating scales

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

136

13:17 Do Not Limit Viewable List Box Options

Guideline: When using open lists, show as many
options as possible. Relative Importance:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: Scrolling to find an item in a list box

Strength of Evidence: can take extra time. In one study, an open list that showed only three (of five) options was used. To see the hidden two items, users had to scroll. The need to scroll was not obvious to users who were not familiar with list boxes, and slowed down those that did know to scroll.

Sources: Bailey, Koyani and Nall, 2000; Zimmerman, et al., 2002. Example:
This open list shows as many options as possible given the amount of available screen real estate.

Despite plenty of screen real estate, only four of the six items in this list box are visible.

This site, even though the product is available in only four states, lists all 50, including the U.S. Virgin Islands. Only those four states provide counties, which are necessary before the Submit button can be chosen. This could be potentially confusing to users.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

13:18 Display Default Values

Guideline: Display default values whenever a
likely default choice can be defined.

Relative Importance: Strength of Evidence:

137

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: When likely default values can be defined, offer those values to
speed data entry. The initial or default item could be the most frequently selected item or the last item selected by that user. In general, do not use the default position to display a heading or label for that widget.

Sources: Ahlstrom and Longo, 2001; Bailey, 1996; Fowler, 1998; Marcus,
Smilonich and Thompson, 1995; Smith and Mosier, 1986.

Example:

See page xxii for detailed descriptions of the rating scales

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

138

13:19 Place Cursor in First Data Entry Field

Guideline: Place (automatically) a blinking cursor at
the beginning of the first data entry field when a data entry form is displayed on a page. Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets) Links

Comments: Users should not be required to move the

mouse pointer to the first data entry field and click on the mouse button to activate the field. Designers should consider, however, that programming this automatic cursor placement might negatively impact the performance of screen reader software.

Sources: Ahlstrom and Longo, 2001; Smith and Mosier, 1986. Example:
These two Web sites automatically place the cursor in the first data entry field.

13:20 Ensure that Double-Clicking Will Not Cause Problems

Guideline: Ensure that double-clicking on a link will
not cause undesirable or confusing results. Relative Importance:

Comments: Many users double-click on a link when

Strength of Evidence: only one click is needed. Developers cannot stop users from double-clicking, but they should try to reduce the negative consequences of this behavior. Usability testing has indicated that if users start with quick double-clicks, they tend to continue to do this for most of the test. Sometimes, when both clicks are detected by the computer, the first click selects one link and the second click selects a second link, causing unexpected (i.e., puzzling) results.

Sources: Bailey, Koyani and Nall, 2000; Fakun and Greenough, 2002.
Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

13:21 Use Open Lists to Select One from Many

Guideline: Use open lists rather than drop-down
lists to select one from many. Relative Importance: Strength of Evidence:

139

Screen-Based Controls (Widgets) Headings, Titles, and Labels Links Headings, Titles, and Labels

Comments: Generally, the more items users can

see in a list (without scrolling), the faster their responses will be, and the fewer omission errors they will make. Ideally, users should be able to see all available items without scrolling.

When compared with drop-down lists, open lists tend to elicit faster performance primarily because drop-down lists require an extra click to open. However, if a list is extremely long, a drop-down list may be better. The available research does not indicate the upper number limit of items that should be displayed in a list.

Sources: Bailey, 1996; Fowler, 1998; Marcus, Smilonich and Thompson, 1995. Example:
In this example, the designers opted to use a drop-down list to conserve screen real estate. This is a trade-off, however, as a drop-down list will slow users when compared with an open list.

See page xxii for detailed descriptions of the rating scales

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

140

13:22 Use Data Entry Fields to Speed Performance

Guideline: Require users to enter information using
data entry fields (instead of selecting from list boxes) if you are designing to speed human performance. Relative Importance: Strength of Evidence:

Screen-Based Controlsand Labels Headings, Titles, (Widgets)

Comments: At least two studies have compared the

effectiveness of text entry versus selection (list boxes) for entering dates and making airline reservations. Both studies found text entry methods were faster and preferred over all other methods. However, use of text entry fields tends to elicit more errors.

Sources: Bailey, 1996; Czaja and Sharit, 1997; Fowler, 1998; Gould, et al., 1988;

Gould, et al., 1989; Greene, et al., 1988; Greene, et al., 1992; Marcus, Smilonich and Thompson, 1995; Tullis and Kodimer, 1992.

Example:

If users entries cannot be easily defined or constrained (for example, their street address or a particular search term), use entry fields. However, if entries can be defined and errors reduced (state or country of residence) use list boxes. Be aware that alternating between these two entry methods will slow the user.

13:23 Use a Minimum of Two Radio Buttons

Guideline: Never use one radio button alone. Comments: Use at least two radio buttons together.
If users can choose not to activate any of the radio button choices, provide a choice labeled None. Relative Importance: Strength of Evidence:

Sources: Bailey, 1996; Fowler, 1998; Marcus,

Smilonich and Thompson, 1995.

Research-Ba s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s

13:24 Provide Auto-Tabbing Functionality

Guideline: Provide auto-tabbing functionality for
frequent users with advanced Web interaction skills. Relative Importance: Strength of Evidence:

141

Screen-Based Controls (Widgets) Headings, Titles, and Labels

Comments: Auto-tabbing can significantly reduce

data entry times for frequent users by not requiring them to manually tab from field to field.

Sources: Ahlstrom and Longo, 2001; Pew and Rollins, 1975; Smith and
Mosier, 1986.

13:25 Minimize Use of the Shift Key

Guideline: Design data entry transactions to
minimize use of the Shift key.

Relative Importance: Strength of Evidence:

Comments: If possible, designers should not require

users to enter characters that require the use the Shift key. Using the Shift key imposes a demand for extra user attention and time. For example, the designer can include symbols such as the dollar or percent sign near data entry fields rather than requiring users to enter those characters. Designers also can treat upper- and lowercases as equivalent when entered by users.

Sources: Card, Moran and Newell, 1980b; John, 1996; Smith and Mosier, 1986.

See page xxii for detailed descriptions of the rating scales

R e s e a r c h - B a s e d We b D e s i g n & U s a b i l i t y G u i d e l i n e s