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

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

of 72

  • date post

    11-Aug-2014
  • Category

    Design

  • view

    245
  • download

    3

Embed Size (px)

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 of Red Herrings: Debunking the Pop Psychology of Color (UXPA 2014)

  • Red Herrings: Debunking The Pop Psychology Of Color UXPA 2014 London, UK Elizabeth Allen, PhD
  • Shakespeares Sonnet CXI written in chromacons, Green-Armytage
  • @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 studydo not support the contention that pink lowers blood pressureor 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 theres nobody around to hear it, does it make a sound? @elizallen_ @Centralis_UX
  • If a tree falls in the forest and theres nobody around to see it, does it make a color? @elizallen_ @Centralis_UX
  • Color is a mental phenomenon: its 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 its not determined by light alonecontext plays a major role in determining the colors we perceive. @elizallen_ @Centralis_UX
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  • @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  • @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion 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 Simulation Testing
  • 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
  • @elizallen_ @Centralis_UXMSN Spectra visual news
  • 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_U X @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 whats out in the physical environment. A users 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...wellpersonal. @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 schools colors to their rival schools 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
  • Color preference is so malleable that it can be pushed around by users feelings towards a social institutionor perhaps even a brand or interface. @elizallen_ @Centralis_UX
  • vs . @elizallen_ @Centralis_UX vs .