Understanding design from a cognitive perspective

Design is not blindly seeking beauty or feeling, design is also a multi-disciplinary based science, from a cognitive perspective to understand the design can help us to design more respect for the user's work, such a design can withstand the test of time, so that more users love.

Here is my summary and understanding of the book "Cognitive and Design – Understanding UI Design Guidelines".

First, factors that affect our perception

A. experience impacts perception:

• we anticipate things by experience: preconceived subjective impressions often affect perception, and when we look at the same picture with different subjective feelings, we see different things.
• Our Cognitive framework: The cognitive framework is the environment in which we are constantly set up in our minds, so that we have different expectations of things in different places. For example, even if we look at a strange website, we have a general idea of the general layout of the site, such as the navigation bar, search box where. We design time to respect the user's cognitive framework.
• Our habitual: repeated exposure to the same (or very similar) feeling can reduce the sensitivity of the sensory system. If the same message recurs when surfing the internet, initially we will notice it and react to it, which is automatically ignored over time.

B. environmental impact Perception:

We do not know things accurately, our understanding of things is often affected by the surrounding environment, for example, because of the influence of the surrounding graphics, we do not make accurate judgments on these graphs,

c. target impact perception:

The impact of the target on perception is divided into the following two points: 1, guide our sensory organs, let us according to demand in the environment of four weeks to collect samples. 2, to our perception of filtering, and the goal-independent things before being aware of is filtered out, it will not be noticed by our subjective consciousness.

Second, Optimizing visual structure--the principle of Gestalt

Gestalt psychology (Gestalt psychology), also called Gestalt Psychology, is one of the main schools of modern western psychology. The school advocated the study of direct experience (i.e. consciousness) and behavior, emphasizing the integrity of experience and behavior, that the whole is not equal to and greater than the sum of parts, and advocates to study psychological phenomena with the view of the whole dynamic structure. Gestalt theory is not only applicable to psychology, but also provides a useful basis for graphical and user interface design guidelines.

The most important Gestalt principles are: Proximity principle, similarity principle, continuity principle, sealing principle, symmetry principle, subject \ Background principle and common destiny principle.

The more structured and refined the way information is presented, the quicker and easier it is to navigate and understand the content, and to focus on the relevant information.

Third, The perception of color

1. The principle of color vision: The retina in the eye has two types of photoreceptor cells: the rods and cones, the rods are aware of the intensity of the light but not the color, while the cones perceive the colour, there are three types of cones, which are sensitive to red, blue, and green, respectively. Our vision is similar to a camera and a computer monitor by detecting or forming multiple colors by combining red, green, and blue pixels.
2. Vision is optimized for edge contrast rather than brightness. that is, it is much more sensitive to the sharp edges than to the absolute brightness level.
3. the ability to differentiate colors depends on how the colors are rendered: the depth (two colors are lighter, the lower the saturation, the harder it is to separate them), the size of the color blocks (the smaller or thinner objects, the harder it is to distinguish their colors), and the distance between them (the farther away from the two color blocks, the harder it is to differentiate Especially when the distance between them is so great that the eyeball needs movement.
4. Color blindness: Whether the colors used can be separated by common types of colour-blind users.
5. external factors that affect color differentiation: color display differences, grayscale displays, display angles, and ambient light.
6. Guidelines for using colors:

• saturation, brightness, and hue to differentiate colors;
• Use a unique color;
• Avoid colors that cannot be distinguished by color blindness;
• Use other hints outside of the color;
• Separate the strong anti-color.

Four, Boundary Vision

1. The visual resolution in the center of vision is much higher than elsewhere. The center of the field of vision is small, but when the user is at a normal distance from the screen, he is only one or two centimeters on the computer screen.
2. But the boundary vision still has the following three functions: 1, the Guide central concave, 2, the awareness Movement, 3, lets us see in the darkness more clearly.
3. Several ways to make the information visible: place it in the user's position, mark the error, use the error symbol, keep the red rendering error message, (the following methods may interfere with the user, the order is used with caution: information in the Pop-up dialog box, using sound, flashing, or momentary shaking)
4. Visual search is linear, unless the target "jumps into" the boundary field of view, we can use the boundary field of view of the "Jump" feature to highlight important information, the visual search process becomes non-linear.

Five, about reading

Our brains are designed for language rather than for reading, so if we learn to read, we may never read, and learning to read equals training our vision system. During reading, the line of sight jumps constantly, but the trajectory often follows the text layout, and the eye gaze is usually in the middle of the word rather than the lexical boundary. They fix the central concave in a word, pause it for a few seconds, then get the basic text style, transfer it to the brain for analysis, and jump to the next important word. For common conjunctions or functional words will be filtered. At the end of each line, the gaze jumps to the beginning of the next line where the brain guesses.

And reading is divided into feature-driven and context-driven. Feature Driven is "bottom-up" or "no-context" reading, through the recognition of the basic features of line, edge, angle and so on, after years of training, this can be read unconscious. Context-driven is parallel to feature-driven, but works in the opposite way, it is "top-down" and cannot be unconscious. And our reading is generally characteristic-driven, bottom-up reading mode, the situation-driven approach as a supplement.

For design, some bad information design interferes with reading, which affects the user experience: unfamiliar and unfamiliar words, illegible handwriting and glyphs, tiny fonts, text in noisy backgrounds, content that is repeated by information is easily ignored, and text that is centered. In addition, a lot of reading is not necessary for users, we need to cut these reading to improve the user experience.

Six, about Memory

Psychology has historically divided memory into long-term memory and short-term memory, where short-term memory is stored in a separate position in the brain, after information enters the sensory organs, or removed from long-term memory, and is temporarily stored here.

1. Long-term memory and short-term memory

The formation of memory consists of long-term and even permanent changes in neurons that participate in a pattern of neural activity, which makes the pattern easily reactivated in the future. Short-term memory, in fact, is a combination of feelings, attention, and long-term memory retention.

2. working memory

Working memory equals the focus of attention, and anything in focus is something we can always be aware of. Working memory features: attention to high concentration and selectivity, low memory capacity and loss, lack of stability.

The impact of working memory on the interface: the user interface should help the user remember the core information from this moment to the next moment. Such as:

• Mode: Either avoid the pattern or provide enough mode feedback, because the user often forgets the current system belongs to the mode.
• Search results: Not only to display search results but also to display search content.
• Call of action: Do not place multiple "call-to-action" elements that compete and capture user attention in a single page, so that you don't distract your users too much
• Instructions: The operating system used to display instructions in a multi-step operation should allow people to check the instructions at any time when they are done with all the procedures.

3. Long-term memory

Long-term memory is prone to error, emotional impact, recall can be changed and other characteristics. People need tools to enhance long-term memory, such as online sharing of calendars, digital systems, Notepad, etc. On the other hand, we try to avoid designing systems that increase the long-term memory burden, which increases the user's learning and memory costs.

Seven, about attention (working memory or short-term memory )

1. Mode One: We focus on the goal and seldom pay attention to the tools used: should not arouse the user's attention to the software or the website itself, let the user focus on the goal.
2. Pattern Two: We can notice more about the goal: in the process, we may have a situation where the blind and change blindness are not noticed.
3. Pattern Three: We use external help to remember what is being done: as in step-by-steps, the interaction system should identify what the user has done and what the user has not done.
4. Mode Four: We follow the message "Scent" close to the target: the operating system should provide a strong information odor to the operation, and really guide the user to achieve the goal.
5. Mode Five: We prefer familiar paths : We have limited attention, we want to achieve a goal, whenever possible, especially in stressful situations, we generally adopt familiar paths rather than new paths. This revelation we want to guide users to the best path, to help experienced users to improve operational efficiency, reduce the user brain.
6. mode six: Our thinking Cycle: goal, execution, and evaluation : the same thinking cycle is followed when designing the user interface. Goal: Provide clear target path; Execute: Provide "information" breath, help users to perform tasks; Evaluate: Provide users with progress feedback and status information.
7. mode seven: after accomplishing the main objectives of the mission, we often forget to close the work : The system design should consider the closure of work, and remind users

Eight, recognition is easier than memory

Long-term memory has two function recognition and memory, but recognition is often easier than memory

Identification and memory impact on the user interface:

• It's easier to see and choose than to recall and enter
• Use images as much as possible to express functions
• Use thumbnails to compact images in full size
• The more people you use, the more visible the features should be.
• Use visual cues to let users know where they are
• Make certification information easier to recall

Nine, Learning and learning from experience is easy to put into practice, problem solving and calculation are difficult

1. We have three "brains" two kinds of thinking

We have a three-part brain that is "the old brain (primarily responsible for basic physiological functions)", "the midbrain (primarily responsible for emotions)" and "The new brain (primarily responsible for purposeful, conscious activity)."

The human mind is made up of two distinct parts: the unconscious, automatic thinking (System one), mainly in the old brain and the midbrain, and the main mind-running conscious, controlled thinking (System II), which some scientists call perceptual thinking and rational thinking respectively. In daily life, the system is often dominated by unification, and it runs 10 times times faster than the system two to 100 times times.

Therefore, it is easy to learn from experience, it is easy to perform the actions that have been learned, but it is difficult to perform new actions, solve problems and calculate.

2. impact on the user interface

• Significant identification of system status and current user progress
• Guide users through their goals
• Tell users exactly what information they want to know
• Do not let users diagnose system problems
• Minimizing the number and complexity of settings
• Let users use feelings rather than calculations
• Make the system more familiar.
• Get the computer to calculate

10. About Learning

1. When practice is regular, regular and precise, we learn faster
2. when operations focus on tasks, simplicity and consistency, we learn faster: Design a conceptual model that focuses on user tasks and goals, the conceptual model should be as simple as possible, the simpler the better, and the interaction system at least consistent on the conceptual model and keys
3. when words focus on tasks, familiarity, and consistency, we learn faster: Words should be focused on tasks and familiar, and in particular, professional nouns must be consistent, with each concept having only one name.
4. we learn faster when the risk is low: to prevent mistakes as much as possible, to stop unreasonable commands, to show users what they did (for example, by deleting a piece of text) so that the error is easier to find, and allows the user to easily undo, reverse, or fix the error.

11. about decision-making

1. We care more about losses than earnings: The system is more willing to accept risky but profitable gambling
2. words can also affect our choices: people choose to have frame effects, to express in one way, people make some kind of decision, in another way, people make different decisions.
3. vivid imagination and memory also influence our decision-making: the system does not consider other possible opposing evidences and experiences, making decisions based on the most directly available information (current perception and strong, easily recalled memories).
4. Implications for interface design:

• support Rational decision-making : Help the system to replace or assist the unification, such as through the system software decision analysis and then make the decision.
• data visualization: using the system as a natural automatic visual perception processing, to help the system two to understand complex data.
• Persuasion and guidance: system Two is a decision support system, through rational analysis to make decisions, system two is to guide the system, through story pictures and other means to arouse people's fear, hope, satisfaction, enjoyment, sex, money, reputation, food, etc. to make people make decisions.

12. about hand-eye coordination

Fitzpatrick Law: on the screen, the larger the target, and the closer to the starting position, the quicker you point to it. When designing the user interface, the designer should pay attention to the size of the control, leaving enough room for the user.

guiding law: Moving and reaching the target in a path that has been restricted, the wider the path, the quicker you can move the pointer to the target. This law often uses less right operand-pull menus, scrollbars, and other drag-and-move controls, to be aware of the size of the control when designing the controls, and the larger the control, the easier it is to drag the movement.

13. about Responsiveness

1. definition of responsiveness

Subject to the user's time requirements and user satisfaction to measure, the responsiveness of the user is very important, is the shadow

The most important factor for user satisfaction. A highly responsive system is not only a user's request can be completed immediately, but also a user's understanding of the situation.

2. Magnitude, engineering approximation of time constants in the human brain

• 0.001s (1ms): The shortest interval of silence that can be detected;
• 0.01s (10MS): Subconscious visual perception, the shortest detectable text delay, audio fusion;
• 0.1s (100ms): Perceptual 1~4 object, non-spontaneous eye movement (eye jump), causal relationship perception, perception-motion feedback, visual fusion, torsion reflex, distinguishing object, self-conscious editor "window", self-conscious "that moment";
• 1.0s: Average interval in conversation, prepared vision-motion response time, attention loss, and if an operation takes a few seconds, progress instructions are required;
• 10s: The unit task, the task can not interrupt attention, a complex task of a step;
• 100s (1.6min): Time to make critical decisions in emergency situations;

3. Other guidelines for achieving high-responsiveness interactive systems:

• Use the busy logo;
• Use user progress instructions;
• Delay in unit tasks is more troublesome than the delay between unit tasks;
• Show important information first;
• Camouflage heavyweight calculations in hand-eye coordination tasks;
• Advance processing;
• Processed according to the priority of the user input rather than the order of the input;
• Monitoring time commitment, reduce the quality of work to ensure that not backward;
• Provide timely feedback, even on Web pages.

This book from the visual, reading, memory, learning and other aspects of the General people's cognitive habits, so as to summarize some of the UI design reference recommendations. Although many of these suggestions, but the key is to tell us that the design is not just the imagination, but also from the user's point of view to think about problems, design. For example, when a user sees a Web page, what the user first notices is what to see and how it will be understood, then how to operate. When we recognize the user's cognitive habits and operating habits, we can choose the color, content typesetting, and make the products that are really the target users ' favorite according to their cognition.

Understanding design from a cognitive perspective