Beautiful is not always convenient, and convenient is not always beautiful. When developing any thing, its creator must take care of both beauty and practicality of use. It is not always easy. But the general convenience for the user can be expressed in 10 rules.
1. VISIBILITY OF SYSTEM STATUS
The system should always inform users about what is going on, through appropriate feedback within a reasonable time. A visual sign like the change of the button’s color, a loading spinner or an icon animation can help the user understand what’s going on and prevent them from other unnecessary interactions.
2. MATCH BETWEEN THE 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. People are approaching every new system with a mental model in mind. In other words, people presume how the system could work based on their experience with other systems that are similar. By using language that they are familiar with, you can help users overcome the initial awkwardness.
Great examples of real-world matching icons3. USER 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. People often interact with the system in a hurry, and oftentimes, they’re not even fully concentrated. This results in things like misclicks or other accidents which might be frustrating. Every system should have a clearly marked “emergency exit” mechanism, that provides users with an easy way back after they find themselves in an unwanted state.
4. CONSISTENCY AND STANDARDS
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
5. ERROR PREVENTION
Even better than good error messages is a careful design that 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.
Smart slip prevention in the gmail web app.The strategy to prevent users from experiencing a slip is to minimize the chance of it occuring by guiding them only through the safe areas. Use constraints that don’t allow a user to set a wrong value (e.g. when you expect a number, don’t allow to write the letters), suggest the most common options to make choosing easy for users (e.g. while searching), or use confirmation dialogs before destructive actions. Use clear communication and a consistent design system to prevent mistakes.
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. A good user interface doesn’t require the user to recall frequently. Instead, it offers all options and information required to make a choice. It’s much easier to quickly scan through icons or a text menu and select a coveted feature than trying to recall it from your memory and then write it into some terminal-like text interface. Give users clues for remembering information, and provide an icon next to the feature name or use a specific color for related functions.
Users who are not familiar with the syntax of terminal commands can’t perform as easy operation as opening or deleting the file.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. Declutter the screen and make the app easier to navigate. The app should always display only relevant UI elements and commands.
Don’t forget about professionals and advanced users in general! Power users might appreciate advanced options, shortcuts, or even extendability and customization of the app’s interface.
Advanced Photoshop Shortcuts8. 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. A minimalism is not only a fashion of last few years, but it certainly is a lasting trend with the aim to reduce the description of a subject just to its necessary elements. Minimalism helps users to quickly access important information and come to the result quickly. In order to optimize the user experience, it is sometimes necessary to carry out a partial or complete redesign of the site.
9. HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Errors and issues of any kind can be frustrating for the user. To minimize the frustration, we should put as much effort into designing error experience as we put into the rest of system. Every error message should be as explicit and precise as possible. Give the user some constructive advice on what to do next. Propose the solution or direct the user to a customer support employee who can handle the situation. The last rule of good error messages is politeness.
Great example of the error message which immediately suggests the next steps.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. Documentation should be well structured, written in a human language, and minimalist. Sometimes, users don‘t need a whole lot of documentation; a simple coachmark showing how the new feature works or a brief onboarding guide that explains the basics is enough.
Resources
https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53
https://www.nngroup.com/articles/ten-usability-heuristics