Design principles based on Nielsen Heuristics



Head of Design and Marketing Department


Nielsen Heuristics is a well-known and proven set of best practices in mobile, web, and desktop application design. They can be considered a basic checklist, useful in evaluating the usability of a website or mobile application. The heuristics presented by Nielsen is still applicable today and is increasingly considered not only in the context of UX but also in conjunction with SEO.

In this article:

1. Show system status

Examples of such statuses could be breadcrumbs or the ordering stage in an online store. The main reason why we show the system status is to prevent the user from getting lost in the app or website. We don't want them to abandon a service or quit the shopping process by not knowing what is currently happening in the app or where they are and how to move on.

Steps of the purchase path

Nielsen's Heuristics


Nielsen's Heuristics

Availability of the good or service

Nielsen's Heuristics


Nielsen's Heuristics

2. Maintain alignment between system and reality

When designing, always assume that the user has no idea what a smartphone or a web browser is. It is wise to search for schemes that can be associated with actual everyday objects. It is about iconography, the location of elements, the way they work.

Such an action will allow the user to get acquainted with the application more efficiently.

Example of a music player:

Nielsen's Heuristics

3. Give the user full control

An example of such control is the ability to undo, close, move on while informing the user of the moves being made. You need to predict what actions a potential app user could or would want to perform at each step. This prediction will allow you to design applications meeting the user's needs.


  • Navigation
Nielsen's Heuristics

  • Or the ability to move to the appropriate steps

Nielsen's Heuristics

4. Stick to standards and maintain consistency (UI Design)

Consistency is divided into external and internal. Consistent design of the entire application or website will allow the user to understand its operation, functionality faster and easier, regardless of where they are in the process.

Internal consistency refers to:

  1. Fonts
  2. CTA button styling
  3. Colors and style of links
  4. Color palette within the site
  5. Positive and negative colors
  6. Button hover highlighting
  7. Display method
  8. Placement of form field descriptions

External consistency is about following generally accepted UX/UI standards:

  1. Menu on the top or side of the page
  2. Menu on devices (mobile/embedded) under the hamburger icon
  3. Shopping cart or notification icon in the upper right corner
  4. Menu icons - meaning
Nielsen's Heuristics

  • Hamburger menu - Side pull-out menu, listing items, along with the ability to access sub-pages
  • Doner menu - drop-down menu usually for filtering content on the page
  • Bento menu - change to a grid menu of items
  • Kebab menu - options for a subpage or selected item(s)
  • Meatballs menu - more - hidden, additional options

5. Logo Placement

  • WWW pages
    Logo placement on the website is in the header, left side, or seldom in the middle. Very rarely, you can meet with the logotype on the right side. It is usually taken as a wrong design decision. The exception is designing websites for Arabic countries. The logotype on the left in the header is always identified with the possibility of a quick return to the home page.
  • Mobile applications
    In mobile applications, the logotype is only a visual element that helps to build brand identity. It is placed in the header (left side or middle) if there is some space. The symbol/trademark itself is also often inserted. If it is not possible to put the logo in the header, it is hidden in the sidebar or in the "about us" section.
  • Web applications
    The difference between a website and a web application is the structure. A web application usually has a navigation panel in the form of a sidebar or header, which allows you to use the functionality. In a web application, the logo is placed in the top left corner, no matter if it has a sidebar or not.
  • Potential mistakes:
    • Logo too small
    • Logo too large
    • Non-distinctive logo
    • Poor quality / blurry
    • Material Design
    • Human Interface Guidelines

6. That is why it is so important to be up to date with trends in a given group of product recipients. Users spend a lot of time on competitors' websites/product pages.

5. Prevent mistakes

You should help users not to make mistakes, like in the example below. It is also worth using clear explanations of inputs, intelligent hints, and tooltips. As in life, prevention is better than cure.

Nielsen's Heuristics

6. Show instead of forcing to memorize

A user, while browsing a website or an application, is not able to remember all its functionalities when there are a lot of them. Therefore, a good example is to give them "reminders'' such as "last viewed," "last visited," or "sort by last used." It also applies to inputs. It is a serious mistake to insert a destination inside the input, which disappears when you type anything. Here is an article about inputs from Nielsen Normal Group - Link.

  • Input + description
    This is an example of an ideal input, but it is not always possible due to small space on e.g. mobile devices.
Nielsen's Heuristics
  • Last used
Nielsen's Heuristics

7. Flexibility and efficiency

In the places where the user needs to perform more actions, you should make it easier for them, e.g. by a toggle button to select everything or a checkbox to select a full column. Efficiency can also be increased by adding a "filter" button instead of immediately reloading the page after selecting a single attribute.

Nielsen's Heuristics

Nielsen's Heuristics

Nielsen's Heuristics

8. Take care of aesthetics and moderation

Less is more. Nowadays, users do not read, so in order to shorten the purchase process, for example, you should limit the number of visible elements on the page. It is worth focusing only on the most significant elements. It will allow you to design neatly and legibly, and the user will not get lost. In the example below - the section is divided into two parts: the gallery, which takes up 50% (the most important section for the user), and then the configuration containing the name, price, color, and size with the order button. In this way, the user is not distracted by additional page elements. (source:

Nielsen's Heuristics

9. Provide effective error handling

When an error occurs, it is vital to explain to the user what the error is due to and the reason for the error. Take inputs, for instance. When we do not have input descriptions under the labels, we should provide the user with proper information about the error. An example could be a description of the password input error. For security reasons - errors at logging in should not indicate an invalid element, because it can facilitate the hacking of the account.

Nielsen's Heuristics

10. Take care of support and documentation

Regardless of the type of application, such documentation is required for a large project. When a user finds themselves in a situation where no hints will allow them to perform an action, use the application, they will look for help in the support, FAQ, or manual. On the other hand, if they do not find the answer, they may resign from using the application, and as a result, they won't come back to it. Below is a good example of clear support:

Nielsen's Heuristics

Share on social media

Choose your way of implementation and let's start working together on your project

Get a quote