Beware - Interface Design Dr. Ennis-Cole CECS 5020

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

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

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

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

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

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

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

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

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

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

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

Using Color b Conservative b Consistent b Emphasis

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)

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

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

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

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

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

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

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)

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

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

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

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

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

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)

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

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

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

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

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