Principles of Good Interface and Screen Design 189 Data Fields

Step 3: Principles of Good Interface and Screen Design 189 Data Fields

For entry or modifiable data fields: — Display data within

• A line box. • A box with a contrasting light-colored background.

— Break long structured data items into logical pieces. — Provide a field length commensurate with the size of the entry.

For inquiry or display/read-only screens containing non-changeable data — Display the data on the normal screen background with no borders.

For temporarily inactive data fields — Display the data content of the data field lighter than active fields. — Do not change the background color of the entry area or lighten the caption.

Visually emphasize the data fields. Three kinds of data fields are found on screens. (1) Those into which data may be

entered, or that already contain data that may be modified, (2) those that display data that cannot be changed, and (3) those that may be temporarily inactive and not per- mitting changes. The design rules for each differ.

Entry or modifiable data field. An entry or modifiable field must possess the fol- lowing qualities:

Draw a person’s attention to the fact that information must be keyed or selected in it.

Not detract from the legibility of characters being keyed into it.

Permit easy designation of the kind or structure of the entry required, such as incorporation of slashes (/) in a date field.

Provide an indication of the maximum size of the entry required through field length.

In an early study using text-based screens, it was found that people overwhelmingly preferred that something should be displayed on a screen to indicate where data must be entered. In another study, it was found that the best alternatives for defining an entry field were a broken line under- score or a box. An underscore was traditionally used on text-based screens; the box is now recommended for, and should be used on, graphical screens and Web pages.

Break long structured data items into logical pieces. A telephone num- ber broken into three pieces, for example, will be easier to key and review for verification.

Create entry fields that are large enough to show all the entered data without scrolling. Provide the user an indication of the maximum size of the entry required in a data field through field length. If due to space con- straints a field must be shortened, provide field scrolling to capture the entire entry. If an entry field has a maximum limit, state that limit adjacent

190 Part 2: The User Interface Design Process

Display/read-only screens. For inquiry or display/read-only screens, it is best for the data to be presented on the background of the screen. This permits easier scanning and information location; the reasoning will be discussed in the “Display/Read-Only” screen organization section following shortly.

Temporarily inactive fields. If a displayed field is temporarily inactive, display the data content of the field lighter than the data content of active fields. Do not change the background color of the entry area or lighten the caption.

Visual emphasis. Data or information is the most important part of any screen. It should be highlighted in some manner, either through higher intensity, boldness, or a brighter color. Headings and captions are most important for the new or casual user. As people become familiar with a system and screens, their attention is immediately drawn to the data when a screen is presented. An experienced user will often work with a screen just perusing the data, ignoring captions and headings. Highlight the data so it will attract the user’s eyes. Other screen ele- ments will be easier to ignore.

Control Caption — Data Field Differentiation

Differentiate captions from data fields by using — Contrasting features, such as different intensities, separating columns, boxes,

and so forth. — Consistent physical relationships.

Figure 3.22

For single data fields — Place the caption to left of the data field.

Figure 3.23

— Align the caption with the control’s data. — Alternately, place the caption above the data field. — Align captions justified, upper left to the data field.

Figure 3.24

— Maintain consistent positional relations within a screen, or within related