Fundamental Principle of UI/UX Design — 10 Usability Heuristics

When we are about to design a user interface for our website, we can’t ignore the feeling of our users. We want to make our website easy to use, safe, user-friendly, and whatever it needs to bring a comfortable environment for users. But what are the requirements to fulfill those conditions?

Fortunately, Jacob Nielsen had given the solution by developing 10 general principles for user interface, a.k.a. 10 Usability Heuristics. These principles are commonly used by many UI/UX designer as their basic fundamentals when developing a good user interface.

Source: https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53

Let’s take a look at these 10 Usability Heuristics:

1. Visibility of system status

Whenever interactions are performed, always keep the users informed about what’s going on.

System is uploading a file

An item was just added to the card

Wrong password status

2. Match between system and the real world

Don’t use any term that confuse users. Users tend to find a comfortable situation in familiarity. Make your application speaks the user’s language.

Each of the icon and name represents real-world stuff

3. User control and freedom

Give users an “emergency exit” or undo button in case they’re mistakenly doing unwanted actions.

Undo the deletion of a page

Recover the deleted items

4. Consistency and Standards

Use consistent representation that users are likely to recognize. Avoid making users to wonder if the distinct representation means the same thing.

Consistency example

5. Error Prevention

It’s better to make a confirmation before doing some permanent actions. Or if possible, just eliminate the root of the problems.

Sometimes users clicked ‘exit’ before saving their data by accident. This is one way to prevent it.

6. Recognition rather than recall

As a human, it’s easier to recognize rather than recall. In this case, recall is like when we’re trying to remember our username and password to log in. Meanwhile, recognize is like when all of the options are available and we recognize what’s the one we want.

The list of possibilities sometimes help us to recognize what we’re looking for

It’s a lot more easier to recognize a product by menu rather than recall a specific product name

7. Flexibility and efficiency of use

An application should be friendly for new users while efficient for expert users. It must give a flexibility for both type of users.

Facebook provides ‘shortcut key’ as expert user’s accelerator, while new users can still perform in a normal way

8. Aesthetic and minimalist design

Information contained on a page or dialogue should be relevant-only. Thus, any irrelevant or rarely needed information shouldn’t be included. Too many irrelevant would impact the visibility of relevant.

This sign-in page only contains the relevant stuff. This is a good example

There is some information which is irrelevant to sign-in page. This is a bad example.

9. Help users recognize, diagnose, and recover from errors

Whenever an error happens, the error message should consist of non-technical words, detail of the problem, and solution to overcome the problem.

It tells ‘500 Internal Server Error’ in more non-technical way, and it also gives the solution to the problem.

10. Help and documentation

Usually we’re too lazy to open help and documentation, but it’s still obligatory because there might be a case where some users suddenly need it. The help and documentation should be easy to find, focus on user’s task, list concrete steps to be carried out, and not too large.

This is a good example for helper

That’s all of what I could say about 10 Usability Heuristics. Hopefully this information was helpful and could bring some new knowledges for your daily design. ^_^

1. https://www.nngroup.com/articles/ten-usability-heuristics/
2. https://medium.com/@iyohoran/10-usability-heuristics-based-on-jakob-nielsens-75943b02f2f8