On the combination of cognitive psychology and product design

For many product managers and designers, the design review PK as if the nightmare, the designer worked out the scheme, may be subject to many questions. Perhaps the scheme itself is excellent, but can not use theory to convince each other, the result is more ugly. Since the birth of scientific psychology in the 1879, psychologists have carried out a lot of research on the laws of human cognition, emotion, memory and so on. Many conclusions can provide theoretical support for product design, and once again a brief summary of the sharing of Jane, please reader to enlighten you. A software product first presented to the user is the product interface.  Good interface elements are easy to recognize, easy to understand, fast to remember, and less error-prone. 1. Coding characteristics of interface elements

identifiable

The earliest psychological pioneers, Fechner and Weber, were based on the threshold of sensory perception, and their research pointed out that human vision and hearing can only be stimulated by a specific intensity range. In the process of interface design, attention should be paid to the recognition of elements. For example, the text can not be too small, color can not be too shallow.

The effect of a mobile browser opening a Web page

identifiable

The study of perceptual psychology shows that the perceptual ability of human beings has different threshold. The two stimuli must be greater than the differential threshold to be debated. Different interface elements (especially approximate, adjacent) visual characteristics should be able to distinguish clearly, to prevent users need to strive to identify, increase awareness of resources.

The effect of a mobile browser opening a Web page

Significance

Stimulation must be meaningful and understandable. Therefore, the text expression, symbol icon design, should ensure that users can understand correctly, no error.

Usability testing of the icon meaning: First test the user to see how high the rate of correct recognition, after a period of time, the same user to test, to see the maintenance of the correct rate. o means original, R represents retest.

Standardized

Under different conditions, the meaning of stimulation needs to be unified. For example, every local red light means stop, and the green light means pass. For the same series of software, the icons and control styles of different platforms should also avoid conflict of meaning.

Android Platform dialog box style uniformity issue 2. Compatibility of interface elements is defined as universality in different scenes and different situations. The better the compatibility of stimulation, the faster the speed of learning, the less reaction time, the fewer mistakes, the smaller the mental load.

Conceptual compatibility

For example, SOS, 110, 119, these abbreviations, conceptual compatibility are excellent. For example, red means stop, green means traffic and security, check use "tick" and so on.

Action Compatibility

The spin value is associated with a numerical increase, such as a knob that adjusts the volume, and the pointer adjusts to indicate an increase in value, such as a thermometer scale.

In a mobile phone player, adjust the volume using the upper and lower keys, itself in line with the action compatibility, but the volume indicator for the left and right direction, the two mental model conflict.

mode compatibility

Studies by Wickens, Sandry, Vidulich (1983) confirmed that in speech tasks, stimuli were presented in auditory form, reacted in a verbal form, and the response time was the fastest; in space tasks, stimuli are presented graphically and react in action form, the reaction time is the fastest. 3. Cognitive processing of color

Color and contrast

The perception of color contrast of human eye is influenced by spatial distribution. As shown in the following figure, the Black-and-white color of the two graphs is the same, but the larger the color block, the greater the contrast.

color and attention resources

In the same screen, if you use too much color, you will be distracted, making the user unable to quickly find the target.

Color Sex Difference

The study of Anyahurlbert, a neuroscience expert at Newcastle University (2007), found that although respondents preferred blue, women's choices were closer to the pink side of the blue pedigree. A number of studies have drawn similar conclusions (Silver,1988;ellis & Ficek, 2000)

In 2003, Hallock, Joe, launched a special survey of color preferences (sample size 230), and the results are as follows.

Age difference of

color

Adams, Russell Studies found that children prefer long wavelengths of color, such as red, yellow. Older women prefer black and purple than men (Silver & Ferrante, 1995). The study of Hemphill & Michael (1996) also supports this. The research on color preference in China also has this discovery (Chen, 1965). Hallock, Joe's study found that with age, the blue preference is very stable, and more and more people do not like orange.

Color and mood

The relationship between color and mood is closely related to color preference, and whether color preference and some color leads to positive or negative emotions (Naz, K., Helln, H., 2004). Boyatzis and Varghese in their 1994 study of children's color-emotional connections found that children tend to associate positive emotions (such as joy, power) with bright colors (e.g., blue, green), and to associate negative emotions (such as sadness, anger) with dark colors (such as black and gray). In a study of the color mood of Australian college students, Hemphill (1996) also found that bright colors lead to positive emotional associations, while dark color mainly leads to negative emotional associations. Camgoz, N., Yener, C. (2002) The study found that color hue, saturation and lightness of three attributes have a very important effect on color preference. The most preferred is the combination of saturation and brightness, with the increase of lightness and saturation, the degree of preference of the subjects increased.

The cultural difference of

color

Different groups, the color of the cultural content also have differences. As shown below, different national fire extinguishers use different colors, reflecting the cultural differences in color.

Many researchers and designers have analyzed and summed up the color connotations of different countries. These cultural differences are what we need to be aware of in our design process, especially for the international version of the product.

Collated from the Zen of CSS design:visual Enlightenment for the Web

Color Illusion

There are many kinds of illusion about color, some illusion is to avoid in the design process, and some can be used. Here for a preliminary analysis, for example: avoid red and blue overlapping and red-green overlap, because this will cause the illusion of visual depth. As shown in the following figure, the blue color block appears above the red.

Background color affects the perception of the target color. The following figure, the same color of the x, but because of different backgrounds, perceptual color differences.

Color blindness

The incidence of color blindness in the population is still very high, the male is 8%, female is 0.5%.

In the eyes of the color blind group of the world, far from normal people see the wonderful. Red-green-blind people may not be able to tell the difference between traffic lights (pictured below). In the process of product design, we also need to pay attention to this point, as far as possible to avoid the cause of color blindness can not perceive important change information.

4. Visual processing of fonts

Font Weight

Some researchers recommend that the ideal reading effect of the font weight can be set to: white background black characters 1:6-1:8, black background 1:8-1:10. (Note: 1:6 means that the stroke thickness is 1 and the text height is 6) as the brightness decreases, bold characters are easier to identify. As the following illustration shows, the text on the left is easier to identify.

In low brightness or lower contrast conditions, you can use a thicker font, such as 1:5, when the font color is bright, the thickness can be 1:12-1:20.

text and background

White on the black background, the color of the text will be scattered to black backgrounds, which is called scattering phenomenon. The following figure, the same thickness of the font, white color words appear more thicker than the black color.

Because the red and blue contrast affect the perception of the cause, should avoid the red word blue bottom or blue word red bottom of the situation (pictured below).

A designer has summed up a good perceptual effect of the text background contrast scheme, specific as follows:

Letter Case

Studies have shown that lowercase letters are easier to identify because their features are more easily distinguishable.

Cognitive processing of

text information

What is the easiest way to read a piece of text? This involves not only the visual effects of rendering, but also the style of writing, sentence structure and content. The research shows that the sentence type and the text order all affect the speed of word processing. Sentence type: Active and affirmative, more easily understood than negative and passive sentences: it should match the order of action, for example, "first select 1, after 2" of the Misoperation than "Select 2 before the election 1" smaller 5. interface layout and cognitive processing

Information Density

For the content of the same information capacity, the higher the stimulus density, the longer the search time, the higher the error rate. The following figure, the information density of a is larger than B, information search is more difficult.

Information Combination

As shown above, A has only one combination, B has multiple combinations. Studies have shown that when a combination of perspective is less than 5 degrees (40CM visual range, 12-14 words, 6-7 lines of height), the time to search for information in the group is more fixed, when the perspective of more than 5 degrees, the search time significantly increased. Therefore, the ideal page layout is, set the information to less than 5 degrees perspective of multiple combinations, will be most useful for users to quickly search for information.

Complexity

Studies have found that the text is vertically arranged in groups, with less complexity than horizontal, and easier to search for information. The following figure: (Of course, the local density of Figure B is also small, the angle of the block is also around 5 degrees)

6. Charts and cognitive processing a good chart is better than 1000 words. However, you need to be aware of the type of chart you are using to avoid misunderstandings. Examples are as follows:

Looking at Figure 1, it gives the impression that the gap between A and B is getting bigger over time, but figure 2 tells us that this is not true; look at Figure 3, give the impression that B is about a 3 times times, C is about a 4 times times, and figure 4 tells us not so. 7. Symbols (icons) in general, the expressive force of the symbol is better than the text, because it does not need semantic processing, it is visual processing directly.

Standard

for

selection symbols

1. Identifiable: It can be done by presenting the symbol to the user and asking him to say what it is; 2. Matching: A given series of symbols and explanations, requiring that they be matched to record and analyze the time and error used; 3. Preferences: Ask about user preferences and opinions

How to check the quality of symbols?

Method 1: To test the user first, to see how high the rate of the correct recognition, after a period of time, the same user to be tested to see the maintenance of the correct rate. The following figure, O means original, R represents retest, you can see that the 1th icon of the correct rate of re-test is low.

Method 2: The reaction time method, that is, the simultaneous rendering of the user (very short rendering time) more than one symbol icon, requiring the user to judge its meaning at the fastest speed. The shortest response time, the lowest error rate icon, for the most understanding of the scheme.

symbol Standardization

If you need to use the same symbol in different scenarios, make sure that the symbols are standardized in the same sense in each scene. (This article comes from Tencent WSD Blog, reprint, please indicate the source)