10 Usability Heuristics For Better UX
This article is made for the Software Project course assignment, Faculty of Computer Science, Universitas Indonesia
User Experience (UX) encompasses all aspect of interaction between user and the product or application. A good user experience means the users feel comfortable and happy when using the product. If they feel that way, there is a chance that they will keep using the product because they like it. When we design a product, of course we want our product to have a good UX so the user of our product will keep using it. But how to achieve that? One of the way to achieve that is by implementing 10 usability heuristics.
10 usability heuristics is Jakob Nielsen’s 10 general principles to achieve good usability for User Interface (UI) that we design. Usability is the quality of how the UI is easy to use by user. Here is the 10 of usability heuristics:
- 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. - 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. - 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. - Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. - 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. - 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. - Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. - Aesthetic and minimalist design
Interfaces should not contain information which 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. - 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. - 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.
For more details about the heuristics, you can read more in here.
I will show you some examples of heuristics implementation on my project’s UI design for Software Development course. The first design is a cart page where user can manage their items that they want to buy.
These are the heuristics that I implemented for the design above:
- Visibility of system status
Header component on the top of the page, there is a title (‘Keranjang’) of the page that helps user to know that they are in the ‘Keranjang’ page (cart page). In addition, the navbar on the bottom also show which page the user is currently on, ‘Keranjang’ menu on the navbar tell the user that they are now on the ‘Keranjang’ page.
Boxes on the left of ‘Pilih produk’ and ‘Pilih semua’ text is to show the status of the items whether the items is selected to be paid or not. The example above is the unselected (all boxes). If the item is selected, the box will become green with white tick icon. - Match between system and the real world
The design is implemented the real world activity of managing your items in your cart. Imagine you go to supermarket and grab a cart to put any items that you want to buy. You can manage the quantity of an item that you want, you can remove it if you change your mind and you decide to not buy it. The design above is implementing that activity so the user won’t take much time to understand how to use the product. - User control and freedom
If the user accidentally select or unselect an item in the cart, they just have to click the the toggle box to select or unselect the item so the user has a full control of their items. - Consistency and standards
The red trash can button means to remove the item from the cart. I use the trash can icon because it is general thing for people to understand that thrash can means you want to remove a thing so user will know exactly what will the button do and they don’t need to try it to know what is the button will do. - Error prevention
To prevent user from buying zero item, the buy button at the right bottom corner of the page will be disabled if there are no item is selected like in the design above. - Flexibility and efficiency of use
If the user want to select all items in the cart with just one action, they can just click the box beside the ‘Pilih semua’ text. This feature will increase the flexibility and efficiency of use of the product. - Aesthetic and minimalist design
As you can see the design above is minimalist, there is no unnecessary component or element on the page design. Every items is divided by a line so user will not confuse when seeing the items on their cart. There is also not to much color so the design looks simple.
So that’s about it for this article, I hope this article helps you to understand more about 10 usability heuristics that you can implement for your design. Thank you.
The second design is the admin home page where admin can look the statistics of sales in a day and week. In addition, admin can also look which store have just registered. Here is the screenshot of the admin home page design.
There is one heuristic that I want to explain from the design above, that is Recognition rather than recall. When a human recall something, it means they try to retrieve information from their brain. The process of recalling something takes memory load more than when human is recognizing information by seeing it. The more memory load that human takes, the more the brain will works. If the brain keeps working, so the human will get tired faster. We don’t want our user become tired when using our product, so we need to minimize the memory load by using recognition over recall, we give them important information that they usually try to remember. For example, from the design above, there is amount of new order today (on the box with “Pesanan baru” label). This information helps admin to know how many new order have been made today without making admin check and count manually at sales (“Penjualan”) page or making admin try to remember it when they need the information.
The third design is the edit profile page. Just like its name, this page is for editing user profile information. Here is the design.
I want to explain about one heuristic from the design above, that is Help users recognize, diagnose, and recover from errors. Error is something that happen sometimes. When we using a product, we want to use it without having a single error so we can achieve our goal by using that product. If we encounter an error, maybe there is something we do it wrong and we need to fix it. To help user fix or recover from errors, we need to give clear error message that easy to understand and it can tell the user what are they doing wrong so they can fix it immediately. From the design above, we see that there is an error message inside the red box. In English, the error message is “Changes failed to save: All fields should not be empty”. This example error message is very easy to understand and immediately tell user what are they should do to fix the error, they need to fill all the empty field to successfully change their profile information.
For Help and documentation, the last heuristic, I’m using Google Chrome UI. Here is the screenshot of it.
One of easy example of this heuristic is just provide user “Help” button that move them to the documentation page of the application so User can read and understand more how to use the application.
That’s it for this article, I hope this article helps you to understand more about 10 Usability Heuristics and you can apply it on your next design. Thank you!
