10 guidelines for UI Design

In 1990 Jakob Nielsen and Rolf Molich defined 10 usability heuristics for interaction design. They are called heuristics in the sense that they are general rules rather than specific guidelines. These rules should potentially be identified in all situations where there is a user interaction with an object or platform. In this article we will explore how they are found on websites and how they improve interaction.

Pedro Completo
Mar 14 2023 • 4 min reading
10 guidelines for UI Design
Share
  1. Visibility of system status
    The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. On a website we have, for example, the menu selection or the tracker so that the user can always know which page he is on and what he can do next.
  2. Match between system and the real world
    The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order. It is important to define the persona with whom we are communicating in order to create a design focused on the user and their experience.
  3. User control and freedom
    Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process. A clear example on websites is the existence of navigation buttons that allow the user to return to the previous page.
  4. Consistency and standards
    Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. We all know, for example, that the magnifying glass is used as a search function and is usually placed at the top of websites, making navigation faster and more intuitive.
  5. Error prevention
    Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action. When filling out forms when there is an error, it is always desirable that the error is clearly identified, giving the user the possibility to correct it instead of having to fill in the form again and hope for the best.
  6. Recognition rather than recall
    Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed. If the CTA buttons are always the same throughout the site, it will be easier for the user to recognize them and identify which action will take place. 
  7. Flexibility and efficiency of use
    Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. In a gallery there are generally always navigation elements, whether by arrows or bullets, but more experienced users know that they can also use the keyboard arrows to navigate more easily between slides.
  8. Aesthetic and minimalist design
    Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. If all elements on a page have the same emphasis, it will be more difficult to guide the user to the main objective. It is important to keep a simple and intuitive grid, always keeping relevant information more visible.
  9. Help users recognize, diagnose, and recover from errors
    Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. By using error messages in the traditional way, with blocks in red and using simple language, we make life easier for the user. Sometimes it might even make sense to make it easier with shortcuts that help solve the problem.
  10. Help and documentation
    It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks. Although we design the websites in a user-friendly way, it never hurts to help potential customers find what they are looking for without forcing them to browse the site. Chatbots or instant communication tools can now be added to websites so that potential customers can quickly and easily get their questions answered without having to explore the website further.

Following these guidelines, we get a base for a good UI design. These 10 principles, proven over decades, help us improve the user experience in every way. Although they are not laws, they should always be taken into account at the beginning of any project, and although many of them seem “invisible” at first glance, they are beneficial and increase efficiency in converting objectives.

Please note, your browser is out of date.
For a good browsing experience we recommend using the latest version of Chrome, Firefox, Safari, Opera or Internet Explorer.