Beware - Interface Design Dr. Ennis-Cole CECS 5020

BeBeware - Interface ware - Interface DesignDesign

Dr. Ennis-ColeDr. Ennis-Cole

CECS 5020CECS 5020

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


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


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


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


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


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

ConservativeConservative ConsistentConsistent EmphasisEmphasis


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)


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


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


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

The End The End

““That’s all folks.”That’s all folks.”

Documents

Beware - Interface Design Dr. Ennis-Cole CECS 5020