DESIGNING A COLOR GRAPHICS PAGE (CHECKLIST)

The process sketched below is intended for design of color usage in complicated graphics that support high-information-load, high-threat decisions, as in aerospace applications. Design of the color scheme must take into account the overall design of the application's functionality--what the user is trying to do and how.

The process usually needs to be iterative, especially in complicated graphics. Problems encountered in later steps require going back to a previous step and restarting. In very simple cases it might be possible to leave out some steps , and other steps might take slightly different form in particular cases, but the overall logic of the recipe should be reliable. If the steps are all well executed, the resulting graphic should be usable, safe and efficient.

The design process for a color graphics display involves 6 steps which are divided into 2 main phases: data planning and design of the graphics implementation. A list of the color design process steps would look something like:

The importance of the data planning phase should not be underestimated. Knowing what information to display and what priority each level of information should have is critical to making color design decisions.

Phase 1: Data Planning

In complex applications these steps can be difficult and expensive in both time and money, requiring staff with sophisticated domain and human factors expertise. Nevertheless this is a critical part of the process. Without it there is no way to design graphics that are optimal for safety and efficiency.

Step 1: Compile a data inventory.

What information might one want displayed? Consider the mission of the page--exactly who is going to use it for exactly what tasks? Be inclusive at the initial stage--what additional data might be added within the lifetime of this design?

Step 2: Plan for management of users' attention.

Prioritize the data by how important or urgent they are to the activities that the user of the page will be conducting.

More on Creating Urgency Hierarchies.

Phase 2: Design the Graphics Implementation

Step 3: Design perceptual layers


Now that we understand the data to be displayed we're ready to design graphics that support our users' tasks.

Contrast Polarity. The first graphics choice is the contrast polarity--will the display be "radar-like" (bright symbols on dark backgrounds) or "map-like" (dark symbols on light backgrounds). Both have been successful in various applications; both have pros and cons.

More on Choosing Background Colors.

Build the Perceptual Hierarchy--Managing Attention. The next step is to design the perceptual hierarchy, manipulating the salience (perceptual prominence) of the data layers to match their positions in the urgency hierarchy as closely as possible. Remember to try to leave options for any later additions of further data types.

Salience can be manipulated by adjusting luminance contrast, symbol/font size, line weight, flashing, and auditory alerts. Chromatic color can be used to make some data "pop out" (see next step), but the other color purposes in that step need to be considered at the same time. Do the achromatic manipulations first.

More on Creating Perceptual Layers.

Step 4: Decide where chromatic color will be used and why

In this step we are not yet choosing the labeling colors. We are just finding the places where we need color coding.

Coding with chromatic colors can be a very effective tool, but overuse can dilute its impact. In complicated graphics the number of usable labeling colors is surprisingly limited, once all of the constraints are taken into consideration. Use color coding only for specific purposes, for the things it does well:
Grouping with Color
Labeling with Color
Color and Popout

Step 5: Choose colors

With the first iteration of planning done we're now ready to choose specific colors.

Constraints. Several kinds of constraints restrict our possible color choices at this point:

Cultural constraints. The safety code (red, amber, green) is the most important example of community usage that shouldn't be violated without a good reason.

Standards. Deviations from standards and legacy practices of the applications domain have a price. Changes of color-coding can induce errors. Some retraining will be necessary, and performance will probably initially be degraded. Is the change worth the costs?

Consistency. The local color usage needs to be consistent with coding within any other applications in the user's working environment. Inconsistencies can produce errors under stress.

Legibility. The colors we want for labeling may not give our symbols sufficient luminance contrast to be legible.

More on Legibility

Perceptual layering. The luminances required by the perceptual layering design (from Step 3) may not be available in the hues and saturations we want for color coding.

More on Creating Perceptual Layers.

Discriminability / Identifiability. The discrimination and identification requirements of the color coding scheme may severely restrict the set of usable colors. Symbol size and other graphic variables also affect color discrimination and identification.

More on Color Discrimination and Identification.

Step 6: Solve problems

At this point we should be nearing a workable design, with only a few significant color assignment problems to solve. If not, we have to return to the early steps and reconsider our decisions. There are several options for resolving the remaining problems, listed in order of decreasing desirability:

Return to "Perceptual Hierarchy" Step. Several iterations of the perceptual design and color choice stages may be required to meet all the interacting constraints.

Last Resorts. If the color design almost works at this point there are a few well-known workarounds for some of the remaining problems. They are less desirable because they add graphic complexity.

More on Last Resorts: Outlining / Infills.

Remove Data. Only if no solution is found after multiple iterations should the original ambitions for simultaneous display (from the data planning phase) be reduced.

Assuming that there were good reasons for originally including the data, any removed data will have to be relocated to a different graphics page or temporarily switched off by some filtering mechanism. Paging and filtering both have cognitive and, occasionally, safety costs. Data that are on separate pages have to be spatiotemporally aligned in the user's head. Both methods add a display management task to the user's workload, with the associated human factors issues regarding surveillance, alerting, and control of the display.


Other Related Topics:
Design of Cockpit Graphics (Example)
Design of Air Traffic Management Graphics (Example)




About This Site

Home | Design Process | Color Graphics Topics | Color Tool | Guidelines | Aerospace | Color Science | Utilities

  Site Curator: Richard Mogford | Responsible NASA Official: Richard Mogford | Privacy Statement