To Skip Navigation Press Enter.Link to the Color Usage Site Home Page
Use the category links below to navigate this web site. All site pages can also be accessed with the site map.
Design Process Color Graphics Topics Color Tool Color Guidelines Aerospace
Color Science Utilities Site Map
Link to the Color Usage Research Lab Web Site Link back to the CURL Home Page

DESIGNING A COLOR GRAPHICS PAGE (CHECKLIST)

On This Page:  • Step 1:Compile a data inventory   • Step 2: Plan for management of user's attention  • Step 3: Design perceptual layers 
 • Step 4: Decide where chromatic color will be used and why   • Step 5: Choose colors
  • Step 6: Solve problems
 

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:

Color Graphic Display Design Process:
Phase 1: Data Planning Step 1: Compile a data inventory
Step 2: Plan for management of users' attention
Phase 2: Design of Graphics
Implementation
Step 3: Design perceptual layers
Step 4: Decide where chromatic color will be used and why
Step 5: Choose colors
Step 6: Solve problems

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. Back to the top of the page.

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. Back to the top of the page.

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.


Sample ATC Data Hierarchy

1. Urgent aircraft (approaching hazard, declared emergency)
2. Hazard area variables (weather, terrain)
3. Focal aircraft ("own" aircraft)
4. Context aircraft (not hazard for "own" aircraft)
5. Context lines, symbols (boundaries, airways, navaids)
6. Context area variables (own vs. other sectors)
Section of an air traffic control display, showing aircraft symbols, weather, and airspace features (ranges, navigation fixes, etc.)
Larger Image New Window.


Phase 2: Design the Graphics Implementation

    Step 3: Design perceptual layers Back to the top of the page.

    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 Back to the top of the page.

    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 Back to the top of the page.

    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 Back to the top of the page.

    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:
    go to this page Design of Cockpit Graphics (Example)
    go to this page Design of Air Traffic Management Graphics (Example)



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

      Site Author: Larry Arend

    NASA Logo     Ames Research Center Logo