How To Use Color To Improve Usability

Color is the most impactful creative element when it comes to visual design, and experienced designers know that they can use color to improve usability of digital products. Since users intuit much of the visual experience, effective color implementation can not only set the tone emotionally, but also helpfully guide interactions with the product.

In our previous post, The Importance of Color in Design, we looked at the basics of color theory. Initial color decisions made up front can set the overall feeling and influence users within seconds of engaging with the product. In this post, we will build upon our knowledge of color theory, and look at some specific ways to use color to improve usability of the interface and positively impact user experience.

Use Color To Draw Attention to Key Content

Color can be used to clearly communicate and establish the hierarchy of the information presented. By giving prominence to the most important elements, you can lead the user to interact intuitively with the information in a desired order, even after just a quick scan. Introducing high-contrast colors to a product’s design can help signify key content or elements that are important, and draw the user’s eye to that information.

High-contrast refers to the difference or range of bright and dark tones between two colors, with the greatest example being white and black. Colors that are across from each other on the color wheel, known as complementary colors, are high in contrast. Analogous colors, such as red and orange, will tend to have a much smaller, more limited range of tones, or low-contrast.

Low-contrast colors can sometimes look muddled, and can certainly be more difficult for users to read. Indeed, readability is a vital component of the user experience, so its important to use text with a high-contrast against its background.

This very simple example shows the difference between high and low contrast colors. While the low contrast “TEXT” is still readable, the eye is first drawn to the high contrast presentation.

Use Color To Improve Accessibility

Good design always seeks to create products that can be used by as many people as possible, including those with disability. Accessible design specifically considers users with physical limitations, and results in products that can be enjoyed independently by those users.

In the area of color, designers of digital products can expect that they will have some users with common color-blindness or another color vision deficiency. Accessibility practices would have designers implement high-contrast color decisions, as discussed above. But additionally, designers can pair color with visual clues like shapes and fills, using both together to improve usability.

In the example below, the icons on the left do not follow accessibility guidelines, because the icons all have the same level of contrast, which is problematic for those who cannot see color difference. The examples on the right show alternate ways in which this UI could be more accessible. In the top example, the biker icon has a higher contrast to show it is selected. The additional examples below have additional UI elements that help denote the difference of selection.

Sites like Coblis can show designers how users with different types of color blindness will see a design.

Use Color To Influence Decisions

Related to contrast, color vibrance is another way that color can impact usability and positively aid users. Bright colors tend draw the user’s attention, and will typically be used on the UI elements most users will want to select, while colors with less vibrance can be used to signal a less common reaction.

The example below is a commonly implemented UI/UX pattern. The vibrant purple button stands out more than the color-less gray button. Further, it conveys a “clickable” feeling, while the gray button denotes an almost disabled state. Designers can create intuitive experiences for their users by anticipating their desired actions and making those elements clear with effective vibrance.

Of course, making design decisions like this need to be done with care. As we discussed in our post on Dark UX Design, similar choices could be made to trick users into doing something they might not want to do, but which benefit the business in question.

Use Color To Improve Usability

In summary, color is a powerful asset in the designer’s toolbox, and designers should thoughtfully use color to impact usability. Color sets an emotional tone and guides the user’s eyes as s/he interacts with a digital product. Rightly used, it can make a product more accessible to all users, enabling them to intuitively interact and easily benefit from the product’s features.

We’d love to put our expertise in color and design to work for you. Contact us if you have an app idea that you’d like to explore.