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

Color in Interface Experience

takanorip
September 29, 2020

Color in Interface Experience

takanorip

September 29, 2020
Tweet

More Decks by takanorip

Other Decks in Design

Transcript

  1. Color in Interface Experience
    Takanori Oki - 2020/09/29 - Tech Feed Summit #5

    View Slide

  2. Self introduction
    • Takanori Oki / @takanorip(Twitter: @takanoripe)
    • UI designer at ClassDo Inc. and Front-end web developer
    • Like: Figma, Web font, VTuber
    • I published some books. Check them out if you are interested.
    https://nextpublishing.jp/book/9900.html
    https://zenn.dev/takanorip/books/c793924600a6009b43c2

    View Slide

  3. Interface Experience

    View Slide

  4. "Interface Experience" is ...
    • Experience when using the interface
    • Interface Experience != User Experience

    View Slide

  5. How does color affect people?

    View Slide

  6. Color Psychology
    • Color psychology is the study of hues as a determinant of human
    behavior and feelings.
    • It is widely used in marketing ,branding and UI design, but is still in its
    developmental stages.
    • Feelings about color are often deeply personal and rooted in your own
    experience or culture.

    View Slide

  7. Color Can Influence Performance
    • One study found that seeing the color red before taking an exam
    actually hurt test performance.
    • Show more information:
    https://doi.apa.org/doiLanding?
    doi=10.1037%2F0096-3445.136.1.154
    • We must choose the appropriate color for UI and product.

    View Slide

  8. Color in Interface Experience

    View Slide

  9. Accessibility: color contrast
    • “Success Criterion 1.4.3 Contrast (Minimum) (Level AA): The visual
    presentation of text and images of text has a contrast ratio of at least
    4.5:1” (Web Content Accessibility Guidelines (WCAG) 2.1)
    • For more information:
    https://www.w3.org/WAI/WCAG21/Understanding/contrast-
    minimum.html

    View Slide

  10. Accessibility isn't for the poor eyesight.
    • Device brightness and contrast settings
    • External environment for browsing contents(Sunlight, etc…)
    • It's important to use colors that are easy to read in any environment.

    View Slide

  11. But…
    Accessible colors tend to be dark.

    View Slide

  12. Sample
    #93500F - #FFFFFF
    Raito - 1:6.19

    View Slide

  13. Balance of accessibility and feeling is
    important.

    View Slide

  14. Useful tools for color experience
    • Leonardo
    • https://leonardocolor.io/
    • An open source contrast-based color generator
    • Color Box
    • https://www.colorbox.io/
    • Color generator by Lyft design

    View Slide

  15. Thank you!

    View Slide