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.

10 interface design rules you shouldn t break

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.

10 interface design rules you shouldn t break

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.

10 interface design rules you shouldn t break

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.

10 interface design rules you shouldn t break

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.

6. Users should recognize, not remember

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.

10 interface design rules you shouldn t break

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.

10 interface design rules you shouldn t break

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.

10 interface design rules you shouldn t break

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.

9. Help users recognize, diagnose and fix errors

Error messages should be written in plain language (no codes), clearly indicate the problem, and offer a constructive solution.

10 interface design rules you shouldn t break

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.

10 interface design rules you shouldn t break

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.

Leave a Reply

Your email address will not be published. Required fields are marked *