Principles of Good Interface and Screen Design 221

Step 3: Principles of Good Interface and Screen Design 221

to as conversational screens. They guide a person through a task or process. The screen itself is the user’s focal point for working with information. The viewer is driven by what is presented on the screen in the information collection and designation process. The information needed to complete a screen may be collected from, but is not limited to, these kinds of sources:

A person being interviewed or queried at a desk or workstation.

A person being queried or interviewed over a telephone.

A collection of notes and written materials.

An unstructured form.

The mind of the user. These guidelines summarized here have been presented earlier in this chapter. Organization. Organize these screens logically and clearly, reflecting the exact

information needs of the user for the task being performed. In general, place the most frequently used information, or required information, on the earliest screens and at the top of screens.

Captions. Provide meaningful captions, clearly identifying the information to be

entered or selected. Use the headline style to display them (all significant words capitalized). Consistently position all captions in relation to their associated con- trols. They may be left- or right-aligned.

Text boxes/selection controls. Designate by boxes, using either a line border or polarity reversal. Spacing and groupings. Create logical medium-size groupings of from five to seven elements. Headings. Provide headings to identify groupings. Set off from their related con- trols using uppercase or mixed-case headline style. Control arrangement. Align controls into columns. Maintain a top-to-bottom, then left-to-right arrangement. Required and optional input. Distinguishing between required and optional data

input may or may not be necessary on these screens. The decision on whether or not to distinguish these types of data should be based on the experience of the user doing the key entry, and the information’s familiarity. When a technique to distinguish them is included on a screen, it is a form of completion aid, so the arguments for and against completion aids are applicable here as well. When it is necessary to differentiate required and optional data, consider the following alternatives. First, determine the feasibility of placing the two kinds of data on separate screens or within separate screen windows or groupings. This is the best and cleanest solution. If a meaningful screen organization of information will not permit this, then describe the individual pieces of data as required or optional within a completion aid. The last choice is to identify required information with a unique font or symbol. This alternative, however, requires the user to learn the convention to use it effectively. Displaying a unique font might also lead to screen clutter, if too many different fonts and styles are used on the screen.

222 Part 2: The User Interface Design Process Grids

Usage: — To enter large amounts of related data or information.

Design guidelines: — Provide descriptive headings and, where appropriate, subheadings for columns

and rows. • Do not include colons (:) after the headings.

— Justify column headings according to the data presented in the table cells. • Left-justify headings for columns containing text. • Right-justify headings for columns containing numbers.

— Left-justify row headings. — Organize the data or information to be entered logically and clearly.

• Place similar information together. • Place most important or frequently used information at the top. • Arrange information chronologically or sequentially.

— Grid format: • Provide alternate-row shading. • Use light backgrounds. • Avoid scrolling.

Usage. Large amounts of related data that must be entered can be collected in grids. Like a table, a grid is a matrix of entry fields arranged in columns and rows. Grids usually consume less screen space than do individual data elements.

Headings. Provide descriptive headings and, where necessary and appropriate, subheadings for columns and rows. Do not include colons (:) after the headings. Justify column headings according to the data presented in the table cells. Use left-justification for columns containing text, right-justification for columns con- taining numbers. Row headings should be left-justified.

Organization. The organization of grid data or information will follow the same general organizational guidelines previously described. Organize grid data logi- cally and clearly. Place most important or frequently used information at the top and arrange it meaningfully.

Rows. Visually distinguish individual rows by displaying alternate rows in a light color. As described previously, Tullis (2003) found that alternate-row shading yielded the best performance (speed and accuracy of response in finding relevant information) and was rated as the best alternative by study participants. Including alternate-row shading in a data entry task will aid the user in finding information when reviewing screen content. If alternate-row spacing cannot be implemented, or if more than seven rows are presented, insert extra white space after every fifth row.