Color Pyramid

We are immersed in color; so much so that it is often taken for granted. This is a challenge for tudents learning design, who often have an instinctive knowledge of color but lack theoretical rules to guide exploration.

The goal of our educational design is to teach practical fundamentals of color usage to college-age, novice students.

Process

Domain research, design, iteration, and prototyping.

Domain and Cognitive Research

In order to scope the project initally, we did background research into how color is taught currently and created benchmark tasks, giving us a clear endpoint.

Cognitive Task Analysis is a research technique designed to elucidate the discrete knowledge components a person needs to complete a task. We created our own solutions to the task using a rational, prescriptive task analysis and generating a subset of specific concepts, skills, and schema we thought would be sufficient to solve the problems.

Afterwards, we interviewed three expert designers and conducted think-alouds with five novices. Using the empirical data, we adjusted the set of concepts we wanted to teach, breaking up some into smaller parts and adding others.

Cognitive Task Analysis Insights

The main changes we made to our cognitive model were providing a structured method for applying and proportioning color, and breaking color feeling and association into cultural and personal components.

The Pyramid Method

One often counter-intuitive principle of color usage is that the power of a color is inversely related to how much it is used; accent colors must be used sparingly lest they lose their ability to draw the eye. To teach this concept, we teach a pyramid method that starts with a base color, supported by a small amount of contrasting accent color and a neutral base. This gets at both the contrast and proportion needed to effectively draw the eye.

This is only one of many ways to apply color, but it is one that is easy to convey and practical for novices.

Personal and Cultural Color Associations

The other thing we were surprised by was the distinction between widespread cultural associations and weaker, personal associations. Cultural associations are strong enough to go from word to color (from “Love” to “Red”). Personal associations, by contrast, are more delicate and can only go from color to word, often through free association. Being able to delineate how widely an association is held is crucial to critiquing color usage.

Design and Iteration

Once we knew what cognitive building blocks we wanted to teach, we worked on mocking up a design to paper prototype with. Our design used pretraining, multimedia, explanatory feedback, and compared examples as the grounding for our instruction.

Pretraining:

Pretraining is used to teach baseline concepts such as hue and saturation.

Multimedia:

Multimedia are used to visually demonstrate the concepts we want to teach.

Explanatory Feedback:

Explanatory feedback makes sure that every test condition is also a learning opportunity.

Compared Examples:

Compared examples support student induction.

With the full flows built, we used printed versions to user test with. This exposed several usability issues as well as educational issues where concepts were not clearly explained or demonstrated. We then iterated on our designs using the test feedback. After testing the mock-ups on paper, I prototyped our application as an Android application to test the interactions.


With Qian Hu for E-Learning Design Principles, Fall 2014 at Carnegie Mellon University.