• Federal Highway Administration >
• Publications >
• Research Publications >
• 03065 >
• 05.Cfm >
• In-Vehicle Display Icons and Other Information Elements: Volume I

In-Vehicle Display Icons and Other Information Elements: Volume I

PDF files can be viewed with the Acrobat® Reader®

ENHANCING INTERPRETATION WITH TEXT LABELS

Introduction: Text labels refers to the use of text descriptions to enhance the interpretation of icons. Many icons are not immediately understood by drivers and text labels can facilitate the learning process.

Design Guidelines
Text labels should be considered when: Icons are abstract and have no conventional or broadly understood meaning. The icon represents a message that is particularly important or warns of a particularly hazardous situation. The driver can safely spend one to three seconds interpreting the icon. The task is complex.
Keep text labels concise (two to three words) and use them sparingly. Text labels reduce the space available for the icon, making them less interpretable

Figure 5-1. Examples of Icons that Benefit from Text Labels

Discussion: Many icons may be misinterpreted because they have no commonly understood meaning and must be learned by the users (reference 1). This is particularly true of abstract icons that have no intuitive link to the message they try to communicate. The appropriate use of text labels can alleviate this problem. In fact, icons paired with text labels have been found to enhance performance, compared to icons alone, and enhance perceptions of usefulness, compared to text alone (references 2 and 3). Text labels can enhance interpretation by improving learning, identifying an appropriate action, and emphasizing hazards or important information. Even short text labels can help users learn icon meanings, which can be flawlessly recalled months after the initial exposure to the icon (reference 4). Text labels can also clarify a message and guide users to correct actions that might otherwise be obscured if the message were portrayed with only an icon or text (reference 5). Text labels also help clarify the uncertainty associated with color codes and shapes used to convey urgency. Used appropriately, text labels can address several problems of icon interpretation and provide benefits beyond those available with either text or icons alone.

Design Issues: Including a text label may not be possible without reducing the size of the icon and compromising icon legibility. With this design tradeoff in mind, three placement strategies can be considered to accommodate a text label. Most simply, the icon label can be placed at the bottom or top of the icon. This alternative consumes valuable space and may reduce the icon size, but it provides a clear identification of the icon. The label can also be devised so that it appears only on command, such as when it becomes activated by the cursor. This strategy does not impinge on display space, but novice users may not be aware that the icon label can be accessed through the cursor. More expert users may not need or want this feature, so allowing users to turn off the text would support novice users until they no longer need the icon definitions. Because this strategy requires cursor movement, it is not feasible for those icons that will be displayed while a vehicle is in motion. The label can also be directly superimposed on the icon itself. This strategy does not require additional display space, but it may interfere with icon legibility because the label may occlude critical elements of the icon. Making the lettering semitransparent will reduce the occlusion of the icon, but it will also reduce the legibility of the text. Reference 6 discusses several detailed strategies for combining text and graphical information effectively.

References:

1. Baber, C., and Wankling, J. (1992). An experimental comparison of text and symbols for in-car reconfigurable displays. Applied Ergonomics, 23(4), 255-262.

2. Wiedenbeck, S. (1999). The use of icons and labels in an end user application program: An empirical study of learning and retention. Behaviour & Information Technology, 18(2), 68-82.

3. Ramakrishnan, A. S., Cranston, R. L., Rosiles, A., Wagner, D., and Mital, A. (1999). Study of symbols coding in airway facilities. International Journal of Industrial Ergonomics, 25(1), 39-50.

4. Wogalter, M. S., and Sojourner, R. J. (1997). Comprehension and retention of safety pictorials. Ergonomics, 40(5), 532-542.

5. Edigo, C., and Patterson, J. (1988). Pictures and category labels as navigational aids for catalog browsing. Human Factors in Computing Systems: CHI '88 Conference Proceedings, 127-132.

6. Tufte, E. R. (1983). The visual display of quantitative information. Cheshire, CT: Graphics Press.

COMPOSITION OF TEXT LABELS

Introduction: The content of text labels can affect the comprehension and interpretation of an icon's text label. Words should be chosen carefully to increase clarity and take into account the vocabulary level of potential users.

Design Guidelines
Use explicit icon descriptions. Explicit text labels improve comprehension (references 1 and 2) and are perceived as conveying a more salient notification than non-explicit labels (references 2-4). In addition, precise descriptions allow the driver to judge when or where a situation will occur and thus aid in response preparation. Use nontechnical, common vocabulary (reference 5). Users will not know how to respond to a warning if they do not understand the text verbiage.

Table 5-1. Examples of Text Label Composition

Discussion: Research indicates that warning text explicitness and severity has an effect on the perceived level of hazard of product warning labels (references 1, 2, 3, and 4). For example, reference 2 examined the explicitness of warning labels on infant car seats. Subjects rated their perceived hazard, likelihood and severity of possible injury, and the intent to act cautiously. Results indicate that explicit warning labels increase the perception of possible hazards and injuries as well as ratings of cautious intent.

Reference 5 evaluated the comprehension of product warning labels, specifically the difference between "flammable" and "combustible." The study found that very few respondents knew the difference between the two terms, and most perceived the incorrect term as more hazardous. Similarly, terms used to describe driving situations may be misunderstood or ignored by drivers who do not comprehend the vocabulary used.

Design Issues: When selecting icon text wording, using more explicit labels describing severe consequences can increase warning compliance. However, to be effective, these descriptions must consider the users' vocabulary level. A compromise between terminology simplicity and precision must be made to increase comprehension.

For example, an icon alerting the driver to a malfunction of the vehicle's alternator can be described in a number of ways. A message such as "Engine Problem" may not be adequately explicit, while "Alternator Failure" may be overly precise and not understood by users who are not familiar with engine terminology. A compromise such as "Charging System Failure" may be sufficient.

Under elevated stress conditions, simple instructions should be provided to reduce cognitive burden and decrease reaction time.

Cross References: Designing Effective Text Labels, p. 3-8; Enhancing Icon Interpretation with Text Labels, p. 5-2; Enhancing Icon Interpretation with Color, p. 5-12; Conveying Urgency with Icons, p. 5-14

References:

1. Laughery, K. R., Sr., and Stanush, J. A. (1989). Effects of warning explicitness on product perceptions. Proceedings of the Human Factors Society 33rd Annual Meeting, 431-435.

2. Trommelen, M. (1997). Effectiveness of explicit warnings. Safety Science, 25(1-3), 79-88.

3. Laughery, K. R., Sr., Rowe-Halbert, A. L., Young, S. L., Vaubel, K. P., and Laux, L. F. (1991). Effects of explicitness in conveying severity information in product warnings. Proceedings of the Human Factors Society 35th Annual Meeting, 481-485.

4. Laughery, K. R., Sr., Vaubel, K. P., Young, S. L., Brelsford, J. W., Jr., and Rowe, A. L. (1993). Explicitness of consequence information in warnings. Safety Science, 16, 597-613.

5. Main, B. W., Frantz, J. P., and Rhoads, T. P. (1993, July). Do consumers understand the difference between "flammable" and "combustible?" Ergonomics in Design, 1(3), 14-17.

CONVEYING THE EFFECT OF ACTIONS WITH ICONS

Introduction: Conveying the effect of actions with icons refers to the ability of an icon to help the driver anticipate the effect of selecting a particular system function or option.

Design Guidelines
Show consequences of action with arrows, speed lines, or the ghosting of images. Use sequence of images to convey simple transformations. Consider animated icons for predrive applications to show complex multistep consequences.
Because of the distracting nature of animated incons, they should be used by only rarely and with great caution.

Figure 5-2. Schematic Examples on Conveying Action

Discussion: Drivers may act upon icons that are used to identify system functions or options by pressing buttons or selecting menu items. Because these actions will change system modes or select a function, it is important that the icon show the driver the consequence of the action. The icon should show the "effect" or action that will occur when the control is actuated. When a symbol conveys action, it is important that the resulting action is the mechanism displayed. Actions can be displayed several ways: using arrows, speed lines, ghosting, or sequencing and animation (reference 1). Arrows indicate direction of change or movement, as in increasing volume or panning over an electronic map. Speed lines indicate activation, as in alarm or when sensors are enabled. Ghosting of an image shows an ordered sequence of states that will occur when the control is activated (reference 2) by using similar pictures with increasing levels of contrast-for example, the sequential position of a car on a route. Sequencing of images performs a similar function. By showing several images with connecting arrows, the consequence of an action can be shown, as in replying to an e-mail message (reference 3). Sequencing of images can be achieved with multiple small images shown at the same time or in animated sequences that show an icon changing over time. Each of these mechanisms for conveying action can help drivers understand the consequence of actions.

For these mechanisms to be successful, the icon must provide a context to highlight the relevant change. Some important elements of context include position, orientation, and similarities in content. Regarding position, drivers will generally perceive the images on the right as occurring after the ones on the left. Ghosted images can also be overlapped to show progression, with the previous states positioned behind the more recent. Icon orientation and similarities in content can also provide a context for showing change. By retaining key features or orientation of the icon in each of the multiple images, drivers will be able to identify how the elements of a sequence relate to each other.

Design Issues: Animated icons can be a very effective mechanism for describing actions, but they are not appropriate for icons displayed while the vehicle is in motion. A constantly changing icon will distract driver attention from the roadway (reference 4).

References:

1. Horton, W. K. (1994). The icon book: Visual symbols for computer systems and documentation. New York: J. Wiley & Sons.

2. Tufte, E. E. (1997). Visual explanations: Images and quantities, evidence and narrative. Cheshire, CT: Graphics Press.

3. Dreyfuss, H. (1966). Case study: Symbols for industrial use. In G. Kepes (Ed.), Sign, image, symbol(pp. 126-133). New York: Braziller.

4. Theeuwes, J., Kramer, A. F., Hahn, S., and Irwin, D. E. (1998). Our eyes do not always go where we want them to go: Capture of the eyes by new objects. Psychological Science, 9(5), 379-385.

IDENTIFYING ICONS AS PART OF A GROUP

Introduction: Grouping icons facilitates their identification as a set of related messages or similar commands. Grouping provides the driver with cues regarding system functionality and aids icon comprehension. Grouping can be accomplished using position, design, and labeling.

Design Guidelines
Group icons based on the tasks that the user performs, rather than the architecture of the system. Put related icons close together, especially those that are almost the same and those that are opposite. If an icon fits into more than one group, duplicate it for each group. As a last resort, label groups of icons or individual icons. Put groups into separate boxes or windows. Put borders or extra space between groups of icons. Use a common color for background or icon elements to distinguish groups. Within a group of icons, use similar style, level of realism, and level of detail. Combine, transform, and include elements from other icons in the same group.

 
Figure 5-3. Schematic Examples of Ways to Identify Icons as Part of a Group

Discussion: The context in which an icon is viewed provides a powerful influence on interpretation. Context can make an ambiguous icon meaningful. Identifying an icon as part of a group provides a context that can enhance icon interpretation, so it should be used when possible. Icons can be associated with a group by their physical location or proximity, icon style, level of detail, common borders or shapes, or by the use of color. These icon characteristics can be used to group icons according to three important criteria. The first grouping criterion is relative urgency or importance. This criterion has been used for many years to group highway signs. Highly urgent signs have a distinct shape and color as shown by the examples that show warning information. The second criterion is to identify icons based on whether they invoke system functions or display status information. Icons that can be used to invoke system functions should have common characteristics that suggest that they can be acted upon, such as a raised bezel suggesting a physical button that could be depressed. The third criterion that can be used to group icons is system function. These system functions should reflect driver needs, not system architecture (reference 1).

Relationships between groups can be conveyed through the use of common and distinct pictorial elements. For example, the use of similar shapes, colors, or borders can make icons appear related. This type of relation can be explained in terms of the Gestalt law of similarity, where there is a tendency for the visual system to group similar elements together as if they belong to each other. Organizing icons into groups according to their global features (i.e., shape, size, color) has also been shown to aid in discrimination. In reference 2, selection and response times for three different sets of icons were compared: a set in which the icons differed by their global features, a set in which the icons differed by their local features (i.e., lines and structures within the icon), and a word set. The results indicated that the global features of an icon elicited faster response times than local features. This phenomenon is referred to as the "global superiority effect" (references 3 and 4). In addition, reference 5 examined the use of color in icon design and found that color may be most useful for dividing icons into related subgroups and facilitating rapid identification.

Design Issues: Although labeling is suggested as a means for grouping icons (reference 6) and has been shown to be helpful for increasing comprehension and overall effectiveness (references 7 and 8), it is important that it be used as a last resort in this particular application. The most important reason for this is that design space may be extremely limited. Text labels must be kept brief with no more than one or two words, and not all icon concepts may be amenable to such a succinct label. If not carefully chosen, a text label may mislead the user and reduce comprehension.

References:

1. Lee, J. D. (1997). A functional description of ATIS/CVO systems to accommodate driver needs and limits. In Y. I. Noy (Ed.), Ergonomics and safety of intelligent driver interfaces (pp. 63-84). Mahwah, NJ: Lawrence Erlbaum Associates.

2. Arend, A., Muthig, K., and Wandmacher, J. (1987). Evidence for global superiority in menu selection by icons. Behaviour & Information Technology, 6, 411-426.

3. Pomerantz, J. R. (1983). Global and local precedence: Selective attention in form and motion perceptions. Journal of Experimental Psychology: General, 112, 516-540.

4. Wandmacher, J., and Arend, U. (1985). Superiority of global features in classification and matching. Psychological Research, 47, 143-151.

5. Davidoff, J. (1988). The colour of colour in visual displays. In D. J. Osborne (Ed.), International reviews of ergonomics (pp. 21-42). London: Taylor and Francis.

6. Horton, W. K. (1994). The icon book: Visual symbols for computer systems and documentation. New York: J. Wiley & Sons.

7. Edigo, C., and Patterson, J. (1988). Pictures and category labels as navigational aids for catalog browsing. Human Factors in Computing Systems: CHI '88 Conference Proceedings, 127-132.

8. Muter, P., and Mayson, C. (1986). The role of graphics in item selection for menus. Behaviour & Information Technology, 5(1), 89-95.

CONVEYING SYSTEM STATUS WITH ICONS

Introduction: Conveying the effect of actions with icons refers to the ability of an icon to help the driver anticipate the effect of selecting a particular system function or option.

Design Guidelines
Use a uniform decrease in contrast or a change of solid to dashed lines to convey on/off or active/inactive change. Use an easily recognizable element and project changes upon it to convey system status that is described by multiple categories. Represent status changes associated with changes in magnitude by increasing the number or size of well differentiated icon elements, rather than changing color or contrast. Consider using text or numbers to represent changes of magnitude or categories.

Figure 5-4. Examples of Icons that Benefit from Text Lables

Discussion: Icons can be used to convey many different types of information about system status. For the purpose of icon design it is useful to describe this information in terms of urgency and information type. Information type refers to three categories of information: binary, categorical, and magnitude. Binary state information describes system state in terms of being on/off or active/inactive distinctions. Icons convey this information best through global changes to the icon, such as a uniform change in contrast. Categorical information describes the availability of amenities or features of a system that are currently engaged. To convey this information, icons must provide a uniform context upon which changes can be made to indicate changes in the categorical information. For example, a "D" can be superimposed on a gas pump to indicate the availability of diesel gas. The gas pump icon provides the uniform context for the interpretation of the "D." Magnitude information refers to continuous or discrete information that can be ordered along a dimension such as small to large, low to high, or safe to dangerous (reference 1). To convey magnitude information, icons should increase the size or number of a distinct element of the icon. Numbers can be superimposed on the icon, particularly when precision is required. Color, angle, and contrast have a very limited ability to convey magnitude information (references 2 and 3).

Design Issues: For icons to convey highly urgent signals clearly, differentiating state changes is particularly important. For example, a collision avoidance icon might indicate that the system is active and functioning properly. The same icon might be used to indicate a collision situation. This state change requires a more salient and recognizable indicator than an icon that shows whether the radio is on or off. To enhance the salience, the change should be accompanied by an auditory signal, the degree of change of contrast should be greater, and the color should emphasize the urgency of the signal.

References:

1. Zhang, J. J. (1996). A representational analysis of relational information displays. International Journal of Human-Computer Studies, 45(1), 59-74.
2. Zhang, J. J., and Norman, D. A. (1995). A representational analysis of numeration systems. Cognition, 57(3), 271-295.
3. Tufte, E. R. (1983). The visual display of quantitative information. Cheshire, CT: Graphics Press.

ENHANCING ICON INTERPRETATION WITH COLOR

Introduction: Enhancing icon interpretation with color refers to how color can highlight information and enhance drivers' interpretation of icons; however, color can also confuse and mislead drivers if used incorrectly.

Design Guidelines
Use color coding only when well-established conventions exist, such as temperature, dangerous situations, and permissiveness. Use red to indicate highly urgent messages, yellow to indicate cautionary information, and green to indicate normal operations or safe conditions. For temperature, use red for hot and blue for cold. Arbitrary codes using color to convey meaning are likely to induce errors. Color, such as red, can be used to enhance the relative salience of icons. Therefore, color choices should be made with respect to the relationship between messages (relative urgency of messages) and the relationship between messages and the background upon which they are presented. Small spots of intense saturated color can convey information effectively. This requires a conservative use of these colors and the use of less saturated colors for backgrounds (reference 1). Use shades of gray, rather than color, for showing quantity (reference 2).

Explanation	Example
Red enhances the relative salience of this icon and the strong population sterotype indicates a hazzard.
Yellow is often used for information such as caution or wait.
Green is often used to indicate normal operations or to indicate permissible behavior.
The small spots of intense color greatly enhance the effectiveness of this icon in identifying heavy traffic.

Figure 5.5 Schematic Examples of the Use of Color in Icons

Discussion: The most common and consistent use of color for conveying information in the driving context is in traffic control devices. The use of green as permissive, amber or yellow for warning, and red for restrictive is almost universal. Red also has a powerful ability to convey urgency and hazard when used in warnings. Another important instance where color has come to hold a strong meaning is in the use of red for hot and blue for cold. These are two examples of "population stereotypes" or generally held expectations. When designing with color it is important to understand population stereotypes and conform to these expectations. Colors should not be used to convey meaning when there is not a well-established stereotype. Drivers will confuse the meaning of arbitrary color codes.

Beyond conveying specific meaning, color can also effectively highlight information and enhance interpretation of complex icons (references 1 and 2). Effective use of color in this role requires careful design that considers the use of color in relation to its context. Using color to highlight specific features or to enhance the salience of an icon requires a relatively muted and conservative use of color elsewhere. If all icons are designed to be relatively salient with the use of saturated colors, the resulting collection will have no highly salient icons. Similarly, highlighting a critical element of an icon with a saturated color requires that the other elements of the icon provide a background that does not compete with the highlighted details. Color choices should be made with a clear sense for the importance of elements within the icon and priority or urgency across a set of icons.

Design Issues: Color poses several problems for design. Some systems may not support color, so a monochrome design may need to be created. Gray scale can substitute for color, with the intensity of the gray conveying the meaning of the color. For example, if red were replaced by dark gray or black, then yellow and green would be replaced by corresponding lighter shades of gray. In addition, nearly 10 percent of the Caucasian male population and 4 percent of the non-Caucasian male population suffer from either color deficiencies or color blindness. The following color combinations should be avoided for these individuals: cyan and gray, yellow and light green, green and brown, red and black.

Cross References: Ways to Use Icons, p. 2-6; Determining the Appropriate Contrast within an Icon, p. 3-4; The Effects of Color on Icon Legibility, p. 3-10; Identifying Icons as Part of a Group, p. 5-8; Conveying Urgency with Icons, p. 5-14; Enhancing Icon Interpretation with Shape, p. 5-16

References:

1. Tufte, E. R. (1990). Envisioning information. Cheshire, CT: Graphics Press.
2. Tufte, E. R. (1983). The visual display of quantitative information. Cheshire, CT: Graphics Press.

CONVEYING URGENCY WITH ICONS

Introduction: Conveying urgency with icons refers to adjusting icon characteristics so that they reflect the appropriate level of urgency of the situation. These adjustments enhance response speed and appropriateness.

Figure 5-6. Schematic Examples of Conveying Urgency

Discussion: These guidelines enhance perceived urgency by relying on population stereotypes for the interpretation of red as suggesting danger importance. This has been shown to have a particularly strong influence on perceived urgency (reference 1). In addition, these guidelines rely on several other icon features that increase their salience, such as size, border width, and the use of flashing. These characteristics all enhance the urgency of icons individually; combining them magnifies their total effect.

Icon design features can have a strong effect on the perceived urgency of the icon. However, the perceived urgency and the driver's response to urgency depend on the context in which it is perceived. If all in-vehicle messages are designed to be perceived as highly urgent, the overall effect will be diluted. To enhance driver response to highly urgent messages requires the designer to consider the urgency of the message relative to other potential in-vehicle messages and tailor icon characteristics to the relative urgency. For example, notification of upcoming tourist attractions should not include characteristics appropriate for those of a collision avoidance warning.

Design Issues: Color appears to be a powerful mechanism to convey urgency. Text size would need to be doubled to generate the same increase in urgency that is seen when the color is changed from black to red (reference 1).

In addition, urgent symbols or icons should be located where they are most likely to be seen by the driver, thereby decreasing driver response time. According to reference 2, the area that is most easily viewed is considered to be a circular shaped or oval area roughly 10 to 15 degrees in radius around the normal line of sight (which is considered to be about 15 degrees below the horizon). The figure below indicates the optimal horizontal locations for placement of urgent symbols or icons.

Figure 5-7. Locations of Icons Within the Visual Field (Adapted from Reference 2)

References:

1. Adams, A. S., and Edworthy, J. (1995). Quantifying and predicting the effects of basic text display variables on the perceived urgency of warning labels: Tradeoffs involving font size, border weight and color. Ergonomics, 38(11), 2221-2237.
2. Sanders, M. S., and McCormick, E. J. (1993). Human factors in engineering and design (5th ed.). New York: McGraw-Hill.

ENHANCING ICON INTERPRETATION WITH SHAPE

Introduction: Enhancing icon interpretation with shape refers to how the shape of an icon's outside edge or border can call attention to the hazard level being communicated and enhance drivers' interpretation of icons.

Table 5.8 Schematic Examples of the Use of Shape in Icons

Discussion: Two warning label shape studies (references 1 and 2) presented subjects with 19 different shapes, including traffic safety sign shapes as well as other nontraditional shapes, and used a pairwise ranking procedure to determine which shapes observers rated as implying the most hazard. The studies found similar results. The inverted triangle, diamond, and octagon were perceived as the most hazardous, the circle, square, and rectangle as the least hazardous. Another study (reference 3) found analogous results with a group of industrial workers and using warning signs. Octagon and diamond shaped signs were ranked as more hazardous than circle or square signs.

Using consistent icon shapes can facilitate rapid recognition (reference 4). This takes advantage of the global superiority effect (reference 5), in which the perception of global features in a figure, such as outline shape, is more rapid than the perception of local features, such as the icon pictorial.

Design Issues: The shapes of icons connote different levels of hazard. Research has found that octagon, diamond, and inverted triangle shapes are perceived as the most hazardous, while circle, square, and rectangle shapes are perceived as the least hazardous (references 1, 2, and 3). These preferences are consistent with population stereotypes of American road signage displayed in the Manual on Uniform Traffic Control Devices (MUTCD). Octagon ("STOP") and diamond (warning) shaped signs require immediate action or attention. Circular ("RAILROAD CROSSING") and rectangle (regulatory) shaped signs generally are used for low priority information, such as roadside services and speed limit signs.

References:

1. Cochran, D. J., Riley, M. W., and Douglas, E. I. (1981). An investigation of shapes for warning labels. Proceedings of the Human Factors and Ergonomics Society 25th Annual Meeting, 395-399.

2. Riley, M. W., Cochran, D. J., and Ballard, J. L. (1982). An investigation of preferred shapes for warning labels. Human Factors, 24(6), 737-742.

3. Collins, B. L. (1983). Evaluation of mine-safety symbols. Proceedings of the Human Factors and Ergonomics Society 27th Annual Meeting, 947-949.

4. Rogers, Y. (1989). Icon design for the user interface. International Reviews of Ergonomics, 2, 129-154.

5. Pomerantz, J. R. (1983). Global and local precedence: Selective attention in form and motion perceptions. Journal of Experimental Psychology: General, 112, 516-540.

Previous | Table of Contents | Next