Implementing Jakob Nielsen’s 10 Usability Heuristics in UI Design
We have been needing to constantly use digital applications in our daily lives since the digital revolution started, ordering food? No need to call the restaurant, just use your favorite food delivery app to order it instead. Need a ride? No need to call the taxi service, use your favorite ride hailing application. All these interactions with the digital realm is made possible with a user interface, an interface that bridges the language gap between human and machine. So of course, one of the aspects in designing software is UI design which comes with it’s own set of best practices that are specific to it. Today we’ll explore Jakob Nielsen’s 10 Usability Heuristics in UI Design to see what best practices you can apply when developing your own software to ensure the best user experience possible from your UI.
Nielsen’s 10 Usability Heuristics in simple terms are basic principles in UI design that guides the designer to avoid pitfalls with the hope that the resulting interface is free of things that detract from the user experience. It basically aims to provide a comfortable and efficient experience for the user.
The first of the 10 is the visibility of system status, every time a user interacts with the interface, it must give an appropriate feedback to the user of what their actions resulted in. The interface should not keep the user guessing what their action has caused, for example, I have implemented this principle in the Lontar MTI project I’m working on.
In this case I made sure that any changes the user made to their profile picture are displayed and previewed, this way the user does not have to guess if their picture is successfully uploaded to the system or not. A really simple feedback like this can convey to the user that, yes the system has received your profile picture successfully. Likewise if the user presses the remove button the picture they uploaded will disappear and revert to the default one.
An example of our current interface design that violates this principle is the dropdown menu accessible via clicking the profile picture, there is no feedback when the user hovers their cursor on top of the profile picture.
The menu does not show up, the profile picture stays static, it is safe to assume that user will not know the existence of the menu unless they stumble upon it. The way the menu is accessed also violates the consistency and standards principle, when a user clicks their profile picture they expect to be taken to their profile page, not for a menu to appear. This in turn also violates recognition rather than recall principle, our way of doing this is forcing the user to recall that to access the menu you have to click the profile picture and it does not take you to the profile page immediately, increasing the overall cognitive load on the user.
The second of the 10 is match between the system and the real world, this one is really simple to implement and there is no excuse not to implement this. The design should be familiar to the user in the context of language and concepts, you cannot use internal jargon in the interface as it might confuse some users. Design your interface in a way that 99% percent of people will understand.
Here I used newest collections as the title of the section, it is on top of the collections so users will notice it first when viewing the section, making it clear from the get go what that section is. I did not use the technical jargon for this which is “last 3 query result of the collection database” I guarantee you users will understand the former much easier.
An example of the violation of this principle is the search icon on our search form on the landing page
The magnifier icon usually is clickable on other sites and executes the search while ours does not, this may lead to confusion for the end user. The search history button color also violates in the sense that the red button is usually to delete or undo an action rather than to show something.
The third of the 10 is user control and freedom, users are human beings that makes mistakes so you need to provide an easy way for them to undo their actions. I applied this in the edit profile picture feature by providing a remove button colored red to remove their current profile picture if they accidentally uploaded the wrong one. This also ties into the second principle as a button colored red is usually the button to erase something in other applications, taking advantage of a user’s preconceived notion to prevent misunderstandings.
The fourth of the 10 is consistency and standards, as explained before, a user will build a preconception as time passes on by using other interfaces that is not yours. Designers understand this aspect so they follow industry practices, the same named features in your interface should not do a different thing than what they mean in 99% other interfaces. I applied this principle by linking the application logo to the home page, this is a widely adopted design choice and there is high probability the user has already tried this in another interface before.
The fifth of the 10 is error prevention, it is better to prevent errors from happening in the first place than making countermeasures in case one happens.
In this case the interface is prevented from making errors by preventing the user from accessing the profile page if they are not logged in yet, this is way easier to implement than creating code that handles this situation in the interface.
The sixth of the 10 is recognition rather than recall, an interface should minimize the cognitive load needed to interact with it, make the user see the options available rather than hiding them behind other things. This is easily implemented by the Navbar, users do not need to remember what they need to do to change pages in the interface, from interacting with the Navbar once they can recognize that it is used to navigate the interface.
The seventh of the 10 is flexibility and efficiency of use, rather than providing a single way to reach a goal for the user, provide alternatives so other users that are comfortable with more advanced interactions to reach that goal faster.
This is implemented by providing the advanced search feature, if the user only wants to search a really specific thing, why not provide them a quick and easy way to do so right in the home page? If they are comfortable using the more advanced form why should they be forced to skim through unrelated results before finding what they want?
The eighth of the 10 is aesthetic and minimalist design, interacting with a shoddy user interface is not exactly a pleasant experience for the end user, so you need to make sure that your user interface design is aesthetically pleasing to the user and is not cluttered by useless information that the user does not need.
This is implemented in Lontar MTI’s landing page design, the advanced search menu does not show up if not needed and the only things shown in the landing page are things that the user might want to check out in a landing page only. For example you would not want the landing page to show the user’s full profile would you? It has no relevance to the page and makes unnecessary clutter.
The ninth of the 10 is help user recognize diagnose and recover from errors, although you have taken every step to prevent errors happening in the first place that does not mean you do not have to account for it. Errors are inevitable in a system so provide the users with an easy way to recognize, diagnose, and recover from it.
This error page applies all those three things mentioned above in one go, the user recognizes and diagnoses the error through the error message in the middle of the page and recovers from it by clicking the provided button.
Finally the last of the principles is help and documentation, an interface would be considered stellar if users can use it through pure intuition alone, but in the real world this rarely happens. So provide users with documentation content that addresses frequently thought questions.
This is implemented by providing a FAQ or frequently asked questions page that is accessible to the user, this way the user has a way to find out how to do something easily. And 9 times out of 10 the FAQ page actually contains the user’s question and answers it in a clear way.
And that’s it, the application of 10 Usability Heuristics by Jakob Nielsen on the Lontar MTI project. I hope this article is useful to other developers in the journey to build their own application.
References :
https://www.nngroup.com/articles/ten-usability-heuristics/