Jakob Nielsen’s 10 Principles of Interaction Design. They are called “heuristics” because they are broad rules of thumb rather than specific usability guidelines. Therefore, we should not take it as a standard, but as an experience to learn, and then use it in combination with real world design. Next, the author uses some concrete examples to explain how Nelson’s ten principles of interaction design can be used in design
Jakob Nielsen
Jakob Nielsen holds a PhD in human-computer interaction from the Technical University of Denmark in Copenhagen. He holds 79 US patents, mainly on ways to make the Internet easier to use. Nelson was inducted into the Scandinavian Interactive Media Hall of Fame in June 2000, and was inducted into the Academy of Human-Computer Interaction in April 2006, where he was given the Lifetime Achievement Award for human-computer Interaction practice. He has also been named the “Web Usability Guru” by The New York Times and the “King of Ease of Use” by Internet Magazine.
2. Nielsen’s Ten Principles of Interaction Design
Use the Visibility of system status.
The system should let users always know what is happening at the moment, that is, to quickly let users know what state they are in, what happened in the past, the current goal, and what is going to happen in the future. The general method is to give users appropriate feedback at the appropriate time to prevent users from making mistakes.
Case 1:
Take toutiao’s drop-down refresh feature: The headline of the page to refresh the function using the drop-down refresh interact, when a user down the page, the page status bar will appear with the content area “happy New Year”, when I loosen the page will appear in the “recommended” dynamic prompt, middle of a loading after a “today’s headlines recommendation engines are eight update” writing tip; This series of hints is what we call the dynamic visibility principle, as shown below:
Case 2:
For example, when the user clicks the “follow” button, a prompt “follow success” will appear in the middle of the page and disappear after staying for 2S. Similarly, the prompt after the operation is also one of the state visibility principles, as shown below:
Match between System and the real World
Software systems should use language, words, statements, or other concepts that users are familiar with, not system language. The information in the software should be as close to the real world as possible, making it more natural and logically easier for users to understand.
Case 1:
For example, computer software interface design: Now we are in the mobile phone calculator software interface design, basically with us the reality style is the same as the use of calculators, below the left one is our reality is to use a calculator, the left two, three, in turn, is a hammer mobile phones and apple X built-in calculator software interface, is really similar, this design can let users very quickly, easy to operate, Because real-world users are already familiar with calculators, this is the contextual appropriateness principle:
Case 2:
For example, the Chinese version of Sina Weibo and the International version of Android are different from each other in terms of logo and internal page style, language, structure layout and interaction mode. Considering the use of foreign users, the default language of the software is English, of course, it also supports various language versions, which can be adjusted in the Settings as required. In addition, the design style of the interface layout of the international version fully complies with The design specifications of Google, which is the principle of environmental appropriateness, see the following figure for details:
User Control and Freedom
Users often mistakenly touch certain features, we should make it easy for users to log out. In this case, we should make the “emergency exit” button obvious and not pop up an extra dialog box on exit. Many users send a message, and there is always a moment when they suddenly realize they are wrong. This is called critical effect. So it’s best to support undo/redo.
Case 1:
For example, the withdrawal function in wechat chat: Two people in WeChat chat of time, I sent a message or expression, suddenly feel not appropriate, I can be in long according to the news or expression, in a select box choose to withdraw, and edit again to send, to avoid temporarily didn’t want to good and wrong message may give the other party or disturbance, this is the user controllable principles, specific see below:
Case 2:
Such as Google album deleted photos after cancellation function: when using Google photo albums, we will do to photograph some operations, such as delete the picture, when I delete a photo in Google photo albums, it will appear in the bottom of a prompt box, box will appear behind dropped hints, this is also the user controllable principles, specific see below:
Principle 4: Consistency and Standards
For the user, the same text, state, and button should trigger the same thing, following common platform conventions; That is, the same language, function, operation remain consistent. Consistency of software products includes the following five aspects:
(1) Consistency of structure: keep a similar structure, new structural changes will make users think, and the order of rules can reduce users’ thinking burden;
Case study:
For example WeChat entry layout of each module, each module in the WeChat entries are unified “icon + text messages” structure style, enables the user to quickly understand the circle of friends, scan, shake, take a look at, search, near people, bottles, shopping, gaming and small program, and other functions are made of what, this is the embodiment of the structural consistency, the diagram below:
(2) Color consistency: the main colors used by the product should be uniform, rather than different colors on different pages;
Case study:
Such as netease cloud music color: netease cloud music icon and interface of the main color is red, also includes some of the labels and emphasize text color is red, the entire interface in addition to the image of effective information, are presented through the grey, white, red, interface to maintain a good consistency, this is the color consistency principle, the following figure:
(3) Consistency of operation: users can keep their cognition of the original product when the product is updated and reduce the learning cost of users;
Case study:
For example, the return operation in the upper left corner of wechat, Alipay and Dingding APP in Android version: the return operation in the upper level of the three Android versions is carried out through the back button on the top left, and of course, it can also be carried out through the physical back button of Android, which is the embodiment of the consistency of operation, as shown in the figure below:
(4) Feedback consistency: when users operate buttons or items, the feedback effect of clicking should be consistent;
Case study:
For example, android version of mobile QQ information list to open the way: its information is a list-type structure, no matter you click on that line of items, the next level of the interface is from right to left, click the top left corner of the back button will slide back from left to right, the experience is quite consistent; This is the consistency of feedback, as shown in the following GIF:
(5) Text consistency: the text size, style, color and layout presented to users in the product should be consistent;
Case study:
For example WeChat several key interface fonts: entry below I use the red box up part of the text, the three main interface is not the same, but the style of the font size, color, layout is the same, which makes the whole APP looks very comfortable on the vision, this is the font consistency, therefore, we are doing the visual design as far as possible to use agree with style when writing.
Principle 5: Error Prevention
A better way to design than a good error alert pop-up is to avoid the error before it happens. You can help the user rule out some error-prone situations or give the user an option to confirm before submitting. Here, special attention should be paid to prompt users when operating functions with destructive effects to prevent users from making irreversible mistakes.
Case 1:
Such as zhihu android version of the login operation: when the user login in zhihu, before did not complete the phone number and password, do not click the login button is placed at the bottom of the ash, only two were complete login button at the bottom of the state will become a clickable, also will be blue, this is to prevent users to make more mistakes, also an embodiment of the principle of mistake proofing, the diagram below:
Case 2:
For example, when you click the back button, the prompt pop-up window will appear: Pop-up box way will increase the difficulty of the irreversible operation, when a user sends a dynamic half of the time, because of the wrong operation or other exit the current state, use pop-up window is a good choice, because the user before this operation can make hard to edit the contents of the deleted get back, want to send only to start from scratch, cause losses to the user is larger; This is another manifestation of the error prevention principle, as shown below:
Recognition rather than recall
Reduce user memory load by making components, buttons, and options visible. The user does not need to remember the information in each dialog box. The instructions for using the software should be visible and reviewable when appropriate.
Case 1:
Like deleting photos in Google Albums: Use a similar trash can “icon” delete function, there is a cognitive load for users, and click “delete” after the user for the consequences and influence is not clear, therefore, delete the pop-up message is very necessary, after the popup window to remove after identifying the deleted, the influence of the follow-up, with the help of the description and operation of options, The appearance of the pop-up box greatly reduces the user’s memory before and after, which is the embodiment of the principle of accessibility, as shown in the following figure:
Case 2:
For example, android version of iQiyi after the update of the new function guidance: after the update of the APP, when the user triggers these functions, there will be the following type of mask class prompt, these prompts tell the user where the function and function; This can be found in many apps and is a manifestation of the principle of accessibility. See below:
Principle 7: Flexibility and efficiency of use
Car throttle – often invisible to novice users, and a quick way to interact with the car for expert users. Such a system can satisfy both experienced and inexperienced users. Allows users to customize common functions.
Case 1:
For example, android version of Alipay in the editing application function: Alipay home page applications can be customized according to their own preferences, including the definition of common applications, sorting, deletion, new and so on; In this way, users can customize their own suitable application distribution mode according to their personal interests, which is called user customization of common functions, which is also a manifestation of the flexible and efficient principle, as shown in the following figure:
Case 2:
For example, android VERSION OF QQ chat common expression module: Android version of the QQ chat interface expression in the pop-up window will have a “common expression” module, it is the expression of personal use at ordinary times frequency or most times categorize, when users can quickly find oneself to like or commonly used expression, improve the efficiency of the chat, the experience is very good, this is also the embodiment of the flexible and efficient principle, the following figure:
Principle 8: Aesthetic and Minimalist Design
Conversations should be stripped of irrelevant or barely needed information. Any irrelevant information makes important information harder to detect.
Case 1:
Apple mobile phone in the software (IOS11 design specification) : in the new version of apple mobile phone in the software title belongs to the font enlargement, simple interface design style; In addition, in apple’s own music software, the difference between the title and the body of the paragraph is obvious. The title is obviously large, while the body is relatively small, which is the embodiment of the principle of beauty and simplicity, as shown in the figure below:
Case 2:
For example, The Android version of netease cloud Music and QQ Music playing page: netease cloud Music and QQ Music APP music playing interface, from the visual and functional layout above do quite good, beautiful and simple, clear functional priorities, good user experience; It is also an embodiment of the principle of beauty and simplicity, as shown below:
Help users recognize, diagnose, and recover from errors
The error message should be simple (no code), pointing out what went wrong, and suggesting a solution. That is, how to provide timely and correct help to users when they make mistakes? That is to help the user to identify the error, analyze the cause of the error and then help the user back on the right path. If you really can’t help the user recover from the error, try to help the user to minimize the loss.
Case 1:
For example, the PC registration interface of netease mailbox: Users in netease 163 PC E-mail address, will not only when the input error an error prompt, also gives the corresponding Suggestions, help users with the right choice, thus avoiding the user appear bigger error and improve the efficiency of the registration, this is a fairly good user experience, also is a kind of fault-tolerant principle reflected, the diagram below:
Case 2:
For example, the Twitter sign-up page error message: When users registered Twitter account, the first step is to enter the name and phone number, when the user input the correct input boxes will have green check-off circle, prompt the user for right, can enter the next step, and when the user input the wrong time, input box will become red and errors in the lower part of the red word, In this way, the user can clearly know the user’s input error and the reason for the error, so that the user can know how to modify, which is also a manifestation of the fault tolerance principle, as shown in the figure below:
Principle 10: Help and Documentation
Even if it is best for the system not to use a help document, we should provide a help document. Any help information should be easily searchable, centered on the user’s task and listing the steps, but not in too much text.
Case 1:
For example, the help entrance of the login page of Taobao APP and Zhihu APP: it is necessary to provide corresponding help entrance in the entrance of important functions to solve the problems or feedback problems encountered by users in the operation of functions. Users should not be at a loss when problems occur and do not know what to do. See the following figure for details:
Case 2:
For example, some of the larger software commonly used on the MAC: Prototyping tool Axure RP 8 software, image editing software Photshop CC, and Safari on the MAC all have a “Help” entry in the top status bar, which also shows the need for a help document. It is used to solve the problems encountered by users during operation, as shown in the following figure:
Third, summary
So that’s my interpretation of Jakob Nielsen’s ten principles of interaction design. I’ve learned a lot of design lessons and techniques from them, and I hope you’ll find them helpful.
Finally, thank you for reading, please give a thumbs-up if you like
Reference: https://www.nngroup.com/articles/ten-usability-heuristics/
Author: Panda Xiaosheng, interaction designer, 4 years of Experience in Internet product design, used to lead the design of many Internet products.
, End,
Micro-interaction ∣ Detail design makes for great products
Long press, identify the QR code, add attention
Share the article and let more people know about microinteraction