beware - interface design dr. ennis-cole cecs 5020
TRANSCRIPT
Interface Interface Design Design
Communication with your user.Communication with your user.
Reference: C. Marlin Reference: C. Marlin “Lin” Brown - “Lin” Brown - Human-Human-
Computer Interface Computer Interface Design GuidelinesDesign Guidelines
User User Communication Communication
1. Navigational Cues1. Navigational Cues
2. Instructions2. Instructions
3. Procedural Information3. Procedural Information
4. Objectives 4. Objectives
5. Results of User Actions5. Results of User Actions
Aspects of Interface Aspects of Interface Design Design
Interface Design:Interface Design:*Display Formats*Display Formats
*Wording*Wording
*Use of Color, Graphics, Pictures*Use of Color, Graphics, Pictures
* Dialogue * Dialogue
*Error Messages *Error Messages
Display Formats - Display Formats - Several “Bees” Several “Bees”
1. 1. Be consistent with terms and Be consistent with terms and definitionsdefinitions
2. Be careful to follow user conventions 2. Be careful to follow user conventions
3. Be sure to left-justify alphabetic 3. Be sure to left-justify alphabetic datadata
4. Be aware that you should display 4. Be aware that you should display lists in columnslists in columns
Display Formats - Display Formats - Several “Bees” Several “Bees”
5. Be careful to use both upper and lower 5. Be careful to use both upper and lower case text case text
6. Be aware the numbers should be right-6. Be aware the numbers should be right-justified justified
7. Be sure you display only essential 7. Be sure you display only essential information information
8. Be aware that you should use decimal 8. Be aware that you should use decimal alignmentalignment
Display Formats - Display Formats - Several “Bees” Several “Bees”
09. Be aware that mnemonics are 09. Be aware that mnemonics are invaluableinvaluable
10. Be sure to use short codes10. Be sure to use short codes
11. Be careful to present lists of data in 11. Be careful to present lists of data in useful ordersuseful orders
12. Be careful to arrange groups logically12. Be careful to arrange groups logically
13. Be sure to use consistent locations13. Be sure to use consistent locations
Display Formats - Display Formats - Several “Bees” Several “Bees”
14. Be aware that uncluttered displays are 14. Be aware that uncluttered displays are bestbest
15. Be sure to protect non-entry fields15. Be sure to protect non-entry fields
16. Be careful to separate numbers from 16. Be careful to separate numbers from texttext
17. Be careful to use blinking and 17. Be careful to use blinking and highlighting sparinglyhighlighting sparingly
18. Be sure to use lots of blank spaces18. Be sure to use lots of blank spaces
Wording within the Wording within the InterfaceInterface
1. General Statements: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
2. Help Specify the Outcome by:2. Help Specify the Outcome by:• Using clear, meaningful labels and familiar terms Using clear, meaningful labels and familiar terms • Avoid ambiguous words or phrasesAvoid ambiguous words or phrases
Wording within the Wording within the InterfaceInterface
3. Structure:3. Structure:• Use simple, short sentences Use simple, short sentences • Use active voiceUse active voice• Begin with a main or topic sentenceBegin with a main or topic sentence
4. Help Specify the Outcome by:4. Help Specify the Outcome by:• Using conversational terms Using conversational terms • Using affirmative statementsUsing affirmative statements• Minimizing jargonMinimizing jargon
Wording within the Wording within the InterfaceInterface
5. Structure:5. Structure:• End with whole words End 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”
6. Help Specify the Outcome by:6. Help Specify the Outcome by:• Thoroughly test the interface with others Thoroughly test the interface with others • Change unclear parts of the interfaceChange unclear parts of the interface• Minimize jargonMinimize jargon
Defining the User Defining the User InterfaceInterface
Task,Task, User’s User’s
NeedsNeeds
AnalysisAnalysis
Using ColorUsing Color
What will be available in the user’s What will be available in the user’s operational environment? 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 Coordinate the use of color with predefined meaningsmeanings
• Use related colors together (blue, white, yellow)Use related colors together (blue, white, yellow)
Using ColorUsing Color
Example - Blue:Example - Blue:• Background ColorBackground Color• Easily Perceived Easily Perceived • Denotes cold or waterDenotes cold or water
Example - Red:Example - Red:• AlarmsAlarms• Denotes hot - temperatures, buttonsDenotes hot - temperatures, buttons
Use of Graphics & Use of Graphics & PicturesPictures
Depict complex relationshipsDepict complex relationships Illustrate meaningsIllustrate meanings Display trendsDisplay trends Display actual vs. predicted valuesDisplay actual vs. predicted values Use for dynamically changing data Use for dynamically changing data Don’t use graphics for exact numeric dataDon’t use graphics for exact numeric data
representationsrepresentations
Use of Graphics & Use of Graphics & PicturesPictures
Provide good visuals for fast interpretationProvide good visuals for fast interpretation Icons an pictorial images facilitate direct Icons an pictorial images facilitate direct
manipulationmanipulation Help deliver compact representations and Help deliver compact representations and
save spacesave space Can be more understandable in conveying Can be more understandable in conveying
messages messages
““A picture is worth A picture is worth a thousand a thousand words...” words...”
““What message is conveyed here ?”What message is conveyed here ?”
User DialogueUser Dialogue
1. Immediate feedback1. Immediate feedback 2. Acknowledge successful completion2. Acknowledge successful completion 3. Display or indicate modes of operation3. Display or indicate modes of operation 4. Provide access to settings4. Provide access to settings 5. Level user options5. Level user options 6. Use menus or icons to facilitate commo.6. Use menus or icons to facilitate commo. 7. Provide reversible options7. Provide reversible options
User DialogueUser Dialogue
08. Provide an easily accessible main menu08. Provide an easily accessible main menu 09. Wait times should be short, explain 09. Wait times should be short, explain
themthem 10. Use consistent titles10. Use consistent titles 11. Combine useful controls in one program11. Combine useful controls in one program 12. Avoid misspellings12. Avoid misspellings 13. Use screen locations consistently 13. Use screen locations consistently
User DialogueUser Dialogue
14. Confirm irreversible command actions14. Confirm irreversible command actions 15. Pair congruent commands (File - print)15. Pair congruent commands (File - print) 16. Use distinctive words for commands16. Use distinctive words for commands 17. Supply help and exit throughout17. Supply help and exit throughout 18. Respond quickly (10 second wait for 18. Respond quickly (10 second wait for
file manipulation - 2 second file manipulation - 2 second replies)replies)
What Five “Bees” Have What Five “Bees” Have Been Discussed to this Been Discussed to this
point ? point ?
User Interface Consists User Interface Consists of:of:
1. Display Formats1. Display Formats 2. Careful Wording 2. Careful Wording 3. Appropriate Use of Color3. Appropriate Use of Color 4. Appropriate Use of Graphic 4. Appropriate Use of Graphic
Images and PicturesImages and Pictures 5. Dialogue - User conversation5. Dialogue - User conversation
Error Messages Error Messages
1. Watch Hostile 1. Watch Hostile MessagesMessages
2. Watch Message 2. Watch Message Construction Construction
3. Watch Negative Tones 3. Watch Negative Tones 4. Condemning tones 4. Condemning tones
heighten anxiety and heighten anxiety and increase the chance of increase the chance of producing more errorsproducing more errors
Error Messages Error Messages
Should be specificShould be specific Should provide constructive Should provide constructive
guidanceguidance Should be positively phrasedShould be positively phrased Should be placed in an appropriate Should be placed in an appropriate
physical formatphysical format
Specific Error Specific Error Messages Messages
Focused on the Problem Focused on the Problem Encountered Encountered
(not random or general)(not random or general)
Should provide information on Should provide information on what was incorrect and how it what was incorrect and how it can be correctedcan be corrected
Constructive Guidance Constructive Guidance in Error Messages in Error Messages
Indicate what was done correctlyIndicate what was done correctly
Provide information in a positive Provide information in a positive tonetone
Provide assistance (highlight fields Provide assistance (highlight fields in error, show missing data)in error, show missing data)
Constrictive Guidance Constrictive Guidance in Error Messages in Error Messages
Messages should be:Messages should be:
• BriefBrief
• Remove error after correctionRemove error after correction
• Appropriate for the user groupAppropriate for the user group
• DirectiveDirective
User-Centered User-Centered PhrasingPhrasing
User Control User Control Usability TestingUsability Testing Feasibility Testing Feasibility Testing Operational TestingOperational Testing Performance Testing Performance Testing
Appropriate Physical Appropriate Physical FormatFormat
Upper and lower caseUpper and lower case Short messages in EnglishShort messages in English
Tips to Evaluate a User Tips to Evaluate a User Interface Interface
Cost-EffectivenessCost-Effectiveness Ease-of-Use (Time to Learn)Ease-of-Use (Time to Learn) Speed of PerformanceSpeed of Performance Rate of ErrorsRate of Errors Retention over TimeRetention over Time Subjective SatisfactionSubjective Satisfaction DocumentationDocumentation