An argument for incorporating color early on in UX design

4 min read
Joe Jordan
  •  Aug 1, 2018
Link copied to clipboard

UX is never in a static state. How designers approach the user experience constantly changes as technology advances and users respond to those advances.

It’s easy to think of UX as something new to web design, but user interaction, wireframes, and prototyping have been a “thing” as far as back as I can remember (about 1998). I can’t recall a time when I’ve ever opened up design software and just started to design a website—it’s almost impossible without true knowledge of your audience’s needs, what your client wants to convey, and the trends and changes influencing technology and user behavior.

But it goes even deeper than that. A web designer needs to understand the psychology of UX.

Having a real understanding of what motivates people to do what they do is one of the most important skills you can have as a designer. In fact, the best candidate for a UX position might be someone with a psychology degree, with the education and training to understand human interactions, motivations, and needs.

“How designers approach UX constantly changes as technology advances and users respond to those advances.”

Twitter Logo

It’s nothing new that companies pay big bucks for research into customer and buying insights. UX is no different. Companies need to generate revenue—and to do that, they need to understand user behavior, so they can create better user experiences.

Which brings me to my next point…

UX and color

It still surprises me: Someone in a UX discussion will bring up design elements, and someone will respond, “We’re talking about UX, not color and design.”

Wrong! Color and design are a big part of the user experience.Twitter Logo And here’s where psychology can provide some really useful insights. Numerous studies have focused on how people react to color: how different colors makes them feel, what colors symbolize for them, how colors influence their behavior.

What does this mean for UX? Consider a couple of basic examples. Try to submit a contact form without filling out a required field, and up pops that scary red text.

Or maybe you need to re-enter your new password to change it; it’s so satisfying to see the words “Passwords match” appear in soothing green.

Related: How Salesforce studied color to make a better user experience

In web design, red and green have become almost universally associated with these basic emotional responses:

Red: Stop! Something went wrong.

Green: Everything’s fine; please proceed.

We can use color in many ways, depending on who we’re targeting. A 2003 study by Joe Hallock looked at people’s color preferences by gender, age, and other variables. The study included a total of 232 participants between 15 and 81 years old from 22 countries (79% from the US).

Figure 2. Favorite color: male
Figure 2. Favorite color: female

Nearly half (43%) of all participants, regardless of gender or age, named blue as their favorite color. However, purple proved to be polarizing: it was right behind blue for women, but not a single man surveyed chose it as a favorite.

Joe Hallock also asked participants what colors they associate with specific words that have an emotional meaning or connotation. Below are just a few examples.

Figure 3. Color association with “security”
Figure 4. Color association with “speed”
Figure 5. Color association with “cheap/inexpensive”
Figure 6. Color association with “high quality”

It’s clear that color can play a role in decision-making, perception, and emotional response—and therefore it should play a big role in UX.

For that reason, I like to incorporate color early on in my UX process. Laying out simple wireframe boxes just isn’t enough. At a minimum, critical response triggers (such as a response form) should be a part of your process once you’ve reached a high-fidelity stage.

But be careful to keep your client’s brand colors in mind—they probably won’t appreciate seeing them used to indicate anything negative.

For more insights on color and its impact on emotion and user behavior, give Joe Hallock’s study a read. You might be surprised by some of the ways color can make a difference in UX, branding, and beyond.

How do you use color in your UX process?

Tell us on Twitter: @InVisionApp.

By the way, we’re big fans of using Freehand to sketch out wireframes. Freehand is a tool that helps you do it all, from wireframing to creative exploration, presenting to collaboration. Give it a try and let us know what you think!

Collaborate in real time on a digital whiteboard