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
  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
  3. Interface Experience

  4. "Interface Experience" is ... • Experience when using the interface

    • Interface Experience != User Experience
  5. How does color affect people?

  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.
  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.
  8. Color in Interface Experience

  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
  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.
  11. But… Accessible colors tend to be dark.

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

  13. Balance of accessibility and feeling is important.

  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
  15. Thank you!