The Use of Color
When properly applied, color can greatly enrich the user interface by improving the aesthetic quality of the interface, and by guiding the user's attention to points of interest. The improper use of color on the other hand, can seriously impair the user's ability to interact with the program.
Last updated 19-September-1999
Despite the fact that Windows95 allows its users to select a variety of color schemes, it would appear that many developers stick to the default, battleship gray, standard color scheme. This is particularly evident in this image from Dialog32, a shareware telephone logging application, when run on a PC utilizing a color scheme other than the default. Dialog32's developers hard-coded certain colors in the application to match the color scheme on their own PC's, without realizing the resulting effect when run under a different color scheme. The end result is ... well, unfortunate.
Let this be a warning to all Windows developers: immediately change to a different color scheme and re-run your programs. In the course of your development, periodically change your color scheme and verify that your application will not be subject to such unfortunate results. While you are at it, determine if changes to other display settings such as font size will impact on your designs. |
Sometimes the best intentions of the developer go unrealized. This image was borrowed from one particular application that hard-coded the colors of the text in the command buttons such that all affirmative buttons (OK, Yes, Open) have green-colored text and all negative buttons (Cancel, No, Close) have red-colored text. Unfortunately, doing so can cause a number of problems.
In the first place, the background color of the button is determined by the Windows color preferences. As shown above, hard-coding the color of the text can make it difficult, and in some cases, impossible to read. Secondly, as shown in this example, Green/Red-Affirmative/Negative distinction may be inconsistent with a particular task. In western society, users may interpret the green label as indicating the "good" or proper response. As shown in this example however, deleting all records is more than likely not a good thing to do. Additionally, enforcing your particular color associations on your users may create some incompatibilities with cultural interpretations of color. In certain eastern societies, for example, red is considered an affirmative, or positive color. Subjecting these users to your color associations is an indication of cultural arrogance. Finally, a significant percentage of the population has some degree of color vision deficiency; the most prevalent of which, is the diminished ability to distinguish between red and green. Your attempts to provide unnecessary additional information will be lost on a significant portion of your users, and may become a source of their resentment. To be on the safe side, avoid using color as a means of interpretation, and be certain to avail yourself of the user's color preferences. These preferences are not merely the means by which the user "personalizes" his or her PC, but in many instances are selected to maximize the readability of the applications under specific lighting and display conditions. When you avail yourself of these settings, you can be certain that you will not risk the resentment of the user. |
We were torn between placing this example here or in the Interface Stupidity section. The image was provided to us by IBM's User Interface Architecture and Design Group. No, they didn't discover it, they created it; this image is taken from their self-proclaimed "State of the Art" RealCD application.
It would seem that Big Blue now regards black as a truly modern color, so much so that the fact that users cannot distinguish a control from its background was only a small price to pay for being trendy. That they had to add a label to point at the button should have been a pretty good indication that black buttons on a black background is probably not a good design technique. This example is but one of the many problems with IBM's RealCD application. For an in-depth look, check out our RealCD Review. |
The color scheme dictated by the designers of Apple's QuickTime 4.0 Player could have serious consequences for many users. Because of the lack of contrast between the gray symbols and gray backgrounds of the controls, it can be reasonably expected that certain users will have difficulty locating a control of interest. Older users, and those with even slight visual difficulties will be needlessly disadvantaged when using the software. The designers failed to consider this fact of human vision:
the amount of light that passes through the eye of a sixty year-old is only one-third of that passing through the eye of a twenty year-old.The only way to ensure that such users will be able to detect the symbols is to have sufficient contrast between the symbol and its background. Curiously, the contrast is changed after the user has clicked the buttons. A detailed review of the QuickTime 4.0 Player can be found in our In-Depth section. |
 Joost Vunderink sent along a couple of images illustrating a fundamental design problem with Easy CD Creator, a program used to write CD-ROMS. At the end of creating a CD, there are two possible outcomes: the process was successful, or 'some error occured' (a not infrequent result when writing CD-ROMS). The error message is displayed above. The successful message is displayed below.  So what's is the problem? The dialogs are far too similar, and both utilize a red-heavy icon to represent success or failure. As Joost indicates: Each time I've finished a CD I see something red and I panic... but then it's alright after all. |
Good question! We believe we determined how the designers at AST Software came up with the name for their In/Out whiteboard application Who's Where?: is the individual 'in' or 'out'? Obviously, given the bright green color and the raised appearance of the In button, the individual is 'in'. Obvious, that is, to most people, but not to the application's developers. Actually, the individual is 'out'.
|
Changing your Windows color scheme can often illuminate otherwise hidden examples of interface design problems. Applications should be designed to utilize the user's preferred color scheme, to prevent problems that might arise when the user's color scheme is different than that of the developer. The developers of Microsoft Access improperly hard-coded some of the colors in the application, resulting in the image shown here. (To be consistent with the user's preferred color scheme, the window's background should be the same color as the command buttons, as shown below).
Just as your application should be independent of the user's preferred color scheme, your documentation should also be color independent. Under the standard color scheme, controls with a gray background are read-only. However, under a non-standard color scheme, none of the labels will have a gray background. |
To be fair, this is an easily overlooked aspect of interface design, and requires that you specifically check your design under a variety of non-standard color schemes. If forgotten, important color information in your application might be hidden, or, the resultant color mixture could be so unappealing that your users will not want to interact with your program.
 The improper use of color can really detract from the aesthetic quality of an application. The toolbar used in Compuserve's WinCim 2.0 application reminds us of a child's paint-by-numbers set. The images not only lend themselves to an unprofessional appearance, they are distracting. The toolbar used in Microsoft Word, in contrast, uses a much more limited set of colors, and the colors are themselves subtle. Despite these differences, Word's toolbar provides far more information in less space, because it primarily relies on shape to distinguish among the functions. In addition to presenting a more professional appearance, the judicious use of color is less likely to give rise to unintended interpretation based on the user's personal and cultural color associations. 
|
 Color can also detract from the information you are trying to convey. This image includes some of the many toolbar buttons used in Zoc, a communications application. In this example, the first four toolbar buttons represent various ways of sending a file. These are, in order of appearance:
|
This image is taken from the tutorial for Pirates: Quest for the seas. The tutorial ignores the user's display preferences and uses hard-coded colors, the combination of which is reminiscent of that used in older monochromatic computer monitors. We found the combination particularly hurtful on the eyes; the three-dimensional text is an extra bonus to make the text just all that more difficult to read.
A detailed review of Pirates can be found in our In-Depth section. |
This is an image of the status bar used in Webforms, developed by Q&D Software Development. It is intended to provide descriptive information that helps users learn how to use the application. Unfortunately, the choice of color and the use of a 3-D font make the information almost impossible to read.
By the way, we're pretty sure that the text reads: "HTML Browse" or "HTML/Browse". "Preview" would have been a better choice, but since you can't read it anyhow, it hardly matters. |
|
|
© 1996-2000 Isys Information Architects Inc. All rights reserved.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.
GP designpartners provide this mirror — for educational purposes only — as the interface hall of shame is no longer maintained or available at its original home, www.iarchitect.com [a domain apparently abandoned and taken over by a search spammer ...].
you can view this file in its original layout: color.htm.
please drop us a line if you happen to know anything about the whereabouts of brian c hayes of isys information architects, the author of this »interface hall of shame« [and fame].
