Nielsen is a Ph.D. in Human-Computer Interaction. After summarizing and analyzing more than 200 usability problems, he proposed Nielsen's ten usability principles in 1995. Whether in web design or mobile design, mastering these ten principles can effectively improve product users. experience. Today, I will talk to you about the ten principles of Nielsen with an example.
About Jacob Nelson
Jakob Nielsen is a PhD in Human-Computer Interaction from the Technical University of Denmark in Copenhagen, where he holds 79 US patents, mainly on methods of making the Internet easier to use. Nielsen was inducted into the Scandinavian Interactive Media Hall of Fame in June 2000, and in April 2006, was admitted to the Human-Computer Interaction Institute of the American Computer Society and was given the Lifetime Achievement Award for Human-Computer Interaction Practice. He has also been called "The Web Usability Guru" by The New York Times and "The King of Usability" by Internet Magazine. The 10 Usability Heuristics he proposed are widely used in various fields of human-computer interaction (mostly on the C-side).
10 Usability Principles
1. System state visibility (state visibility principle)
The system should always keep the user informed of what is going on with appropriate feedback within a reasonable time. -- Nelson
1.1 System Status Visibility - Location Visibility
Compared with C-end products, B-end products are often more complex at the page level. Therefore, it is especially important to let users know their current location, which highlights the importance of navigation. There are three common types of navigation in the system platform: horizontal navigation, vertical navigation and combined navigation.
1.2 System Status Visibility - Quantity Visibility
The system supports custom configuration of task fields. In the "Add Field" pop-up window, when the user selects a field, the selected quantity will be displayed on the "OK" button below, which is convenient for checking and checking.
1.3 System Status Visibility - Status Visibility
After locking a task field in the enterprise management background, enter the "Add Field" pop-up window again. The locked field is followed by an icon indicating that it is locked, telling the user that the field cannot be edited. (The check box is grayed out or hidden after the multi-selection exceeds the number of selections, which also belongs to the principle of state visibility)
2. Close to the real environment of the user (the principle of appropriate environment)
The system should speak the language the user is accustomed to, such as words, phrases, and concepts that the user is familiar with, rather than system-oriented terms. Follow real-world conventions so that information appears in a natural and logical order.
- Nelson
A B-side management platform integrates many user rights, such as functional modules and system management modules. On the home page, the language used is easy to understand and can be understood without a specific professional background. In the system management page, the language used is more professional development terms, such as "code base", "code group", "authority management", etc., because the main user group of system management is development or operation and maintenance personnel, The above words are used and familiar to developers.
3. Users have the right to control and come and go freely (the principle of user control)
When the user selects a function by mistake, the system needs to provide a clear "emergency exit" to let the user leave the unwanted state without additional dialogs. Undo and redo are supported.
- Nelson
3.1 The user has the right to control and come and go - close and return
In some systems, multiple subtasks can be created under one task, and the subtasks are subordinate to the parent task. Therefore, in the subtask popup window, there are both "return to superior" and "close" buttons, and the corresponding operations are to return to the parent task popup window, or directly close the popup window. (Mostly used for functional floating windows, breadcrumb navigation is also a user-controllable principle)
Due to the complexity of the B-end system, some functions have a deeper level. An operation in pop-up window A may trigger the pop-up of pop-up window B. If the functions carried by pop-up windows A and B have a parent-child relationship, the "return" function also needs to be considered.
(PS: In actual projects, multi-level pop-up windows should be avoided as much as possible)
3.2 The user has the right to control and come and go - undo and redo
On the "Task Field Type Configuration" page, when the user changes the default initial configuration, the "Restore to Default Configuration" button will appear in the upper right corner. This is a design idea that supports efficient redo. (In our system, information is often entered, and "reset" is added to the system settings)
4. System Consistency (Consistency Principle)
We should not make users wonder whether different statements, states or actions are expressing the same thing. The design follows the conventions of the platform. - Nelson
4.1 System Consistency - Style Consistency
Take the pop-up prompt in the platform as an example. In terms of position, the prompt appears uniformly in the lower left corner of the page, and automatically fades out and disappears after the same time; in form, it is in the form of icon plus text, and the upper right corner has Close button; in terms of color, green is used for successful operation, red is used for operation failure and error report, and blue is used for function push; if there is a text button in the prompt, the color of the text button is uniformly blue.
4.2 System Consistency - Functional Consistency
When the sorting function is available, it is represented by the same icon, and the function operation is also consistent: adjust the sorting by dragging and dropping.
5. Avoid mistakes (the principle of preventing mistakes)
A better approach than an error message is to prevent errors by careful design: either eliminate error-prone situations, or identify them and provide confirmation options before the user takes action. - Nelson
5.1 Error prevention - early warning and confirmation
In the task menu, when hovering over a non-dangerous action, the background color changes to light gray; however, when the mouse hovers over "Move to Recycle Bin", the background color changes to red, through the striking Color to remind users that this is a dangerous operation, thereby reducing the possibility of user misoperation. When the user clicks "Move to Recycle Bin", a pop-up window for secondary confirmation will pop up to further prevent users from making mistakes. (A warning prompt is required for operations such as unsaved closing, deleting, and changing data)
5.2 Preventing Errors - Graying
Normally, graying a button means that the corresponding function or operation cannot be used, which is also an effective way to prevent errors, because the user can know its status through the button style, which saves the trial and error cost of clicking. So, should the corresponding button be grayed out as long as the function or operation is unavailable? (Actually, a better approach is to leave the button not grayed out after filling in the title of the game, and to locate or highlight the required items after clicking the Finish button, making it easier for users to identify error points)
6. System recognition trumps user memory (the principle of easy access)
Minimize the user's memory load by visualizing objects, actions, and options. The user does not need to remember information from one part of the dialog to another. The indication information of system operation needs to be easy to be discovered and obtained by the user. - Nelson
6.1 System recognition trumps user memory - preserving history
When it comes to preserving history, the most common thing is to preserve historical searches and historical browsing for users. In some platform functions, there is a "Recent Projects" module, which will be sorted according to the project opening time from near to far, so that users can quickly enter the projects they need to deal with. (commonly used office tools)
6.2 System recognition beats user memory - visual presentation
In the Kanban configuration pop-up window of worktile, when the field on the right is checked, the preview area on the left will display the position and style of the field displayed in the card in real time. Because the single card area of the Kanban board is relatively limited, but sometimes it is necessary to include more task information in the card. In this case, by checking the fields and previewing in real time, users can repeatedly configure and debug the card presentation effect. To a certain extent, the burden of memory is reduced.
6.3 System recognition trumps user memory - easy access to instructions
There are 3 ways to open the worktile task, namely: pop-up window, side slide out, and full screen. But if it's just three nouns, it's still a bit abstract and not intuitive enough. Therefore, the three opening methods are made into corresponding three GIF images. When the mouse hovers over it, the GIF image starts to play. When the user needs to make a selection, he will definitely move the mouse to the corresponding opening method, and he will inevitably find the instructions covered in the GIF image. (This design not only makes the opening method intuitive, but also easy to be discovered and obtained by users)
7. Flexible and easy-to-use user experience (the principle of flexibility and efficiency)
Some shortcut functions, although ignored by novice users, may be used by expert users and help improve their efficiency. Therefore, the system needs to meet the needs of both novice users and expert users. Allow users to operate frequently. - Nelson
7.1 Flexible and easy-to-use experience - flexible configuration
Taking the task field of worktile as an example, you can configure the task field type, including adding fields, deleting fields, and setting fields as required. In addition, editing of custom fields is supported, including the name, type, default value and prompt text of the field. The configuration of the task field is only valid for the current project. Therefore, different projects can have different field configurations, making project management more flexible. (more common in tasks or content publishing)
7.2 Flexible and easy-to-use user experience - take what you need
Taking a document as an example, there are many ways to edit the text format. When the user needs to bold the text, after selecting the text, he can click the bold button in the upper toolbar, or press the shortcut key, or use the Markdown syntax. The above three methods can all achieve the effect of bolding, but the user groups they face are not the same. Novice users may choose the first option, skilled or expert users may choose the second option, and users who are accustomed to writing in Markdown prefer the third option. Therefore, when designing functions, it is best to take into account the needs of users at different levels, so as to allow users to "get what they need" (the platform requires multiple types of users)
7.3 Flexible and easy-to-use experience - allows frequent operations
In some scenarios, users may perform some frequent or repeated operations, so it is necessary to consider how to design to make these frequent operations more convenient. For example, when creating a task, there will be two buttons “Save” and “Finish and create next”. “Finish and create next” actually provides convenience for those users who need to create multiple tasks at once. In addition, when creating a subtask, after clicking "Save", the text box of the next subtask will automatically pop up below, and the user can choose to continue the creation or click the "Cancel" button to end the creation. This is also designed to improve the efficiency of frequent operations. .
8. Beautiful and minimalist design (principle of elegance and simplicity)
Dialogs should not contain irrelevant or rarely used information. Each additional piece of information in the dialog means a reduction in the relative visibility of the main information. - Nelson
In the task board, when the task status is "completed", the corresponding card is displayed in gray, thus highlighting the "pending" and "in progress" task cards. When a task's priority is "Urgent", it will be marked in orange on the left side of the card, while tasks with a "Normal" or "Lower" priority will not be color-coded on the left side of the card. This example makes the page concise and makes important information stand out by weakening (graying) and removing (removing the marker color).
9. Principles for helping users identify, diagnose, and recover from errors
Error messages should be expressed in plain language (not code), accurately reflect the problem, and propose a feasible solution. - Nelson
9.1 Helping users identify, diagnose, and recover from errors - Identify and recover from errors
When a custom task field is locked in the enterprise management background, in the "Edit Custom Field" pop-up window, it not only makes it clear that it cannot be edited by graying it out, but also prompts the reason (the field is locked), and also Informed about the solution (who is locked, who can be found).
If the error message uses incomprehensible language or code, the effect will be greatly reduced. The scenario where the error message appears in the above figure is: an error occurs when adding an attachment in the task pop-up window and publishing it. From the text 「参数有误: attachments」 , what the user learns is only that the issue of attachments resulted in unsuccessful publishing. But, what does "the parameter is wrong" mean? Is the attachment format incorrect? Or does the attachment exceed the size limit? Still don't know the reason for the error, let alone the solution.
10. Help Documentation - Principles of Help and Hints
Although it is best to allow users to use it without reading the documentation, in most cases, it may be necessary to provide help documentation. The information in the help documentation should be easily searchable, focus on the user's task, list specific steps, and not be too bulky. - Nelson
10.1 Help Documentation - Air Window Tips
In the platform, if it is a short help prompt directly related to a simple operation, it is mostly in the form of a floating window: it appears when the mouse is hovered;
10.2 Help Documentation - Text Tips
For help information that is difficult to explain in a few sentences, configure a link and click it to jump to the corresponding location in the help center.
Summarize
When designing B-end products, the application of Nielsen's 10 usability principles can be considered from the following aspects, but not limited to the following.
- Visibility of system status: position visible, quantity visible, status visible.
- Close to the real environment of the user: The language used should be what the user is accustomed to.
- The user has the right to control and come and go: close and return, undo and redo.
- Consistency of the system: consistent style, consistent structure and interaction, and consistent function.
- Error prevention: early warning and confirmation, graying. However, it is not suitable to put ash in some scenarios, and it needs to be considered in combination with the specific situation.
- System recognition trumps user memory: history retention, visual presentation, easy access to instructions.
- Flexible and easy-to-use user experience: flexible configuration, taking what you need, and allowing frequent operations.
- Beautiful and minimalist design: Make important information stand out by softening and removing unimportant information.
- Help users identify, diagnose, and recover from mistakes: problems need to be accurate, solutions need to be workable, no code.
- Help document: According to the length and type of help information, comprehensive use of floating window prompts, text prompts, jumping to the help center and other forms.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。