Design has principles and methodology. In view of fragmentary articles and principles on the Internet, methods and theories of interaction design will be summarized in this unification. We hope that you can put forward the deficiencies and make up for them together.
Articles include: Gestalt principles of Psychology, Nelson usability Principle, Nelson F Visual model, Heuristic Evaluation ten principles, Fitz’s Law, Schick’s Law, 7+2 Rule, 2 seconds principle, 2/8 rule, 3 Clicks Rule, Golden 8 Rules of Interfaces, Jakob Nielson principle, KANO model, 0123 simple rules, the laws of MVP, baby duck syndrome, the Bauhaus concept, tai si le’s law, the principle of mistake proofing, Occam’s razor principle, Maya, SNR laws, sequence effect and function visibility principle, cost-benefit, Gutenberg chart method, interactive usability 5 rules, maslow’s demand level theory The theory of…
Some theories may be similar or duplicate in meaning.
Gestalt principle
Gestalt psychology was born in 1912 by a group of German psychologists who tried to explain how human vision works. They observed and catalogued many important visual phenomena. One of the most fundamental findings is that human vision is holistic, that our visual system automatically structures visual inputs and perceives shapes, shapes and objects on a nervous system level, rather than just seeing disconnected edges, lines and regions. “Shape” and “figure” are Gestalt in German, so these theories are also called Gestalt principles of visual perception.
There are seven main principles of the Gestalt principle:
Proximity principle; Similarity principle; Principle of continuity; Sealing principle; Symmetry principle; Subject/background principle; Principle of common destiny.
Proximity principle:
The relative distance between objects affects our perception of whether and how they are organized. Objects that are close to each other (relative to other objects) appear to belong to a group, while those that are further apart are automatically excluded.
Similarity principle:
If other factors are equal, similar objects appear to belong to a group.
Principle of continuity:
Vision tends to perceive continuous forms rather than discrete fragments
Sealing principle:
The visual system automatically tries to close the open shape so that it perceives it as a whole object rather than as scattered fragments.
Principle of symmetry:
We tend to break down complex scenarios to reduce complexity.
Principle of subject/Background:
Our brain divides visual areas into subjects and backgrounds. The body consists of all the elements of a scene that occupy most of our attention, and the rest is the background.
When objects overlap we tend to think of the smaller one as the subject above the background.
Common destiny: Related to proximity and the principle of similar immortality, both affect whether or not we perceive objects in groups. Indicates that objects moving together are perceived as belonging to a group or related to one another.
If seven of the following dozens of pentagons oscillate back and forth synchronously, they will be perceived as a group even though they are far apart
The same spacing size color graphics, then the visual will move together graphics into a group. The anti-white background and movement track of folders selected at the same time when dragging folders are the most intuitive explanation of the common destiny principle.
Nelson usability principle
Nielsen’s ten usability principles are important reference standards for product design and user experience design, and deserve further study and application.
1. State visibility
Any action a user takes on a web page, whether it’s clicking, scrolling, or pressing a keyboard, should be given immediate feedback. “Instant” means that the page response time is less than the user can tolerate.
2. The principle of environmental relevance
The presentation should be as close to the user’s environment (age, education, culture, background) as possible, and not in a second world language. Metaphors and analogies mentioned in the iPhone Human-Computer Interaction Guide are good practice. In addition, you should use understandable and conventional expressions.
3. Undo the redo rule
In order to avoid user misuse and click, the web page should provide undo and redo functions.
4. Consistency principle
The same term, function and operation should be kept consistent.
5. Error prevention
Prevent users from making mistakes through design, reorganization, or special arrangements.
6. Accessibility principle
A bad pen is better than a good memory. Minimize the user’s recall burden by putting on the table what needs to be remembered.
7. Be flexible and efficient
The number of intermediate users is much higher than the number of primary and advanced users. Design for the majority of users, don’t underestimate, don’t take lightly, stay flexible and efficient.
8. Easy to sweep principle
Internet users do not read, not look, but scan the web. Easy to scan, meaning highlighting, weakening and eliminating irrelevant information.
9. Fault tolerance
Help users recover from errors and minimize losses. If not, provide detailed instructions and directions rather than code, such as 404.
10. The principle of human help
The best ways to help hints are: 1. 2, one-time prompt; 3. Permanent hints; 4. Help documentation.
Nielsen F vision model
Nielsen F vision model was proposed by Jakob Nielsen in 2006
He points out that when we look at a page for the first time, we focus on it in the shape of an F
- Start at the top and move horizontally from left to right
- Look down and start looking from left to right but it’s going to be shorter
- Scanning down at shorter lengths, forming an F shape, allows us to read at a slower, more systematic and organized speed
Specific figure:
According to Nelson F model, we can get several psychological hints:
- The specific text doesn’t matter when users scan quickly
- Use subheadings and short sentences to attract readers’ attention
- Put the important stuff at the top
NN Group the ten principles of the most classical Heuristic Evaluation
1.Visibility of system status
Visibility principle: System state feedback, wait time should be appropriate.
E.g. keyboard uppercase will have a small green light to tell you oh!
2.Match between system and the real world
Don’t lose touch with reality: use user language rather than developer language, and stick to real life rather than academic concepts
E.g. annoying 404 error, don’t understand what it means!
3.User Control and Freedom
The user has free control: the operation error can be rolled back
Oh, it was sent by mistake, please withdraw it!
4.Consistency and Standards
The principle of consistency: The same thing and the same operation of the expression should be consistent everywhere
E.g. once I know one Adobe product, I know all the others!
5.Error prevention
Precautions are taken to prevent user errors: confirm key operations and eliminate misoperations as soon as possible
E.g. hey mom almost deleted the wrong!
6.Recognition rather than recall
To let the user see in the first time: recognition is better than recall, provide the necessary information prompt (visual & easy access), reduce the burden of memory
What am I interested in again? Oh, there are options, that would be much convenient, I am interested in travel, art! (Pinterest gives users options directly when they ask for preference after signing up, avoiding forcing them to recall.)
7.Flexibility and efficiency of use
Flexible and efficient use: customized operation mode is designed for novice and expert, quick operation can be adjusted.
I don’t even bother to look for insert Rectangle in the menu bar. I just use shortcut keys!
8.Aesthetics and minimalist design
Legibility: Reduce irrelevant information and reflect concise beauty
E.g. I only care about the amount of money when I use Cash, I don’t want to see any other information! Many beginners to interaction design make the mistake of trying to fill up their pages. In fact, what you put on your page, and what information you highlight, depends on the needs of your users. Avoid putting irrelevant information in to “fill up” the interface.)
9.Help users recognize, diagnose and recover from errors
Give users clear error information, and help users easily recover from the error work
How come we can’t get in? Oh, that’s ok. Someone can help me.
10.Help and documentation
Necessary help tips and instructions documentation: It’s better to be fluent without documentation. Documentation is generally necessary, but also provides easy retrieval functions, and is oriented to user task descriptions, listing specific implementation steps, and not too verbose.
How to import PDF from web page? Search! Wow! Help documentation is so clear!
Fitts’ Law/Fitts’ Law
What the law says: The time required to move from a starting position to a final target is determined by two parameters, the distance to the target and the size of the target (D and W in the figure above), expressed mathematically as time T = a + b log2(D/W+1).
It was Paul in 1954. The mathematical model that Fitz first developed to predict the time it takes to get from any point to the center of a target has had the most extensive and far-reaching impact in the fields of human-computer interaction (HCI) and design. An application of this law can also be seen behind the switch from the Start menu to the start screen in the new Windows 8.
Implications of Fitz’s Law:
Clickable objects such as buttons need to be of reasonable size.
Edges and corners of the screen are great for placing elements like menu bars and buttons, because corners are huge targets, infinitely high or wide, and you can’t go over them with a mouse. No matter how far you move, the mouse ends up at the edge of the screen and on top of a button or menu.
Control menus (right-click menus) that appear next to the object the user is working on can be opened faster than drop-down menus or toolbars because there is no need to move to another location on the screen.
Read more: Mouse interaction in Windows Design Specification, Fitts’ Law and Internet design, Fitts’ Law and user interface design, Google Chrome and Fitts Law, Talk about Fitts Law, Fitts’ Law in interaction design (Readlists)
Hick’s Law (Hick’s Law)
The more choices a person has (n), the longer it takes to make a decision (T). It can be expressed mathematically as reaction time T=a+b log2 (n). In human-computer interaction, the more options in the interface, the longer it takes the user to make a decision. For example, users can choose from one menu of 10 items more quickly than two menus with five items each.
Schick’s law is mostly applied to the design of menus and sub-menus in software/website interfaces, and it is also applicable to mobile devices.
Extended Reading: Schick’s Law, Talk about Hick’s Law (Readlists)
The magic number 7 plus or minus 2 rule
In 1956, George Miller conducted a quantitative study on short-term memory ability. He found that the human mind can remember information blocks containing 7 (±2) items at its best, and the human mind starts to make mistakes after remembering 5-9 items. Similar to Schick’s law, the magic number 7 + 2 is often applied to mobile app interaction design, such as limiting the number of tabs to five.
It’s The Law Of Proximity
According to Gestalt psychology, when objects are too close together, consciousness thinks they are related. In interaction design, a submit button is next to a text box, so when adjacent blocks of functionality are not related, the interaction design may have a problem.
Tesler’s Law of conservation of complexity
The law states that every process has its inherent complexity, and that there is a point beyond which it cannot be simplified any more, and you can only move the inherent complexity from one place to another. For example, for the design of mailbox, the recipient address is no longer simplified, but for the sender can transfer its complexity through the integration of the client.
Error prevention principle:
The error-proofing principle holds that most accidents are due to design negligence, not human negligence. Mistakes can be minimized by changing the design. This principle was originally applied to industrial management, but it can also be applied to interaction design. Such as USB slot in hardware design; It can also be seen frequently in interface interaction design. For example, when the use condition is not met, it is often indicated by disabling the function (generally, the button will turn gray and cannot be clicked) to avoid not pressing.
As shown in the picture above, the comment function of Geek Park is fast. When there is no content in the message box or the mailbox format is not correct, it is impossible to obtain the verification code, only when both can be satisfied.
Occam’s Razor Occam’s Razor
This principle is known as “don’t add entities if you don’t have to,” which states that if two equally functional designs are available, choose the simplest one. UC Browser product Manager Su Jiannan also mentioned the application of this principle in his talk “UC Browser For Android Product Design Thinking”, “If UC mobile browser was to release the first version of UC 1.0, what five features would you choose?”
Functional visibility
1. In terms of visual perception, certain elements apply to certain functions, and these elements conform to functional visibility.
2. If the functional visibility of the elements in the design conforms to people’s sensory expectations, the design will have a high rate of acceptance and utilization, and is considered easy to operate. Therefore, in the design, it is necessary to conform to people’s psychological expectations as much as possible. The interface design should simulate familiar objects or environments, suggesting and reminding users of the use methods and functions of various components in the new system.
3. Application Example: In daily life, the function of door and door handle conflict, there is a push slogan, do not design a door handle. You can remove the text prompt, set the side that needs to be pushed without a handle, and set the side that needs to be pulled with a handle. In this way, the user can operate accurately when “pushing or pulling” according to the function visibility of the door handle. For example, the button design on the computer screen, the trash can icon on the computer desk, folder and so on, are all designed to simulate the objects in life, in line with the user’s cognition in life, used to prompt the user, the function of these ICONS in the software.
ICONS: These ICONS are designed to fit in with relevant things in life and make the software more functional
Accessible use
1. A good design can serve all kinds of people without special adjustment or modification. This principle applies to all the public. Four elements: legibility, ease of operation, simplicity and inclusiveness.
(1) Legibility: design that can be understood regardless of sensory function differences.
Methods to improve the legibility: a. Multiple annotation methods to present information, text image tactile, etc.; B. Auxiliary sensory design c. Control devices and control information are presented in a reasonable and appropriate manner.
(2) Easy to operate: it can be used regardless of physical condition.
Improve the easy operation method: a. Minimize the user’s repeated operation and unnecessary physical consumption B. Use sound and simple functional guidelines to make operating devices easy to use. C. Assist human activities and provide a convenient operating environment (only for the disabled). D. Present control devices and control information in a reasonable and appropriate way.
(3) Simplicity: Easy to control regardless of experience background, education level, attention, etc.
Methods to improve simplicity: a. Reduce unnecessary complex decoration b. use clear and consistent prompt symbols and operation information. C. Expand the description, mark relevant information and operating devices step by step. D. All instructions should provide clear hints and feedback to ensure that the information is easy to understand and suitable for users of different levels of education.
(4) Inclusiveness: minimize operation errors and consequences.
Ways to improve inclusivity: a. Prevent errors with sound functionality visibility and operability (only note correct usage). B. Use acknowledgements and warnings to prevent errors (delete: confirm to delete). C. Add self-positive operation functions and safety nets (self-adjustment and correction) to mitigate and avoid the consequences caused by mistakes.
2. Application examples: large elevator than small elevator function sound, two sets of operating board suitable for standing and sitting people, operating board a variety of symbols (digital image blind spot).
Cost effective
1. In the design, it is used to evaluate the final financial recovery of the additional costs incurred by new features/elements. If the cost of interaction with design > benefit, it is bad design, and vice versa.
2. Cost-effectiveness can measure the quality of the design. For example: the time of web page download is not more than 10 seconds, but the length of time to accept the download, more related to the benefits provided by the web page, if the web page has reasonable benefits, in fact, can offset the cost of more than 10 seconds of download. Therefore, the cost of interaction can be reduced by improving design quality (design can provide benefits).
3. To continue the product, the benefit should be greater than the cost to make the product better. Work from both benefit and cost: cost limitation or benefit increase. Therefore, we should not only consider the scope of cost limitation, but also consider the cost of interactive benefits.
4. Application examples: Loading page design: In terms of cost effectiveness, loading page design is diversified not only because of the simple reason of “interesting”, but also because of the intuitive feeling of users. The application essence of this design can be explained by cost-effectiveness. Waiting time can be regarded as cost. When technology cannot shorten reasonable waiting time, the cost cannot be reduced, so if you want a better product, you need to start from benefit. Therefore, the design of loading page, progress bar, error page and so on all reflect creative interaction that can bring benefits.
Here is:
Rule 8020
1. Definition: In all large systems, up to 80% of the effect is determined by only 20% of the key factors. In practice, it is found that the key variables account for 10-30%. The scope of application is universal, applicable to the influence of unrelated things.
The 2.8020 principle is helpful for resource integration and can help improve design maximization. For example, if customers spend 80% of their time focusing on 20% of the product’s functions, design and testing should focus on that 20%, and the remaining 80% should be re-evaluated to confirm their value. Designers can make use of this rule to re-evaluate all elements in the design, delimit the scope of redesign and optimization, and effectively determine the superior resources for redesign. 80% of non-critical energy should be reduced. When time and resources are limited, do not try to improve and optimize the 80%.
3. Application Example: GUI hides most functions in function menu (reduces visual complexity), common functions are hard to find (increases operation complexity), so 20% key functions should be put in function menu (use of toolbar).
Picture: In the Evernote software, the upper layer is the function menu, and there is a toolbar for common functions on the top of the main page. This is to display 20% of the key functions without hiding them.
Avant-garde and Close (MAYA’s Law)
1. Successful design can be defined in many aspects: function, aesthetics, applicability, etc. If we define design success in terms of business performance, i.e. sales volume, two variables can be balanced: familiarity + uniqueness. MAYA’s law helps us find the right balance between these two variables, so a design that combines familiarity with novelty can enhance its success. This applies to products that are intended for the general public, not professional designers and artists.
2. Users like familiar things (exposure: the attraction of an object or environment increases with exposure) and novel designs. People pay more attention to novelty and memory than typicality. The ideal, the law says, is to combine familiarity with novelty. To the user: the most novel but still recognizable object or environment, the most aesthetically appealing.
3. Application Examples: The evolution of design although there are always creative and novel designs, they are gradually evolved from the previously accepted designs, rather than completely separated from the re-creation. Therefore, the novel design plus the familiarity of the past design will make users attractive and acceptable. ICONS, interface evolution.
Graphic: A comparison of design elements from different versions of IOS shows that despite the novelty of the new version, there is still a familiar feeling from the previous version.
Regional alignment
1. This alignment applies to: elements with different shapes and asymmetric elements can be graphic or text elements. If the elements are simple and symmetrical, edge alignment is used.
2. Alignment method: Place the elements to be aligned along the central axis so that the visual center of gravity or area on both sides of the central axis is equal. The region alignment method does not make edges align. If you want both edges to align, you can only make the edges inside or outside the edges.
Illustration: You can clearly see the better alignment on the right.
Signal-to-noise ratio (often used in information design)
1. In the same display, the ratio of relevant information to irrelevant information is signal-to-noise ratio. In the process of creating, conveying and receiving information, the form of information will decrease and irrelevant information will increase. How to make the SNR high, so as to achieve excellent design goals? It can be viewed in two ways: signal maximization or noise minimization.
2. Signal maximization: clearly convey information and efficiently present information to maximize the signal. Simple design can bring minimal performance load, allowing users to focus on the meaning of the data. For example, not presenting a particular data set with the right chart will basically distort the original meaning of the data, so correct design decisions are important and should be tested if necessary. Another way to reduce signal decline is to emphasize key aspects of the message in a timely manner. For example: emphasize or backup identification, highlight the importance of the product.
3. Noise minimization: Remove or reduce unnecessary elements. Every unnecessary data item, icon, line, pattern will distract users from important elements. Each design element should be used appropriately, but too much is noise.
4. Application: Evolution of chart and table design.
Graphic: The chart on the left has a lot of irrelevant information elements. The graphic has a variety of patterns. The border of the table is thick and heavy, which makes the “noise” increase. On the right is an optimized chart, with extraneous information subtracted and the data presented in a clear graphic representation.
The sequence effect
1. When listing information, the first and last elements are more likely to be remembered than those in the middle.
2. The enhanced recall effect for information at the beginning of the list is called the priming effect, and people sometimes store the first information in long-term memory. The information at the end produces an enhanced recall effect, known as the proximity effect. The time proximity effect applies to auditory stimuli. Initial effects apply to visual stimuli.
3. When listing information elements, if the listing information is visual, put the important information first; If it’s auditory, put it at the back. If the user has to make a decision, and the decision is made immediately after the last item appears, put the information that wants the user to make a decision last to increase the probability of being selected, and otherwise first.
4. Application examples: For example, in the design of many APP products, personal accounts and Settings are basically placed at the front and back of the page, which reflects the sequence relationship and order of importance of product information. Therefore, the sequence effect can be followed in the ordering of information in the design. Of course, there are products that want to guide the user, and you can use this rule to put information first or last.
Here is:
Gutenberg’s diagram
Gutenberg chart, also known as the Diagonal Balance, was designed after Johannes Gutenburg’s Gutenberg chart, which was used for printing. It points out that:
People’s eyes tend to move from the top left to the bottom right when browsing a page or layout, as shown in the figure below
Gutenberg diagrams show that we do not view the page with mirror symmetry, and we need to avoid this error in design but not in a conventional way. Put the Logo in the top left corner of the page and the main body extends to the bottom right corner, with the bottom left and top right as blind spots to add auxiliary elements
Some other easy rules:
Two-second rule— The user should not wait more than 2 seconds when using certain types of systems.
The three-click ruleUsers will leave if they don’t find the information they are looking for or understand the features of the product/site within 3 clicks.
The 2/8 rule80% of the effects are caused by 20% of the causes.
Interface 8 Golden Rule:
1) Try to be consistent;
For example, the homepage of a website needs to maintain a consistent style with each subordinate page, and the navigation should be placed in the upper left corner of the screen. A highly consistent interface can give people a clear and tidy feeling.
2) Allow users who frequently use the system to use shortcuts;
Shortcuts represent flexibility and effectiveness in the use of a product. Think about it every time we use a search engine, do we click search or do we press Enter?
3) Provide information feedback;
Error error to clearly state the meaning of the error, and need to consider whether the user can understand, such as we have basically encountered HTTP404 error, but the vast majority of people can understand?
4) Design the dialog box to close this action;
Prompt the user after completing a task or action. If they do a lot of things and don’t get feedback, they don’t know if they’re achieving their goals.
5) Provide simple design processing;
For example, some of the buttons that cannot be clicked at present are set to gray, and the user can confirm them when the system is executing
6) It should be convenient for users to cancel an operation;
Most applications have undo and restore functions, so you can imagine the user experience if the user is always afraid of making a mistake
7) The user shall have the right of control;
Generally speaking, users want to control the system interaction by themselves. During the execution of tasks, users should be able to stop or quit at any time, rather than helplessly watching the system continue
8) Reduce short-term memory load;
As much as possible, we should help users avoid requiring them to remember all kinds of information, such as logical associations between menu items, and better categorization will help users figure out which function buttons are where.
Jakob Nielsen’s 10 Usability Principles:
- Visibility of system state — let users know what the system is doing;
- Matching of systems to the real world — systems must speak the user’s language;
- User control and freedom – “emergency exits” to exit unexpected states, support undo and redo;
- Conformance and standards — compliance with platform specifications;
- Error prevention – either to avoid error-prone situations or to check and confirm options to prompt the user before the actual action;
- Recognition rather than recall — visualizing objects, actions, and options to reduce user memory stress;
- Flexibility and efficiency of use — users can customize frequently used actions;
- Aesthetics and minimal design — dialogs cannot contain irrelevant or barely needed information;
- Help users recognize, diagnose, and recover from errors — error messages must be expressed in plain language (no code), accurately identify the problem, and actively suggest solutions;
- Help and documentation – Easy to search, focus on user tasks, and list specific steps that need to be performed, rather than sweeping instructions.
The KANO model:
- Charm factor — providing unexpected needs of users will greatly improve user satisfaction, if not, the satisfaction will remain unchanged;
- Expectation factor — satisfaction increases if desired needs are provided, and decreases if they are not;
- Essential factors – optimize this demand user satisfaction unchanged, not optimize the satisfaction will drop significantly;
- Indifference factors — functional requirements that users don’t care about at all;
- Reverse factor — without this need, satisfaction remains the same, with secondary need, satisfaction decreases.
Bauhaus movementForm follows function, removing distractions and decoration.
Skeumorphic design concept— Put a lot of effort into pointing to or mimicking real world features.
Baby duck syndromeUsers who are used to the previous design and uncomfortable with the new product architecture must find their own way to use the product.
Self-reference effectThings that are connected to our personal beliefs are remembered better than things that are not directly connected to us.
The Rule of Simplicity— No instruction manual, a look will, two seconds of waiting time, within three steps of the operation.
MVP Rule (The simplest executable product Rule)— Approach users with your product from the start, and improve your product from early on based on user feedback.
The McKinsey Pyramid methodEverything can be reduced to a central point, and the central argument can be supported by several primary arguments, which can also be supported by several secondary arguments, and so on, like a pyramid.
Five principles of human-computer interaction:
- learnability
- The efficiency of
- But memory
- Not easy to make mistakes
- satisfaction
Cognitive psychology is a state that presents mental processes
Flow: a state of mind in which people are completely absorbed in something, in which they lose themselves
- Guide the user to the goal (prompt the next step, complete the goal)
- Be aware of the current state at all times (navigation, transition animation, state interface, cognitive psychology metaphor)
- Feasible design (autonomous operation and reversibility during use)
- Foolproof design (preventing errors, limiting operations, anticipating errors, jumping out of the white space)
- Stand in the consumer psychology and design: show off psychology; Approach psychology; Take advantage of mentality; Have regret psychology; Price psychology.
Color psychology
- Color constancy
- Illusion of color
- Perception of color
No more than three color combinations
Lively color and light and dark color collocation can make the picture more administrative levels and vitality
The main color determines the brand direction
Using similarity to carry out color echo, the picture has a sense of rhythm and comfort
Use color gradients interspersed to balance the interface at one frequency
Maslow’s hierarchy of needs:
This post was originally posted by @Placeless everyone is a product manager. Reprint without permission is prohibited.
Photo from PEXELS, based on CC0 protocol