0
Trying to build a great design for a digital product, the junior designer often messes with the ideas of heart-heating and clear interfaces. Though, being colourful and flashing is not enough to be called effective. The basic principles of User Interfaces clarity deviate from the general notion of harmony and the way users percept the information.
With this article, we describe the application of ten main heuristics for UI. They define the usability and clearness of digital products interfaces. Additionally, we provide a bunch of tips for designers not to make a mess in the UI. Find a checklist to test the ready-made design on requirements satisfaction at the end of the article.
Initially, 10 heuristics for UI were defined by Jakob Nielsen in the mid-90s. He classified and defined specific guidelines with the principles for user interfaces creation. Regardless of the time passed, they are still true for any design.
Each principle is equal in its importance for design clarity, and all can be applied simultaneously. Based on the primary requirements, it is possible to define supplementary tricks that enhance the initial clearness of the user interface.
1. System status visibility
Any system should visualise and transmit its status to the user, and any action should have feedback from the system. The notification from the system can be visual, audio, or both.
Example: progress bar during files uploading, identification of the process start or ending, blinking cursor in the text redacting app.
2. Correspondence of the system and the real world
Stay in the world of users (the target audience of your product) and avoid using the terms or phrases they would not understand. This principle concerns the timely use of figurative and obscure meaning.
Example: use of the real credit card view in the bank application.
3. User control and freedom
The user should always have the possibility to make the step back and deny the last action. Ensure the user learned about such option with interface buttons markings or menu with the list of possible shortcuts.
Example: ability to undo the deletion of the message within the next 5-10 seconds.
4. Consistency and standards
The design should always follow the internal elements of the particular design set. The similar components should perform similar functions to achieve similar goals. Besides the internal tradition of elements uses, consider the commonly accepted principles within the industry.
Example: when using green as the “button colour”, all other elements with this colour should act similarly.
5. Error prevention
Save users from making faults. Notify them about possible erroneous actions to save their time from making the steps back. Notification should be short and clear to transit the core meaning from a glance.
Example: before file deletion, get informed consent for this action.
6. Recognition rather than recall
Save the information the user insert and the next time offer them several options from the list. Care about the security of sensitive information output, such as password representation.
Example: search requests the users asked before.
7. Flexibility and efficiency
Part and distinguish the users to make the product use as comfortable as possible. All categories of users should exist simultaneously and do not interfere with each other with their sections of UI.
Example: Newcomers need onboarding, experienced users – shortcuts. Onboarding can be skipped, while without shortcuts users get the same functional scope.
8. Aesthetic and minimalist design
People tend to take visually esthetic design as more intuitive and convenient compared to less pleasant designs. Moreover, simple projects are less expensive and faster in production. They are more stable and easy to maintain, meaning more long-lasting.
Example: Overloaded design with numerous elements is noisy even if highly functional.
9. Help users recognize, diagnose, and recover from errors
This point is tied with the fifth – error prevention section. If we failed to prevent a mistake, we should ensure that the users notice that something went wrong. The next step is to help them correct the outcomes of those mistakes by adding suggestions or showing them further actions.
Example: After deleting the files to the bin, the notification appears to undo that action.
10. Help and documentation
Last but not least. The user should get the answers to any questions in the menu on the website or help section with documentation. Assistance can appear at the moment of function introduction, on a separate page or when the system understands that the user does something wrong.
Example: FAQ section on a website of the complicated SAAS.
Contest your UI design with this checklist
Check whether your UI is clear or not. Try answering each question with one of the words – Always, Sometimes, Never. Record your answers to get the evident result.
- You can track the status of the system
- Your target audience understands your language
- Users can cancel the steps they have made
- The design follows a single style
- All significant actions have prior notifications
- The insert boxes provide suggestions and save data
- Each user type is handled differently
- The number of elements in the interface is as low as possible
- Users can undo the erroneous actions
- You provide a help section in your product
In case most of the answers are Always – your design is clear; numerous Sometimes mean some rectifications may be introduced; a lot of Never indicates that the design should be corrected. Though this method is not a must to follow, try checking the designs with A\B testing on your particular audience to confirm the thing that suits them best.
A good design does not always mean bright and stunning. The concept of UI should work for users and business goals, convey the particular meaning, idea of the product. So in most cases, it is better to make it clear and vivid with the principles described long ago and proved their value.
In case you wish to learn more about the design – discover other articles from the design section of our blog.
7
