UI Design | Visual Design

There is a standard for everything in our world. For practical, it’s called procedure. For design, it’s called guidelines. In the field of User Experience, there is someone named Jakob Nielsen who used his expertise and experience in human-computer interaction, to create rules of thumb and guidelines for interaction design called Nielsen’s 10 Usability Heuristics.

Today I’m gonna help you broke down the 10 Usability Heuristics that Jakob Nielsen made. I’m gonna try my best to explain each point in Jakob Nielsen’s guideline and try to give you an example from my team’s project. Although i must mention that Design and Protoype for our team’s project was created by the Product Owner.

1. Visibility of System Status

Visibility of System Status means that the system always transparently gives the user information on what happening on the system — all the time. A good system is a system that will help its user know what he/she doing if suddenly they forgot what they clicked or did. Or may as simple as giving the user information when something will end.

For Example:

• The bell sound of Telegram when you receive a message.
• Loading icon when the system load data.

2. Match Between System and The Real World

It means every symbol, icon, or picture has the same meaning as its mean in the real world. A good system is a system that can project the real world into its system.

For Example:

• Recycle Bin has the bin icon because in the real world you put the trash in the bin.
• Apple music use notes as their icon because in the real world notes represent music.

My teams’ example:

3. 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.

When it’s easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated.

For Example:

• The Dialog Box that asks really sure when you want close multiple tabs on an apps
• Undo button in everything

Our team does not implement this guideline, because most of interaction requires less than 3 steps

4. Consistency and Standards

In design, it can be interpreted as always use the don’t change color too much. Don’t use two different symbols to represent one thing. Don’t change the layout too much. Consistency will help the user learn our website faster.

For Example:

• Use the same font in each page
• Use the same layout in each page

5. Error Prevention

This means the system should prevent a human error from the user. You should design the scene where the system tells the user of the error. If you already implement a transparent visibility status, usually it comes together with error prevention.

For Example:

• Google autocorrect
• Password strength meter

6. Recognition Rather than Recall

A good system is a system that reminds the user. The goal of this point is to minimize the application of user memory. When user using your system, try not to make the user think too much.

For Example:

• Google search sugestion
• Online Shops suggestions

7. Flexibility and Efficiency of Use

The system will be loved by people if they are easy to understand for new users. But at the same time, it should practical enough for the advanced user. That’s why usually there is an option advanced setting.

For example:

• Copy feature in chrome ctrl+c for the advanced user, edit > copy for the new user.
• Undo using ctrl+z, click left arrow on top of screen on Microsoft Word

8. 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.

In your design use consistently colors that represent your web. Be sure to check that the position of the layout is optimized for the information that it conveys.

For Example:

• Google Layout
• Apple Website

9. Help Users Recognize, Diagnose, and Recover From Errors

The system should tell the error message to the user in the simplest form possible and give the user suggestion on how to solve it.

For Example:

• 404 Error message
• Twitter ‘Tweet not found” notification

Sadly this heuristic is not implemented in our team’s project.

10. Help and Documentation

Last, there should be a documentation page to help user navigate or resolve the error he/she received. The documentation will help the user for as little as to know how to use the page.

There is no documentation page in our application.