Color: Getting attention and Communicating emotion
Color provides visual cues. Color gets attention.
Color stirs emotional response and suggests associated meaning. To prevent confusion in meaning, color has to be used consistently and appropiately.
The right colors, draw the eye to the most important areas on the screen. Color can maximize readability and minimize optical fatigue. Color delivers symbolic meaning.
When color is pleasing to us, we have a tendency to fixate and look a little longer and spend a little more time with things.
Color Influences Interaction
In twitter for example, blue is used to signal interaction cues but a like (a state change) is signaled in red. They’re different type of actions, so we use different colors.
Color creates connection, continuity.
Color implies meaning.
Color is subjective. Our perceptions and biases affect what is says and does to us.
Some colors have universal appeal; others are specific to geography, culture and experience.
Color has to be appropiately useful and meaningful to your audience. Your users.
Color should highlight, not determine.
Color should never be the sole differentiator of things in the UI. It should highlight and guied.
For extended screen use situations, use light, muted background colors.
Bright, saturated colors should only be used as visual accents.
Start with one dominant neutral color (black / black-gray) then add an accent color.
Color Theory - Using color correctly
Color theory is useful, but is also a pain in the ass.
You’re never gonna have the time to apply it fully in a project.
Are you using color correctly?
Are colors used sparingly?
Do colors reinforce or interfere with hierarchy and content? Do they help me understand how things are organized or are they obstructing my ability to understand? That’s what happens if there’re too much colors.
Is the color scheme used consistently? To develop use, for example, interactive elements one color, state changes other color, buttons are other. Use this consistently for all screens.
Is color functional or just decorative? It should always be functional.
Does functionality depend on color? Never do this. If I am colorblind, I am gonna be able to see this?
You should use color to communicate and influence interaction. It has much more to do than just look pretty.
How to Choose the Right Colors for your UI
Consider common associations
These 3 colors provoke strong emotional reactions. That’s why a lot of times you see them together. They’re the highest degree of contrast in any color combination that you can ever get.
black authority and power; timeless; cool; brooding; counter culture (arts & music)
white innocence and purity; cleanliness and sterility; surrender and peace
red alarm and urgency; attention; intensity; speed; warning or danger; love
pink Romance; gratitude; grace; admiration; harmony; compassion; female
blue Peaceful; tranquil; sky; ocean; business; technology; innovation; male
green Nature; organic; calming; refreshing; relaxing
yellow Optimism; hapiness; warmth; positivity; joy; hope
purple Royalty; wealth; luxury; sophistication; considered feminine and romantic
brown Nature; Earth; home; friendship; richness; genuineness; solidity
Consider emotional impact
Seeing red has a physiological impact: it’s been proven to increase blood circulation, breathing and metabolism.
Red elements demand to be noticed, scream for attention.
Red also signifies importance and priority, like a to-do list.
Blue tends to have a calming, inviting effect due to associations with sky and water. This also communicates trust.
Lighter blues are open and friendly; darker shared suggest security.
Green is go, green is good, green is positive.
Green is often associated with nature, success, growth and money. Green sits right between warm and cool, making it well balanced.
It also feels fresh, new and in western culture signifies all is OK.
Consider colors from the world around you
Everything you see contains the four color variations required for good UI design. Take a picture and try to extract from it
- Shadows (dark tone)
- Mindtones (mid tone)
- Highlights (light tone)
- Accents (color that stands out to the rest)
The base colors for your user interface, all come from one basic shade. They’re variations on a single shade. Then you pick an accent that you use for visual interaction cues for highlights for areas where you want to suggest interaction or an action where you want your users to do something.
The shadow, for instance, could be used for the text that you read. The midtone could be used as a background for the navigation at the top bar and footer. The highlight could be used as a call out color to call out certain boxes of text. The accent color is for buttons and hyperlinks.
Consider colors from brand colors
Most organizations have a brand color scheme they’ll want to start with.
While that’s a good place to start, be careful about using large areas of those colors onscreen. They’re often much too saturated. Vibrant, saturated colors cause eye strain and fatigue.
A solution to that, would be, for example, to take the accent and if it’s too much saturated, if it feels like it’s vibrating at the edges to our eyes, we adjust the saturation down a bit.
Using Contrast to Improve Readability, Attention and Focus
Contrast enables readability
Text is easily readable when stark, complementary colors are used.
A design where text is the brightest element can reduce eye strain by focusing attention.
Lack of contrast between text and background strain the eyes because they don’t know which color to focus on.
The fact that colors are complementary doesn’t mean contrast is appropiate. If both colors are too bright, the result is eye strain.
Contrast draws attention
Areas of highest contrast draw the user’s attention first. Contrast should be applied according to the importance of a particular element.
Primary content or actions should have the most contrast.
Contrast directs focus
Wherever you apply the most contrast is where the user’s attention will be drawn. If that element isn’t the most important thing on the screen you’re directing the user’s focus in the wrong place to things they aren’t here to see or use.
The more places where there’s a huge difference between this edge and that edge, the more difficult it is to focus on anything to read to understand and consequently to act on what you see.
Design with contrast purposefully keeps the user’s focus where it needs to be.
The core content or action should have the most contrast.
Secondary content and actions (and everything else) should have lower contrast, by degrees.
Three Essential Functions of Contrast in UI design
Contrast performs 3 essential functions
- Contrast draws the user’s attention to the essential components of the interface. It’s not the color, it’s the contrast. If color starts the fight, contrast ends it.
- Contrast helps the user understand relationships between onscreen elements
- Contrast communicates hierarchy and signifies importance within and across multiple sets of visual information
How to Determine Appropiate Color and Contrast
Color and contrast depend on context
For a view, there should be only one reason. One action. Color and contrast clearly indicate what and where that call-to-action is located.
How do we tell if contrast is appropiate?
You take that interface, turn it to gray scale and check if it still works. The contrast changed the order of importance? The hierarchy? This means color is secondary; Contrast is what’s really doing the job.
Reference(s)
https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm