Color You Responsible
It was 1997. George Clooney was in theaters as the shittiest Batman ever.
As a sullen Junior in an all-boys Catholic high school at the time with art school on the brain, my interest toward non-art courses began to wane. My Religion III class was one of the biggest casualties; quiz after quiz would come back tattooed in red ink. Any inclination I may have had to pore through the crimson cavalcade of corrections never gained momentum. To look at the quiz was to simply be overwhelmed.
The following year I had a new teacher for Religion IV; an affable, tremendously engaging, sharp-witted fellow. Granted, I still could not care less for the class, but when I received my first quiz back — a stellar 64% — I found I was able to lay eyes upon the abysmal performance and digest the corrections that were supplied. The reason was simple:
“I read recently that using green to correct exams instead of red makes it easier for you to digest,” he remarked. “Red makes people agitated.”
It caused some chuckles around the classroom but this was a defining moment for me: he was right. My terrible score, written on the front page, wasn’t inducing anxiety. The subsequent inline notes and x’s on my incorrect responses, all seemed immediately more palatable. Approachable, even.
This was my first exposure to the power of color and our association(s) with it: psychologically and perceptually. Color induced emotion. It subconsciously leveraged pre-existing associations with positivity or negativity. It could soften or enhance my focus.
An Immeasurable Weight
Color has a gravity in design that can’t be trivailized. When employed without solid thought toward (user) impact, its usage can break an experience in its entirety.
Chase was one of the larger clients at an agency I worked at some years ago. I did quite a bit of work with their Freedom brand: micro sites, targeted ads, email campaigns, and their ATM screens, among the mix.
When I first got my hands on the ATM screens specifically, Chase’s brief was clear: increase conversion of people activating their 5% cash back. If you’ve used a Chase ATM, this is the screen that comes up while your transaction is being processed. It’s inclusive of a quick two-button request: effectively “Yes, activate 5%”, or “No, not at this time.”
Looking at the screens they currently had in play, I noticed a couple quick color concerns: both “Yes” and “No” were treated with equally saturated brand colors (Freedom’s rich green and blue, respectively). And, the positive /affirmative color of green was applied to the “No” control. Moving into design refinement, action items were clear.
I designed a screen employing their brand green for the “Yes” button, and a reduced opacity (yet still ADA compliant) grey for “No”. The user’s focus was crystal clear; via that simple change, conversions skyrocketed.
On the web in general, there are some low-hanging fruits of color usage. Red is a color of intensity; it commands attention, often with intended severity. When we see red, we often think “error” (form validation) or “delete” (items in a cart):
I’m being alerted; this text requires my focus.
I’ve one too many; this ‘x’ will remove it before I submit my order.
Green, on the other hand, assists in noting that I’ve successfully validated my form field entries. Or, that my order is now complete. When we can’t rely on inherent cognitive associations with colors like green and red, however, we need to organically train users to recognize how we’re employing color.
This is why we need to usability test at the skeletal and visual design-applied phases: color introduces variables and associations that wireframe / placement-based testing cannot address.
It comes down to two things to ensure a seamless user experience: consistency and intuitiveness. On the example below, yellow is being employed both for buttons and the footer’s subheaders:
To use the site, however, you’d find (through frustration, likely) that only the buttons are clickable. Users have the opportunity to organically identify yellow as something they can interact with, but it’s being used for both clickable items and static areas of focus.
There can be no guesswork on behalf of the user to ascertain what they can interact with. It’s a broken experience if trial-and-error is the means by which a person engages with a site.
Intutive color usage consists of utilizing a palette solely for clickable items, and for items of focus. And not all clickable items on a site need to be the same color, as long as the usage of the respective hot elements is consistent and unwavering. For example, buttons are blue, text links are green and underlined, and H2’s are orange. Without fail.
In the end, color usage should not arbitrarily fluctuate based on who is updating a CMS page at any given time. Planning for, designing with, and testing upon an intuitive palette will augment a digital experience for the user by eliminating guesswork and frustration.
A List Apart (ISSN: 1534–0295) explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
