UI article--User experience

Content is original, reproduced please indicate everywhere thank you.

　　

User Experience, or UX, is a holistic concept of the user (users) and interactive (interactive) technology systems domain. Specifically, it represents the usability (usability) and attractiveness of a Web site or application to its users. High availability means that interactive products enable 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 in which he interacts. Does the user like it? Do you hate it? Do they think it's appealing, fashionable, or fascinating? Will they be proud of themselves in the process of interaction? While attractiveness does not define it as clearly as usability, it is still critical to the success of a product, because an attractive system makes it more enjoyable and more desirable, adding value to the product.

1. Color and UI

The color is the perception triggered by the light waves between 360nm and 720nm that stimulate the human eye and are processed by the visual system [3]. Our eyes have three types of color receivers, respectively, for processing long wave, medium wave, short wave. They are called L-, M-, and S-cones (the translator notes: Cones is the cone cell of the human eye). As shown in 1, a beam of 530nm of light will trigger the most m-cones, followed by L-cones, which will only trigger very few s-cones. The color that the beam is perceived to last is green.

The colors in the computer screen are defined by the RGB color model (R for Red, G for Green, and b for Blue). These three colors are called (three) primary colors (primary colors), respectively, corresponding to the most easily received light waves in L, M, and S-cone. Three primary colors cannot be generated by mixing other colors. Conversely, by blending the primary colors, all other colors can be generated. Each pixel on the screen is generated by a bunch of red, blue, and green light that are close to each other and are indistinguishable from each other.

2. Color Contrast Ratio

Typically, colored objects or regions in the UI do not exist in isolation, and are adjacent to or overlapping with other objects or regions. This produces a contrasting effect. There is not enough comparison, we can not distinguish the different areas on the screen. This is why Office software such as Microsoft Word, Powerpoint, Excel, and Outlook will default to black on the white background-because it produces the strongest contrast and the best visibility.

In addition, color contrast is often used to direct the attention of the visitors to certain important UI elements that convey critical information or require input.

Color contrast also increases the visual appeal of the UI. Experimental studies have shown that warm tones (such as red, yellow, and orange) are well suited to the background of cold tones (such as blue, green, violet) and vice versa.

The contrast effect also has an adverse effect on the user experience. The following two examples are more representative. Normally, any visual area tends to be a complementary complement to the pro domain. For example, a gray box, if it is surrounded by red, it will look green, if it is surrounded by green, it will appear red. This condition is referred to as the simultaneous contrast (simultaneous color contrast) "4". In the UI, usually a control, such as a button, produces a completely different visual effect under different background colors.

Another problem with contrast is the chromatic aberration (chromatic aberration) "5". Lenses, including the crystals in our eyes, produce varying degrees of refraction to different light waves. This is due to the fact that different light sources are projected into different places in the retina, with a more pronounced combination of purple and red, and a combination of blue and red (2), since the purple and blue wavelengths are at one end of the spectrum and the red at the other end.

As a result, the text in Figure 2 looks somewhat blurry compared to the background. Therefore, the contrast between red and purple/blue should be avoided in the UI. Nonetheless, the red-blue combination is still ubiquitous, perhaps because the UI designer avoids the red-green combination of alternatives in order to consider the problem of color deficiency, which is detailed below. Figure 3 shows the different front-background color combinations that produce good contrast.

		Background color
		Black	White	Powder	Blue	Green	Green	Yellow	Red
Front view	Black		Good			Good	Good	Good
	White	Good		Good	Good				Good
	Powder		Good					Good
	Blue		Good			Good	Good	Good
	Green	Good			Good
	Green	Good			Good
	Yellow	Good			Good
	Red		Good			Good		Good

Figure 3: Different front-background color combinations for good contrast

3. Colour Vision Disorders

When people talk about color blindness (color blindness), it usually means that there is a barrier to receiving a particular color. This is more accurate, as color deficiencies, because in most cases people are not completely unable to receive a certain color, but their perception will have an error of "3". Color vision disorders are caused by missing or working abnormalities in the cone cell type (cone type). Table 1 shows the proportion of patients with color blindness caused by L, M, and S-cone. 8% of men and 0.4% of women have different levels of colour vision impairment. Because the radian of L and M-cone is very close (see Figure 1), the symptoms of color blindness caused by L-and M-cone are very similar. When there are problems with L and M-cone, the color rendering is mostly based on the blue and yellow two tones, resulting in the improper reception of the recommended red-green color.

Colour Vision Disorders	Reason	Color vision	probability [%]
-	-	Be able to see all colors	Male: 92.0
			Female: 99.6
Red Green Weak	L-cone missing or insufficient	-Can see most of the colors except blue and yellow	Male: 2.00
		-Confuse red with green	Female: 0.04
Red Green Weak	M-cone missing or insufficient	-Can see most of the colors except blue and yellow	Male: 6.00
		-Confuse red with green	Female: 0.39
Blue-Yellow Weak	S-cone missing or insufficient	-Can see most of the colors except red and green	Male: 0.004
		-Confusing blue with yellow	Female: 0.002
Panchromatic Blind	L, M, S-cone missing	Can't see any color	Male: 0.003
			Female: 0.002

Table 1: Color perception disorders and incidence

Color vision errors caused by S-cone can result in the reception of colors based on red and green tones, while the acclaimed blue and yellow colours are not perceptible. But this is a very rare situation, with only 0.004% of men and 0.002% of women having such symptoms. There is also a very rare case of panchromatic blindness, which is caused by a complete absence of cones: only 0.003% of men and 0.002% of women do not see any color, their vision is non-colored, completely based on black, white, and gray.

As can be seen from table 1, the most typical category of people with color blindness is the inability to receive red and green males. The proportion of patients with non-red-green awareness disorders is very low. In fact, the proportion of seizures caused by flashing UI elements is 400 times times higher than that of non-red-green disorders.

The problem is that the degree of color blindness poses a huge challenge to the availability of products. This can vary depending on the type of application. Where there is an aesthetic requirement for the use of color (for example, most companies ' websites), it is far less important to colour vision impairment than some systems of representation (such as control systems and dashboards). In general, it is recommended that you do not use color to indicate certain important information. For example, the state of the system is indicated by red or green light, which can cause problems for people with red-green awareness. Therefore, it is best to provide some meaningful textual identifiers ("OK" vs. "Warning"), or symbols ("checkmark" vs. "exclamation mark") instead of colored code.

4. Color and visual appeal

Color is ideal for enhancing the visual appeal of software products. We usually give certain colors a specific meaning (table 2). These notions of color often play a big role in designing the UI. For example, a white-based clinic software application is very reasonable, because white symbolizes "cleanliness." For example, the United Nations homepage is based on blue, conveying a "peace" concept.

Color	The feeling of conveying
Red	Heat (Hot), Stop (stop), aggression (aggression), errors (Error), Warning (warning), fire, courage (daring)
Powder	Female (female), cute (cute), cotton candy (Cotton-candy)
Orange	Warmth (warm), Autumn (autumnal)
Yellow	Happiness (happy), Bright (Sunny), happiness (cheerful), deceleration (slow down), caution (caution)
Brown	Warmth (warm), Fall (Fall), dirty (dirty)
Green	Jealousy (Envy), envy (Jealousy), rookie (a novice), fertile (fertile), pastoral (pastoral)
Blue	Calm (peaceful), water (water), male (male)
Purple	Royal (Royal)
White	Purity (virginal), cleanliness (clean), innocence (Innocent), chill (cold)
Black	Evil (Evil), Ghosts (ghostly), Death (Death), Fear (Fear), Mourning (mourning)
Gray	Gloom (overcast), melancholy (gloom), old age

Table 2: Color perception in the West

It should be noted that the perception of colors listed in table 2 originates from Western culture. Because the concept of color is closely related to culture, they will express different meanings in various regions. Red, for example, symbolizes "death" in Egypt, while in India it represents "life" and "innovation", while in China it represents "happiness" and "9".

An appealing UI consists of a set of coordinated, related colors. Creating a color scheme is also a skill and is important because there are a number of factors to consider, including the value of the company's brand to convey, the color perception that is emphasized (see table 2), and the human individual's problems (such as the contrast previously mentioned).

There are many ways to create a simple color scheme "10" without the help of an image designer. For example, you can select 3 adjacent colors (analogous color--similar colors in color wheel) in 12 color rings (see Figure 4). Or choose a completely relative two color (conplementary color--complementary color). Do not forget that red and blue are not very friendly to red-green awareness (see the previous article, "Color perception disorder").

Figure 4:

UI article--User experience