One aspect of holistic UI / UX design development is the color scheme in screen and icon design. But how do you decide which colors to use in the user interface? As a rule, the corporate identity of a company and its corporate colors initially have a major influence on the colors used in order to create a striking recognition value and an unmistakable identity. However, there are many more aspects that need to be considered for a good UI/ UX experience. Fundamentally, redundant and consistent color coding should be used in a user interface to ensure good usability and user experience. In this article, we have clearly explained 8 aspects that we deal with on a daily basis.
1. corporate identity, corporate design and the basic goal of coloring
By observing the corporate design colors, shapes, proportions, etc., you first achieve a concise brand experience with a high recognition value and can convey specific corporate values and emotional worlds and also transfer them to the user interface design. There are also product-specific features that can be communicated via the color scheme in the user interface.
In concrete terms, this refers, for example, to the mood I want to create in the user with my product, possibly even independently of a company's corporate identity. Is it a cheerful, colorful application that should convey fun? Should a medical technology product look particularly clean, precise and accurate? Do the colors in the machine interface appear robust, reliable or powerful? In addition to the color, the rest of the formal design also plays an important role.
2. influence of the external and direct environment on color perception
An important question is the environment in which a product or application is used. What are the lighting conditions like? Is the ambient lighting bright or dark, is there daylight or not? Depending on the environment, colors on displays can appear brighter, darker, less or more saturated. It is also possible that the user is distracted by the surroundings, e.g. by bright colors, incidence of light or glare effects. In addition to the display environment, there is also the direct environment within a display. For example, an icon with the same color can appear completely different on different backgrounds, e.g. it can happen that the icon or perhaps a logo suddenly appears lighter or darker or even larger or smaller, colors appear more intense or paler depending on the background.
For technical products, we have often had the task of displaying as many different colors as possible (e.g. for graphs) with the best possible contrast to the background while achieving a good contrast without bright colors. Or we select certain color combinations for presentations in order to achieve a certain overall effect on the user. The surrounding colors can also influence the emotional perception of color. A red hue initially has an alarming effect and is therefore used for error messages, for example, but could also have a cheerful effect in combination with other bright colors.
3. subjective color perception and feelings due to cultural and personal background
Who are the future users and what do they bring with them? Our cultural background, level of education, age, gender and personality also influence how we perceive our surroundings. Certainly, a user interface for a beard trimmer would not intuitively be designed in shades of pink, at least in Western cultures. However, the decisive factor for the design is not only an objectively measurable color value, but also the subjectively perceived color tone - i.e. how a user perceives a color tone.
Some colors have a special meaning in certain cultures. In India, for example, red stands for fire, power, fertility, love and beauty, whereas in South Africa it also stands for mourning, violence and sacrifice. The flag symbolizes unity after apartheid and bears the colors of the colonial powers. However, the red part is also interpreted as the blood spilt in the struggle for independence.
The designer must therefore ask himself in which countries and cultural circles a product will later be used and how a certain color or color combination is perceived in a cultural circle or whether it differs from our own Western perception. If an international product is to be developed, color codes must be checked and simplified so that they can be used safely across cultures. Another option is to adapt products to specific countries or to give users the option of choosing from different color palettes.
4. visual impairments
As designers, we also pay particular attention to visual impairments, such as presbyopia and red-green vision loss, which affects around 9% of all men, but only 0.8% of all women. Less common are yellow-blue vision loss or complete color blindness, achromasia. Red-green visual impairment can be simulated for people with normal vision by combining the red and green color channels to form a yellow channel in which red and green have the same brightness. The red-green visual impairment in particular could mean that it is not possible for a user to distinguish between a warning (red) and an OK (green) message in a user interface with pure color coding. Therefore, important information should not only be coded by its color. Further coding options are conceivable via the form (e.g. size, icons, patterns, underlining), behavior (e.g. flashing), brightness or textual information (e.g. "Warning").
5. dependence of the color on the given hardware
The hardware used also plays a decisive role in color perception. Is it a product with a permanently installed / constant display? Then the designs and of course the colors used can be optimized directly for the display used in the design process or is it an application that is viewed on a wide variety of end devices? Display characteristics such as resolution, brightness, contrast, saturation, but of course also the surface structure, from matt to glossy, have a major influence on the effect of the colors used.
6. Usability through color design
Color can be used to code elements with regard to their functionality or status (e.g. clickable / non-clickable or active / inactive, etc.). Different colors and color gradations are used to represent different states of objects, e.g. buttons such as "hover", "clicked", "selected", etc. Color or brightness can also be used to subtly draw the user's attention to certain screen areas or objects. Color and color gradations can be used to highlight the relevance of elements or to structure elements on the screen. Color gradients can be used in a targeted manner, e.g. to give a design more depth, grip or focus. The colorfulness of elements is an elementary component of good product usability.
7. user experience through color design
Colors, gradients and color combinations can trigger sensations and feelings in the viewer. Through color design, the designer can therefore also influence and direct the mood and feelings of users. We use this to design the user experience. For example, if the working environment is hot and sweaty, cooler colors in the UI can subjectively cool the user down a little. Conversely, in very cold working temperatures, warmer colors can also convey a feeling of warmth.
We can use colors to show the user where they should focus their attention, whether everything is OK or whether they need to intervene urgently. Colors can also calm the user in stressful situations or direct their focus to something specific. Colors can trigger happy or positive feelings, but of course also negative emotions. Color is a decisive element for the experience of user interfaces.
8. Standard-compliant color design
DIN EN ISO 9241 Ergonomics of human-system interaction - Part 125: Recommendations for the visual presentation of information, also provides specific guidelines and recommendations for the color design of user interfaces: Known color coding conventions must be observed, such as cultural conventions (red = serious warning, alarm, stop, error, hot; yellow = warning, caution; green = OK, safe, normal, continue; blue = cold, too low; gray = inactive), task conventions (e.g. coding of resistors, e.g. black=0, brown=1), concrete identifications, linguistic conventions and realistic colors. If you specifically refer to a hardware component in the software, e.g. blue, it is helpful for the user if the representation in the user interface corresponds to the original. Colors and shades of grey must be easily distinguishable for the user. If the color of an object on the display changes along with its status, the difference must be perceptible, even if the user has looked away from the system in the meantime.
If the user has to determine and recognize colors themselves, the use of focal colors (pure colors without mixtures) on an achromatic background is recommended. If the user is required to read continuously, spectrally extreme colors should not be used. Similarly, the use of spectrally extreme blue and red on dark backgrounds should be avoided due to undesirable depth effects and the direct juxtaposition of spectrally extreme colors.
When designing user interfaces, we make use of our wealth of experience in all of the aforementioned aspects. Our top priority is always to develop an intuitive and successful user interface. Colors are a fundamental design element and an important tool for us. Because "blue" is not just "blue". As design experts, we have a keen sense of color and ensure that your products are a complete success with the help of the colors used. We would be happy to advise you on the use of colors in your user interfaces or consider color design as part of a holistic UI/UX development.
