Be ware - Interface Design

1. Beware - Interface Design Dr. Ennis-Cole CECS 5130

2. Interface Design Communication with your user. Reference: C. Marlin “Lin” Brown - Human-Computer Interface Design Guidelines

3. User Communication 1. Navigational Cues 2. Instructions 3. Procedural Information 4. Objectives 5. Results of User Actions

4. Aspects of Interface Design Interface Design: *Display Formats *Wording *Use of Color, Graphics, Pictures * Dialogue *Error Messages

5. Display Formats - Several “Bees” 1. Be consistent with terms and definitions 2. Be careful to follow user conventions 3. Be sure to left-justify alphabetic data 4. Be aware that you should display lists in columns

6. Display Formats - Several “Bees” 5. Be careful to use both upper and lower case text 6. Be aware the numbers should be right- justified 7. Be sure you display only essential information 8. Be aware that you should use decimal alignment

7. Display Formats - Several “Bees” 09. Be aware that mnemonics are invaluable 10. Be sure to use short codes 11. Be careful to present lists of data in useful orders 12. Be careful to arrange groups logically 13. Be sure to use consistent locations

8. Display Formats - Several “Bees” 14. Be aware that uncluttered displays are best 15. Be sure to protect non-entry fields 16. Be careful to separate numbers from text 17. Be careful to use blinking and highlighting sparingly 18. Be sure to use lots of blank spaces

9. Wording within the Interface • 1. General Statements: • Use abbreviations only if they significantly help • Use only one abbreviation for a word • Consistently abbreviate rules • 2. Help Specify the Outcome by: • Using clear, meaningful labels and familiar terms • Avoid ambiguous words or phrases

10. Wording within the Interface • 3. Structure: • Use simple, short sentences • Use active voice • Begin with a main or topic sentence • 4. Help Specify the Outcome by: • Using conversational terms • Using affirmative statements • Minimizing jargon

11. Wording within the Interface • 5. Structure: • End with whole words • Present information in the way it will be used • Define all “special terms” • 6. Help Specify the Outcome by: • Thoroughly test the interface with others • Change unclear parts of the interface • Minimize jargon

12. Defining the User Interface Task, User’s Needs Analysis

13. Using Color • Conservative • Consistent • Emphasis

14. Using Color • What will be available in the user’s operational environment? • Don’t overuse color • Use color to aid search tasks • Use color for highlighting or emphasis • Coordinate the use of color with predefined meanings • Use related colors together (blue, white, yellow)

15. Using Color • Example - Blue: • Background Color • Easily Perceived • Denotes cold or water • Example - Red: • Alarms • Denotes hot - temperatures, buttons

16. Use of Graphics & Pictures • Depict complex relationships • Illustrate meanings • Display trends • Display actual vs. predicted values • Use for dynamically changing data • Don’t use graphics for exact numeric data representations

17. Use of Graphics & Pictures • Provide good visuals for fast interpretation • Icons an pictorial images facilitate direct manipulation • Help deliver compact representations and save space • Can be more understandable in conveying messages

18. “A picture is worth a thousand words...” “What message is conveyed here ?”

19. User Dialogue • 1. Immediate feedback • 2. Acknowledge successful completion • 3. Display or indicate modes of operation • 4. Provide access to settings • 5. Level user options • 6. Use menus or icons to facilitate commo. • 7. Provide reversible options

20. User Dialogue • 08. Provide an easily accessible main menu • 09. Wait times should be short, explain them • 10. Use consistent titles • 11. Combine useful controls in one program • 12. Avoid misspellings • 13. Use screen locations consistently

21. User Dialogue • 14. Confirm irreversible command actions • 15. Pair congruent commands (File - print) • 16. Use distinctive words for commands • 17. Supply help and exit throughout • 18. Respond quickly (10 second wait for file manipulation - 2 second replies)

22. What Five “Bees” Have Been Discussed to this point ?

23. User Interface Consists of: • 1. Display Formats • 2. Careful Wording • 3. Appropriate Use of Color • 4. Appropriate Use of Graphic Images and Pictures • 5. Dialogue - User conversation

24. Error Messages • 1. Watch Hostile Messages • 2. Watch Message Construction • 3. Watch Negative Tones • 4. Condemning tones heighten anxiety and increase the chance of producing more errors

25. Error Messages • Should be specific • Should provide constructive guidance • Should be positively phrased • Should be placed in an appropriate physical format

26. Specific Error Messages • Focused on the Problem Encountered (not random or general) • Should provide information on what was incorrect and how it can be corrected

27. Constructive Guidance in Error Messages • Indicate what was done correctly • Provide information in a positive tone • Provide assistance (highlight fields in error, show missing data)

28. Constructive Guidance in Error Messages • Messages should be: • Brief • Remove error after correction • Appropriate for the user group • Directive

29. Tests for the User Interface • User Control • Usability Testing • Feasibility Testing • Operational Testing • Performance Testing

30. Appropriate Physical Format • Upper and lower case • Short messages in English

31. Tips to Evaluate a User Interface • Cost-Effectiveness • Ease-of-Use (Time to Learn) • Speed of Performance • Rate of Errors • Retention over Time • Subjective Satisfaction • Documentation

32. The End • “That’s all folks.”