Published on | Prototyping: From UX to Front End — Medium Justinmind

UI colors can influence user behavior and drive up conversions. Here’s how to get the most out of your color palette

Color fills our lives. Whether it’s the green meadows we see out of a train window or the striking call to action button that we can’t resist clicking, color plays a big role in how we interact with the world both online and offline.

Colors carry a power with them that is almost primordial. Is it by coincidence that many of the icons on your phone are blue? Have you ever wondered why? More on that in a second.

UX designers can capitalize on this power in their creations, especially when it comes to UI design.

In this post, Justinmind will run through the psychology of color in design as well as highlighting the importance of choosing the right UI colors so you can enhance the user experience and boost conversions.

Prototype and test your UI colors with Justinmind. Download free.

Color psychology in UX design

When it comes to UX design, color takes center stage. UX designers, whether just starting out or at the top of their game, need to understand the importance of color because it has a big effect on a user’s experience.

That’s because color affects mood, like Picasso once said. Imagine you were designing a mobile app for personal finance and getting people out of debt.

Since debt and money are sensitive subjects and can cause great anxiety in people, you’ll want to avoid making the app out of red hues and tones. Why, though?

Think about when we see red in daily life: stop signs, fire equipment, stoplights, a drop in stock prices. Bruises and cuts are shades of red.

Color is a form of nonverbal communication and when we choose certain colors, what we’re really doing is communicating a message. The meaning of these colors are rooted deep within our subconscious.

A debt and money app that’s entirely in red may be sending out the wrong kind of message. A quick look at the best budget apps shows light blue and green as the most popular UI colors.

We’re not saying that red is evil and should be avoided at all costs. Colors aren’t evil. But the way we use color can change a user experience drastically.

ui-colors-ux-design-colors-for-ui-using-color-in-ux-design-best-ui-colors

Why UI color is important in UX design

A study from 2006 found that people make up their minds within 90 seconds of their initial interactions with either people or products. About 62‐90 percent of the assessment is based on colors alone.

Further to that, color and brand perception go hand in hand, as this study revealed. Essentially, consumers view a brand’s personality in a certain way as a result of the colors that are used. The luxurious gold bottle of Veuve-Clicquot champagne might not be as exciting were the packaging in cardboard box beige.

But, isn’t it all subjective? Gold may be luxury for one person and for someone else it might represent something completely different.

Maybe it’s not all subjective. Take call to action buttons. There is a lot that goes into crafting a call to action button that drives up conversions.

Ask any designer you know and you’ll probably get a different response each time as to what makes a button successful (more on button UI design best practices). Some might place more importance on the copy, others might talk about social proof or overall aesthetic.

Most likely, it’s a combination of various factors. One of those factors undoubtedly is color.

A quick way to end the debate is through a simple A/B test. HubSpot went to the trouble of finding out the difference between a red and a green call to action button on a page. They duplicated the page, kept everything the same but only changed the color of the call to action button.

Green was chosen because it represents ideas like ‘natural’ and ‘environment’, but also ‘go’. Red is eye-catching and creates more urgency which could compel users to click the button more frequently. But which color won?

In turns out red outperformed green by 21%. Nothing else was changed on the page, except for the icon color. A 21% increase in conversions is a lot. That could be the difference between a profitable month and an unprofitable one.

How about that time Heinz changed their ketchup color from red to green and suddenly dominated 60% of the ketchup market, selling 25 million bottles?

Prototyping and testing your UI color choices

How do you know if the colors you picked for your UI design are going to be a success? When it comes to crafting a UI that impresses and creates conversions, you want to create prototypes and test them.

Prototyping your color choices will allow you to explore easily different avenues and create multiple designs using various palettes.

Thankfully, Justinmind comes with thousands of pre-built widgets and free downloadable widget UI kits, which act like mini icon libraries. The beauty of these widgets is the high level of customisation. You can simple drag and drop your desired widgets onto your canvas (or, better yet, why not make your own?) and choose from a whole spectrum of colors.

When you’re done — test it. Justinmind is fully integrated with a bunch of popular user testing tools, enabling designers to get the information that need within an instant. That’s the best way to find out whether your color is going to be a success or not.

4 quick ways to boost conversions with UI colors

Now we know how important color is in UI design and how it can affect the user experience. How can we start to make color work for us and our icons?

There are a few tips and tricks you can follow to make sure you’re doing color justice.

Think about the message you’re sending

Ott Niggulis put it well when he said that there is no right color for conversions. It is more about how you use the colors that you choose in the most appropriate way.

In that vein, designers ought to think about the message that’s being sent. Like we said already, personal finance app user interfaces might not do well using all red. But then, would any app?

When it comes to choosing the color for your UI design, try and bring it back to the personality of your brand. Is it serious? Joyful? Helpful? Understanding these components of a brand’s identity can inform color choice.

Link it to your brand

Lots of icons on your phone are probably blue. That’s because blue is one of the world’s favorite colors and is a color which, according to color psychology, suggests peace and is non threatening. But many of the companies which use blue icons — Facebook, Calm, LinkedIn — use blue as their company color, too.

It isn’t always the case that your UI color has to align with the brand identity but it’s a good way to promote consistency in the UX design and improve overall recognizability.

ui-colors-ux-design-ux-colors-best-ui-colors

Limit your color palette

If you’re designing a landing page or any page really, you’ll want to restrict your color palette. Too many colors can create a distraction and your user won’t know where to focus and give their attention.

When you limit your color choice to just one or two but make use of their respective shades and hues, you’ll be able to create a design that is more balanced. As we said, colors are like emotions. Too many colors on a page and you’re going to overwhelm anybody who dares visit your website.

A good tip, stolen from the world of interior design, is to use the 60–30–10 rule. 60% is your main color, 30% is your secondary color and 10% is your accent color.

Find out how a dark or light UI can affect conversions.

Make your UI colors accessible

The internet is for everybody so designers have an obligation to create designs that are accessible to the widest public possible.

When it comes to your UI design color, bear this in mind. The Web Content Accessibility Guidelines (WCAG) stipulate that foreground and background colors have a contrast ratio of 4.5:1 at Level AA and 7:1 at Level AAA.

To make sure you’re getting those levels right, WebAIM has a comprehensive run down on designing more accessible.

There is also Color Safe which is a website that will provide you with color palettes which meet those guidelines.

Conclusion

Overlooking the importance of color in UI design can hinder conversions and make profit unattainable. With prototyping and user testing, and a few other tips from this post, you’ll get closer to a winning palette that will contribute a successful UI design.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How the right UI colors can boost conversion rates was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How the right UI colors can boost conversion rates

Cool stuff, every week

More Articles