10 interface design rules you shouldn’t break
Best UI Design Practices.
There are certain rules in life that cannot be broken. User interface design also has rules to live by. They are called “heuristics” or general principles that improve the usability of interfaces. These are repeatable, time-tested patterns that help users navigate the interface. A well-designed interface always follows the principles outlined below. A poorly designed interface is likely to be missing one or more principles. You re a UI designer, so why would you break any of these rules and create problems for your users?
This list was taken from the article Norman Neilsen “10 heuristics for interface design “.
1. System state visibility
The system should always keep users informed of what is going on through appropriate and timely feedback.
Always provide users with relevant information, clues, and context so they know their location on the system. This allows the user to feel in control and know what to do next. This product was added to the cart? Was the edit saved? How long will this process take? What is the status of my order? What s going on now? Always answer such questions to users and never leave them in the dark or make them guess.
2. Correspondence between the system and the real world
The system should speak the language of the users using familiar words, phrases and concepts, not system terms. Follow the rules of the real world to display information in a natural and logical manner.
Use familiar words and language. Don t over complicate the wording. The meaning of the word or icon on the screen should be clear to your target audience. People come to your site or application with formed mental models and experience that allows them to interpret the patterns.
One of the greatest advances in technology came with the advent of the graphical user interface (GUI). Before him, the computer screen was limited to incomprehensible text commands that you had to remember and repeat whenever you wanted to perform an action. Then everything changed. The screen displayed small images of folders and files and a hand cursor. These were all visual symbols that people instantly understood. They don t need to be explained because they refer to mental models of the real world.
3. Consistency and standards
Users shouldn t be wondering if different words, situations, or actions mean the same thing.
There are two types of sequencing: internal and external. Internal consistency refers to patterns on your site or app. It can be as simple as links of the same color across all pages, or one icon for one concept. Extraneous consistency refers to conventions used in other programs and systems used by most people. For example, a shopping cart. Most people are familiar with how a shopping cart works. There is no need to reinvent the wheel. Otherwise, it will be more difficult for users to know how your cart is performing. Maintain consistency and avoid unnecessary confusion for users.
4. Control and freedom of users
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to get out of an unwanted state without having to go through an advanced dialog. Add undo and redo functionality.
Always provide a way out. Never force users to perform an unnecessary function, and do not lead them to a dead end. For example, if you are designing a checkout scheme, allow users to continue shopping if they so desire. If they tried to take an action in the app, let them undo the action if they hesitate at the last minute.
5. Preventing mistakes
Better than good error reporting, only a well thought-out design that prevents the problem from occurring in the first place. Either eliminate the error-prone conditions or test them and provide users with confirmation of the action.
When system operations are critical, such as deleting files or mailing an email to 1,000 recipients, make sure users know they are doing something important. Before taking an action, show them a confirmation dialog or provide additional information that clearly identifies what will happen. This will prevent them from moving on if they are unsure of their actions. Moreover, it will relieve them of regret.
Minimize user memory load by making objects, actions, and parameters visible. The user does not have to remember information from one part of the dialog box to another. The instructions for using the system should be conspicuous or accessible when appropriate.
One of the goals of a UI designer is to reduce the cognitive load on users. Mental memory is a huge, limited resource. Memory works in two ways: recognition and remembering. Recognition is something that is immediately familiar to you. Like a person s face. You look at a friend s face and immediately realize that you ve seen him before. The memory mechanism works differently. This is what you need to extract from memory, for example the name of a person. Recollection usually takes more time and effort because the mind needs to process more information in order to decipher what it is looking at. On the other hand, recognition happens instantly. We want more visibility in the interface and less memory. A good example of this principle is the use of universally recognizable buttons and icons for functions, such as a house for HOME or a pencil for EDIT. And if you need to design new icons for the interface that most people have never seen before, use a text descriptor to explain them and reduce the cognitive load.
7. Flexibility and efficiency of use
Accelerators that are invisible to a novice user can often speed up interactions for an experienced user, so the system can serve both inexperienced and experienced users. Allow users to customize frequent actions.
When an application or system repeats certain tasks over and over again, you can make the experience more effective for users. For example, use a swipe in the mobile app to save or remove items from a list. The usual way to remove an item is to open it and then click the Remove button. An advanced (and more efficient) way is to simply swipe and instantly remove an item from the list.
8. Minimalist design and aesthetics
Dialog boxes should not contain irrelevant or rarely used information. Each additional piece of information in the dialog box competes with the relevant pieces of information and reduces their relative visibility.
When designing for art, it doesn t matter if we go baroque and fill the screen with artifacts, textures and images. But when designing interactions, we strive to reduce the signal-to-noise ratio. This makes the interface more user-friendly. You can apply this principle by simply minimizing the content displayed on the screen, be it images or text, so that the user can focus on the task at hand without distraction.
Error messages should be written in plain language (no codes), clearly indicate the problem, and offer a constructive solution.
There will be errors. It s unavoidable. It is the responsibility of the UI designer to determine what happens after the user encounters an error. In this way, we can help users by designing clear error and warning pages that provide solutions to the problem. For example, let s look at a widespread 404 page. As designers, we know what a 404 page means, but usually users don t. To help them, we have to translate the 404 code into plain language by adding text explaining what just happened. For example: “Sorry, but we could not find the page you were looking for. Here are some pages with similar content … ”.
10. Help and documentation
Although it is best if the system can be used without documentation, the user may need help. Such information should be searchable, task-oriented, contain a list of specific steps to be taken, and should not be too long.
Make help and help always available. Place it prominently on the top bar or main navigation area. When users encounter a problem and cannot easily find a solution, they should be directed to a section where they can find it. This could be an FAQ page with a search box containing possible suggestions and answers. In the absence of a response, the system should provide the ability to directly contact support for further assistance, either through the ticket system, email, or telephone.