Getting to Know the 10 Usability Heuristics

8 min readMay 2, 2021

Mockup template from https://www.anthonyboyd.graphics/mockups/surface-studio-on-table-mockup/

User Interface (UI) is the graphical interface which application, software, or website users interact with. These interfaces consist of the texts, images, inputs, and buttons that you see on your screen. UI is the first thing that users see when they open an your website, meaning that UI design gives users a first impression of the website. This first impression can determine whether the users want to keep using the website or close it. For this reason, presenting a good UI design on your website is very important.

Nielsen’s 10 Usability Heuristics

Let’s talk about good UI design. A good UI design isn’t only an interface that is visually pleasing, but also gives users an easy to use and enjoyable interface. One way to achieve good UI design is by understanding the 10 Usability Heuristics. These principles aren’t necessarily exact guidelines, but they can help you create a good solution for when you’re stumped.

While explaining the heuristics, I will also be giving examples from a project I’m working on called, DocSer. For further context, DocSer is a website that is used to search for documents in Google Drive with contextual results.

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Without any feedback, users can feel lost and clueless in a process. This is why users need to be given feedback anytime they make a choice or change. Giving feedback can also help users determine what they want to do next.

In DocSer, there is a page information component that shows what page the user is currently on. Other than the page information, the user can also see what page they’re on by looking at the pagination. The current page will be made bold.

Page information

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Users don’t always understand the technical terms that the designers and developers use. To avoid confusion with terms, it is best to just use words and language that is natural and general.

Initially, the filter names for DocSer were identical with Google Drive’s filters. After a while, we realized that the filter name Location could cause some confusion. To the development team, it was pretty clear that location meant the document’s location, but some people might mistake it for geographical location. Hence, we changed the filter name to Document Location.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked ‘emergency exit’ to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

As humans, users are bound to make mistakes at one point or another. Because of that, we need to anticipate how to deal with those mistakes quickly and easily.

A mistake that may happen to users when using DocSer is writing the wrong keywords into the search bar. To deal with this sort of mistake quickly, we added a clear button so that users can easily delete all of the words and type in the correct keywords quickly.

Search bar with clear button

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Consistency helps users familiarize themselves to the interface. These consistencies should apply to the layout of the interface, choice of words, and page components. The page elements, such as color palette, component design, font, and icons, used in DocSer follow a design guideline, ensuring consistency all throughout the site.

Error prevention

Even better than good error messages is a careful design which prevents a problem 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.

As stated before, users may make mistakes at some point. Having the correct error handling mechanisms are definitely good, but we should also try to minimize the risks with error prevention.

DocSer offers a search by custom date filter. This filter may cause an error if users pick a starting date that is after the ending date or vice versa. In order to prevent this, we disable those dates in the date picker that may cause an error to arise.

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Recalling something requires more memory power than recognition, which is why recognition is preferable. You can use icons or keywords to help the users recognize where a certain feature is or what the feature does, instead of demanding the users to remember everything.

One way that we optimize recognition is by using placeholders. These placeholders help users recognize which “boxes” are text inputs. Other than that, these placeholders we use standardized icons to help users navigate what is what quickly.

Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Some examples of the implementation of this heuristic are implementing keyboard shortcuts or giving experienced users more advanced options. In DocSer, we offer filters that may be used by the more experienced users.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Showing irrelevant information tends to become overwhelming and makes it harder for the user to find the information they actually need.

DocSer offers a variety of filters that can be used, but most users probably won’t use all of filters at the same time. As seen below, when all of the filters are opened, they can seem quite overwhelming. For this reason, we use accordions to “hide” the filters until the users actually need it. By default, all of the accordions are closed, so when the user wants to only use a certain filter, they can just click the corresponding filter to open it.

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

When a user encounters an error, the last thing they want to see is some piece of code that doesn’t give any hints about what happened. Users want to be informed of what happened and how to get out of the error.

In DocSer, whenever the user searches for a file that is not available on the drive, instead of showing an error, a “no results found” warning is shown. Other than stating that the file can’t be found, the warning shows suggestions that could help the user recover from the problem.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Sometimes, users may need a bit of help and may want to refer to a documentation to figure things out. These documentations can come in the form of tutorials, FAQs, or help centers. DocSer hasn’t implemented this heuristic because its features and functionality are pretty simple and straightforward.

How do I create a UI design?

Now that you know a few pointers on what makes a good UI design, it’s time to get started on actually making one!

Wireframes

First up, we have the wireframing process. Wireframes are used as a foundation for the UI design, basically a blueprint of the design. Wireframes also show the layout, structure, and the arrangements of page elements. These elements are typically represented by boxes. Wireframes don’t need any styling, typography, or color, which is why they are also known as low fidelity designs.

There are a lot of ways you can create a wireframe. Wireframes can be manually sketched or made using a software. A software that I recommend for beginners is wireframe.cc. For more advanced users, Figma is also a good option, which is the software used to make the wireframe below.

Mockups

After you have your wireframe, it’s time to move on to your mockup. Mockups add the details missing from wireframes, such as styling, colors, and typography. These mockups help visualize how the real UI design will look like, but they aren’t clickable.

To create a mockup, you will definitely need to use some software, unlike wireframes that you can sketch up manually. I usually like to use Figma when creating a mockup, but there are plenty of other options that you can explore, such as Adobe XD.