How can we apply Jakob Nielsen’s 10 usability heuristics to build a better interface that is useful and usable? These are some examples of applying the 10 rules. Hope you like them
See the full project and more examples from here:
https://www.behance.net/gallery/97316703/UX-Usability-in-Practice
To read more about the 10 rules :
https://www.nngroup.com/articles/ten-usability-heuristics/
1. Usability in Practice
How can we apply Jakob Nielsen’s 10 usability
heuristics to build a better user interface that is
useful and usable? Here are some examples
Designed by: behance.net/Amrshawki
Swipe to Continue
2. Uploading Files
32%
4 seconds left
Uploading Files....
Do Don't
You should give your user enough details for every ongoing operation. keep
him posted about how much time he is going to wait.
01.Visibility and System Status
3. The system should automatically add in numeric values like what happens
in the physical calculators
02.Match between System and the Real World
Net Volume
$10250.53
Do Don't
Net Volume
$10,250.53
4. Always provide users with an undo function to give them the sense of error
tolerance
03.User Control and Freedom
Item is deleted
Don't
Item is deleted Undo
Do
5. Icons on the same screen should have a similar style
04.Consistency and Standards
Don'tDo
6. The system should prevent users from making errors, by making Decision-making
elements clear and different
05.Error Prevention
Are you sure you want to delete
this item ?
YesNo
Do
Are you sure you want to delete
this item ?
Yes, Deletekeep
Don't
7. use icons whenever possible to help users reach and distinguish between
design elements quickly
06.Recognition rather than recall
EN EN
Do Don't
8. Use tooltips to help user figure out the meaning of design elements quickly
07.Flexibility and efficiency of use
Always Do
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore
Save
Edit Text
9. 08. Aesthetic and minimalist design
Do
First Name
Email
Password
Last Name
Confirm
Create New Account
Next
First Name
Email
Password
Last Name
Confirm
Create New
Gende
Male Female
Mobile
+20 Birth Year
Registe
Don't
We don't like filling rich forms, Make users feel that there are fewer steps remaining to
finish the tasks
10. Make error messages clearly indicating the problem, and how normal user
can recover from it
09.Help users recognize diagnose and recover
Oops...
Network Error.
Your connection network is lost
Reconnect Cancel
Oops...
Something wasn't right.
(GeneralNetworkError error 510)
Reconnect Cancel
11. Use helping tools to explain the design elements that need further
secondary level explanation
10.help and documentation
Always Do
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
Lorem ipsum dolor sit amet,
consectetur adipiscing