The Essential Guide to UI Design

720Part 2: The User Interface Design Process

—Out-of-specified-range data: Red.

—Captions and labels: Lavender, lime green, or cyan.

■Display area-fill patterns in the following colors:

—Widely spaced dots: Red.

—Closely spaced dots: Green.

—Wide dashed lines: Magenta.

—Narrow dashed lines: Cyan.

—Wide crosshatch: Blue.

–– Narrow crosshatch: Yellow.

For measurements, Smith (1986) recommends the above. They balance emphasis considerations (gray for grids, yellow for data points, lavender, lime green, or cyan for labels) and human expectations (red for out-of-specified range). Marcus (1986a) recommends that all text and the horizontal and vertical axis lines of a statistical graphic should be off-white. This will aid in focusing users’ main attention on the colored data. To ensure that fill-in area patterns are identifiable, discriminable, and free from unintended brightness effects, Smith (1988) recommends the above.

Physical Impressions

■Size:

—To convey an impression of

•Larger: Use bright or saturated colors.

•Smaller: Use dark or desaturated colors.

•Similar: Use colors of equal lightness.

■Weight:

—To convey an impression of

•Heavy: Use dark, saturated colors.

•Light: Use light, desaturated colors.

■Distance:

—To convey an impression of

•Close: Use saturated, bright, long-wavelength (red) colors.

•Far: Use saturated, dark, short-wavelength (blue) colors.

■Height:

—To convey an impression of height, use desaturated, light colors.

■Depth:

—To convey an impression of depth, use saturated, dark colors.

■Concentration level:

—To convey an impression of concentration level, use

•High: Saturated colors.

•Low: Desaturated colors.

■Magnitude of change:

—To convey an impression of magnitude of change, use

•Lowest: Short-wavelength (blue) colors.

•Highest: Long-wavelength (red) colors.

Step 12: Choose the Proper Colors 721

■Actions:

—To convey an impression of action, use

•Required: Long-wavelength (red) colors.

•Not required: Short-wavelength (blue) colors.

■Order:

—To convey an impression of order with color, use

•Low end of a continuum: Short-wavelength (blue) colors.

•High end of a continuum: Long-wavelength (red) colors.

—When displaying an array of ordered colors, position

•Short-wavelength colors at the left side or at the bottom.

•Long-wavelength colors at the right side or at the top.

—To convey an impression of order with value or lightness, use the lightness order of a color (darkest to lightest or vice versa).

■Neutrality:

–– To convey an impression of neutrality, use black, gray, and white.

Colors yield different physical impressions. Bright, saturated colors convey a feeling of large and close. Dark, saturated colors mean heavy, far, and impression of depth. Desaturated, light colors indicate a light weight and height. Desaturated dark colors mean smaller. Long-wavelength (red) colors are associated with high rate of change, action required, and the high end of a continuum. Short-wavelength (blue) colors are associated with low rate of change, no actions required, and the low end of a continuum. Neutrality is best indicated by black, gray, or white.

Choosing Colors for Web Pages

■Purpose:

—Color must always have a meaningful purpose.

■Palette:

—Use the browser 216-color palette.

■Presentation:

—Minimize the number of presented colors.

—Always consider color in context.

—Use similar or the same color schemes throughout.

—For foregrounds: Use black or strong colors for text and headings.

—For backgrounds: Use weaker contrasting colors such as off-white or light gray.

—Use a uniform color in large areas.

—The smaller the element, the more contrast is required between it and its background.

—Larger images should use

•Flat, Web-safe colors.

•Fewer colors than small images.

—Select colors that can be easily reproduced in black and white.

722Part 2: The User Interface Design Process

■Links:

—Use default colors for links.

•Make unselected/unvisited links blue.

•Make selected/visited links purple.

—Do not display non-link text in link colors.

■Testing:

–– Test all colors.

Purpose. Color should always be used for a meaningful purpose. Acceptable uses include highlighting or calling attention to information, grouping related information, designating selected links, giving a site an identity, or communicating realism for images. Color without a purpose is gratuitous and visually distracting.

Palette. Use colors that succeed on a variety of platforms or browsers. There are 216 colors (out of the standard 256 colors) that will always look the same on any monitor at any resolution. This is called the browser-safe palette, and it is illustrated on several Web sites. A search on “color palette” or a similar term will lead to these Web sites.

Presentation. Colors should be carefully chosen to aid users in understanding content, to keep a page well balanced, and to keep it graphically simple. Always minimize the number of presented colors. Too much color makes it difficult for people to notice something that might be really important, and makes it difficult to comprehend how color is being used to aid in understanding the screen’s content. Christmas trees should be reserved for December 25; the “Las Vegas effect” (as the gratuitous use of color is also sometimes called) should be confined to a region in southern Nevada. Minimizing the use of color will also have page download benefits. Fewer colors means faster downloads.

Always consider color in context, never in isolation. One background color interacts with other background colors. Foreground text colors and graphics interact with background colors. When choosing colors, consider these interactions and use colors that work well together. Use similar or the same color schemes throughout a Web site. This will give the site an identity and help the user maintain a sense of place.

Foreground colors should be as different as possible from background colors. A contrasting foreground will maximize text legibility. A background color should organize a group of elements into a unified whole, isolating them from the remainder of the screen. Use background colors that do not compete with the foreground. A background must be subtle and subservient to the data, text, or symbols on top of it. With today’s high-resolution monitors, the most recommended foreground text color is black presented on a light-colored background of low intensity, either off-white or light gray. Most other pastel colors, especially spectrum center colors, have also been found to be acceptable as backgrounds (Pastoor, 1990). Use dark backgrounds only when establishing contrast between an area of the screen and the main screen body. High intensity colors as backgrounds (such as red, magenta and bright green) must be avoided as they can be visually fatiguing when viewed for a period of time. Short-wavelength, cool

Step 12: Choose the Proper Colors 723

colors (blue and black) have been found to be preferred for dark backgrounds (Lalomia and Happ, 1987). Cool, dark colors visually recede, providing good contrast to the advancing lighter, foreground colors. Blue is especially good because of the eye’s lack of sensitivity to it in the retina’s central area and increased sensitivity to it in the periphery.

When choosing foreground and background colors, ensure that contrasting combinations are selected. See Tables 12.3 and 12.4 for color selection guidance. Also, always test all selected foreground and background colors. What may look good in theory may not always look as good in reality.

Use a uniform color in large screen areas. Large areas of the same color download faster. They compress well and are an efficient use of the GIF format. The smaller the element, the more contrast is required between it and its background. To reduce image file sizes for larger images, use flat Web-safe colors. Also use fewer colors with smaller images. Finally, select colors that can be easily reproduced in black and white on a screen or printer. This ensures that those who use a monochrome display or print in black and white will have a faithful reproduction of the intended screen.

MAXIM Content is always more important than color.

Links. Unselected/unvisited links must be distinguishable from selected/visited links. Stick with the default colors of blue for links already followed and purple for links not yet ventured down. While the choice of blue as a text color was poor because of its degraded reading ability, it is well learned, its use is recommended because it is now very familiar. Using nonstandard link colors can lead to severe problems. It is difficult to remember what color means what, increasing link selection errors. It can also lead to confusion with normal underlined text in a document. Never display general screen text in the link colors of blue and purple. This will create confusion between linked and non-linked text. It is acceptable, however, to use these colors in text that is large and decorative in nature and acting as a graphic and not plain text.

Testing. The possibility always exists that identical colors may appear differently on different monitors and platforms. Color choices should be tested on a variety of displays.

Uses of Color to Avoid

■Relying exclusively on color.

■Too many colors at one time.

■Highly saturated, spectrally extreme colors together:

— Red and blue, yellow and purple.

■Low-brightness colors for extended viewing or older viewers.

■Colors of equal brightness.

724Part 2: The User Interface Design Process

■Colors lacking contrast:

—For example, yellow and white; black and brown; reds, blues, and browns against a light background.

■Fully saturated colors for text or other frequently-read screen components.

■Pure blue for text, thin lines, and small shapes.

■Colors in small areas.

■Color for fine details.

■Non-opponent colors.

■Red and green in the periphery of large-scale displays.

■Adjacent colors that only differ in the amount of blue they possess.

■Single-color distinctions for color-deficient users.

■Using colors in unexpected ways.

■Using color to improve legibility of densely packed text.

The proper use of color in screen design also suggests some things to avoid.

Relying exclusively on color. Consider the needs of color-blind viewers and the effects of ambient lighting on color perception. Do not underestimate the value and role of other techniques, such as spatial formatting and component locations in good screen design.

Too many colors at one time. Using too many colors at one time can eliminate the benefits of color. Response times are increased, erroneous associations made, the handling of information is interfered with, and confusion is created. The objective is a screen that communicates; a colorful screen is not the objective. Use just enough colors to create effective communication. Again, consider the value of other techniques such as spatial formatting and consistent component locations in good design.

Highly saturated, spectrally extreme colors together. Spectrally extreme combinations can create eye focus problems, vibrations, illusions of shadows, and afterimages. In addition to red/blue and yellow/purple, other combinations that might cause problems are yellow/blue, green/blue, and red/green.

Low-brightness colors for extended viewing or older viewers. The eye adapts to color during extended viewing. The eye’s capability also diminishes with age as the amount of light passing through the lens decreases. All colors will look less bright, and colors that are dim to begin with may not be legible. Brighter colors are needed to prevent reading problems.

Colors of equal brightness. Colors of equal brightness cannot be easily distinguished. A brightness difference must exist between adjacent colors.

Colors lacking contrast. Colors lacking contrast also cannot be easily distinguished. Similar foreground and background colors often do not have sufficient contrast with each other.

Fully saturated colors for frequently read screen components. Fully saturated colors excessively stimulate the eye, possibly causing visual confusion and fatigue.

Step 12: Choose the Proper Colors 725

Pure blue for text, thin lines, and small shapes. Because of its physical make-up, the eye has difficulty creating a clear and legible image of small blue shapes. They will look fuzzy.

Colors in small areas. Distortions in color, lightness, and saturation may occur for small areas of color.

Colors for fine details. Black, gray, and white will provide much better resolution. Reserve other colors for large areas or attracting attention.

Non-opponent colors. Non-opponent colors, red/yellow or green/blue, produce poorer images. Opponent colors, red/green or yellow/blue are good combinations for simple displays.

Red and green in the periphery of large-scale displays. The edges of the retina are not particularly sensitive to red and green. Avoid these colors in the periphery, especially for small symbols and shapes. Yellow and blue are much better peripheral colors.

Adjacent colors only differing in the amount of blue they possess. Because of the eye’s difficulty in dealing with blue, differences in color based upon varying amounts of blue in the color’s mixture will not be noticed.

Single color distinctions for color-deficient users. For those people with colorviewing deficiencies, distinguishing certain colors may be difficult or impossible. Always provide a redundant coding scheme.

Using colors in unexpected ways. Colors have become associated with certain meanings. Red, for example, is always associated with stop or danger. To display a critical or error message in green would violate an ingrained association and cause confusion. Always use colors in the way people expect them to be used.

Using color to improve legibility of densely-packed text. Space lines between paragraphs of text or after about every five lines of data will work much better.

Too many colors at one time (again). Never overuse color (again, this is important). Too many colors at one time may make a screen confusing or unpleasant to look at. Use only enough color to fulfill the system’s objectives.

Step 12 Exercise

An exercise for Step 12 can be found on this book’s companion Web site, www.wiley

.com/college/galitz.

728 Part 2: The User Interface Design Process

Organizing and Laying Out Screens

How a screen is organized and how its information is actually presented are crucial to achieving the design goals of fast and accurate comprehension and control execution. Following is a summary of numerous design principles that can be applied toward these ends. They have all been fully addressed in earlier chapters, but are restated here for quick referral and as a reminder of their importance.

General Guidelines

■Amount of information:

—Present the proper amount of information on each screen.

•Too little is inefficient.

•Too much is confusing.

—Present all information necessary for performing an action or making a decision on one screen, whenever possible.

■Organization and flow:

—Divide information into units that are logical, meaningful, and sensible.

■Organize by the degree interrelationship between data or information.

■Provide an ordering that

•Is prioritized according to the user’s expectations and needs.

•Is logical and sequential.

•Is rhythmic, guiding a person’s eye through the display.

•Encourages natural movement sequences.

•Minimizes pointer and eye movement distances.

■Control placement:

—Position the most important and frequently used controls at the top left.

—Maintain a top-to-bottom, left-to-right flow.

—If one control enables or affects another, the enabling control should be above or to the left of the enabled control.

—Place the command buttons that affect the entire window horizontally, and centered, at the window’s bottom.

■Navigation:

—The flow of interaction should

•Require as little cursor and pointer travel as possible.

•Minimize the number of times a person’s hand has to travel between the keyboard and the mouse.

—Assist users in navigating through a screen by

•Aligning elements.

•Grouping elements.

•Using line borders.

■Aesthetics:

—Provide a visually pleasing composition through

•Adequate use of white space.

•Balance.