Nielsen's 10 Usability Heuristics To Enhance aspiring.it UI Design
UI design might need to be clearer and more complex for users to navigate an application, making them uncertain about what to do next. This design can lead to a high bounce rate (the percentage of users who leave an application after only viewing one page) and a bad user experience.
Instead, UI design must be effortless and seamless, so users immediately recognize application functions and have a good user experience.
In this article, I will summarize the UI design aspiring.it:
- Wireframes process
- High-fidelity process
This process is my software engineering project (PPL) at the University of Indonesia, followed by the explanation of the implementation of Nielsen’s 10 Usability Heuristics for developing best practices for aspiring.it website.
✨ Wireframe
Based on Usability.gov website, A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.
After we collected data from users with a survey online method and defined what users’ pain, needs, and motivations with users’ persona, we finally developed our idea with user flow and wireframe.
From the definition of wireframe, a wireframe help to illustrate ideas for the product’s user interface. Wireframes can help designers and stakeholders to discuss throughout the design process because wireframes serve as a blueprint for the design and development of the digital product, helping to ensure that the user interface is effective and efficient.
With that knowledge, my team in this project and I decided to make a wireframe for the early design process. I made a landing page, register, login, navigation bar, profile, settings, weekly challenge, and subscription wireframes. We created wireframes with whimsical tools to help us design wireframes. The reason is that whimsical tools can make our job easy and fast with a good result.
After we (me and Andini) presented the wireframe to everyone and they approved what we created, we worked on the high-fidelity design. As expected, wireframes can make the high-fidelity design easier because we already have a picture of what we should do with the high-fidelity design.
✨ High-Fidelity
Based on nngroup.com, With high-fidelity interactivity and/or visuals, you can test workflow, specific UI components, graphical elements such as affordance, page hierarchy, type legibility, image quality, as well as engagement.
Once we are done with the wireframe, we continue to build high-fidelity. The motivation behind developing high-fidelity is to make a real visual hierarchy, graphical design, layout size, padding size, the priority of screen elements, screen size, and so on, unlike wireframes that just prioritize sketch black-gray-white color.
Before we jump into the high-fidelity design, we create a Style Guide/UI kit like buttons, typography, and icons (with the help of Untitled UI). Style Guide/UI kit will help the design process and front-end developers to make components consistent. After that, we designed a high-fidelity prototype.
There are plenty of tools to make high-fidelity prototypes, such as Figma, Adobe, Marvel app, etc. From that many tools, we choose Figma to design high-fidelity. We choose Figma because Figma is easy to use, free, real-time collaborative works, and provides tools such as auto layouting.
When we design high-fidelity, we can’t just design based on our thought and done. We have researched in empathize process; define users’ needs, pain, and motivation; and ideate our what we want to design. After that, we have to ensure our design is on the right path. To ensure, we evaluate our design with Nielsen’s 10 Usability Heuristics.
✨ Nielsen’s 10 Usability Heuristics
What is Nielsen’s 10 Usability Heuristics? Why should we implement this theory? This question is on the minds of many people or even you. Based on aelaschool.com, Nielsen’s 10 Usability Heuristics are general rules of thumb you can follow to help create more accessible, user-friendly, and intuitive digital products. So, Nielsen’s 10 Usability Heuristics is important to know that our design is on the right path and reduce repeated high-fidelity revision.
#1: Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time (Nngroup.com).
In our design, we always tell users what is going on. For example, when users want to register on our website and input the wrong format, our system will inform them what they are doing wrong. Another example, is when a user wants to log in and their email is not registered yet, our system will inform them that “we could not find your account”.
#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 jargon. Follow real-world conventions, making information appear in a natural and logical order (Nngroup.com).
Our design used icons that represent the terms to the users. For example, I put an icon on the navigation bar to represent each page. Another example, I put a pencil icon to represent the edit profile button.
#3: User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process (Nngroup.com).
As humans, we attend to make a mistake. Our design allows users to delete their files if the size exceeds capacity. This will make users easy to back out of the process. We avoid making users get stuck and feel frustrated.
#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 (Nngroup.com).
We refrain from making users learn something new again and again. We want to maintain consistency in our design. From that motivation, we implement consistent components, such as buttons, cards, badges, and inputs.
#5: Error prevention
The best designs carefully prevent problems from occurring in the first place (Nngroup.com).
Sometimes users make mistakes caused by inattention. From that, we implement a design that ascertains the user. For example, we create a modal that contains confirmation to the user. We make sure users really want to delete their works when users click the ‘X’ icon.
#6: Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible (Nngroup.com)
See how the “Feeds” icon is associated with the name to provide additional clues to the user. We provide extra clues too with a blue background to tell users where they landed. We implement this to promote recognition and reduce the amount of cognitive effort required from users.
#7: Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users (Nngroup.com).
When accessing the feeds page, users can easily find their desired tags by filters. This will help users not spend a lot of time finding their desired tags one by one. For example, ‘A’ want to see only User Experience portfolios in their feeds, so ‘A’ choose the ‘User Experience’ filter.
#8: Aesthetic and minimalist design
Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility (Nngroup.com).
We always ensure that our design keeps the content and visual design focused on the essentials. For example, I designed a login page that has a 1/2 circle element at the top and bottom. This keeps our design aesthetic but does not distract users from logging in.
#9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution (Nngroup.com).
When users input an invalid email format, the system will give users an error message. We presented error message with ‘exclamation mark’ icon and ‘Invalid email format’ message.
#10: Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks (Nngroup.com).
When creating an account, users should agree to the terms and conditions. Then, if users do not click the check button, the system will message the users that they should click the check button to continue. This will help users to understand how to complete their tasks.
Another example is when users create a new post. Our form design provides label information on how users should complete their tasks. We want to ensure that users know what to do when creating a new post.
Conclusion
User interface is important to meet user expectations and support the effective functionality of our application. A well-executed user interface will enhance user experience and increase user engagement. However, having guidelines to create an efficient and effective design is also important. Our design fulfills all of Nielsen’s 10 Usability Heuristics to make sure we meet the standard of design
And that’s a wrap, Thank you! 💖
I will appreciate your feedback 💬 & clap 👏.
If you want to collaborate, don’t hesitate to contact me at deyunarusmiland@gmail.com or through Linkedin ☕
