How to improve the color and UI of Software User Experience

As the name suggests, GUIs (Graphical User Interfaces, Graphical User interface) visually presents their features and functions. Human-Computer Interaction relies heavily on visual interfaces to find a thing and interact with graphical UI elements. Color is the main feature of any visual screen. It is not just a computer screen, but anything we see. In our daily life, most of the things we see and interact with are colored-maybe too many things we see, and we have become accustomed to this. Conversely, if you need to read the dark gray label on a black button, it will be very painful. Therefore, the color will enhance or weaken the user experience. This article introduces the concept of user experience, and focuses on the recommended colors and color perception in the UI design.

User Experience

User Experience (UX) is an overall concept in the field of User (users) and interactive technical systems. Specifically, it represents the availability and attraction of a website or application to its users. High Availability means that interactive products allow users to quickly achieve their goals. ISO 9241-110 [1] and Nielsen's research [2] are the "Bible" in this field ".

Attractiveness refers to the emotion between the user and the system he or she interacts. Do users like it? Hate it? Do they think it is attractive, fashionable, or fascinating? Will they be proud of the interaction? Although attractiveness cannot be defined as clearly as availability, it is still crucial to the success of a product, because an attractive system will make it easier to use, this will increase the value of the product.

Color and UI

The color is the perception triggered when light waves between 360nm and NM stimulate human eyes and are processed by the visual system [3. Our eyes have three types of color receivers for processing long, medium, and short waves respectively. They are called L-, M-, and S-cones respectively (Note: cones are the cone cells of human eyes ). As shown in 1, a ray of 530nm light will trigger the most M-cones, followed by L-cones, and only a few S-cones will be triggered. The final color of the beam is green.

Figure 1 colors of Three cone types of light waves perceived [4]

The color on the computer screen is defined by the RGB color model (R stands for red, G stands for green, and B stands for blue. These three colors are called (3) primary colors (primary colors), which correspond to the most easily received light waves in L-, M-, and S-cone. The primary colors cannot be generated by mixing other colors. Instead, all other colors can be generated by mixing the primary colors. Each pixel on the screen is generated by a pair of red light, blue light, and green light. They are very close and cannot be distinguished.

Color contrast

Normally, colored objects or areas in the UI do not exist in isolation, and they are adjacent to or overlapped with other objects or areas. This produces a comparison effect. If there is not enough comparison, we cannot distinguish different areas on the screen. This is why office software, such as Microsoft's Word, Powerpoint, Excel, and Outlook, is set to black by default-because it produces the strongest contrast and the best visibility.

In addition, color contrast is usually used to direct the viewer's attention to some important UI elements that pass key information or need to be input.

Color contrast also improves the visual appeal of the UI. Experimental studies show that warm colors (such as red, yellow, and orange) are very suitable for Cold colors (such as blue, green, and purple), and vice versa.

The comparison results will also adversely affect the user experience. The two examples below are representative. Generally, any visual area tends to be complementary to the adjacent area. For example, if a gray box is red, it looks green. If it is green, it looks red. This situation is called simultaneous color contrast [4]. In the UI, it is usually a control, such as a button, which produces completely different visual effects under different background colors.

Another problem caused by contrast is chromatic aberration [5]. Lenses (including water crystals in our eyes) produce different degrees of refraction for different light waves. This is caused by the projection of different light sources to different places in the retina. The obvious difference is the combination of purple and red, and the combination of blue and red (2 ), because the purple and blue light waves are at one end of the spectrum, while the red light is at the other end (1 ).

Figure 2 chromatic aberration

Therefore, the text in Figure 2 looks a little fuzzy compared to the background. Therefore, the comparison between red and purple/blue should be avoided in the UI. Even so, red-blue combinations still exist everywhere, perhaps because the UI Designer avoids the alternative choice of Red-Green combinations to consider the color deficiency (which is detailed below) problem. Figure 3 shows a combination of different front-and background colors for generating a good contrast.

Figure 3 combination of different front-and background colors with good contrast

Color Perception disorder

When people talk about color blindness, it usually means there is a barrier for receiving a specific color. In this case, it should be color deficiencies, because in most cases, people are not completely unable to accept a certain color, however, their perception may be slightly different [3]. The color perception disorder is caused by the absence or abnormal operation of the cone type. Table 1 lists the proportions of patients with Visual Impairment Caused by L-, M-, and S-cone. 8% of men and 0.4% of women have different levels of visual impairment. Because the radians of L-and M-cone are very close (see figure 1), the symptoms of visual impairment caused by L-and M-cone are very similar. When L-and M-cone have problems, the color is mostly based on blue and yellow colors, which leads to incorrect receipt of the recommended red-green color.
Table 1 color perception disorder and incidence

The color perception error caused by S-cone will lead to the color reception being based on red and green tones, while the well-received blue and yellow colors cannot be perceived. However, this is a rare situation where only 0.004% of men and 0.002% of women have such symptoms. There is also a very rare situation-full-color blindness, which is caused by the complete absence of cone cells: only 0.003% of men and 0.002% of women do not see any color, their vision is non-color, it is completely based on black, white, and gray.

From table 1, we can see that the most typical type of patients with color perception disorder is male who cannot receive red or green colors. The proportion of patients with non-red-green visual impairment is very low. In fact, the ratio of epilepsy caused by flickering UI elements is 400 times higher than that caused by non-red-green sensory disorders.

The problem is that the degree of color perception disorder poses a huge challenge to product availability. This varies depending on the type of the application. Where there are aesthetic requirements for color use (for example, websites of most companies ), it is much less important to visual impairment than some systems (such as control systems and dashboards) that indicate State ). We recommend that you do not use colors to indicate important information. For example, if red light or green light is used to indicate the system status, this may cause problems for the red-green person. Therefore, it is best to provide some meaningful text Identifiers ("OK" vs. "warning"), or symbols ("check mark" vs. "Exclamation mark") instead of colored codes.

Color and visual appeal

Colors are ideal for enhancing the visual appeal of software products. We usually give some colors a specific meaning (table 2 ). These colors often play a very important role in designing the UI. For example, a white-based clinic software application is very reasonable, because white symbolizes "clean ". For another example, the home page of the United Nations is based on blue and conveys a "peace" concept.
Table 2 Western color perception

Note that the color perception listed in table 2 originates from western culture. Because the concept of color is closely related to culture, they have different meanings in different regions. For example, red represents "death" in Egypt, while "life" and "Innovation" in India, and "happiness" in China [9].

An infectious UI consists of a set of coordinated and related colors. Creating a color scheme is also a skill and is very important because many factors need to be considered, including the company's brand value to be conveyed and the highlighted color perception (see table 2 ), in addition, we also need to consider the issue of individual humans (such as the contrast mentioned earlier ).

There are many ways to create a simple color scheme [10] without the help of image designers. For example, you can select three adjacent colors (analogous color-similar color, see Figure 4) in the 12-color circle ). Or select two colors (conplementary color-complementary color ). Do not forget that red and blue are not very friendly to the red-green ones (For details, refer to "color perception disorder" in the previous article ").

Figure 4 similar color scheme

About the author
Tobias Komischke has been working in the user experience field for more than 10 years. He is a critic of technical publications and conferences and has published more than 30 papers. At Infragistics, he is responsible for the internal (development) and external (training and consulting) work of user experience.

Links & Documents
[1] ISO 9241-110 (2006). Ergonomics of human-system interaction-Part 110: Dialog principles. Berlin: Beuth.
[2] Nielsen, J. (). nielsen, J. (1994 ). heuristic evaluation. in Nielsen, J ., and Mack, R. l. (Eds .), usability Inspection Methods. new York City: John Wiley & Sons.
[3] Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York City: John Wiley & Sons.
[4] Gleitman, H. (1991). Psychology. 3rd Edition. New York City: W. W. Norton & Company.
[5] Kaiser, P. K., Boynton, R. M. (1996). Human Color Vision. Washington, D. C.: Optical Society of America.
[6] Fisher R. S ., harding G ., erba G ., barkley G. L ., wilkins. (2005) Photic-and pattern-induced seizures: a review for the Epilepsy Foundation of America Working Group epi1_sia, 46 (9), 1426-1441.
[7] http://www.un.org/
[8] Waters, C. (1996). Web Concept & Design. indianapois: New Riders Publishing.
[9] Russo, P., & Boor, S. (1993). How fluent is your interface? Designing for international users. INTERCHI '93. 342-347.
[10] Williams, R. (2008). The Non-Designer "s Design Book. 3rd Edition. New York City: Peachpit Press.

Reprinted address: Color and UI
Colors and the UI