An argument for incorporating color early on in UX design

An argument for incorporating color early on in UX design

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 1988). 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.

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. 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.

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).

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?

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!

Joe JordanWorking as a Creative Director at JK design. With over 20 years experience, I’ve seen it all. I help supervise all creative production. Of course, I can’t stay away from doing the actual work.