Color in Interface Experience

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Interface Experience

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

How does color aﬀect people?

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

Color Can Inﬂuence 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.

Slide 8

Slide 8 text

Color in Interface Experience

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

But… Accessible colors tend to be dark.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Balance of accessibility and feeling is important.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Thank you!