Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

heuristics

•Download as PPTX, PDF•
•
Karthikeyan Dhanasekaran CUA
Karthikeyan Dhanasekaran CUA

1. The document provides examples of system interfaces that follow principles of good user experience design. It discusses concepts like providing feedback on system processes, using natural language, giving users control and freedom, consistency, preventing errors, minimizing recall, flexibility, minimalist design, helping users diagnose errors, and providing help and documentation. 2. Each section includes examples of interfaces that demonstrate the principle, such as progress indicators, undo/redo functions, spell check, tooltips, shortcuts, and contextual help. 3. The examples show how concepts from visibility, language matching reality, user control, consistency, and other usability guidelines can be implemented in interfaces like Gmail, Excel, search tools, and help documentation.

1 of 24
heuristics
1. Visibility of System Status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Examples Upload button is enabled until its clicked, Then it is replaced with a progress indicator until the file has finished uploading Progress message and indicator shows while application loads. Feedback message is displayed when an action is performed. Password strength Indicator should be shown when New Password is created.
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.
Examples See this example of Itune. It uses the easy common language to differentiate Music, Movies etc.. Easy to understand The language is primarily appropriate for the audience of students and parents. One exception is the use of the word "Bursar" instead of "fees/costs." The site even puts "(fees/costs)" in parentheses to clarify what a Bursar is. If there needs to be clarification, there is no reason not to use the simpler term in the first place.
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.
Examples Search is easy to access, Enter info, execute or cancel. Very clearly shows in which page I am in & where can I go next. Each available option
Examples Clearly indicates selected row , column and the equation. With available action to apply or cancel. Undo & Redo buttons are available in the toolbar. If we make any mistakes.
4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Examples Gmail - Organizational folders looks the same like the Client email application. Inbox, Drafts & sent mail All the available controls toolbar looks the same across excel, word, PowerPoint etc..
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.
Examples Disable the update button when its clicked. So that it cannot be clicked twice by accident. Make the Primary action prominent with a distinct color or large area. Cancel & Secondary are just shown wihtout importance. Auto recommend option controls the mis-spelling Auto focus on inputs prevents source of frustration
6. Recognition rather than recall 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.
Examples Type ahead for coding.. In a development Shows preview of the fonts you are selecting. Instead just font names..
7. Flexibility and efficiency 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.
Examples Keyboard shortcuts accelerators. Preview common functions results when the column is selected in the left. More efficient that clicking on the action toolbar
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.
Examples Search menu exemplifies the 4 principles of visual design Contrast: bold test is used for the two labels in the search Repetition: Orange, Blue & Green text match the media types Alignment: Strong left alignment of text, right aligned drop down. Proximity: Light rule is use to separate tags from the other options Sufficient padding & spacing keep this timesheet from being a visual nightmare. Header & Footers rows, as well as the summary column use different colors to indicate they are distinct from the content
9. Help users recognize, diagnose, and recover from errors 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.
Examples Provides immediate feedback with specific instructions. Uses a funny image & copy, but provide viable alternatives ( articles listings & link) & ofcourse of action Report it.
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.
Examples Contextual help & tips are very clear and easy to navigate Embedded videos can be used to showcase features as well as get people started using the product very easily.
Examples Help tips are displayed on hover, answering the most likely questions about a field or instructions. Help opens a new browser window tab with a full set of help resources, Search, FAQ, Video tutorials & Customer forums.
With another topic on How to rate the severity of usability problems

More Related Content

heuristics

  • 2. 1. Visibility of System Status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
  • 3. Examples Upload button is enabled until its clicked, Then it is replaced with a progress indicator until the file has finished uploading Progress message and indicator shows while application loads. Feedback message is displayed when an action is performed. Password strength Indicator should be shown when New Password is created.
  • 4. 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.
  • 5. Examples See this example of Itune. It uses the easy common language to differentiate Music, Movies etc.. Easy to understand The language is primarily appropriate for the audience of students and parents. One exception is the use of the word "Bursar" instead of "fees/costs." The site even puts "(fees/costs)" in parentheses to clarify what a Bursar is. If there needs to be clarification, there is no reason not to use the simpler term in the first place.
  • 6. 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.
  • 7. Examples Search is easy to access, Enter info, execute or cancel. Very clearly shows in which page I am in & where can I go next. Each available option
  • 8. Examples Clearly indicates selected row , column and the equation. With available action to apply or cancel. Undo & Redo buttons are available in the toolbar. If we make any mistakes.
  • 9. 4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
  • 10. Examples Gmail - Organizational folders looks the same like the Client email application. Inbox, Drafts & sent mail All the available controls toolbar looks the same across excel, word, PowerPoint etc..
  • 11. 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.
  • 12. Examples Disable the update button when its clicked. So that it cannot be clicked twice by accident. Make the Primary action prominent with a distinct color or large area. Cancel & Secondary are just shown wihtout importance. Auto recommend option controls the mis-spelling Auto focus on inputs prevents source of frustration
  • 13. 6. Recognition rather than recall 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.
  • 14. Examples Type ahead for coding.. In a development Shows preview of the fonts you are selecting. Instead just font names..
  • 15. 7. Flexibility and efficiency 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.
  • 16. Examples Keyboard shortcuts accelerators. Preview common functions results when the column is selected in the left. More efficient that clicking on the action toolbar
  • 17. 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.
  • 18. Examples Search menu exemplifies the 4 principles of visual design Contrast: bold test is used for the two labels in the search Repetition: Orange, Blue & Green text match the media types Alignment: Strong left alignment of text, right aligned drop down. Proximity: Light rule is use to separate tags from the other options Sufficient padding & spacing keep this timesheet from being a visual nightmare. Header & Footers rows, as well as the summary column use different colors to indicate they are distinct from the content
  • 19. 9. Help users recognize, diagnose, and recover from errors 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.
  • 20. Examples Provides immediate feedback with specific instructions. Uses a funny image & copy, but provide viable alternatives ( articles listings & link) & ofcourse of action Report it.
  • 21. 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.
  • 22. Examples Contextual help & tips are very clear and easy to navigate Embedded videos can be used to showcase features as well as get people started using the product very easily.
  • 23. Examples Help tips are displayed on hover, answering the most likely questions about a field or instructions. Help opens a new browser window tab with a full set of help resources, Search, FAQ, Video tutorials & Customer forums.
  • 24. With another topic on How to rate the severity of usability problems