Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Color - The Shadow Ruler of UX

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.

Ivana

October 11, 2019
Tweet

More Decks by Ivana

Other Decks in Design

Transcript

  1. @webcampzagreb #wczg
    THE SHADOW RULER OF UX
    WebCamp Zagreb
    October 11th 2019
    Color

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Deuteranomaly
    Normal color vision

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. @ive77i
    Color - the shadow ruler of UX @webcampzagreb #wczg
    Culture deeply influence
    our color perception

    View full-size slide

  32. @webcampzagreb #wczg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. @ive77i
    @webcampzagreb #wczg

    View full-size slide

  41. @ive77i
    @webcampzagreb #wczg

    View full-size slide

  42. @ive77i
    @webcampzagreb #wczg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Which color scheme matches
    the theme: Dentists?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. @ive77i
    Color - the shadow ruler of UX

    View full-size slide

  62. @ive77i
    Color - the shadow ruler of UX

    View full-size slide

  63. @ive77i
    Color - the shadow ruler of UX

    View full-size slide

  64. @ive77i
    Color - the shadow ruler of UX @webcampzagreb #wczg
    Network 2:30 AM 98%
    GET STARTED
    Welcome
    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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    30º
    150º
    210º
    240º
    330º
    90º
    270º
    180º
    60º
    300º
    120º
    0-360
    HUE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  107. 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/

    View full-size slide