Good UI/UX Design
When we create a UI design for our application or product, it is not about creating a good looking UI, we also have to pay attention if our UI is suitable for our user. Our UI should correspond to the user needs, or we can say that it satisfies a good User Experience. To accomplish that, we have to implement the Nielsen’s 10 Usability Heuristics.
Before starting that, we have to know the steps to create a good UI design.
Wireframe
First thing first, to start designing, you have to make wireframes for your product. Based on this article, A wireframe is a low-fidelity way of showing a design. It’s the graphic representation of an app or a website containing the most essential elements and the content. A wireframe is like a blueprint of a building. There are some characteristics of a wireframe:
- It is like a sketch. It does not contain any colour, except black, white, and grey tones
- It portrays the most basic UI
- Replace images with cross rectangles
- Use only one basic font
Mockup
After you have finished making the product’s wireframe, the next thing you have to do is creating mockups for the product. This article said that mockup is a mid to high-fidelity display of design. A mockup is a visual way of representing a product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. But still, a mockup is not clickable (just like the wireframe). Here some characteristics of mockup:
- It helps you make final decisions regarding a product’s colour schemes, visual style, typography
- You can freely experiment on the visual side of the product and make it the best design as you could
Based on this article, while creating the mockup, it is said that you can ask your potential users for feedback and make the necessary changes right away. This will save you way more time than getting back and making adjustments to the UI after you have launched the product.
Usability Heuristics
to know that our product’s UI satisfies the user needs or has a good UX, we check whether our products satisfy the 10 Usability Heuristics. This article said that a heuristic evaluation is an inspection used to understand usability issues in the user interface (UI) of a computer’s software. The heuristics were found by Jakob Nielsen in the 90s and it is still used until now.
- Visibility of System Status
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
It should show what is going on in the system. For example, if you download something, it should notify the user that your download is succeeded.
For example here in my project, it notifies the user if the system has succeeded create an auction event.
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.”
It should show information about the system by using the users’ language. For example, if the user wants to open a page, however, the page does not exist, the system will say “Error 404”. Not all users know what “Error 404” is. To satisfy the second heuristic, you should, for example, notify the users that the page is not found, such as providing a warning sign that says “Sorry, the page does not exist”, or something else.
For example in my project, we notify the user if the email is invalid.
3. 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.”
According to the statement above, the product UI should support undo and redo.
In my project, for example. We can undo the auction’s image by clicking the x button and you can also redo or upload the same image by clickling the camera logo.
4. Consistency and Standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing.”
You should maintain the consistency of your product, such as using the same colour template or font for every page.
In my project, every pages has the same background 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.”
The product should notify error messages to the users if there is an error in the system to prevent error.
In my project, it notifies an error message if the end date is earlier than the start date.
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.”
We provide the added artwork history in our project if the user forget what are the artworks they have already added into their collection.
7. Flexibility and Efficient 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.”
We provide some features to filter the auction event based on its date in our project.
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.”
This page for example, it displays artworks and the user can see some of the artworks details. If the user wants to know more about a specific artwork details, the user can click one of the artwork pictures.
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.”
It shows that the password is still error and it can be shown because of the red color and we notify how to recover from the error by showing the password requirement message.
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.”
We should provide a feature that can help the user to know more about the product or application.
However, until now, my team has not implemented the #10 heuristic yet. But we have a plan to implement the #10 heuristic by providing a help feature. It helps the user to know more about our application.
That is all for me! Thank you for reading my article until the end! I hope it helps you to know the examples of Nielsen’s 10 Usability Heuristics. Hope you have a great day!🥰
References:
