Heuristics Evaluation - How to Guide.pdf
0 likes200 views
The document outlines Jakob Nielsen's 10 usability heuristics for user interface design, providing guidelines to enhance usability and user experience. It details a methodology for conducting heuristic evaluations to identify design issues, categorize their severity, and offer actionable recommendations. The document emphasizes the importance of aligning design with user expectations and the effectiveness of clear communication in helping users navigate interfaces successfully.
Heuristics Evaluation - How to Guide.pdf
- 1. Usability Heuristics & Audit UX A How-to-guide
- 2. Usability Heuristics Developed by Jakob Nielsen in 1994 and publshed in Nielsen's book Usability Engineering, the Nielsen’s heuristics are the most widely recognised and used usability heuristics for user interface and product design. Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Dr. Nielsen established the "discount usability engineering" movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation. He holds 79 United States patents, mainly on ways of making the Internet easier to use. Jakob Nielsen is One of the "world's most influential designers" - Step 1 Step 2 Step 3 Define Scope Provide Recommendations Perform Evaluation & Audit
- 3. Jakob Nielsen's 10 usability heuristics https://www.nngroup.com/articles/ten-usability-heuristics #10: Help and documentation #9: Help users recognize, diagnose, and recover from errors #8: Aesthetic and minimalist design #7: Flexibility and efficiency of use #6: Recognition rather than recall #5: Error prevention #4: Consistency and standards #3: User control and freedom #2: Match between system and the real world #1: Visibility of system status
- 4. Jakob Nielsen's 10 usability heuristics https://www.nngroup.com/articles/ten-usability-heuristics 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. 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. 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. 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. 5 Error prevention Good error messages are important, but the best designs carefully prevent problems 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.
- 5. Jakob Nielsen's 10 usability heuristics https://www.nngroup.com/articles/ten-usability-heuristics 6 Recognition rather than recall Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design 7 Flexibility and efficiency of use Shortcuts — hidden from novice 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. 8 Aesthetic and minimalist design Interfaces should not contain information which 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. 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. 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.
- 6. Severity scale Severity ratings are used to determine how serious a usability issue is. Severity ratings range from cosmetic problems to usability catastrophes. Heuristic passed: I don't agree that this is a usability problem at all Cosmetic problem: need not be fixed unless extra time is available on project Minor problem: fixing this should be given low priority Major problem: important to fix, so should be given high priority Usability catastrophe: imperative to fix this before product can be released https:/ /www.nngroup.com/ articles/how-to-rate-the-severity-of-usability-problems/
- 8. Scope of evaluation This evaluation report covers the following parts of the <Application Placeholder Name>: Product Mappin User Interface Evaluatio Process Audit Sample Page
- 9. Heuristic Checklist A heuristic evaluation is a method for identifying design problems in a user interface. Evaluators judge the design against a set of guidelines (called heuristics) that make systems easy to use. https:/ /www.nngroup.com/ articles/how-to-conduct-a-heuristic-evaluation/ Evaluator Details: Provide evaluation details including your product’s URL. Heuristic Checklist Review every heuristic, providing severity ratings and recommendations
- 10. Product Mapping Some tap targets are very small (e.g. Add Source). It is important to make all CTA accessible enough for the user the user to tap comfortably . The screenshot on the right is a good example of the Complexity that’s happening throughout the website. The items are cluttered that does not look aesthetically pleasing Almost through out the text choice is 11px & 10px. This is a Usability catastrophe choice as it is illegible for alot of users. We tend to not use all caps anywhere untill its absoulety necessary. Here it is used to differentiate and create hierarchy, which is wrong. There are better ways to create this hierarchy. Problems Missing Usability Heuristics Click-ability Complexity in visual design Small Text choice All Caps 1 2 3 Flexibility and efficiency of use Aesthetic and minimalist design Product Page Name (Placeholder) Consistency and standards Sample Page
- 11. User Interface Usage of icons are just not enought to provide the right information about the navigation. These icons are not self explanatory within themselves. This form of connections in mapping process will be a very tedious task to understand for the users. This is Usability catastrophe design decision and will hamper the success of the product. According to UX, It’s a bad idea to put three side navigation bars together on the left. Product can be improved by utilising other real estate available on the screen. Problems Missing Usability Heuristics Side navigation not accessible Complexity in connections Too much information 1 2 3 Flexibility and efficiency of use Aesthetic and minimalist design Product Page Name (Placeholder) Match between system and the real world Human brain works and reads from left to right. Having tools positioned in the right is not a good idea. It’s always advisable to keep these actionable tools within reach of the user. Action tools at right Sample Page
- 12. Process Audit Everything is tried to align towards the left, But no tools or actionable item is there except choosing the collection. This looks cluttered and outdated according to the Modern Visual design trends. It’s difficult to differentiate between the items listed on the bar. It makes user confuse about the hierarchy of the items. If user will try to navigate throught the side menu, user will realise that the names on the list and selection items are too much congested together. Again this looks pathetic according to the Modern UI Trends. Problems Missing Usability Heuristics Cluttered real estate Visual Hierarchy missing Congested items on list 1 2 3 Help and documentation Aesthetic and minimalist design Component Name Match between system and the real world Sample Page
- 13. Results & Recommendations UX Example of how to share results
- 14. Missing Usability Heuristics 2 Flexibility and efficiency of use Shortcuts — hidden from novice 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. 3 Aesthetic and minimalist design Interfaces should not contain information which 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. 4 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. 1 Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. Sample Page
- 15. Improve learnability by maintaining both types of consistency: internal and external Maintain consistency within a single product or a family of products (internal consistency) Follow established industry conventions (external consistency). Tips for improving Usability https://www.nngroup.com/articles/ten-usability-heuristics Consistency and standards For example: Check-in counters are usually located at the front of hotels. This consistency meets customers’ expectations. Image Placeholder Feel free to add screenshots of the product page or component as examples. Provide examples of the heuristic you’ve identified for recommendations. Sample Page
- 16. Provideacceleratorslikekeyboardshortcutsand touchgestures Providepersonalizationbytailoringcontentand functionalityforindividualusers Allowforcustomization,souserscanmake selectionsabouthowtheywanttheproductto work. TipsforimprovingUsability https://www.nngroup.com/articles/ten-usability-heuristics Flexibilityandefficiency ofuse Forexample:Regularroutesare listedonmaps,butlocalswith moreknowledgeoftheareacan takeshortcuts. Image Placeholder Feel free to add screenshots of the product page or component as examples. Provide examples of the heuristic you’ve identified for recommendations. SamplePage
- 17. Keep the content and visual design of UI focus on the essentials Don't let unnecessary elements distract users from the information they really need Prioritize the content and features to support primary goals. Tips for improving Usability https://www.nngroup.com/articles/ten-usability-heuristics Aesthetic and minimalist design For example: An ornate teapot may have excessive decorative elements that can interfere with usability, like an uncomfortable handle or hard to wash nozzle. Image Placeholder Feel free to add screenshots of the product page or component as examples. Explain the heuristic you’ve identified and share examples of how it should work , correctly. Sample Page
- 18. Ensure that the help documentation is easy to search Whenever possible, present the documentation in context right at the moment that the user requires it List concrete steps to be carried out. Tips for improving Usability https://www.nngroup.com/articles/ten-usability-heuristics Help and documentation For example: Information kiosks at airports are easily recognizable and solve customers’ problems in context and immediately. Feel free to add screenshots of the product page or component as examples. Image Placeholder Explain the heuristic you’ve identified and share examples of how it should work , correctly. Sample Page
- 19. Thank you.