UI-the school name or?
UI can mean a lot of things to different people. Especially for us who are in some ways, are affiliated to certain things that are affiliated to the two letters ‘U’ and ‘I’. It could be romantic like U and I or a school name, or it could be the one we are going to talk about, which is the User Interface.
The user interface (UI) is the point of human-computer interaction and communication in a device. This can include display screens, keyboards, a mouse and the appearance of a desktop. It is also the way through which a user interacts with an application or a website.
What we are going to talk about here is the UI Design of our application. Whenever we are talking about UI Design, there is a famous golden rule that almost everyone knows of, which is Nielsen’s 10 Usability Heuristics.
Jakob Nielsen is is a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr Donald A. Norman. He is is a Danish web usability consultant. He holds a PhD in human-computer interaction from the Technical University of Denmark in Copenhagen. He made the rule after experiencing so much in the usability and design field.
Here is the 10 Usability Heuristics
#1. Visibility of System Status
The system status should be clear. The user should know how and what they are doing. The user should be aware of what the current state is. For example in medium, the status of the current text is displayed.
here, we can see that the draft is saved. It makes me as a user less anxious and I can be assured that my current progress will not be lost. Another example is the chrome tabs.
In chrome tabs, it is clear which tab are we currently viewing.
#2. Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal things. Follow real-world conventions, making information appear in a natural and logical order.
The way we should design depends very much on our specific users. Terms, concepts, icons, and images that seem perfectly clear to us and our colleagues may be unfamiliar or confusing to our users.
like this logo.
#3. User control and freedom
User must have the control and freedom to do the things they need to do. This also applies to mistakes, users must also be given ways to cancel the things they did because it might be on accident. That is why we need to give edit features, cancel features as a way so that the user could have control and freedom.
Imagine having a social media and accidentally liked a person’s old picture, you would want to undo that won’t you?
#4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions, because if the users are used to certain types of design, other design will be seen as foreign and they might not use this other app.
Any application or web must have a standard guideline for their own brand. This includes, but not limited to, the colour scheme of the company, the buttons, the fonts and so much more.
#5. Error prevention
Good error messages are important, but as the saying goes ‘prevention is better than cure’. it is better to prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for the users and present users with a confirmation option before they commit to the action.
So when looking at our design take the time, usually by imagining yourself as the user and think of the issues that might cause an error, then go down and look at things to prevent annoyance, frustration or forcing people to redo their work.
#6. Recognition rather than recall
Recognition: When you ask someone “Is Lisbon the capital of Portugal?”, you are asking if the provided information is correct or not.
Recall: If you ask them “What is the capital of Portugal?”, they would need a recall process to retrieve the correct answer from their memory.
Memory retrieval is made easier if we receive cues from the context. Making memory a big part of the usage.
#7. Flexibility and efficiency of use
Shortcuts — hidden from users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Flexible processes can be carried out in different ways so that people can pick whichever method works for them, however they prefer it to be. It would be nice for users to have options.
#8. Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or not needed. Every extra unit of information in an interface is in the way of the relevant units of information and makes them unused and people will not use them.
It’s about making sure we are keeping the content in the visual design of our UI focused on the essentials. This rule is close to the Human-Computer Interaction Signal-to-ratio.
#9. Help users recognize, diagnose, and recover from error
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. It would be confusing if we tell them the code instead of what error it is.
These error messages should also be presented with visual treatments that will help users notice and recognize them, like the color red for example.
#10. Help and documentation
Help and documentation content should be easy to search and focused on the user’s task. Keep it concise, and list concrete steps that need to be carried out. we have to strive to make products and services as interactive and easy-to-use as possible, but sometimes users will still need help. Help and documentation can come in many different forms like app onboarding pages, walkthroughs, tooltips, popovers, videos, etc.
that is all for the 10 rule that we all need to know!
good luck on applying it in your code!
