Xref: utzoo sci.psychology:2041 comp.cog-eng:1160 Path: utzoo!utgpu!jarvis.csri.toronto.edu!mailrus!tut.cis.ohio-state.edu!perlman From: perlman@tut.cis.ohio-state.edu (Gary Perlman) Newsgroups: sci.psychology,comp.cog-eng Subject: Re: navigating through menus with colour Keywords: colour, menus Message-ID: <51181@tut.cis.ohio-state.edu> Date: 6 Jun 89 04:51:49 GMT References: <572@hfserver.hfnet.bt.co.uk> Reply-To: Gary Perlman Followup-To: sci.psychology Organization: Computer & Info Sci Ohio State Univ Columbus, OH 43210 Lines: 279 In article <572@hfserver.hfnet.bt.co.uk> davet@hfserver.hfnet.bt.co.uk (David Travis) writes: >One problem with menu-driven interfaces is that they encourage users to >be lazy: if you ask them to recall the options on a pull-down menu, >performance is very poor. Options are recalled by their approximate >spatial position in the menu. A prediction from this would be that >colour-coding menu items would improve search times. Has there been any >work produced on navigating through menus using colour as a cue? Sid Smith did several empirical studies of color coding in the early 60's. In his (with Jane Mosier) guidelines on user interface design, he discusses the use of color in general displays, of which menus would be one case. The following report, compiled with NaviText SAM, a hypertext interface to the guidelines, gives advice and references on the topic of color coding. NaviText SAM* Report Title: Color Coding Number of Guidelines: 9 Preparer: Gary Perlman Report Date: Tue Jun 06 1989 Authorized User: Gary Perlman Authorized Site: Ohio State University Source: Smith, Sidney L., & Mosier, Jane. N. Guidelines for Designing User Interface Software MITRE Corporation, Bedford MA 01730 Report: ESD-TR-86-278 MTR-10090 Report Generation: Northern Lights Software Corporation 24A Pilgrim Drive, Box 1056, Westford, MA 01886 USA (508) 692-3600 *NaviText is a trademark of Northern Lights Software Corporation 2 DATA DISPLAY 2.6 Coding 2.6/26 * Color Coding for Data Categories 2.6/27 * + Easily Discriminable Colors 2.6/28 * + Conservative Use of Color 2.6/29 * + Adding Color to Formatted Displays 2.6/30 * + Redundant Color Coding 2.6/31 * + Unique Assignment of Color Codes 2.6/32 * + Conventional Assignment of Color Codes 2.6/33 * + Brightness and Saturation to Draw Attention 2.6/34 * + Saturated Blue for Background Color 2 DATA DISPLAY 2.6 Coding 2.6/26 * Color Coding for Data Categories When a user must distinguish rapidly among several discrete categories of data, particularly when data items are dispersed on a display, consider using a unique color to display the data in each category. Example Different colors might be used effectively in a situation display to distinguish friendly, unknown, and hostile aircraft tracks, or alternatively to distinguish among aircraft in different altitude zones. Comment Color is a good auxiliary code, where a multicolor display capability is available. A color code can be overlaid directly on alphanumerics and other symbols without significantly obscuring them. Color coding permits rapid scanning and perception of patterns and relationships among dispersed data items. Comment Perhaps as many as 11 different colors might be reliably distinguished, or even more for trained observers. As a practical matter, however, it will prove safer to use no more than five different colors for category coding. Comment With some display equipment now providing millions of different colors, designers may be tempted to exploit that capability by using many different colors for coding. The capability to display many colors may be useful for depicting complex objects, and for providing tonal codes to show the relative values of a single variable. However, such a capability is not useful for coding discrete categories, except that it may allow a designer to select more carefully the particular colors to be used as codes. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. EG = Engel, S. E., and Granda, R. E. (1975, December). Guidelines for Man/Display Interfaces (Technical Report TR 00.2720). Poughkeepsie, NY: IBM. MS = MIL-STD-1472C, Revised. (1983, 1 September). Military Standard: Human Engineering Design Criteria for Military System, Equipment and Facilities. Washington, DC: Department of Defense. Smith, S. L. (1962b). Color coding and visual search. Journal of Experimental Psychology, 64, 434-440. Smith, S. L. (1963a). Color coding and visual separability in information displays. Journal of Applied Psychology, 47, 358-364. Smith, S. L., and Thomas, D. W. (1964). Color versus shape coding in information displays. Journal of Applied Psychology, 48, 137-146. Smith, S. L., Farquhar, B. B., and Thomas, D. W. (1965). Color coding in formatted displays. Journal of Applied Psychology, 49, 393-398. 2 DATA DISPLAY 2.6 Coding 2.6/27 * + Easily Discriminable Colors When selecting colors for coding discrete categories of data, ensure that those colors are easily discriminable. Example On a light background, a good choice of colors might be red, dark yellow, green, blue and black; on a dark background, good colors might be a somewhat desaturated red, green and blue, plus yellow and white. Comment The harder it is for a user to identify a displayed color, the less useful will be the color code. If many colors are used, colors will be closer in hue and harder to discriminate. If color coding is applied to symbols that subtend small visual angles, which makes color perception difficult, there will be a special need to limit the number of colors used. Comment Varying saturation and intensity in addition to hue may increase the discriminability of colors. For instance, on a dark background a designer might select a saturated yellow but a desaturated red. Comment Colors selected for coding should be tested with users to ensure that they are easily discriminable. Testing should be conducted under realistic conditions, since such factors as display type and ambient room lighting will affect color perception. If colors will be used for displaying text, care should be taken to ensure that colored letters are legible as well as discriminable. 2 DATA DISPLAY 2.6 Coding 2.6/28 * + Conservative Use of Color Employ color coding conservatively, using relatively few colors and only to designate critical categories of displayed data. Comment Casual, arbitrary use of colors on every display may cause displays to appear "busy" or cluttered. Casual use of color will also reduce the likelihood that significant color coding on particular displays will be interpreted appropriately and quickly by a user. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. 2 DATA DISPLAY 2.6 Coding 2.6/29 * + Adding Color to Formatted Displays Add color coding after displays have already been designed as effectively as possible in a monochrome format. Comment Do not use color coding in an attempt to compensate for poor display format. Redesign the display instead. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. 2 DATA DISPLAY 2.6 Coding 2.6/30 * + Redundant Color Coding Make color coding redundant with some other display feature such as symbology; do not code only by color. Comment Displayed data should provide necessary information even when viewed on a monochromatic display terminal or hard-copy printout, or when viewed by a user with defective color vision. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. MS = MIL-STD-1472C, Revised. (1983, 1 September). Military Standard: Human Engineering Design Criteria for Military System, Equipment and Facilities. Washington, DC: Department of Defense. 2 DATA DISPLAY 2.6 Coding 2.6/31 * + Unique Assignment of Color Codes When color coding is used, ensure that each color represents only one category of displayed data. Comment Color will prove the dominant coding dimension on a display. If several different categories of data are displayed in red, say, they will have an unwanted visual coherence which may hinder proper assimilation of information by a user. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. Smith, S. L., and Thomas, D. W. (1964). Color versus shape coding in information displays. Journal of Applied Psychology, 48, 137-146. 2 DATA DISPLAY 2.6 Coding 2.6/32 * + Conventional Assignment of Color Codes Choose colors for coding based on conventional associations with particular colors. Example In a display of accounting data, negative numbers might be shown as red, corresponding to past use of red ink for that purpose. Example Red is associated with danger in our society, and is an appropriate color for alarm conditions. Yellow is associated with caution, and might be used for alerting messages or to denote changed data. Green is associated with normal "go ahead" conditions, and might be used for routine data display. White is a color with neutral association, which might be used for general data display purposes. Comment Other associations can be learned by a user if color coding is applied consistently. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. MS = MIL-STD-1472C, Revised. (1983, 1 September). Military Standard: Human Engineering Design Criteria for Military System, Equipment and Facilities. Washington, DC: Department of Defense. 2 DATA DISPLAY 2.6 Coding 2.6/33 * + Brightness and Saturation to Draw Attention Use brighter and/or more saturated colors when it is necessary to draw a user's attention to critical data. Comment On some display equipment, designers can vary the intensity as well as the saturation for individual hues. On those displays, both intensity and saturation can be used to draw a user's attention to critical data. Comment Although saturated and/or intense hues are useful for drawing a user's attention, their overuse will result in a display which is garish and difficult to view for long periods. Comment When deciding the desired saturation of any given display color, consider the ambient lighting under which the display will be viewed. Colors that appear highly saturated in a darkened room will appear less saturated when viewed under high ambient illumination. 2 DATA DISPLAY 2.6 Coding 2.6/34 * + Saturated Blue for Background Color Use saturated blue only for background features in a display, and not for critical data. Example Saturated blue might be used for shading background areas in graphic displays, where its lower apparent brightness could possibly be of benefit. Or saturated blue might be used to display a background grid or familiar scale on a graphic display. Comment The human eye is not equally sensitive to all colors, nor are its optics color-corrected. Blue symbols appear dimmer than others, and are more difficult to focus. Comment If blue must be used for displayed data, use a desaturated blue or cyan in order to make the data more legible. Reference BB = Brown, C. M., Brown, D. B., Burkleo, H. V., Mangelsdorf, J. E., Olsen, R. A., and Perkins, R. D. (1983, June 15). Human Factors Engineering Standards for Information Processing Systems (LMSC-D877141). Sunnyvale, CA: Lockheed Missiles and Space Company. Weitzman, D. O. (1985). Color coding re-viewed. In Proceedings of the Human Factors Society 29th Annual Meeting (pp 1079-1083). Santa Monica, CA: Human Factors Society. -- Gary Perlman Department of Computer and Information Science perlman@cis.ohio-state.edu The Ohio State University 614-292-2566 2036 Neil Avenue Mall Columbus, OH 43210-1277