It’s no secret that color is important to designers: when employed correctly, color not only looks pretty, but also can capture attention, convey a message, and toy with emotions. The problem is, UXers often miss the mark when thinking about how to use color effectively – we rely on “pop psychology” knowledge that hasn’t been supported by scientific research, or even worse, is just plain wrong. In this presentation, I’ll use fun visual demos and interesting color perception research to explore the RIGHT ways to use color to communicate emotion, significance, and meaning when designing user experiences. I’ll also discuss how to design more accessible experiences for people with color perception problems, such as colorblind and older users. You will leave the session with a number of flexible color-choice strategies for designs that are more memorable, meaningful, and easier to use!
6. “The results of this study…do not
support the contention that pink lowers
blood pressure…or that it reduces
strength.”
@elizallen_
@Centralis_UX
A not-so-silly example….
23. Color starts with light, but it’s not determined
by light alone—context plays a major role in
determining the colors we perceive.
@elizallen_
@Centralis_UX
32. As designers, we need to pay attention not just
to the particular colors we choose, but also
how they work together to create a context.
@elizallen_
@Centralis_UX
37. About 35% of people over the age of 60 have
measurable difficulty discriminating different
shades of blue.
Approximately 8% of men and 0.5% of women
are “colorblind”.
@elizallen_
@Centralis_UX
38. How do we make sure the colors in our
designs communicate effectively to all users,
regardless of context and ability?
• Graceful degradation
• Redundant coding
@elizallen_
@Centralis_UX
Simulation
Testing
39. Normal Color Vision Red-Green Color Blindness
@elizallen_
@Centralis_UXColorblind tube map designed by 232 Studios & Ian Hamilton
43. Some strategies to estimate color accessibility:
• Check a grayscale version
• Simulate the colorblind experience
• View on different devices
• Test with colorblind users
@elizallen_
@Centralis_UX
44. We use color for more than just telling the user
the meaning of different parts of an interface.
We also commonly use color to direct users’
attention and communicate priority.
@elizallen_
@Centralis_UX
53. Context is more than what’s out in the physical
environment. A user’s personal context can
also influence how they interpret color.
@elizallen_
@Centralis_UX
59. @elizallen_
@Centralis_UXSchloss, Pogessi, & Palmer, (2011)
Students come into the lab and rate their preference
for 40 colors.
After rating the colors, students were asked
questions about their school spirit.
vs.
60. Students preferred their own
school’s colors to their rival
school’s colors.
This effect was greatest with
the students who had a strong
emotional investment in the
rivalry.
Colorpreference
@elizallen_
@Centralis_UXFigure simplified & adapted from Schloss, Pogessi, & Palmer, (2011)
LowHigh
61. Color preference is so malleable that it can be
pushed around by users’ feelings towards a
social institution…or perhaps even a brand or
interface.
@elizallen_
@Centralis_UX
63. It gets crazier…
Preference for a particular color combination
can change based simply on recent exposure.
@elizallen_
@Centralis_UX
64. Colors were secretly arranged in “triplets”:
A B C D
…
Participants viewed a stream of colors:
Time
@elizallen_
@Centralis_UX
Vs.
Participants made preference judgments:
Adapted & simplified from Turk-Browne et al. (2008)
65. It’s not just about stereotypical associations—
it’s also about which colors appeal in the given
context and have a strong connection to the
user’s past experience.
@elizallen_
@Centralis_UX
70. Emotional reaction to color may be influenced
by a user’s personal context and past
experience in addition to abstract associations.
Attention can be grabbed by any color…so
long as the context supports it.
Discrimination between different colors is
strongly affected by the physical context and
the user’s perceptual abilities.
@elizallen_
@Centralis_UX
Some takeaways…
71. Try out strategies such as redundant coding
and graceful degradation in your designs.
Anticipate any strong color preferences in your
user population.
Be skeptical of pop psychology “facts” about
color in UX and design publications.
@elizallen_
@Centralis_UX
Some recommendations…