Colors are a way to express and communicate our ideas. They generate in us an immensity of emotions and are certainly a focus of attention in the users. But how to use them properly to improve the user experience ? In this article, we will discuss 4 ways to improve UX designs and boost your skills.
Table of content
- Choose the right colors
- Use contrast and boost your design
- Catch users attention
- Call-to-action colors
- Conclusion
Choose the right colors
The first thing to do is to define the number of colors and which colors we are going to include in our design. It is recommended to use around three main colors, between primary and secondary. We should choose two primary colors that will work together to create contrast. One of them should have dark shades, while the other one should have light shades in order to generate the eye-catching effect in our users.
Use a color wheel
A good practice is to use a color wheel. Using this tool, you choose one color and the second color on the opposite side is the one that generates a good contrast. This allows us to have an idea of which colors generate a good harmony and can have a positive effect on our design. This also has a good effect on the user’s attention and understanding of the hierarchy of information we want to communicate.
Adobe presents an interactive website that allows us to select colors that make a perfect contrast. Additionally, it includes the CSS code to reference it in our work. However, you can find a wide variety of free options of color wheels on the web to improve UX designs.
Use contrast and boost your design
When a user interacts with a new website or application, anything that is different or contrasting will attract their attention. To reinforce this theory, the article “How Can You Boost Your Design Using Contrast” give us a good example about it.
In the article, through a heatmap, the researchers determined that there is greater user attention to call-to-action buttons that have high contrast and a larger size. On the other hand, a study published by the Nielsen Norman group, confirms that 79% of users scan the information, while only 16% of them read word by word of a web page.
To summarize, this demonstrates the importance of using contrast properly to improve UX designs. By using this method, we can draw the user’s attention directly to our focal points.
Catch users attention
We are all the same, but at the same time different. But take a look at this idea from two different points of view :
From psychology, certain patterns have been found that are repeated in all of us. For example, the color red is associated with stimulating quick decisions, that’s why it is usually used on call-to-action buy buttons. In order to improve UX designs, we should avoid not light colors like gray or black in call-to-action elements. In this way, there is a consistency between the collective perception of color’s meaning and the message or action we want to generate in our users.
On the other hand, we must take into account the personality of our design and the cultural significance. It means that there are certain archetypes related to the industry in which we are working. For example, certain colors are associated with fast food, while others are associated with the technology industry. In such manner, culture plays an important role in what we intend to communicate, and we have always to take it into account.
Call-to-action colors
Before call-to-action
For this section, it is important to mention and recapitulate everything mentioned above. For the call-to-action elements, the most important aspect is to keep a good contrast and being consistent. This means that once the colors of our call-to-action are chosen, they should be the same over time.
The change or misperception of the color personality can lead to user confusion and thus lose the focus of attention. You can find more related information through the understanding of the user with a perspective of the psychology applied to design.
After call-to-action
Once, the user interacts with a call-to-action element or generates an action within the website. A good practice can be to reinforce their action through colors that generate feedback. For example, create positive feedback through colors such as green when the action was completed as desired. These associations between color and action could have a positive reinforcement on the user’s learning for future interactions.
Conclusion
In conclusion, the choice of colors is an important task to analyze. As we saw earlier, good practices have a great impact on our designs. The use of contrast, appropriate colors in our call-to-action buttons and the implementation of information based in psychology are essential to create a design that attracts and retains our users.
If you found this article interesting, I invite you to explore the master program of TCLoc and apply. If you have an opinion, let us know with a comment in this post.
