I’m aiming this monthly “Nuts and Bolts” column primarily at those who’ve found their way to e-Learning design through less-than-formal means. So far I’ve focused largely on those who came to the field from IT and Web work. This month I have something for another audience: those who came to e Learning from a background designing and delivering instruction for the traditional classroom.
There are simple design basics that can help to make or break a program. Choices related to fonts, placement of content on a screen, and application of an organization’s standards like number of screens matter. This month let’s look at a design issue that may affect many learners but that can be easy enough to correct: Color.
I was helping with a classroom-based train-the-trainer (T3) course a couple of weeks ago when one of the guest instructors, writing on the whiteboard, made an offhand comment about staying away from red markers as some people had difficulty seeing red. This touched off what I felt was a surprising amount of conversation; having been in “the biz” for so many years, I assumed this was something even novice trainers knew.
Wikipedia (http://en.wikipedia.org/wiki/Color_blindness) says: “In the United States, about 7 percent of the male population – or about 10.5 million men – and 0.4 percent of the female population either cannot distinguish red from green, or see red and green differently (Citation: Howard Hughes Medical Institute, 2006). It has been found that more than 95 percent of all variations in human color vision involve the red and green receptors in male eyes. It is very rare for males or females to be ’blind‘ to the blue end of the spectrum” – difficulty with green can mean difficulty with blues and yellows as well.
It’s extremely rare that people see no color at all. Even then they see something, but it may all be gray or shades of gray. Many will see a blending of colors. For instance, blue and violet may look more like “blueviolet.” Dark reds, greens, and browns may all look something like an olive green. My husband, a diehard Cincinnati Reds fan, can’t differentiate shades of red, and I haven’t the heart to tell him that the “red” car he’s so fond of … is actually burgundy. A friend reports having a terrible time with the dark colors in video games, and can barely detect document edits done in red. So in training design, using red for emphasis, for example, may be lost, and may not have the contrast against a different-colored background that you might think it does.
Consider
Consider, for instance, the map shown in Figure 1 and again in Figure 2. To the person with complete colorblindness, the “X” still makes sense, even without the red, but the red and green lines marking different routes look the same:
Figure 1. The normal vision view.
Figure 2. The complete color blindness view of Figure 1.
This is easy enough to fix: just change the types of dashes on one of the lines, as shown in Figure 3:
Figure 3. Figure 2 made intelligible by changing the Route symbols.
The lack of contrast is still a concern, though. The change in line types makes the information clearer, but because of the map’s color background the lines are not necessarily that much easier to see. Try going with a lighter background, or darker lines:
Figure 4. The map gets further improvement by improving the contrast between route lines and background.
Use icons
As with the arrow and X on the map, an icon can convey information. Compare the use of the dots representing correct/incorrect feedback in Figure 5, which might appear all gray to some learners, to the use of icons in Figure 6. The icons will make sense even to learners who have challenges in differentiating colors.
Figure 5. These dots will all appear gray to some learners.
Figure 6. Using easily distinguished icons eliminates the problem in Figure 5.
If you’re using color for emphasis, as with the X on the map, or to provide information, as with the lines in Figure 1 and the dots in Figure 4, be sure what you’re doing will be clear to all your learners. Trick: Check your images before launching your program. Depending on your graphics program, check your images by setting them to grayscale or by desaturating them to see how they look without color. (In PowerPoint, select the image and choose Picture Tools-Recolor-Grayscale.)
So when designing, be careful of using color as a cue – remember that there are those who may miss it. Boldness, contrast, and pattern differentiation can go a long way toward preventing problems. Also, always, always look at programs on a variety of other monitors and devices – the variations in color display might surprise you.
Want more?
-
Duarte, Nancy. (2008). slide:ology. O’Reilly Press.
-
Reynolds, Garr. ( 2008) Presentation Zen Design. New Riders Press.
Also: Don’t forget our learners with even more visual challenges