Golden Rules to Apply on UI Design

Though heuristics were introduced by Jakob Nielsen more than two decades ago (1994), heuristics are still relevant to modern product design. In this post, I will share 10 heuristics alongside with my interpretation as well as relevant real life examples to illustrate them.

1. Visibility of system status

Always keep users informed on what is happening through appropriate feedback within reasonable time. By communicating current state of the system, users will feel in control.

Etsy

A. Make users aware of where they are by highlighting the currently selected navigation option is essential in creating good navigation experience.
B. How many steps required to complete a task helps user in estimating the time needed.

2. Match between system & the real world

The less the users have to guess the better. The system should speak the users’ language (use words, phrases and concepts familiar to the user).

GSC

GSC’s seat selecting page resembles the real world cinema. Users can visualise cinema in their head while choosing seats. This helps to develop a strong bridge between the product and the user.

3. User control & freedom

Allow users to undo and leave unwanted state without having to go through extended dialogue. This will also encourage users in exploring the system more.

Gmail

When users archive a message using Gmail, Gmail offers a confirmation dialogue with the Undo button. The ‘Undo’ button allows users to cancel the action if the message was archive by accident.

4. Strive for consistency

Use all elements across your system consistently. Don’t let users wonder whether different words, situations, or actions mean the same thing. Consistent design is intuitive design.

Netflix

Netflix app uses tab bar which helps to guarantee predictable navigation. Besides, the use of similar elements in presenting their movies and tv shows also make up the visual consistency which will increase users’ learnability.

5. Error Prevention

Users hate errors, and even more so hate the feeling that they themselves have done something wrong. Either eliminate error-prone conditions or check for them and notify users about that before they commit to the action.

Urban Outfitters

Urban Outfitters let users know the password requirement in advance so that users don’t need to waste time in trying passwords that will not work. If the password still does not fulfil the requirement, inline validation will tell users what need to be changed and why.

6. Recognition rather than recall

Recall required more effort than recognition especially if one has not recently used a particular piece of information. Hence, a good website or application must reduce one’s memory load by making it easy to recognise elements.

Notion.so

Notion shows you your most recent pages, allowing you to find your recent pages without the need to remember the exact page name.

7. Flexibility & efficiency of use

A good design should be easy for the novice user to learn but should also aim to enhance productivity for expert users by including shortcuts and accelerators. Accelerator is a feature that is provided in addition to an exisiting action which speeds up an interaction or process.

Figma

Figma provides shortcut commands to its users. While few shortcuts command like those for copy, cut, redo, undo are universal in nature. Hence, with repeated use, users get the hang of these.

8. Aesthetic & minimalist design

Aesthetic and minimalist design is not just about adding white space. Its all about giving relevant data and removing all the unwanted things. Grab users attention towards the action which needed to be done.

Google

Google.com is the epitome of aesthetic and minimalist design. Have a look at the other search engines and you will realise the difference.

9. Help users recognize, diagnose & recover from errors

Help users to identify what is the exact error and suggest a way to get rid of that. If the user is not getting a helping hand on an error, they will definitely move away from the product.

Tesla

Tesla’s error messages tell users exactly what they have did wrong. Tesla also highlights errors using red (a colour which matches the real world stop signal).

10.Help & Documentation

A good design should be so easy to use that the users should not even need a documentation and help. But more than often, users do run into problems and might need ways to resolve them. Hence, a clear documentation and ways to help could invoke positive feelings.

Zara

Zara categorize its help page so well that users can easily browse the correct category to find a solution. With “Contact Us” CTA, it satisfies users who prefer chat or voice call even before looking at these help docs.

wendyquah

Leave a Reply

Your email address will not be published. Required fields are marked *