In life, there are certain rules that you can't break. Similarly, there are some rules in user interface design, which are called principles. They are repeatable patterns that have been repeatedly tested to help users navigate the interface.

The designer's carefully designed interface will always consider the following principles, while an improperly designed interface will certainly lack one or more of these principles.

If you are a UI designer, violating one of these rules will give users a headache. Next, let's look at the principles:

1. Visibility of system status

The system should always make users understand the situation through appropriate feedback within a reasonable time.

Always provide your users with appropriate information, prompts, and context so that they always know where they are in the system. This allows users to take control of everything and know what to do next.

Has the item been added to the cart? Save modification? How long does this process take? How is my order status? What happened now?

Always answer such questions for users and never let them guess or be in the dark.

2. Matching between the system and the real world

The system should use words, phrases and concepts familiar to the user to speak the user's language, rather than system oriented terminology. Follow the conventions of the real world to make information appear in a natural and logical order.

Use familiar words and languages. Don't make the user's words too complicated. The meaning of words or icons on the screen should be clear and easy to understand for the target audience. People also have mental models and experiences that enable them to interpret patterns.

One of the biggest advances in technology came when graphical user interfaces were introduced. Before the GUI, the computer screen was limited to vague text commands to remember and repeat each time you wanted to perform an operation. There were almost no visual symbols on the screen, such as folders, files and hand cursor images, that people could understand immediately. It takes a lot of energy for users to understand the operation when using.

3. Consistency and standards

Users need not doubt whether different words, situations or actions mean the same thing.

There are two types of consistency: inside and external

Internal consistency refers to patterns within a website or application. This can be simple, such as keeping links the same color on all pages, or using the same icon for the same concept, such as HOME.

External consistency refers to other software used by most people and conventions used in systems, such as shopping carts. Most people are familiar with the way shopping carts work. You don't have to reinvent the wheel. If you do this, it may make it more difficult for users to understand how shopping carts work. Keep consistent and avoid unnecessary confusion by users.

4. User control and freedom

Users often mistakenly select system functions, and need to clearly mark the "emergency exit" to leave the unwanted state, without a long dialogue to support undo and redo.

Always provide an outlet and never force users to perform unwanted functions or get them into trouble.

For example, if you are designing the checkout process, please let users continue shopping as needed. If they try to perform an operation on the application, ask the uncertain user to cancel the operation until the last minute.

5. Error prevention

Eliminate error prone conditions, or check conditions and provide confirmation options to users before they perform actions.

When system operations are critical, such as deleting files or sending email campaigns to 1000 recipients, make sure users know that they will do something important. Show them a confirmation dialog or provide other information to clearly define what will happen before the operation is performed. If they are not sure of their actions, this will prevent them from going further.

6. Recognition rather than recall

Users do not have to remember information from one part of the conversation to another. Where appropriate, system instructions shall be clearly visible or easily retrievable.

As a UI designer, one of our goals is to reduce the cognitive burden of users. Psychological memory is a huge resource consumption. Memory works in two ways: recognition and memory.

distinguish It is immediately familiar to you. Like a person's face. When you look at your friends' faces, you know you have seen them before.

and memory The way is different. You must retrieve something from your memory, such as a person's name. Memories usually take more time and work, because your brain must process more information to interpret its content. On the other hand, recognition is instantaneous. We hope to gain more recognition in the user interface and reduce memory.

A good UI example is the use of general buttons and icons for this function, such as pencils for editing. Moreover, if you have to design new icons that most people have never seen before, please use text descriptors to clarify and reduce the cognitive burden.

7. Flexibility and efficiency

When repeating certain tasks over and over again in your application or system, you may want to make user interaction more effective. For example, use the slide gesture to save or delete items from a list on a mobile application. The usual way to delete an item is to open it and press the Delete key. The expert way (more efficient way) is to simply slide and immediately delete and items from the list.

8. Minimalist design and aesthetics

The dialogue should not contain irrelevant or rarely needed information. Each additional information unit in the dialogue will compete with related information units, thus reducing their relative visibility.

When designing for art, it doesn't matter whether we fill the screen with textures or images. But when designing interactions, our goal is to reduce the signal-to-noise ratio. This makes our interface easier for users to understand. You can apply this principle by simply minimizing the content (images or text) displayed on the screen, so that users can focus on the task at hand without distracting.

9. Help users identify, diagnose and recover from errors

The error message should be expressed in simple language (no code), accurately indicating the problem and constructively proposing solutions.

Errors can occur. It is inevitable. The UI designer is responsible for what happens after users encounter errors. Therefore, users can help by designing error pages and alerts that are easy to understand and providing options or solutions for problems. For example, let's examine the ubiquitous 404 pages. As designers, we know the meaning of 404 error pages, but users usually do not. To help users, we must convert 404 into simple English by adding some copies, so as to clearly explain what happened, such as "Sorry, but we can't find the page you are looking for, these are some suggestions for pages with similar content...".

10. Help and Documentation

Even though it would be better to use the system without documentation, help and documentation may still be required. Any such information should be easy to search, focus on the user's task, list the specific steps to be performed, and not too large.

Always get help explicitly and place it in the top bar or main navigation area. When users encounter problems and cannot easily find solutions, they must be directed to the parts that can be found. This can take the form of a FAQ page with a search box that provides possible suggestions and answers. If no answer is available, the system must be able to choose to support the ticketing system or contact the support personnel directly by email or phone for more help.