Color - The Shadow Ruler of UX

B2a5fdb0f627dc23841bad912473ab3c?s=47 Ivana
October 11, 2019

Color - The Shadow Ruler of UX

Oftenly mistaken for a purely aesthetic element color has the most immediate and direct psychological impact on experiences.
It has the power to evoke emotions and empower the effectiveness of a product, but it also has the ability to ruin otherwise meticulously crafted user experiences. It often rules from the shadows, disguised as a purely aesthetic element and a mean of beautification.
Let’s see how to overtake control and strategically use color in digital product development. Product teams often fail to remember that color has an enormous impact on our response to visual stimulation during human-computer interaction. The most immediate and direct psychological effect on experiences is, of course - color. With its complexity and various levels of subconscious effects, it triggers an emotional response. Color doesn’t live in a vacuum, and we need to start considering it in the context of use. There are many aspects that we need to take into account: target audience and their potential visual impairments, cultural background and individual differences, previous experiences and memories, the physical environments of use and compliance with the brand.

B2a5fdb0f627dc23841bad912473ab3c?s=128

Ivana

October 11, 2019
Tweet

Transcript

  1. @webcampzagreb #wczg THE SHADOW RULER OF UX WebCamp Zagreb October

    11th 2019 Color
  2. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    What color is the sky?
  3. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    blue
  4. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  5. None
  6. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  7. @webcampzagreb #wczg Ivana Miličić Digital Product Designer Bok!

  8. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  9. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  10. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  11. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  12. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  13. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Have you ever been so angry you saw red? Or felt green with envy? Maybe had the blues sometimes?
  14. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Color perception
  15. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  16. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Color, Environment, and Human Response, Frank H. Mahnke BIOLOGICAL REACTIONS CULTURAL INFLUENCES COLLECTIVE UNCONSCIOUS CONSCIOUS SYMBOLISM-ASSOCIATION FASHIONS, STYLES, AND TRENDS PERSONAL RELATIONSHIP
  17. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Where?
  18. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Every color experience begins as a physiological response to a stimulus of light
  19. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    10.000.000 bit/sec 40 bit/sec
  20. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    ultraviolet 400nm violet indigo blue green yellow orange red 700nm infrared
  21. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Sensation LIGHT cornea rods and cones fovea iris pupil optic nerve fibers lens
  22. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Wavelength (nm) Sensitivity 400 450 S M L 500 550 600 650 700 Trichromacy S M L input output 99,6% 91,3%
  23. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    330.000.000 (~5%) COLOR BLINDNESS
  24. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  25. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Anomalous Trichromacy Sensitivity 400 450 S ML 500 550 600 650 700 S M L input output 0,35% 5%
  26. Deuteranomaly Normal color vision

  27. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  28. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    1.300.000.000 people live with some form of vision impairment. VISUAL IMPAIRMENT
  29. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Meet Her Majesty Unconsious!
  30. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  31. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  32. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Culture deeply influence our color perception
  33. @webcampzagreb #wczg

  34. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Life experiences and memories shape all our responses
  35. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  36. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  37. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  38. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  39. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Women and men do see things differently
  40. None
  41. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Color preference continually changes
  42. @ive77i @webcampzagreb #wczg

  43. @ive77i @webcampzagreb #wczg

  44. @ive77i @webcampzagreb #wczg

  45. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  46. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Nothing is seen in isolation
  47. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  48. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  49. @ive77i Color - the shadow ruler of UX @itcampro #itcamp19

  50. None
  51. None
  52. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Subjective, emotional, intrinsic and deeply personal Color - the most volatile design element?
  53. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  54. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  55. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  56. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  57. Which color scheme matches the theme: Dentists?

  58. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    93% 5% 2% "... the colour is white, white resonates with purity, and I mean everyone wants a white teeth right ?" "I would expect more blue/ minty colours for dentists." "It can be any other field related to science and research..." "Blood and teeth"
  59. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  60. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  61. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  62. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  63. Which color scheme matches the theme: Crypto currencies?

  64. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    71% 15% 15% "... I don't think of brown when I think of Crypto" "For crypto I'm thinking deeper greens/blues but out of all three options I'd choose this" "... I'm used to more isometric illustration and gradients." "Looks cool and bright"
  65. @ive77i Color - the shadow ruler of UX

  66. @ive77i Color - the shadow ruler of UX

  67. @ive77i Color - the shadow ruler of UX

  68. None
  69. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Network 2:30 AM 98% GET STARTED Welcome <app name> wants to make it fun and simple to be happy. LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Mascot illustration, warm, positive, bright colors Welcome note, describing the app purpose Indicator of few slides describing core app features User taps button to proceed Network 2:30 AM 98% OR Facebook Twitter (555) 555-1234 email password SIGN UP Already signed up? Sign in I’d like to get to know you! LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Friendly line of text to initiate sign-up process App collects user cell phone number from system (user can change it if there is a need) User taps on sign-up button to create the account Once user signs-up stays logged in but if app is installed on another iPhone he/she can sign-in with existing account User fills email and password fields Alternative for filling username and password is signing-up with Facebook or Twitter Network 2:30 AM 98% Tell me more about yourself What health system do you belong to? Which doctor do you see there? LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Conversational dialogue Mascot icon, as it is talking to user Short sentence to encourage user to fill in all requested data Page indicators signal user to swipe forth (and back if needed) LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Network 2:30 AM 98% Fill the mood meter! Record your fi rst mood and begin seeing how it changes over time. Friendly text as said by mascot why to allow access to social media etc Mascot illustration as it is talking to user Page indicators signal user to swipe forth (and back if needed) Home Network 2:30 AM 98% Some intro text - maybe motivational thought or something like that FRIENDS & FAMILY TOOLS MOOD METER LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Mascot illustration with motivational random text to start using app Menu button opens sidebar navigation User slides through options and then taps on button to go to selected section Network 2:30 AM 98% FRIENDS & FAMILY TOOLS MOOD METER FRIENDS & FAMILY Friends & Family Feed Contact TOOLS Meditation Booster Journaling Good Day Cards MOOD METER Mood Check Weekly Mood PROFILE SETTINGS 3 10 1 LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Complete menu navigation Tap on menu icon closes the navigational menu Notifications for new stream posts and tasks Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis nobis sit pedi resciatiis pore comnimaion pro est, sinumquis eati conse Friends & Family Feed Network 2:30 AM 98% All Peri sapictiamus coreped ut aborepedis nos enet poria FROM Friend’s Name FROM Friend’s Name Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis quibus maxim LOL FROM Friend’s Name FROM Friend’s Name COOL USER TAG CONTACT FRIEND FROM Friend’s Name USER TAG 2 Photos Videos Texts LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Opens navigation User can see complete feed or categories. Current category has an indicator below. New post indicator Tap on each post enlarges it Current screen title Opens search Who sent the post Floating button for sending request to a friend Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis nobis sit pedi resciatiis pore comnimaion pro est, sinumquis eati conse Friends & Family Feed Network 2:30 AM 98% All Peri sapictiamus coreped ut aborepedis nos enet poria FROM Friend’s Name FROM Friend’s Name Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis quibus maxim LOL FROM Friend’s Name FROM Friend’s Name COOL USER TAG FROM Friend’s Name USER TAG 2 Photos Videos Texts Your friend/family member could use a funny video, a cool picture, or even just a short text. You can simply reply to this message with a quick note of support and we’ll be sure they get it! Cancel Send Friends name (555) 555-4321 LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Friend name (and picture) is shown after user choose him Sends request to friend via SMS Cancel request
  70. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  71. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  72. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    10s Where would you click to order food?
  73. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    10s Where would you click to order food?
  74. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  75. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    3s Where would you click to order food?
  76. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    3s Where would you click to order food?
  77. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    10s 85% participants said the action was clearer 3s
  78. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Which button color you feel as the most suitable?
  79. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Which button color you feel as the most suitable? 0% 86% 14%
  80. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  81. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    11s Where would you click to confirm the task?
  82. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    11s Where would you click to confirm the task?
  83. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  84. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Working with COLOR
  85. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    10.000.000 16.777.216 UNIQUE COLORS
  86. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  87. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    R - how red it is G - how green it is B - how blue it is 0-255 0-255 0-255
  88. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    rgba(220,125,162,0.5) #dc7da2 rgb(220,125,162) RGB HEX
  89. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    rgba(12,166,243,0.5) #0CA6F3 rgb(12,166,243) RGB HEX
  90. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    rgb(147,206,236) #93CEEC rgb(12,166,243) #0CA6F3 rgb(0,119,178) #0077B2
  91. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    violet indigo blue green yellow orange red
  92. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    0º 30º 150º 210º 240º 330º 90º 270º 180º 60º 300º 120º 0-360 HUE
  93. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Saturation 0% 50% 25% 75% 100% 0-100%
  94. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Lightness 0-100% 0% 50% 25% 75% 100%
  95. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    H 200 S 70 L 75 H 200 S 90 L 50 H 200 S 100 L 35
  96. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    HSL lightness saturation saturation brightness HSB
  97. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Designing color system Primary color(s) Neutrals Accent color(s)
  98. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Start from the ground up
  99. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  100. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  101. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    saturation lightness 100% 0 100%
  102. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    saturation lightness 100% 0 100%
  103. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  104. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  105. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

  106. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    luminosity 360º 0 100%
  107. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    220, 100, 50 220, 100, 80 190, 100, 80 220, 100, 50 200, 100, 75 220, 100, 50
  108. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    CHOOSE THE BASE
  109. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    DEFINE DARKEST/LIGHTEST
  110. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    FILL IN THE GAPS
  111. @ive77i Color - the shadow ruler of UX @webcampzagreb #wczg

    Primary Neutrals Accents
  112. None
  113. None
  114. Q&A TIME https://joind.in/talk/6e503 Thanks! SPECIAL THANKS GOES TO Helena Bukovac

    for helping with the research twitter.com/ive77i linkedin.com/in/ivanamilicic/