red herrings: debunking the pop psychology of color (uxpa 2014)

72
Red Herrings: Debunking The Pop Psychology Of Color UXPA 2014 London, UK Elizabeth Allen, PhD

Upload: elizabeth-allen

Post on 11-Aug-2014

349 views

Category:

Design


15 download

DESCRIPTION

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!

TRANSCRIPT

Page 1: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

RedHerrings:DebunkingThe PopPsychologyOf Color

UXPA 2014London, UK

Elizabeth Allen, PhD

Page 2: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

Shakespeare’s Sonnet CXI written in “chromacons”, Green-Armytage (2011)

Page 3: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 4: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

This “pop psychology” information about color often has little to no basis in research.

@elizallen_@Centralis_UX

Page 5: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

None, probably.

@elizallen_@Centralis_UX

A silly example….

Page 6: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

“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….

Page 7: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@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

Page 8: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

If a tree falls in the forest and there’s nobody around to hear it, does it make a sound?

@elizallen_@Centralis_UX

Page 9: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

If a tree falls in the forest and there’s nobody around to see it, does it make a color?

@elizallen_@Centralis_UX

Page 10: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

Color is a mental phenomenon: it’s something that does not exist outside our brains.

@elizallen_@Centralis_UX

Page 11: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 12: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

LIES!

@elizallen_@Centralis_UX

Page 13: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 14: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 15: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 16: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 17: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 18: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 19: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 20: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 21: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 22: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXIllusion by Beau Lotto

Page 23: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 24: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXAdapted from Monnier & Shevell

(2002)

Page 25: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXAdapted from Monnier & Shevell

(2002)

Page 26: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXAdapted from Monnier & Shevell

(2002)

Page 27: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXAdapted from Monnier & Shevell

(2002)

Page 28: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXIllusion by John Sandowski

Page 29: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXIllusion by John Sandowski

Page 30: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXIllusion by John Sandowski

Page 31: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UXIllusion by John Sandowski

Page 32: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 33: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX@elizallen_@Centralis_UX

Page 34: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 35: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 36: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXGlaucoma Associates of Texas

Page 37: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 38: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 39: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

Normal Color Vision Red-Green Color Blindness

@elizallen_@Centralis_UXColorblind tube map designed by 232 Studios & Ian

Hamilton

Page 40: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 41: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXMSN Spectra visual news

reader

Page 42: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXMSN Spectra visual news

reader

Page 43: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 44: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 45: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 46: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 47: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

Much has been written on which color is best for drawing attention to a call-to-action button.

@elizallen_@Centralis_UX

Page 48: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

72% increase in conversion rate with red call-to-action button

Page 49: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UX

21% increase in conversion rate with red call-to-action button

Page 50: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 51: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

@elizallen_@Centralis_UX

Page 52: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 53: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 54: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXarttherapyblog.com

Page 55: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXANSI/AAMI (2009).

Page 56: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

56 @elizallen_ @Centralis_UX@elizallen_@Centralis_UXinteriordesign.com

Page 57: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

Personal context can be abstract, or it can be...well…personal.

@elizallen_@Centralis_UX

Page 58: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

vs.

@elizallen_@Centralis_UXSchloss, Pogessi, & Palmer, (2011)

Page 59: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@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.

Page 60: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 61: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 62: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

vs.

@elizallen_@Centralis_UX

vs.

Page 63: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

It gets crazier…

Preference for a particular color combination can change based simply on recent exposure.

@elizallen_@Centralis_UX

Page 64: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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)

Page 65: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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

Page 66: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX

Page 67: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UXKISSmetrics.com

Page 68: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

@elizallen_@Centralis_UX@elizallen_@Centralis_UXfreemagenta.nl

Page 69: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

To sum up…

@elizallen_@Centralis_UX

Page 70: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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…

Page 71: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

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…

Page 72: Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

Thank you!