the role
of color
&
functional
design.

Available research on using color for cognitive
functions has largely been inconsistent and
inconclusive.
(Dwyer & Lamberski, 1982-83)

Color serves to cue and direct a learner’s attention.

When you advertise...
•You purposely
enhance the
cosmetic and
motivational
attributes.

When you design...
• Realism deters a learner’s ability to interpret the instructional message.
• Learners may have difficulty identifying and attending to relevant information.
(Dwyer, 1987)
• What is your interpretation of the following messages?
Graphics by: Department of Homeland Security. (c) 2006

The intended messages...
• “If you become aware of an unusual or suspicious
release of an unknown substance nearby, It doesn’t
hurt to protect yourself”.
• “Cover your mouth and nose with layers of fabric that
can filter air but still allow breathing”.
• “Wash with soap and water and contact authorities”.
Graphics by: Department of Homeland Security.
http://www.ready.gov/america/_downloads/biological.pdf(c) 2006

When you design...
•Your
intent is to
teach and
instruct.
Graphics by: Department of Homeland Security. (c) 2006

However...
Graphics by: Department of Homeland Security.
http://www.ready.gov/america/_downloads/nuclear.pdf
(c) 2006

More examples from ready.gov :
Graphics by: Department of Homeland Security. (c) 2006

What about Emotion?
• Unless you desire to evoke emotion, contrast and realism will not be your
allies.
Graphics by: Department of Homeland Security. (c) 2006

Now it’s time for some fun!
The following slides provide a parody of the
ready.gov imagery. If you think you may feel
offended, you may skip to slide 24.

• “ If you have set yourself on fire, do not run! “
Graphics by: Department of Homeland Security. (c) 2006

• “If you spot a terrorist arrow, pin it against the wall
with your shoulder.“
Graphics by: Department of Homeland Security. (c) 2006

• “ If you are sprayed with an unknown substance,
stand and think about a cool design for a new tattoo“
Graphics by: Department of Homeland Security. (c) 2006

• “ The proper way to eliminate smallpox is to wash with
soap, water and at least one(1) armless hand“
Graphics by: Department of Homeland Security. (c) 2006

• “Hurricanes, animal corpses and your potential new
tattoo have a lot in common. Think about it.“
Graphics by: Department of Homeland Security. (c) 2006

• “ If a door is closed, karate chop it open! “
Graphics by: Department of Homeland Security. (c) 2006

• “ After exposure to radiation it is important to consider
that you may have mutated to gigantic dimensions:
watch your head.“
Graphics by: Department of Homeland Security. (c) 2006

• “ If you are trapped under falling debris, conserve
oxygen by not farting.“
Graphics by: Department of Homeland Security. (c) 2006

• “ Do not drive a station wagon if a power pole is
protruding from the hood. “
Graphics by: Department of Homeland Security. (c) 2006

• “ A one-inch thick piece of plywood should be
sufficient protection against radiation.“
Graphics by: Department of Homeland Security. (c) 2006

• “If you hear the Backstreet Boys, Michael Bolton or
Yanni on the radio, cower in the corner or run like hell. “
Graphics by: Department of Homeland Security. (c) 2006

• “ If you spot terrorism, blow your anti-terrorism whistle.
If you are Vin Diesel, yell really loud. “
Graphics by: Department of Homeland Security. (c) 2006

For more information about the graphic
parodies, please visit the source at:
“Don't be afraid. . . be ready!”
http://home.carolina.rr.com/zerb/beready/

Behavioral synergy
• Color and realism might affect learner’s attitudes towards instruction and their
engagement level. Although “no substantive research is available to support
the argument” (Surber & Leeder, 1998).
Graphics by: Department of Homeland Security. (c) 2006

Motivational appeal: Use it or loose it!
• As an effective attention-gaining
device.
• To show contrast, in order to direct or
focus attention.
• To show relationships between
across screen objects
• To increase motivation, interest, and
perseverance. Though, this is a fine
line to distraction.

The effect of color has not been shown to be potent.

Poor color choices have a high
potential for distraction.
Graphic by: Apple, Inc. (c) 2006

Evelyn Wells: General Principles of Design.

Do not use color
indiscriminately.

Color is...
aesthetic and cognitive
not
cosmetic and decorative

Keep a lean palette.
Graphic by: Listerine, Inc. (c) 2006

Make it work as part of a greater whole.
Creative Commons Picture by zombizi in London, England.

Have foresight into it’s practical use.
T-Mobile Telecom. New York, NY.

Shift paradigms:
Experiment !
Creative Commons Picture by zombizi in London, England.

Cognitive Principles

Cognitive Principles
• Emphasize relations by grouping items and color coding them.
• Dynamic events can be shown with color changes.
• Use the 5 +/- 2 rule when using color to code items.
• Be wise with high saturation and brightness hues.
• Establish priorities using color temperature, be logical and reasonable.
• Be cross-culturally adept.

Physiological Design
• Do not use highly saturated,
spectrally extreme color
simultaneously.
• Avoid Juxtaposition.

Be wise with blue.
(new Ford Mustang semi-transparent billboards)
Ford Motor Co. (C) 2006

Be wise with blue.
(new Ford Mustang semi-transparent billboards)
Ford Motor Co. (C) 2006

• Use red and green
for central colors,
not for background
areas or for small
peripheral elements.
Times Square in New York City. September 2006

• Avoid adjacent colors
which differ only in hue.
Graphic by: National Bank of Turkey. (c) 2006

• Consider the final
viewing environment.
Graphic by: Hewlett Packard Co. (c) 2006

Avoid single-color distinctions.
Graphic: Red Cross International. (c) 2006

Functional design recommendations
A journey through five instructional applications of graphics: cosmetic,
motivation, attention-gaining, presentation and practice*.

I. Pictures
• Can aid learning.
• Cannot aid learning.
• Cannot aid learning and deter.
Graphic by: Amnesty International (c) 2006

II. Selection
• The needs of the
learner, the
content and the
nature of the task.
Graphic: GE Home Appliances, Germany (c) 2006

III. Attention
• Graphics should not distract
from the lesson goals or
objectives.
• In marketing, this rule is
always “broken” as you can
see in the graphic.
Graphic by: AXE, Inc. (c) 2006

IV. Instructional value
• Cosmetic graphics do not carry
instructional value.
• Coloring columns to simulate 2D
french fries actually deter the
instructional value of the information
contained in that newspaper page.
Furthermore, the choice of color is
poor as yellow is not a good color for
the amount and the density of text.
Graphic by: McDonalds, Inc. (c) 2006

V. Quality
• Instructional quality may be
hindered by adding
‘cosmetic’ graphics after
the Analysis phase.
• Transitions should be
consistent within groupings
and categories.
Graphic by: Hoover Technologies, Ltd. (c) 2006

V. Quality
Graphic by: AXE, Inc. (c) 2006

VI. Motivation
• Procure interest, be careful of distraction.
Graphic by: Ché, Magesin. Paris, France. (c) 2006

VII. Contextualize Instruction
• Increase the intrinsic motivation
of the learner.
• Stimulate Imagination and
fantasy.
• Graphics are used to
complement and supplement
the entire instructional
system.
Graphic by: The Economist. (c) 2006

VIII. Attention
• The focus are the instructional
materials, nothing else.
• Pull learners into instruction in
general and to a task in
particular.
• Avoid monotonous stimuli.
• Excessive realism may distract
student attention from specific
or essential information.
Graphic by: l’tour. (German Travel Agency). (c) 2006

IX. Processing
Information
• Cue learners with graphics,
if at all needed.
• Text can stand on its own!
• Graphic: This CTA train
ticket dispenser adds a
significant cue to what the
intended message is: feed a
hungry child.
Graphic by: operationhunger.org (c) 2006

X. Value
• Instructional value of
spontaneous internal
imaging depends heavily
on the context.
• Value is iterative: to some
people grabbing a
bathroom handle is
ordinary regardless of
wether or not they wash
their hands, placing an ad
such as the one shown in
the graphic, may challenge
preconceived notions with
the alternative visual
proposition.
Graphic: Underground transit facilities. City of New York, NY. (c) 2006