Proper color use is important for creating a positive image for your customers, that’s why color plays a leading role in the interface design. It stimulates all senses by delivering a message instantaneously like no other method of communication.
In this post we are going to discuss the impact of colors on UX and UI design, and, as a consequence, the perception of the whole product or service.
Why is color important in UI and UX design?
The decision-making process takes around 90 seconds after the initial interaction with products or interfaces we see. Moreover, the study conducted at the University of Winnipeg found that approximately 62-90 percent of the assessment is based on colors alone. Therefore, well-considered colors use can contribute not only to distinguishing products from rivals but also to shaping customers' emotions –positive or negative–and hence, attitudes towards certain products.
Color is more than just an esthetical element. For example, choosing between a dark or light UI affects not only the attractiveness of your web and mobile designs but also the usability level.
From a strategic point of view, visual appearance affects consumer purchasing decisions, as it was mentioned. As a result, some businesses are incorporating colors for UI design into their marketing strategies to achieve better results.
How does color affect users?
Designers can use color to influence how users think and behave towards a brand, and how they perceive some details. And this is why designers and product owners need to understand the meaning of different colors. There is no doubt that colors can stimulate our brain chemistry and generate feelings accordingly.
The results can be physical, as well as mental. The green and blue colors that are the most common in nature can provide better healing for the stressed-out mind. This is why blue, for example, is commonly used in mental therapy for reducing stress.
Color, however, is too dependent on personal experiences to translate universally into particular feelings. Some shades or tones can give very different meanings. Research shows that individual colors may be oppositely perceived due to personal preferences, experiences, upbringings, cultural differences, and context.
Additionally, predicting user reactions to color appropriateness is far more important than the individual color itself when it comes to picking the right palette for the interface.
Color components
Everybody knows what a color wheel is, but to understand the meaning of this model, it's important to distinguish the components that comprise the visual nature of color. According to the Munsell System, colors contain three dimensions:
Hue - describes the pure spectrum color: red, yellow, purple, blue, etc. Hue is a degree on the color wheel (from 0 to 360o) where 0 (or 360) is red, 120 is green, 240 is blue.
Chroma, or saturation, may be defined as the dominance of the hue. Pure colors are fully saturated. Chroma is also a percentage value: 0% means a shade of gray and 100% is the full color.
Value, or lightness, shows the overall intensity. It is the only component of color that may exist by itself. Lightness is measured as a percentage: 0% is black, 100% is white.
Starting with a base color, the color palette for the design project is developed by gradually picking other colors that form a visual harmony with the base. Playing around with a color's value (hue, chroma) helps to fine-tune the contrast, creating a sense of balance.
It's also important to consider two different color types when selecting a palette: tangible colors (the surface of objects) and the others that are formed by light. Both types produce two models of color that shape the color wheel: additive and subtractive. The additive color model considers the primary colors: red, blue, and green, so it is also known as the RGB color system.
Cyan, magenta, yellow, and key-black is a subtractive color model called CMYK. Unlike RGB, the mixture of CMYK base colors creates pure black while the absence of all is 100% white, therefore it’s commonly used in printing. RGB color scheme, on the contrary, is widely used in digital projects, especially while designing websites or mobile apps.
Best practices in UX design
User experience is a conglomeration of activities that seek to optimize a product for effective and enjoyable use. The overall feel of the interface is the subject of UX design. Concerning colors, certain points and rules should always be considered while developing a user-friendly app.
Blind awareness
Different forms of color blindness affect about 8 percent of men and 0.5 percent of women. People with red/green blindness have trouble distinguishing reds, greens, and yellows with similar values. For this reason, we recommend using special tools to check the functionality of your website or app. You can download the color blindness simulator for Windows, Mac, and Linux from Color Oracle or you can upload images to Coblis to check them by nine color vision types.
The same rule can be used in input forms for better user experience. Users who can not see the red characters can face some difficulties if they receive an error message similar to 'Please, correct the fields highlighted in red'. It is better not to refer to the particular color and give a more specific description such as, ‘Please, re-enter your email address and phone number’.
The impact of color combinations on readability
Each color has a value based on its color wheel location, which determines how well it works with other colors. Overlaying colors at opposite ends of the color wheel can make reading easier, especially for users reading something from a phone screen in bright light. On the other hand, placing text above backgrounds with similar color values can complicate reading.
There are some color combinations (bright red/blue or red/green) which you should avoid when designing a color scheme for your website. Have you ever seen a static image with some colors floating in front of the screen while the other sinks back into it? The effect is known as chromostereopsis. This phenomenon creates an illusion of depth in a picture or text, and pretty often it can cause a negative effect among users.
Colors in microinteractions
Dan Saffer, designer and author of the book ‘Microinteractions: Designing with Details’ said that micro-interactions as contained product moments that revolve around a single use case. They are the types of interactions that we hardly notice until they are there. When designing a web or mobile app, interactions such as hover and active states should be included in the context of colors. For example, by changing the saturation level of the button basic color and making it more transparent or, on the contrary, bright, designers make the app more interactive and intuitive to use.
The importance of A/B testing
A/B test plays an equally important role in UX design as in marketing. Color plays an informative role and help users to navigate the app. If app colors are too uniform and customers have trouble finding the primary action on each screen, then you can try to subtly change the shade of various elements. If that doesn't work, then you can change the color entirely, and conduct A/B test to confirm if a change of color is necessary to improve navigation.
Best practices in UI design
While UX design determines how the interface works and how customers interact with it, the responsibility for its visuals lies with UI design. The user interface design focuses on the product's look— how each product feature should be presented, including buttons, inputs, text, pictures, checkboxes, and any visual interface elements that people interact with. Colors play one of the most important roles in this process.
Connection with the brand
Some studies revealed that our brains prefer recognizable brands immediately, making color an important element when creating a brand identity. It can help your product or service to stand out by choosing the right color. For example, if a company has bright corporate colors applied to the logo and branded items, applying the same colors on its website or mobile app is always a good idea. This is how the design creates consistency of visual solutions that connect all communication channels of the company as well as enhances brand awareness.
Balanced color combinations
Color schemes work best if the quantities of colors used for the design are not equal. More interest is generated by a variety of proportions, and you can set the mood and energy level of a design layout simply by choosing colors that play an emphatic or accentuating role.
One of the most famous examples to follow is the rule of 60:30:10. It is a simple theory for creating a well balanced and visually interesting color palettes. One color (usually something quite neutral) makes up 60% of the palette. The extra color reflects 30 percent of the palette. And then a third color for the remaining 10 percent of the design is used as an accent. This method makes it much easier for designers to start experimenting with unconventional color palettes without going too far in an industry or brand outside the expected norms.
The example of 60:30:10 rule on one of UIG pages
In addition to the proportion described above, there are also palettes based on the color wheel which offer further color suggestions, for example, monochromatic, analogous, complementary, split-complementary, triad, and rectangle.
Contrast and accents
Color contrast is a crucial component of any visual composition. It brings individuality to each element of the UI and makes them all noticeable. User interfaces featuring only one color sometimes may look elegant and minimalistic but have fewer chances of attracting attention. At the same time, high contrasting levels of color may not always work well. If the content and background colors contrast too much with each other (like red on blue, for example), the text may be hard to read or scan.
In addition to primary colors, each app and web page needs a couple of accent colors to communicate different messages to the user. For example, you can highlight a new feature with an eye-grabbing color like yellow, pink, or teal. You might also need colors to highlight various semantic states, such as red to show an error, yellow for a warning message, or green to highlight a positive outcome.
Tools for inspiration and choosing your palette
To complement our guide about colors in UX/UI, we also encourage you to experiment with online tools that can simplify the task of creating a unique color scheme and bring you inspiration. Here are some of them:
Adobe Color CC - allows using a color wheel to create a color scheme. The created scheme can be easily exported into Adobe Photoshop. This tool also provides a wide range of color combinations from the creative community.
Coolors.co - a fast and easy tool that also helps designers with generating color palettes. With Coolors, users can export and save the generated color palette as PDF, PNG, SVG, and other formats. Moreover, Coolors has its own app for Android or iOS, as well as Adobe Photoshop and Adobe Illustrator plugin.
Dribbble Colors - generally, Dribbble is one of the most famous places for UI inspiration. Also, it has a tool for searching by colors. If you want to do visual research on how particular color was used by other designers in ready projects, go to their page, and select a desirable color.
Behance- the leading online platform to showcase and discover creative work across industries. Behance users upload their work in the form of profiles comprised of projects - groups of images, videos, and other digital content with a related theme or process. As a bonus: here you can find a UIG portfolio with the latest projects and become a part of our community.
