2. Beware - Interface Design Dr. Ennis-Cole CECS 5020

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

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

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

6. 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

7. 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

8. 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

9. 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

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

11. Wording within the Interface b 3. Structure: Use simple, short sentencesUse simple, short sentences Use active voiceUse active voice Begin with a main or topic sentenceBegin with a main or topic sentence b 4. Help Specify the Outcome by: Using conversational termsUsing conversational terms Using affirmative statementsUsing affirmative statements Minimizing jargonMinimizing jargon

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

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

14. Using Color b Conservative b Consistent b Emphasis

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

16. Using Color Using Color b Example - Blue: Background ColorBackground Color Easily PerceivedEasily Perceived Denotes cold or waterDenotes cold or water b Example - Red: AlarmsAlarms Denotes hot - temperatures, buttonsDenotes hot - temperatures, buttons

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

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

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

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

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

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

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

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

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

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

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

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

29. Constrictive Guidance in Error Messages b Messages should be: BriefBrief Remove error after correctionRemove error after correction Appropriate for the user groupAppropriate for the user group DirectiveDirective

30. User-Centered Phrasing b User Control b Usability Testing b Feasibility Testing b Operational Testing b Performance Testing

31. Appropriate Physical Format b Upper and lower case b Short messages in English

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

33. The End The End b “That’s all folks.”