Published on | Prototyping: From UX to Front End — Medium Tiffany Jiang

Researching how to use color coding to your advantage in creating designs and organizing information.

Color Theory in Technical Communication

“Unfortunately, color is a material so beset with silly misunderstandings and imagined magic that it is the editor’s worst temptation. It is perhaps even more difficult to exploit simply and forthrightly than to use type simply and forthrightly…Colors used badly in print and online documents can distract users, decrease their performance, and increase difficulty for the users (Keyes 1993).”

We have to be really deliberate about the colors we choose to use in our designs and why. When color isn’t used well or in the right context, it can become a distraction and cause a decrease in performance for users.

It’s important to consider the associations that people have to certain colors (ex: red and green). We may be able to use red on the website to color code a subject but it might have to be a darker one that doesn’t feel alarming:

In a U.S. safety manual, for example, the color red means warning or danger. Users from an American background will immediately notice the red signaling cue and likely read the information.”

Using Color to Differentiate Sections of Information

Color-Coded Sections – Designing Interfaces

Color should be used identify different sections of information found in an application or web page. If the website has many pages of content that could be organized into specific sections (subjects, chapters, sub-sections, etc), color should be used to give each area a specific look. Each section may take on its own type of branding.

Differentiating sections by color helps users understand where they are in the application navigationally. Over time, as they become exposed to the colors, they’ll develop a mental map for where different sections of content live.

Once users are attuned to the color schemes, they can use them. Even before then, they’ll know when they’ve left one section for another, if they notice that the color scheme changed. So color-coding works to distinguish one section from another; it makes the boundaries clear.

It’s easier for users to mentally map out smaller chunks of a navigational space, such as one section, than the whole space at once — you should do this with a large UI in any case, whether you use color coding or not.

Apple color coded the different sections of their first website to give each area a distinct sense of branding and communication. In the left image, you can see that they branded their products (Mac & Quicktime) with a light blue. For the Mac OS X Panther page, the colors turn to dark gray, giving it a serious look. For the Service & Support section, the page is branded with light purple. They make it very easy to start understanding what it is that you are looking for and what you are looking at.

Creative uses of different colors can also make your UI look nicer and less boring. It might even contribute to the branding of the UI — see the Apple examples below:

How: Pick one of the interface colors and change it for each section. Usually, the background color is too much change — the Coltrane example only works because the visual framework is so strong and distinctive. Most designs work better with a trim color, like a border, or the background of a small amount of text.

Remember that colorblind users won’t necessarily see the differences in colors from one section to another. That’s why color should never be the only way of distinguishing sections. You also need to have other signposts — indicators on navigation bars, for instance, and page or window titles.

The instructional effect of coding (color and black and white) on information acquisition and retrieval

https://link.springer.com/article/10.1007/BF02765207 (Preview Only)

This research finds that color coding has an important effect on improving information acquisition and memory. People have a limited capacity for processing information and visual stimuli. Color helps us categorize the instructional stimuli we are presented with.

A number of studies were done to investigate the use of color for cueing purposes. The researchers found that, “as the number of color coded items increases, the value of color as a cue for selecting important information decreases. As the total number of items decreases, the value of color decreases. In other words, in a very dense visual display, color coding at some minimal level helps in picking out important information, but if you increase the use of color, its value as a selection cue diminishes.”

It’s clear that using color as a coding agent can help students retain information and help with learning. However, if it’s done poorly or if the student isn’t introduced to the color coding properly, it won’t work effectively.

“If instructional stimuli received by the senses must be coded before becoming knowledge, then the process of coding should be a very important issue to educators seeking to improve the quality of instruction and evaluation. If information is not adequately coded prior to being transmitted, or if the learners do not receive sufficient directions for coding specific types of information, or if learners have not had ample opportunity to develop the basic visual literacies for coding the incoming stimuli, learning will likely be, at best, less than optimum.”

Psychology of Color on Learning

This article examines the psychology behind the colors, blue, green and orange, on learning. Green helps people feel restful and calm. This leads to improved rates of concentration and efficiency. It’s one of the easiest colors on our eyes and reminds us of the outdoors. Performers stay in the “green room” before making appearances as it is a relaxing space.

The Psychology of Color: How Do Colors Influence Learning?

“Some studies have shown that people who work in green offices have higher rates of job satisfaction, and consumers have been shown to spend more time shopping in stores that are painted green.

Another study, led by Dr. Kate Lee, examined 150 university students. She gave the group a boring, monotonous task that dragged their attention span to a breaking point, pressing a series of numbers over and over as they read off a computer screen. The students were told not to press keys when the number three appeared on the screen. Then break time came, and in a 40-second window half of the group viewed a green roof, while the others looked out onto a bare concrete roof. Amazingly, the research showed that students who looked at the green view made fewer errors and had overall better concentration.”

http://slideplayer.com/slide/8851469/

Blue
The color blue is associated with peace and trust. It is one of the most popular colors used in eLearning. It helps ease the anxiety that comes with learning difficult topics. It’s easier for people to absorb the material with the color blue.
Green
Green helps bring up feelings of growth, balance and tranquility. Using or showing the color green can help students feel relaxed in preparation for an exam. I’d consider seeing how the Grandmaster experience changes if the background is a calming green versus the purple we used elsewhere.
Purple
Symbolic of imagination, fun, and sophistication. If you’re trying to create a more upbeat learning atmosphere or one that encourages learners to have fun and get excited about the educational process, then purple is the ideal choice. Opt for purples with blue undertones when striving for a relaxed mood, and more red undertones if you’re trying to excite and engage learners.

In order to take advantage of this, eLearning developers should combine colors with lesson material; for instance, using color coding to enhance learning. For example, by using a colored background on screens with facts and concepts, learners with associate the color with the concepts and this will help them recall the information. Highly technical subjects, in particular, can benefit from this color coding method.

Khan Academy: Use of Color-Coding

I started looking into where and how Khan Academy uses color coding throughout their website.

When you first arrive on their page, you see that there’s a ton of blue on the screen. By just looking at this screenshot, you wouldn’t know that there’s color coding involved. When you hover over one of the subjects, the text changes to what it’s color coded as (ex: Science & Engineering is in magenta).

Unique Subject Colors

If you scroll down, you can see that all the text is highlighted based on the subject. They pair each topic with a unique icon and colored background as we do for our topics on the homepage. It’s odd that their “Arts & Humanities” category seems to have an image in place instead of an icon.

They also do not choose to use a traditional red in any of their color coding. I’m assuming they chose to intentionally use a purple/pink shade.

I wouldn’t say this color coding is very effective (at least on this page). There isn’t a ton of contrast between the colors. The text is so thin and small, it’s hard to see some of the darker colors and know that it’s not black.

List of subjects to choose from on their home page.

Finding Subtopics: Breaks Color Coding

If you click on a topic, you’re brought to this page. The only thing that remains in color is the topic name itself. The links below it are in a typical shade of light blue. I’m surprised that the color coding doesn’t follow through here.

Looking at subcategories of AP Macroeconomics

Single Topic Pages

If you click into one of those links, the topic color comes back in a bunch of elements on the screen.

Gray Lesson Links: “Not Completed Yet”

The lesson links are shown in gray which is probably necessary since there’s so much color on the page. It sort of throws me off that the lessons are in gray while the side bar is in bright orange. I have no motivation to click on the links since they look sort of inactive. I’m wondering if I have to finish watching the video for them to show up in color as “done” or “reviewed”.

I finished watching the first video and the link is now in orange which is a nice unexpected reward. Now, I feel more motivated to get through all the links. I appreciate that the color helps me keep track of which lessons I’ve watched already. Side note: I noticed that they make sure to color code even some of the call to actions like “go to lesson page” in the top right. We could explore doing this as well on our pages.

Once you’ve watched a video, the color changes to orange.Colored call to actions remind you of what section you’re in.

What have I reviewed already?

Maybe we could explore using color to mark what a student has read through or watched in the lesson explanations. This might be a problem though if we mark explanations as “read” when they only clicked through it to get to the next few. You’d probably have to track that they stayed on the page for a minute or two to mark it as “read”. Maybe we just give students an option to self-report that they’ve finished going through a lesson and totally get it.

Search Results: No Color Coding

When you hover over the search/nav bar on Khan Academy, it changes from the subject color to plain white. Based on our design, I’m surprised they don’t continue color coding search results. I’m thrown off by the green highlighted links in the search results. I’d expect them to be the light blue color for Math Algebra II since that’s what I’ve been shown consistently in the experience.

Different Elements: Slight Color Changes

In the Medium article I shared earlier about how they picked a new green for the site, they mentioned that they chose specific greens for: your highlights, other people’s highlights, call to actions, etc. I see that Khan Academy does something similar. The page kicker (“Math”) is in a light blue. The header color matches the icon background for “Functions”. It’s a different blue than the call to actions (“Practice”, “Functions”, and “Start” buttons). Those are in a dark blue green. There’s a very clear separation between the blue that’s used for decorative purposes (ex: header) and what’s used for call to actions which I think is pretty useful.

Varying shades of blue are seen on the page (header vs. call to actions).<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Effective Color Coding was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Effective Color Coding

Cool stuff, every week

More Articles