red herrings: debunking the pop psychology of color (uxpa 2014)
Post on 11-Aug-2014
349 Views
Preview:
DESCRIPTION
TRANSCRIPT
RedHerrings:DebunkingThe PopPsychologyOf Color
UXPA 2014London, UK
Elizabeth Allen, PhD
Shakespeare’s Sonnet CXI written in “chromacons”, Green-Armytage (2011)
@elizallen_@Centralis_UX
This “pop psychology” information about color often has little to no basis in research.
@elizallen_@Centralis_UX
None, probably.
@elizallen_@Centralis_UX
A silly example….
“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….
@elizallen_@Centralis_UX@elizallen_@Centralis_UX@elizallen_@Centralis_UX
Color attracts attention
Color evokes emotion
Color just looks pretty!
We can use color more effectively if we understand
• How it is created• How people perceive it• How it is affected by
context
@elizallen_@Centralis_UX
Color conveys meaning
If a tree falls in the forest and there’s nobody around to hear it, does it make a sound?
@elizallen_@Centralis_UX
If a tree falls in the forest and there’s nobody around to see it, does it make a color?
@elizallen_@Centralis_UX
Color is a mental phenomenon: it’s something that does not exist outside our brains.
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
LIES!
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
@elizallen_@Centralis_UXIllusion by Beau Lotto
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
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXAdapted from Monnier & Shevell
(2002)
@elizallen_@Centralis_UXAdapted from Monnier & Shevell
(2002)
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXAdapted from Monnier & Shevell
(2002)
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXAdapted from Monnier & Shevell
(2002)
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXIllusion by John Sandowski
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXIllusion by John Sandowski
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXIllusion by John Sandowski
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXIllusion by John Sandowski
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
@elizallen_@Centralis_UX@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXGlaucoma Associates of Texas
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
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
SimulationTesting
Normal Color Vision Red-Green Color Blindness
@elizallen_@Centralis_UXColorblind tube map designed by 232 Studios & Ian
Hamilton
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXMSN Spectra visual news
reader
@elizallen_@Centralis_UXMSN Spectra visual news
reader
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
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
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
Much has been written on which color is best for drawing attention to a call-to-action button.
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
72% increase in conversion rate with red call-to-action button
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
21% increase in conversion rate with red call-to-action button
Does this mean red is always the best choice when directing users to take action?
Not if we take context into account.
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
@elizallen_@Centralis_UX
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
@elizallen_@Centralis_UXarttherapyblog.com
@elizallen_@Centralis_UXANSI/AAMI (2009).
56 @elizallen_ @Centralis_UX@elizallen_@Centralis_UXinteriordesign.com
Personal context can be abstract, or it can be...well…personal.
@elizallen_@Centralis_UX
vs.
@elizallen_@Centralis_UXSchloss, Pogessi, & Palmer, (2011)
@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.
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.
Colo
r pr
efer
ence
@elizallen_@Centralis_UXFigure simplified & adapted from Schloss, Pogessi, & Palmer,
(2011)
Low
H
igh
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
vs.
@elizallen_@Centralis_UX
vs.
It gets crazier…
Preference for a particular color combination can change based simply on recent exposure.
@elizallen_@Centralis_UX
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)
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
@elizallen_@Centralis_UX
@elizallen_@Centralis_UXKISSmetrics.com
@elizallen_@Centralis_UX@elizallen_@Centralis_UXfreemagenta.nl
To sum up…
@elizallen_@Centralis_UX
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…
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…
Thank you!
top related