Among UX and LX designers, color is generally approached in a strange give-and-take between technical prescription and intuitive preference. When designing for a corporate client, designers are generally constrained by the preexisting branding requirements of the client. There might be multiple right or useful ways to use color in a particular design project, and inappropriate or ineffective color-use in one project might constitute optimal use in another. For these reasons, clear and reliable guidance on the what, how, when, and why of color- use in UX design is difficult to come by.
In this chapter, I will briefly explore the physics of color and its technical representation in digital formats. I will then address some of the applied aspects of color-use that will influence the craft of UX and ongoing research in this area. I then provide guidance on how to use color schemes to improve harmony by highlighting five dominant types of color schemes. I conclude by providing specific craft guidance on using color for UX projects and comment on how this should connect to ongoing UX research.
Recognizing these two approaches to color mixing is important to understand common notations present in design and authoring software. When creating a website, video game, mobile app, or illustration, RGB notations are used. CMYK notation is commonly used, such as cmyk(0,0,100,0) for yellow. Using any of these notations can generate millions of possible colors, including basic hues of the color wheel and low-saturation tints of hues. These terms will be important moving forward for understanding research on color effects for the affective domain.
The connection between color and learning may not be obvious at first. By influencing learner emotion, attitude, and interest, color can influence learner behaviors and attitudes. For instance, one study found that exposure to red prior to taking an IQ test subconsciously impaired performance. By employing positive emotion cueing, designers can help increase mental effort in the learner, reduce perceived difficulty of the material, and improve learner comprehension.
For a simple example of how this relates to UX and LX design, consider the password prompt interfaces in Figure 3. If you were presented with each of these interfaces, how might your emotional and behavioral reaction to the prompt differ based upon its color? Seeing a red prompt might make you stop and consider “Is this really a secure site?” On the other hand, an orange prompt might get your attention but be somewhat confusing or concerning, a gray prompt might feel bland but also seem secure or professional. A color’s saturation (how little white is mixed in with it) also has an effect.
Brightness and saturation account for two-thirds to three-fourths of the detected variance in users’ feelings toward color. This means that shifting from soft pink to blood red in a design would likely impact users' feelings more than shifting from hard green or blue. In addition, the context of color-use is important, as in the case of otherwise pleasant colors being used in inappropriate or unnatural ways (Valdez & Mehrabian, 1994). Consider the four variations of the same website design in Figure 6. Which of the four color variations is your favorite? For most people, (1) would likely be the preferred variation, because not only are the colors pleasant but the color- use more appropriately aligns with
A study on K-12 school website accessibility across the U.S. found that contrast errors were the most common type of error among all sites. Contrast errors arise because, though two similarly-saturated colors may look quite different to most viewers, when superimposed they can become difficult to decipher from one another. Any variation in color will generally draw the eye of the learner to the variation. UX designers should use this principle to intentionally draw user attention to elements that matter and avoid unnecessary color variation in elements that are less important. As with the pet care mobile app example in Figure 4, improperly using color can subvert intended meaning or set a tone that is either unhelpful, dissonant, or repulsive for learners.
The mark of a skilled designer is knowing both (a) which colors to use and (b) how to use varieties of colors together in harmonious and intentional ways. Even when two products use the exact same colors, how the colors are used in relation to one another will influence the learner’s affective experience. Monochromatic schemes are easy to use in complicated designs to provide a sense of cohesion and uniformity. Each type has its own strengths and weaknesses as well as design considerations to attend to, which I will now explain. For each type, an example image will also be provided, which has the five scheme colors depicted on the right of the image and the color wheel placements of each scheme depicted on
Monochromatic designs can be boring or overbearing if highly-saturated versions of the dominant color are overused. Analogous schemes rely upon two or more nearby colors on the color wheel. Complementary schemes use two dominant colors that are on opposite sides of the color Wheel.
Complementary schemes use two dominant colors on opposite sides of the color wheel. Complex schemes use three or more dominant colors equally situated around the color Wheel. Achromatic schemes use only variations on black, white, and gray. Achromatic schemes may be helpful if secondary elements are complex and rich, but without these secondary elements, the design itself would be visually boring.
Choose dominant colors that will influence emotions aligning with your intended design goals. Use colors in ways that are intentional (e.g., accentuating important content) and natural or appropriate by drawing upon users’ prior experiences. Once you have created a color scheme you are happy with, you can import the color scheme into other applications in a variety of ways. The simplest and most versatile method, however, is to simply take a screenshot and place it into your authoring tool or to manually transfer the hexadecimal codes.
Ensure that color contrast is sufficient and that color is used strategically to allow learners to clearly and readily identify important content. Choose a color scheme that counterbalances the complexity of your content. Use whitespace and white, black, or gray text to increase contrast and to balance color-use. By following these suggestions, UX and LX designers can create designs that increase motivation and persistence by making user experiences more pleasing, more intentional, and less frustrating.