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

Color in Interface Experience

Avatar for takanorip takanorip
September 29, 2020

Color in Interface Experience

Avatar for takanorip

takanorip

September 29, 2020
Tweet

More Decks by takanorip

Other Decks in Design

Transcript

  1. 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
  2. "Interface Experience" is ... • Experience when using the interface

    • Interface Experience != User Experience
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. 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