Color - The Shadow Ruler of UX

@webcampzagreb #wczg THE SHADOW RULER OF UX WebCamp Zagreb October
11th 2019 Color

@ive77i Color - the shadow ruler of UX @webcampzagreb #wczg
What color is the sky?

blue

@webcampzagreb #wczg Ivana Miličić Digital Product Designer Bok!

Have you ever been so angry you saw red? Or felt green with envy? Maybe had the blues sometimes?

Color perception

Color, Environment, and Human Response, Frank H. Mahnke BIOLOGICAL REACTIONS CULTURAL INFLUENCES COLLECTIVE UNCONSCIOUS CONSCIOUS SYMBOLISM-ASSOCIATION FASHIONS, STYLES, AND TRENDS PERSONAL RELATIONSHIP

Where?

Every color experience begins as a physiological response to a stimulus of light

10.000.000 bit/sec 40 bit/sec

ultraviolet 400nm violet indigo blue green yellow orange red 700nm infrared

Sensation LIGHT cornea rods and cones fovea iris pupil optic nerve fibers lens

Wavelength (nm) Sensitivity 400 450 S M L 500 550 600 650 700 Trichromacy S M L input output 99,6% 91,3%

330.000.000 (~5%) COLOR BLINDNESS

Anomalous Trichromacy Sensitivity 400 450 S ML 500 550 600 650 700 S M L input output 0,35% 5%

Deuteranomaly Normal color vision

1.300.000.000 people live with some form of vision impairment. VISUAL IMPAIRMENT

Meet Her Majesty Unconsious!

Culture deeply influence our color perception

@webcampzagreb #wczg

Life experiences and memories shape all our responses

Women and men do see things differently

Color preference continually changes

@ive77i @webcampzagreb #wczg

Nothing is seen in isolation

@ive77i Color - the shadow ruler of UX @itcampro #itcamp19

Subjective, emotional, intrinsic and deeply personal Color - the most volatile design element?

Which color scheme matches the theme: Dentists?

93% 5% 2% "... the colour is white, white resonates with purity, and I mean everyone wants a white teeth right ?" "I would expect more blue/ minty colours for dentists." "It can be any other field related to science and research..." "Blood and teeth"

Which color scheme matches the theme: Crypto currencies?

71% 15% 15% "... I don't think of brown when I think of Crypto" "For crypto I'm thinking deeper greens/blues but out of all three options I'd choose this" "... I'm used to more isometric illustration and gradients." "Looks cool and bright"

@ive77i Color - the shadow ruler of UX

Network 2:30 AM 98% GET STARTED Welcome <app name> wants to make it fun and simple to be happy. LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Mascot illustration, warm, positive, bright colors Welcome note, describing the app purpose Indicator of few slides describing core app features User taps button to proceed Network 2:30 AM 98% OR Facebook Twitter (555) 555-1234 email password SIGN UP Already signed up? Sign in I’d like to get to know you! LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Friendly line of text to initiate sign-up process App collects user cell phone number from system (user can change it if there is a need) User taps on sign-up button to create the account Once user signs-up stays logged in but if app is installed on another iPhone he/she can sign-in with existing account User fills email and password fields Alternative for filling username and password is signing-up with Facebook or Twitter Network 2:30 AM 98% Tell me more about yourself What health system do you belong to? Which doctor do you see there? LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Conversational dialogue Mascot icon, as it is talking to user Short sentence to encourage user to fill in all requested data Page indicators signal user to swipe forth (and back if needed) LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016 Network 2:30 AM 98% Fill the mood meter! Record your ﬁ rst mood and begin seeing how it changes over time. Friendly text as said by mascot why to allow access to social media etc Mascot illustration as it is talking to user Page indicators signal user to swipe forth (and back if needed) Home Network 2:30 AM 98% Some intro text - maybe motivational thought or something like that FRIENDS & FAMILY TOOLS MOOD METER LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Mascot illustration with motivational random text to start using app Menu button opens sidebar navigation User slides through options and then taps on button to go to selected section Network 2:30 AM 98% FRIENDS & FAMILY TOOLS MOOD METER FRIENDS & FAMILY Friends & Family Feed Contact TOOLS Meditation Booster Journaling Good Day Cards MOOD METER Mood Check Weekly Mood PROFILE SETTINGS 3 10 1 LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Complete menu navigation Tap on menu icon closes the navigational menu Notifications for new stream posts and tasks Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis nobis sit pedi resciatiis pore comnimaion pro est, sinumquis eati conse Friends & Family Feed Network 2:30 AM 98% All Peri sapictiamus coreped ut aborepedis nos enet poria FROM Friend’s Name FROM Friend’s Name Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis quibus maxim LOL FROM Friend’s Name FROM Friend’s Name COOL USER TAG CONTACT FRIEND FROM Friend’s Name USER TAG 2 Photos Videos Texts LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Opens navigation User can see complete feed or categories. Current category has an indicator below. New post indicator Tap on each post enlarges it Current screen title Opens search Who sent the post Floating button for sending request to a friend Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis nobis sit pedi resciatiis pore comnimaion pro est, sinumquis eati conse Friends & Family Feed Network 2:30 AM 98% All Peri sapictiamus coreped ut aborepedis nos enet poria FROM Friend’s Name FROM Friend’s Name Volo idusape llautem ipsam quibus maxim quaturiorem nonsequis quibus maxim LOL FROM Friend’s Name FROM Friend’s Name COOL USER TAG FROM Friend’s Name USER TAG 2 Photos Videos Texts Your friend/family member could use a funny video, a cool picture, or even just a short text. You can simply reply to this message with a quick note of support and we’ll be sure they get it! Cancel Send Friends name (555) 555-4321 LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016 Friend name (and picture) is shown after user choose him Sends request to friend via SMS Cancel request

10s Where would you click to order food?

3s Where would you click to order food?

10s 85% participants said the action was clearer 3s

Which button color you feel as the most suitable?

Which button color you feel as the most suitable? 0% 86% 14%

11s Where would you click to confirm the task?

Working with COLOR

10.000.000 16.777.216 UNIQUE COLORS

R - how red it is G - how green it is B - how blue it is 0-255 0-255 0-255

rgba(220,125,162,0.5) #dc7da2 rgb(220,125,162) RGB HEX

rgba(12,166,243,0.5) #0CA6F3 rgb(12,166,243) RGB HEX

rgb(147,206,236) #93CEEC rgb(12,166,243) #0CA6F3 rgb(0,119,178) #0077B2

violet indigo blue green yellow orange red

0º 30º 150º 210º 240º 330º 90º 270º 180º 60º 300º 120º 0-360 HUE

Saturation 0% 50% 25% 75% 100% 0-100%

Lightness 0-100% 0% 50% 25% 75% 100%

H 200 S 70 L 75 H 200 S 90 L 50 H 200 S 100 L 35

HSL lightness saturation saturation brightness HSB

Designing color system Primary color(s) Neutrals Accent color(s)

Start from the ground up

saturation lightness 100% 0 100%

luminosity 360º 0 100%

220, 100, 50 220, 100, 80 190, 100, 80 220, 100, 50 200, 100, 75 220, 100, 50

CHOOSE THE BASE

DEFINE DARKEST/LIGHTEST

FILL IN THE GAPS

Primary Neutrals Accents

Q&A TIME https://joind.in/talk/6e503 Thanks! SPECIAL THANKS GOES TO Helena Bukovac
for helping with the research twitter.com/ive77i linkedin.com/in/ivanamilicic/

Color - The Shadow Ruler of UX

Color - The Shadow Ruler of UX

More Decks by Ivana

Other Decks in Design

Featured

Transcript