Principles of Good Interface and Screen Design 159

Step 3: Principles of Good Interface and Screen Design 159

Rules also serve to guide the viewer’s eye in the desired direction. Use vertical rulings to convey to the screen viewer that information is organized vertically and should be scanned from top to bottom.

Line thickness variations. Too many variations in line thickness on a screen create

clutter and are distracting. Use no more than three line weights at one time, or two different styles. Use a standard hierarchy for rules, the thickest to differenti- ate major components, the thinnest for minor separation. Consider a thin border for individual controls, a slightly thicker border for groupings, and the thickest borders for windows themselves.

Consistent line widths and heights. Similarly, variations in line widths and heights

are distracting. Create horizontal lines of equal widths across the screen and ver- tical lines of equal height whenever possible. This will provide better balance.

Sufficient space padding. When placing information within borders leave “breath-

ing room,” sufficient space between the information and the borders themselves. Avoid looking like your 6 pounds are being stuffed into a 5-pound sack.

Alignment. For adjacent groupings with borders, whenever possible, align the bor-

ders left, right, top, and bottom. The most important alignment points are left and top. Do not create right and bottom alignment by leaving excessive white space within the area encompassed by the border. This is not visually appealing.

Use lines and borders sparingly. Too many lines and borders on a screen also create

clutter and can be distracting. Like any display technique, lines and borders must

be used sparingly. Web pages. In Web page design, be cautious in using horizontal lines as separators

between page sections. Users may assume they have reached the bottom of the page, missing what follows. Separator lines may also make the screen look more cluttered. In general, reserve horizontal lines for situations where the difference between adjacent areas must be emphasized.

160 Part 2: The User Interface Design Process

Figure 3.15: The effect of line or graphical borders. Groupings with borders.

Grouping Using Backgrounds

Consider incorporating a contrasting background for related information. — The background should not have the “emphasis” of the screen component that

should be attended to. Consider about a 25 percent gray screening. — Reserve higher contrast or “emphasizing” techniques for screen components to which attention should be drawn.

Information can also be visually tied together through using a background that con- trasts with the remainder of the screen. The background should just be a background, however; visual emphasis should be directed toward foreground material. A common failing of many screens is that the background is too highly emphasized. Consider about a 25 percent gray screening. Always reserve the higher contrast or emphasizing techniques for screen components in need of attention. Be very conservative in the variety of different backgrounds used. Background colors may also be used to relate or separate screen groupings. Color by itself is a poor separator of screen elements, how- ever. A border is always needed to properly set off adjacent areas of different colors. Colors should also be used with caution since the user may have the ability to change them. This may result in undesirable effects. Finally, less variation is always better than more. An additional discussion on color screen backgrounds is found in Step 12.

MAXIM Working with a system should never be painful; instead it should be so painless you forget what you are doing!