Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

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!

Published in: Design
  • Be the first to comment

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

  1. 1. Red Herrings: Debunking The Pop Psychology Of Color UXPA 2014 London, UK Elizabeth Allen, PhD
  2. 2. Shakespeare’s Sonnet CXI written in “chromacons”, Green-Armytage
  3. 3. @elizallen_ @Centralis_UX
  4. 4. This “pop psychology” information about color often has little to no basis in research. @elizallen_ @Centralis_UX
  5. 5. None, probably. @elizallen_ @Centralis_UX A silly example….
  6. 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….
  7. 7. @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
  8. 8. If a tree falls in the forest and there’s nobody around to hear it, does it make a sound? @elizallen_ @Centralis_UX
  9. 9. If a tree falls in the forest and there’s nobody around to see it, does it make a color? @elizallen_ @Centralis_UX
  10. 10. Color is a mental phenomenon: it’s something that does not exist outside our brains. @elizallen_ @Centralis_UX
  11. 11. @elizallen_ @Centralis_UX
  12. 12. LIES! @elizallen_ @Centralis_UX
  13. 13. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  14. 14. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  15. 15. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  16. 16. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  17. 17. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  18. 18. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  19. 19. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  20. 20. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  21. 21. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  22. 22. @elizallen_ @Centralis_UXIllusion by Beau Lotto
  23. 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
  24. 24. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  25. 25. @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  26. 26. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  27. 27. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Adapted from Monnier & Shevell (2002)
  28. 28. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  29. 29. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  30. 30. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  31. 31. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX Illusion by John Sandowski
  32. 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
  33. 33. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX
  34. 34. @elizallen_ @Centralis_UX
  35. 35. @elizallen_ @Centralis_UX
  36. 36. @elizallen_ @Centralis_UXGlaucoma Associates of Texas
  37. 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. 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. 39. Normal Color Vision Red-Green Color Blindness @elizallen_ @Centralis_UXColorblind tube map designed by 232 Studios & Ian Hamilton
  40. 40. @elizallen_ @Centralis_UX
  41. 41. @elizallen_ @Centralis_UXMSN Spectra visual news
  42. 42. @elizallen_ @Centralis_UXMSN Spectra visual news
  43. 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. 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
  45. 45. @elizallen_ @Centralis_UX
  46. 46. @elizallen_ @Centralis_UX
  47. 47. Much has been written on which color is best for drawing attention to a call-to-action button. @elizallen_ @Centralis_UX
  48. 48. @elizallen_ @Centralis_UX 72% increase in conversion rate with red call-to-action button
  49. 49. @elizallen_ @Centralis_U X @elizallen_ @Centralis_UX 21% increase in conversion rate with red call-to-action button
  50. 50. 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
  51. 51. @elizallen_ @Centralis_UX @elizallen_ @Centralis_UX
  52. 52. @elizallen_ @Centralis_UX
  53. 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
  54. 54. @elizallen_
  55. 55. @elizallen_ @Centralis_UXANSI/AAMI (2009).
  56. 56. 56 @elizallen_ @Centralis_UX@elizallen_
  57. 57. Personal context can be abstract, or it can be...well…personal. @elizallen_ @Centralis_UX
  58. 58. vs. @elizallen_ @Centralis_UXSchloss, Pogessi, & Palmer, (2011)
  59. 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. 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. 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
  62. 62. vs . @elizallen_ @Centralis_UX vs .
  63. 63. It gets crazier… Preference for a particular color combination can change based simply on recent exposure. @elizallen_ @Centralis_UX
  64. 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. 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
  66. 66. @elizallen_ @Centralis_UX
  67. 67. @elizallen_
  68. 68. @elizallen_ @Centralis_UX @elizallen_
  69. 69. To sum up… @elizallen_ @Centralis_UX
  70. 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. 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…
  72. 72. Thank you!