Chapter 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 mutually-exclusive 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-Based Web Design & Usability Guidelines

13:1 Distinguish Required and Optional Data Entry Fields

121

Guideline: Distinguish clearly and consistently between required and optional data entry fields.

Comments: Users should be able to easily 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:

Headings, Titles, and Labels

Links

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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

Research-Based Web Design & Usability Guidelines

13:2 Label Pushbuttons Clearly

122

Relative Importance:

Guideline: Ensure that a pushbutton’s label clearly indicates its action.

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

Effective use of short phrases leaves no doubt in the user’s mind as to what will happen when the pushbutton is clicked.

13:3 Label Data Entry Fields Consistently

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

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.

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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

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

Comments: Do not make user-entered codes case 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:

Relative Importance:

Strength of Evidence:

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

13:5 Label Data Entry Fields Clearly

124

Relative Importance:

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

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

A good design:

Each data entry field has an associated descriptive label.

13:6 Minimize User Data Entry

Relative Importance:

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

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

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.

13:7 Put Labels Close to Data Entry Fields

126

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.

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:

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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.

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.

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:

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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

13:9 Use Radio Buttons for Mutually Exclusive Selections

128

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

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 drop-down lists. Radio buttons are also preferred over both open lists and drop-

down lists.

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

Example:

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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.

13:10 Use Familiar Widgets

Relative Importance:

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

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

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 drop-down box would be a more suitable widget.

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

13:11 Anticipate Typical User Errors

130

Relative Importance:

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

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 site’s 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:

Strength of Evidence:

Screen-Based Controls (Widgets)

13:12 Partition Long Data Items

Relative Importance:

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

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

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.

13:13 Use a Single Data Entry Method

132

Relative Importance:

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

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

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 user’s data entry task.

13:14 Prioritize Pushbuttons

Relative Importance:

Guideline: Use location and highlighting to prioritize pushbuttons.

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

The ‘Search’ button is placed in the first position.

13:15 Use Check Boxes to Enable Multiple Selections

134

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

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:

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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.

13:16 Label Units of Measurement

Relative Importance:

Guideline: When using data entry fields, specify

the desired measurement units with the field labels rather than requiring users to enter them.

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

See page xxii for detailed descriptions of the rating scales

13:17 Do Not Limit Viewable List Box Options

136

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

Comments: Scrolling to find an item in a list box 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:

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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.

13:18 Display Default Values

Relative Importance:

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

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:

Strength of Evidence:

Screen-Based Controls (Widgets)

See page xxii for detailed descriptions of the rating scales

13:19 Place Cursor in First Data Entry Field

138

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.

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:

Relative Importance:

Headings, Titles, and Labels

Links

Screen-Based Controls (Widgets)

Strength of Evidence:

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.

Comments: Many users double-click on a link when 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.

Relative Importance:

Strength of Evidence:

Research-Based Web Design & Usability Guidelines

13:21 Use Open Lists to Select One from Many

139

Guideline: Use open lists rather than drop-down lists to select one from many.

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:

Relative Importance:

Screen-Based Controls (Widgets)

Headings, Titles, and Labels

Links

Headings, Titles, and Labels

Strength of Evidence:

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

Research-Based Web Design & Usability Guidelines

13:22 Use Data Entry Fields to Speed Performance

140

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

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:

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

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.’

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

Relative Importance:

Strength of Evidence:

13:24 Provide Auto-Tabbing Functionality

Guideline: Provide auto-tabbing functionality for frequent users with advanced Web interaction skills.

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.

Relative Importance:

Screen-Based Controls (Widgets)

Strength of Evidence:

13:25 Minimize Use of the Shift Key

Relative Importance:

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

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.

Strength of Evidence:

See page xxii for detailed descriptions of the rating scales