Principles of Good Interface and Screen Design 163

Step 3: Principles of Good Interface and Screen Design 163

effectiveness of highlighting techniques in aiding comparing and finding discrepan- cies in a pair of data in a matrix. The highlighting techniques of blinking, reverse video, and a different color (red) were compared with no highlighting. Participants were significantly faster at identifying discrepancies when they were highlighted. Highlighting, to be effective, of course, must be appropriate to the task. Silvers and Keiner (1997) found that inappropriate highlighting of text resulted in lower reading comprehension scores. Visual emphasis, however, should always be used sparingly if it is to be effective.

Brightness.

A brighter element has a good attention-getting quality and no disturb-

ing features. It may be used to indicate items in error, and increased brightness is the best vehicle for calling attention to data on inquiry screens. Do not use more than two brightness levels on a screen. If brightness has a fault, it is that displays with improperly set manual screen contrast controls can diminish its effective- ness, even causing it to disappear. This can be a major problem for displays placed in exceptionally bright viewing conditions.

Reverse polarity. Inverse video reverses an element’s polarity. For example, on a

screen with a specific level of dark text and a specific level of light background, certain elements can be emphasized by displaying them in the reverse: a text of the same lightness as that used on the regular screen on a background of the same darkness as is used on the regular screen. For old text-based screens, reverse polarity meant displaying dark text on a light background, or reversing the standard light text on dark background. During the 1980s several studies comparing this reverse were performed and, in general, no differences in perfor- mance, eye-scanning behavior, or feelings of visual fatigue were uncovered. One study, however, did find reverse polarity more visually fatiguing, while another found green and orange phosphor reverse polarity screens easier to read but found no differences in white phosphor readability. These studies contributed to the popularity of orange phosphor screens at that time. In those days, it was gen- erally found that people preferred dark background screens to white background screens because of the harshness and excessive brightness of backgrounds. There was one benefit to light background screens, however. Dark background screens can create a viewing problem, their mirror-like surfaces reflecting light from other outside sources back into the screen viewer’s eyes. Light background screens absorb most of this light, instead of reflecting it back to the screen viewer.

For elements of screens — pieces of data, messages, and so on — reverse polarity has a very high attention-getting quality. It can be effectively used for items selected, items in error, information being acted upon, or information of current relevance. Some cautions should be taken with reverse polarity. If reverse polarity is used to identify one kind of element, such as a text box or other boxed control, avoid what can best be described as the crossword puzzle effect — the haphazard arrangement of elements on the screen creating an image that some- what resembles a typical crossword puzzle. An arrangement of elements might

be created that tries to lead the eye in directions that the designer has not intended or causes elements to compete for the viewer’s attention. The cause of this problem is using reverse polarity for too many purposes or by poor align-

164 Part 2: The User Interface Design Process

and alignment and columnization rules will minimize this effect. If reverse polar- ity is used to highlight information such as messages or actions to be taken, allow an extra reversed character position on each side of the information. This will leave a margin around the information, improving legibility and giving it a more pleasing look. Last, reverse polarity can make text harder to read if the screen res- olution and character sizes are not sufficient. A light screen background can actu- ally bleed into its dark characters, reducing their legibility. This is a phenomenon called iridescence.

Distinctive typeface. Differences in fonts have a moderate attention-getting capa- bility. Their varying sizes and shapes can be used to differentiate screen compo- nents. Larger, bolder letters can be used to designate higher-level screen pieces, such as different levels of headings, if the headings are used to search for some- thing. Do not use larger fonts, however, for entry/modification (conversational) and display/read-only screens, because this will place too much emphasis in the headings themselves. Emphasis should go to the screen data. If you are using multiple fonts, never use more than two styles or weights, and three sizes, on a screen. As a highlighting technique, detectable difference between the fonts will

be difficult to achieve. Bolding, Italics, and Underlining. These techniques can be used to provide subtle differences in screen elements. Bolding adds minimal noise to a design and high-

lights important elements and is generally the preferred technique. Italics, while adding minimum noise, is less detectable and legible. Underlining is a moderate attention-getting mechanism, but it adds noise and can reduce legibility, so it should be used conservatively and carefully. In graphical systems it is commonly used to designate keyboard equivalents or mnemonics. In Web pages it is now used to designate navigation links. It should only be used for that function.

Blinking. Blinking has a very high attention-getting capability, but it reduces text readability and is disturbing to most people. It often causes visual fatigue if used excessively. Therefore, it should be reserved for urgent situations and times when

a quick response is necessary. A user should be able to turn off the blinking once his or her attention has been captured. The recommended blink rate is 2 to 5 Hz, with a minimum “on” time of 50 percent. An alternative to consider is creating an “on” cycle considerably longer than the “off,” a wink rather than a blink.

Line rulings and surrounding boxes or frames. Use lines to emphasize and guide the user’s eye through the screen. Use horizontal rulings as a substitute for spaces when breaking a screen into pieces. Use vertical rulings to convey to the screen viewer that a screen should be scanned from top to bottom. Use rules to surround radio button and check box controls, and other groupings of controls or important single controls. While many groupings are obvious without borders, borders certainly reinforce their existence. Use no more than three line thick- nesses or two line styles on a screen.

Colors. Use color to emphasize and assist in the identification of screen compo- nents. Some colors appear brighter than others. Parts of images or text comprised of brighter colors seem to gain focus first. Presenting some elements in brighter colors and others in darker colors aids people in determining their relative