Display Binder Software

Color scheme in UI / UX design

General

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.

3D Render color concept sanding machine
Graphic design examples right and wrong
Design examples right and wrong
Example of color blindness

Our expertise is not only proven by 400+ awards, but also by the enthusiasm of our customers.

ProductdesignEngineering

Ziegler

"How can tasks and challenges be solved successfully? To do this, you need partners who can correctly grasp and present a task in all its complexity. Setting the right priorities in the future-oriented field of tension [...] and being able to implement them "down to earth" is part of the success DNA at BUSSE Design+Engineering, which we greatly appreciate."

ProductdesignEngineering

Thyssenkrupp

"As an experienced design partner, BUSSE offers everything from a single source. Creative design solutions, prototyping through to small series production and UX design for software. The solution approaches and methods through to implementation always lead to a result that perfectly meets the requirements."

UI/UX Design

Prinoth

„BUSSE is our design game-changer for snow groomers! Their UI/UX team elevates not only icons and layout but the entire user experience to a new level. Clear operation turns every ride into a pleasure. Reliable from development to series production, BUSSE is by our side. Their interface, based on precise product research, simplifies operation. Flexible, forward-thinking, and reliable – BUSSE is our satisfaction guarantee!"

ProductdesignEngineeringPrototyping

Hammer

"BUSSE has been the perfect partner for us to develop new and innovative ideas for over fifteen years. BUSSE offers a very high level of professionalism and a first-class understanding of the brand. The team has completely internalized the high standards of our projects and with exceptional creativity, as well as full dedication, has helped us to set new trends. Many of our bestsellers bear BUSSE hallmarks."

ProductdesignEngineering

Britax Römer

„Child seats are not only visually complex but also technically demanding. Our longstanding partnership with BUSSE turns development into a creative experience. Design sprints and a versatile selection matrix relieve engineers, minimize time-consuming iterations. We appreciate BUSSE for their timely implementations despite limited resources. The collaboration is not only effective but also truly enjoyable!"

ProductdesignEngineering

Calistair

"We were particularly impressed by the enthusiasm and technical creativity of the Busse employees. The atmosphere in the project was characterized by professional looseness and great agility. We turned an idea into a finished product in 4 months!"

ProductdesignEngineeringPrototyping

Sked

„We discovered BUSSE Design+Engineering through online research. Contacting them for a functional model led to a contract for a technical redesign. Due to our concept changes, Redesign II was initiated and realized in a prototype, earning a golden award at the 2019 Ambiente trade fair. BUSSE executed the project with precision, on schedule, and with excellent craftsmanship. We look forward to future collaboration with BUSSE."

ProductdesignEngineeringPrototyping

Sigel

„The collaboration with the entire project team was always goal-oriented, constructive and pleasant in terms of communication. Mr. Timm and his project team always kept the functional and safety requirements in mind and understood what is also important to us in product development: can-do mentality, agile mindset as well as flexibility and efficiency in all project situations."

Productdesign

Mikron

"With BUSSE as a sparring partner, we were able to successfully work out a brand-defining design for our latest products that was appropriate for the target group. BUSSE understood our internal company processes very well and was therefore able to deliver optimal results. Deadlines were always met, you can rely on BUSSE. Anytime again!"

ProductdesignEngineering

Keller

"We were positively surprised by the collaboration with BUSSE in that the focus was not solely on the appearance of our product, but rather on the interplay of economical manufacturing solutions, optimized ergonomics and a functional design. The result now impresses with a coherent, unprecedented design concept."