Visual Design with Nielsen’s 10 Usability Heuristics — Mobile App Interfaces

7 min readMay 26, 2021

https://blog.prototypr.io/the-10-usability-heuristics-free-posters-for-every-design-office-c7b3b01b6099

They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines.

Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. Evaluators use established heuristics (e.g., Nielsen-Molich’s) and reveal insights that can help design teams enhance product usability from early in development.

But before we go, let’s get started with Wireframe, Mockup, and Prototype.

Wireframe vs. Mockup vs. Prototype

Wireframe, https://balsamiq.com/learn/articles/what-are-wireframes/

Wireframe is a schematic or blueprint that is useful for helping you, your programmers and designers think and communicate about the structure of the software or website you’re building. Wireframe also called as a low-fidelity that present a product, can efficiently outline structures and layout. Like the definition the main purpose of wireframe is to describe our product’s layout and structures, there is no other color than black(or grey) and white.

Mockup, a high-fidelity static design diagram, should demonstrate informatation frames and statically present content and functions. Unlike a wireframe, a mockup looks more like a finished product and only as a graphic representation. Mockup provides pictures, colors, typography, and high precision elements.

https://ohyulia.com/blitz-mobile-app-prototype

Prototype is already close to the finished product. Here, processes can be simulated and user interaction can be tested. Wireframe and Mockup are static, but Prototype is dynamic. Early prototyping can save a lot of development costs and time so that the work of back-end product architecture will not be in vain because of unreasonable user interface design. A prototype is an excellent tool to obtain user feedback and to test the product.

Nielsen 10’s Usability Heuristics

User Experience is a qualitative metric subject to many factors. There is a heuristics evaluation to test them. A heuristic evaluation is a usability inspection method mainly used to identify any design issues associated with the user interface.

10 Heuristics for User Interface Design were coined by Jakob Nielsen back in 1994. Although the heuristics were introduced more than two decades ago, heuristics are still relevant to modern product design.

1. Visibility of system status

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

This principle states that the user should know what’s going on inside the system. We need to give a feedback of his/her action within a reasonable time. This feedback is normally associated with points of action and can be provided using a color change, loader, time-left graphics, etc.

Example in my project is when the application would get data from API and the data loading, it would show the circular progress until fully loaded.

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

Basically, it’s making designs, interaction labelling, and conversations more familiar to the real world. Example just like this question “Is there something on your application that a user may not understand?” It’s important for the application to speak the user’s language.

Example in my project is at login page. The application was like interact to the user, so the user can easily understand what the user would do next.

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

This principle talks about giving the user the freedom to navigate and perform actions. The freedom to undo any accidental actions.

Example in my project is when the user want to logout. So before the user truly logout, the application would show the dialog to convince the user if they’re not accidentally click the button.

4. Consistency and standards

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

Consistency is the key. Consistency in design is about making elements uniform. Consistency in the design would make users aren’t confused over what different words, icons, etc. mean. It’s also a crucial thing when sometimes a consistency would make the application looks boring, but it’s better than confuse the users.

Example in my project is the theme of the application with the same color and font.

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

“Better prevent than cure” That’s all the meaning of this point.

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

Recognition is easier than recall because it involves more cues: all those cues spread activation to related information in memory, raise the answer’s activation, and make you more likely to pick it.

When a user returns to an eCommerce site like Shopee and Tokopedia, the personalized home page includes a list of recently viewed items, suggestions by your browsing history and recommendations through your purchase history.

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

The Interface should be flexible transforming itself between a novice user and an advanced user. Example is while a novice user uses the default google image search, the advanced user always can refine the search by size, color, type, and so on.

The example of tokopedia when the user go to any feature for the first time, it would show the tutorial about the feature.

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

Is every information displayed on interface necessary and useful? Prioritization comes to play when this aspect is being considered. So interfaces need to be cleared of unnecessary elements and content that do not support the page goals and tasks.

Example in my project is at list of agents, products, and transactions. It’s only provide the necessary information such as name and phone number.

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

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

If there is an error, the application should give the error message to users or help them recover by suggesting a solution.

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

If a user has reached this step, something is not right with the interface. A great user interface lets the user navigate through it’s features without any documentation or training. But if there is any user who could not make it out, adequate help should be provided within the product.