Color in Interface Experience

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