Heuristic Principles in the design process for better mobile & web interface

While working on user experience flows and prototypes, one gets so immersed that we tend to lose minor details that will cause usability defects. These defects may not form a huge impact on the experience of the product but can make users leave the platform at that point. A great usability consultant Jakob Neilsen has defined some thumb rules that we can keep in mind while designing the wireframes and flows. The problems in the user interface can be evaluated using these thumb rules (which are nothing but Heuristic Principles) by doing a Heuristic Evaluation.

What is HEURISTIC EVALUATION?

A heuristic evaluation is a detailed analysis for finding usability problems in a user interface design and overall user experience (both for web and mobile). The evaluation results in an analysis of usability issues — basically, pinpointing areas where the app’s UI or UX needs to improve.

WHEN?

It can be performed at any step during the design process. It is good for iteration, but you’ll get more feedback when you conduct earlier.

WHO?

The evaluators conducting the HE must be user experience experts. It should be evaluated at least by 3–5 evaluators.

HOW?

Run the task as observer or as evaluators and check for severity score.

Jakob Nielsen’s 10 HEURISTIC PRINCIPLES

There are a total of 10 principles which are called “heuristics”, these are guidelines of the usability test.

SEVERITY

The severity is range 0–4 which is used to do Heuristic Evaluation. It includes three main factors into consideration:

• Frequency: Is it common or not?
• Impact: Will it be easy or difficult for users to overcome?
• Persistence: Is it a one-time problem or a repeated one?

1. VISIBILITY OF SYSTEM STATUS: Feedback

In this principle, the users get informed at every step about what is going on and give appropriate feedback along with time.

Google drive gives loading bar/icon when file uploading is going on

2. MATCH BETWEEN SYSTEM & REAL WORLD: Metaphor

The application should talk and communicate with the familiar language with the users. It can be either words, phrases, or concepts which are familiar to the user. Avoid using complicated/system-oriented terms.

Many payment gateways give real credit/ debit card visual while entering your card details

3. USER CONTROL & FREEDOM: Navigation

This is about giving user freedom to navigate and perform actions, users should get ability to go back to certain actions and fix things if required (Undo-Redo actions & Delete confirmation).

Facebook asks users confirmation when delete is clicked after writing any post.

4. CONSISTENCY & STANDARDS: Consistency

The application should provide consistency in the user experience. Users should not get confused with different words or actions doing same things. Consistency should come with not only colors and buttons but overall experience.

Consistency of buttons throughout the product

5. ERROR PREVENTION: Prevention

It's good if the system is not having any kind of error-prone scenario. It should check with the user and let them know before they do any kind of action.

Gmail’s smart feature help to reduce error while telling the user that the attachment is missing when they have mentioned that they attached something is the mail.

6. RECOGNITION RATHER THAN RECALL: Memory

System should recall the information from the earlier segments, users should not have to remember the information. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Quora suggesting users and helping in their search.

7. FLEXIBILITY & EFFICIENCY OF USE: Effort

The system should be flexible enough to transform for a beginner (user) and pro-level user.

Adobe Xd provides actions for new users and shortcut key help for advanced users.

8. AESTHETIC & MINIMALISTIC DESIGN: Design

All the data/information displayed to the user should be useful and important. It should not contain details that are not required.

The Gmail login page is minimal and focuses on only relevant information.

9. HELP USERS RECOGNIZE, DIAGNOSE & RECOVER FROM ERRORS: Recovery

The system should display error messaged in simple language which is easy for user to understand. It should also tell the user the problem and provide constructive solutions.

Gmail tells the user if they have entered the wrong user name and then tells the error.

10. HELP & DOCUMENTATION: Help

It is not compulsory but the system should give the user section for help & documentation. This section should contain information that can be looked at when the user is stuck with any such situation. This should be easy to reach and crisp content.

Help icon inside Gmail helps users to see FAQ which is documented.

These are the 10 Heuristic Principles explained with the help of examples. These are usability tests for checking the user experience in mobile and web screens and user flows.

Breakdown of WHATSAPP

* MARK AS UNREAD FEATURE *

This feature does not serve purpose correctly. It doesn’t tell how many messages were made unread, it only shows a green dot instead.

Also blue tick in the recipient window does not change to grey ticks (i.e unread).

This is lack of visibility of system status

SEVERITY 3

* CHAT SHORTCUT FEATURE *

Wording used for adding shortcut of the chat is inconsistent on inside and outside the chat window.

This is a lack of consistency & standard

SEVERITY 2

* SEND CONTACT FEATURE *

While sending/sharing a contact this feature does not prevent the user to send blank contact (i.e it allows to send if check-box is unchecked).

This is a lack of error prevention

SEVERITY 4