How to use color to improve user experience

How to use color to improve user experience
Image by Pawel Czerwinski

Color is one of the most powerful tools in a designer's toolkit. It can serve much more than a decorative purpose, it can reinforce the design.

In this article, we will review five techniques that can help designers.

1. Express hierarchy of content or elements

Color can help designers draw attention to specific elements and create a hierarchy of elements on the page/screen. When an element's color contrasts with its surroundings, that element stands out and immediately captures user attention.

If you want to indicate that one element is located on top of another, you should use stronger color contrasts between elements. This approach can work both for individual elements such as call to action buttons and surfaces:

White color brings emphasis to the bottom list in Yelp mobile app. Image by UI Blogger.

Color can also help you provide visual continuity. When color is used intentionally, it can give the user a few focal points so that the user's eye gaze will travel naturally from one element to another. In the example below, the user's attention will be focussed on the call to action button "Analytics" and then moves down to the chart and circle element of the AI assistant in the tab bar.

Contrast communicates the importance of elements and green elements give users visual focal points. Image credit: Gleb Kuznetsov

To create a solid visual hierarchy, it's recommended to limit the total number of colors used in your UI. Generally, the less color you use in your UI, the more attention contrasting elements will receive.

2. Indicate the current state of an interactive element

When users ask the question, "Is this button enabled or disabled?" It means that the designer failed to indicate the element state. Designers can indicate interactivity by using color together with whitespace. When users see a bright, contrasting square element, they immediately assume it's a button in an active state.

Ideally, you should choose a particular color to indicate interactivity throughout your app. If you need to show a few buttons with different priorities (say, primary CTA and a few secondary CTAs), you can play with tones of your interactive color and create a variation of this color for the secondary buttons, just like in the example below.

When users see the screen,they immediately assume that ‘Finish’ is disabled while ‘Book a flight’ is enabled. Image by Gleb Kuznetsov

3. Reinforce the sense of state change

Color can give users feedback in response to the actions. It's possible to reinforce the sense of acknowledgment by using shape and color together. For example, once a user taps on the call to action button, the color of the button and its shape can be changed to indicate the success of the operation.

Call to action responds to user intent. Image by Colin Garven

4. Emphasize brand presence

Using brand colors in a product is a fairly typical design strategy. Yet, it's possible to make the most of this technique. For example, brand colors can be used in specific moments, such as the color of the call to action button on the payment confirmation screen. By doing that, you will create a condition for users to associate those colors with specific actions and information.

Here are a few things to keep in mind:

  • Try to avoid using brand colors for states like loading, especially if the loading takes more than a couple of seconds. When you color your progress indicator in your primary brand color, your users will subconsciously associate this color with slow loading.
  • Be careful with red and green colors. Red and green are typically associated with failure and success, so when your brand color palette has green or red, you should avoid using exactly the same colors to convey an error state or success state.

5. Communicate meaning

It's a known fact that people associate colors with specific things, and while the meaning can depend on the context and culture, it is still possible to find a few universal meanings for colors. For example, when it comes to city traffic, red is typically associated with 'stop,' while green with 'go.' If you design a navigation app, you can use this approach and color busy roads with red.

Google Map uses red to indicate areas with traffic.

At the same time, don’t rely solely on color alone to communicate important information. Use other elements such as text labels or iconography to help visually imparted users to comprehend information.