53
Guidelines, Guidelines, Principles, and Principles, and Theories Theories User Interfaces and User Interfaces and Usability Usability CS5153 CS5153

Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Embed Size (px)

Citation preview

Page 1: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Guidelines, Principles, Guidelines, Principles, and Theoriesand Theories

User Interfaces and UsabilityUser Interfaces and Usability

CS5153CS5153

Page 2: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

IntroductionIntroduction

► Theories Theories – high level (includes models)– high level (includes models) Describe systems, objects, actions with Describe systems, objects, actions with

consistent terminology for teaching, education, consistent terminology for teaching, education, and communicationand communication

Help predict performanceHelp predict performance► Principles Principles – mid-level– mid-level

Analyze and compare competing designsAnalyze and compare competing designs► Guidelines Guidelines – specific and practical– specific and practical

Cures for design problemsCures for design problems Cautions for potential dangerCautions for potential danger Reminders based on practical experienceReminders based on practical experience

► Why have guidelines, principles, and theories?Why have guidelines, principles, and theories? Make efficient, proven decisionsMake efficient, proven decisions Do not repeat mistakes of the pastDo not repeat mistakes of the past In a rush, can make mistakesIn a rush, can make mistakes

Guidelines

Principles

Theories

Page 3: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

GuidelinesGuidelines

► Specific and practicalSpecific and practical Cures for design problemsCures for design problems Cautions for potential Cautions for potential

dangerdanger Reminders based on Reminders based on

experienceexperience

►Guideline DocumentGuideline Document Shared languageShared language Consistency within a Consistency within a

design team (good because design team (good because of large visual component)of large visual component)

Examples:http://hcibib.org/hci-sites/GUIDELINES.html

Page 4: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Guideline DocumentGuideline Document

► Input and output Input and output formatsformats

► Action sequencesAction sequences► TerminologyTerminology►Hardware Hardware

devices/platformsdevices/platforms► Practical ExperiencePractical Experience► Empirical studiesEmpirical studies► Examples & Examples &

counterexamplescounterexamples► Pros and Cons?Pros and Cons? http://www.docstoc.com/docs/418559

/iPhones-Human-Interface-Guidelines

Page 5: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Guideline DocumentGuideline Document

► Pros:Pros: Builds upon experienceBuilds upon experience Continued improvementsContinued improvements

► Cons:Cons: Too specificToo specific Hard to innovateHard to innovate Not applicable/realistic toNot applicable/realistic to

the situationthe situation Hard to applyHard to apply

► When do you have an When do you have an exception? Who makes exception? Who makes the final decision?the final decision?

http://www.docstoc.com/docs/418559/iPhones-Human-Interface-Guidelines

Page 6: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Navigating the InterfaceNavigating the Interface

► Example from National Cancer InstituteExample from National Cancer Institute http://www.usability.gov/pdfs/guidelines.html Help government agencies with design and Help government agencies with design and

creation of web pagescreation of web pages 388 guidelines backed by research388 guidelines backed by research What are some positives that we notice?What are some positives that we notice?

► For each of the following, let’s evaluate for:For each of the following, let’s evaluate for: User: Novice, Intermediate, ExpertUser: Novice, Intermediate, Expert Task: Education, Search, ResearchTask: Education, Search, Research Benefit?Benefit?

Page 7: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Navigating the InterfaceNavigating the Interface

►User: Novice, Intermediate, ExpertUser: Novice, Intermediate, Expert►Task: Education, Search, ResearchTask: Education, Search, Research►Benefit?Benefit?

►Sample Guidelines:Sample Guidelines: Standardize task sequencesStandardize task sequences Ensure that embedded links are descriptiveEnsure that embedded links are descriptive Use unique and descriptive headingsUse unique and descriptive headings Use check boxes for binary choicesUse check boxes for binary choices Develop pages that will print properlyDevelop pages that will print properly Use thumbnail images to preview larger Use thumbnail images to preview larger

imagesimages

Page 8: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Guidelines for DisabledGuidelines for Disabled

► WWW Consortium adopted WWW Consortium adopted Text equivalent for every non-text Text equivalent for every non-text

element [images, image map, element [images, image map, animations, applets, ascii art, animations, applets, ascii art, frames, scripts, bullets, sounds, frames, scripts, bullets, sounds, audio, video]audio, video]

For time-based multimedia, For time-based multimedia, provide equivalent synchronized provide equivalent synchronized alternatives (captions, alternatives (captions, descriptions)descriptions)

All color info is available without All color info is available without colorcolor

Title each frameTitle each frame► Enables screen readers or other Enables screen readers or other

technologies to have multiple technologies to have multiple methods to obtain the webpage methods to obtain the webpage infoinfo

► How does this end up helping How does this end up helping everyone?everyone?

Page 9: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Organizing the Organizing the DisplayDisplay

► Consistency of data Consistency of data displaydisplay Terminology, Terminology,

abbrev., formats, abbrev., formats, colors, grammar, colors, grammar, capitalizationcapitalization

► Efficient Efficient information information assimilation by the assimilation by the useruser Familiar formatFamiliar format Related to tasksRelated to tasks Ex. justification, Ex. justification,

alphanumeric, alphanumeric, spacing, formatting, spacing, formatting, labels, labels, units/measurementsunits/measurements

Page 10: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Organizing the Organizing the DisplayDisplay

► Minimal memory Minimal memory loadload Minimal carry Minimal carry

information over information over from on screen to from on screen to anotheranother

Fewer actionsFewer actions Labels and common Labels and common

formats should be formats should be provided for novice provided for novice (Ex. SSN/phone #)(Ex. SSN/phone #)

► Compatibility of Compatibility of data display with data display with entryentry Entering data should Entering data should

look similar to the look similar to the viewing of the dataviewing of the data

Page 11: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Organizing the Organizing the DisplayDisplay

► Flexibility for Flexibility for user control of user control of data displaydata display User control for User control for

information information display (sorting, display (sorting, ordering)ordering)

► Only a starting Only a starting pointpoint Has many Has many

special casesspecial cases Application Application

specific (Ex. specific (Ex. ATMs)ATMs)

Good/bad examples:http://www.csszengarden.com/

Page 12: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Get the user’s attentionGet the user’s attention

► User sees most data in front of themUser sees most data in front of them► Urgent, exceptional, and time-dependent conditions need to Urgent, exceptional, and time-dependent conditions need to

be brought forwardbe brought forward► Ex. games and damage (visual, audio)Ex. games and damage (visual, audio)► Guidelines:Guidelines:

Intensity – two levels only, limited use of high intensityIntensity – two levels only, limited use of high intensity Marking – underlines, box, arrows, asterisk, bullet, dash, XMarking – underlines, box, arrows, asterisk, bullet, dash, X Size – Up to 4 sizesSize – Up to 4 sizes Fonts – three fontsFonts – three fonts

Page 13: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Get the user’s attentionGet the user’s attention► Inverse video – inverse coloringInverse video – inverse coloring► Question – which color is most noticeable to humans?Question – which color is most noticeable to humans?► Blinking (2-4 Hz)Blinking (2-4 Hz)► Color (4)Color (4)► Audio Audio

soft tones – positivesoft tones – positive harsh – emergencyharsh – emergency Multiple levels are difficult to distinguishMultiple levels are difficult to distinguish Voice can interfere with Voice can interfere with

communication betweencommunication betweenusersusers

Page 14: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Get the user’s attentionGet the user’s attention

► Danger in overusing the previous attention grabbersDanger in overusing the previous attention grabbers Animation should provide needed information (including Animation should provide needed information (including

progress)progress) Similarly highlighted items imply relationshipsSimilarly highlighted items imply relationships Novices: simple, logically organized, well-labeled displaysNovices: simple, logically organized, well-labeled displays Experts: shorter labels, more flexibility, subtle highlight of Experts: shorter labels, more flexibility, subtle highlight of

changed valueschanged values► Test w/ user groupsTest w/ user groups

example:http://www.myspace.com/thesmiddy…and many more annoying examples on myspace.com

Page 15: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Facilitate Data EntryFacilitate Data Entry► Can constitute substantial Can constitute substantial

portion of user’s timeportion of user’s time► Consistency of data-entry Consistency of data-entry

transactions – similar transactions – similar sequence of actions, sequence of actions, delimiters, abbrev.delimiters, abbrev.

► Minimal input actions by user Minimal input actions by user – fewer actions = greater – fewer actions = greater productivity and less error. productivity and less error. Typing is typically better Typing is typically better Command line vs. GUICommand line vs. GUI Too much hand movement is Too much hand movement is

not good. not good. ► Experts prefer to type 6-8 Experts prefer to type 6-8

characters instead of moving characters instead of moving a mouse, joystick, etc.a mouse, joystick, etc.

Avoid redundant data entry Avoid redundant data entry (waste of time, perceived (waste of time, perceived effort, increased error). effort, increased error). System should aid but allow System should aid but allow overridingoverriding

Page 16: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Facilitate Data EntryFacilitate Data Entry

► Minimal memory loadMinimal memory load Don’t use codes, complex Don’t use codes, complex

syntactic strings. Ex. syntactic strings. Ex. county on a web formcounty on a web form

Selecting from a list – don’t Selecting from a list – don’t need to memorize choicesneed to memorize choices

► Compatibility of data Compatibility of data entry with data display – entry with data display – againagain

► Flexibility for user control Flexibility for user control –– Experienced vs. novice. Experienced vs. novice. Organize entry based on Organize entry based on

situation (ex. flight situation (ex. flight controllers). controllers).

Can conflict with Can conflict with consistency requirementconsistency requirement

Page 17: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

PrinciplesPrinciples

►More fundamental and applicable than More fundamental and applicable than guidelinesguidelines

►Ex. how important is diversityEx. how important is diversity►ConsiderConsider

ExpertiseExpertise Task requirementsTask requirements

Page 18: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Determine User Skill LevelsDetermine User Skill Levels► Know thy user - Wilfred Hansen Know thy user - Wilfred Hansen

(1971)(1971)► Many assume they understand Many assume they understand

users and their tasksusers and their tasks► Many think differently than youMany think differently than you► Graphs vs. Tables, words vs. Graphs vs. Tables, words vs.

numbers, open-ended vs. numbers, open-ended vs. structurestructure

► Start with a population profileStart with a population profile Primary: age, gender, physical Primary: age, gender, physical

and cognitive abilities, and cognitive abilities, education, motivation, training, education, motivation, training, goals, personalitygoals, personality

Secondary: location, Secondary: location, economics, attitudeseconomics, attitudes

Page 19: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Novice/First-Novice/First-Time UsersTime Users

► What would you need to What would you need to consider forconsider for Grandparents sending first emailGrandparents sending first email Airport check-in kiosksAirport check-in kiosks

► Inexperience with interfaceInexperience with interface► AnxietyAnxiety► SolutionsSolutions

Restrict vocabularyRestrict vocabulary Instructions, dialog boxes, know Instructions, dialog boxes, know

who to turn to for help, multiple who to turn to for help, multiple languages, consistent termslanguages, consistent terms

Small number of actionsSmall number of actions Positive reinforcementPositive reinforcement Feedback (Ex. BOA ATM often Feedback (Ex. BOA ATM often

does not give you any feedback)does not give you any feedback) Good Error messagesGood Error messages Video demonstrations, online Video demonstrations, online

tutorials, good manualstutorials, good manuals

Page 20: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Knowledge-able Knowledge-able Intermittent Intermittent

UsersUsers► Ex. Frequent travelers, Ex. Frequent travelers,

managers and code/word managers and code/word processors. processors.

► Understand task concepts, and Understand task concepts, and interface basicsinterface basics

► Retaining menu structure, Retaining menu structure, location of featureslocation of features

► Solutions:Solutions: Consistent sequences of Consistent sequences of

actionsactions Meaningful messagesMeaningful messages Guides to frequent patterns of Guides to frequent patterns of

usageusage Protection from danger Protection from danger

(encourage exploration)(encourage exploration) Context dependent helpContext dependent help

Page 21: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Expert/Frequent Expert/Frequent UsersUsers

► Thoroughly familiar Thoroughly familiar with task and interfacewith task and interface

►Goal is efficiency (high Goal is efficiency (high speed, low error)speed, low error)

► Solutions:Solutions: Rapid response timeRapid response time Brief feedbackBrief feedback ShortcutsShortcuts MacrosMacros

Page 22: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Multiple ClassesMultiple Classes► You might be designing for more You might be designing for more

than one of these classesthan one of these classes► Approach is typically a Approach is typically a multi-layermulti-layer

(aka (aka level-structuredlevel-structured or or spiralspiral)) Novices use a subset of Novices use a subset of

commands, actions, and objectscommands, actions, and objects Can move up when they feel Can move up when they feel

comfortablecomfortable► Ex. CellphonesEx. Cellphones

Novices: phone calls easy to makeNovices: phone calls easy to make Experts: store #s, web, contact Experts: store #s, web, contact

infoinfo► Also involves manuals, help Also involves manuals, help

screens, errors messages, screens, errors messages, tutorials, feedbacktutorials, feedback

► Most gamesMost games

Page 23: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Identify the Identify the TasksTasks

► How?How? BrainstormBrainstorm Observe and interview users (esp. newer versions)Observe and interview users (esp. newer versions)

► Ex. Palm PilotEx. Palm Pilot Limited functionality = universal usabilityLimited functionality = universal usability

► Atomicity of tasks is important to considerAtomicity of tasks is important to consider Ex. making a left turnEx. making a left turn Too small = too many steps (inefficient, frustrating)Too small = too many steps (inefficient, frustrating) Too large = need special cases, inflexible, frustratingToo large = need special cases, inflexible, frustrating

► Task frequencyTask frequency High frequency = simple, quick, even if it slows other tasks downHigh frequency = simple, quick, even if it slows other tasks down Special keys vs. Ctrl + key vs. menu selectionsSpecial keys vs. Ctrl + key vs. menu selections

► Task vs. Job Frequency Matrix (Fig. 2.1 in book)Task vs. Job Frequency Matrix (Fig. 2.1 in book)► Task analysis and task objects and objects definedTask analysis and task objects and objects defined

Page 24: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Choose an Interaction StyleChoose an Interaction Style► Direct ManipulationDirect Manipulation

Manipulate visual representationsManipulate visual representations Ex. Ex. Desktop metaphor, CAD, Desktop metaphor, CAD,

gamesgames Pros:Pros: fast, feedback, easy to fast, feedback, easy to

understand and retain (ex. icons understand and retain (ex. icons on your desktop), exploration on your desktop), exploration encouraged, good for novices, and encouraged, good for novices, and can be good for other classes, can be good for other classes, visual datavisual data

Cons:Cons: hard to program, hard to program, interaction devices are harder to interaction devices are harder to design or modifydesign or modify

► Menu SelectionMenu Selection User reads a list of items, and User reads a list of items, and

selects oneselects one Pros: Pros: no memorization, few no memorization, few

actions, clear structure, tools for actions, clear structure, tools for validity and consistency existvalidity and consistency exist

Cons: Cons: Make actions Make actions understandable not easy, careful understandable not easy, careful task analysistask analysis

Page 25: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Choose an Interaction Choose an Interaction StyleStyle

► Form Fill-inForm Fill-in Data entry into fieldsData entry into fields Pros: Pros: rapid, for more rapid, for more

advanced users, tools advanced users, tools available for formsavailable for forms

Cons: Cons: must understand labels must understand labels and request format, be able to and request format, be able to respond to errors, training respond to errors, training requiredrequired

► Command LanguageCommand Language Pros: Pros: feeling of control, most feeling of control, most

advanced users like it, rapid, advanced users like it, rapid, histories and macros are easy, histories and macros are easy, flexibilityflexibility

Cons:Cons: high error rates, high error rates, training required, poor training required, poor retention rate, hard to create retention rate, hard to create error messageserror messages

Page 26: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Choose an Interaction StyleChoose an Interaction Style

► Natural LanguageNatural Language Pros:Pros: easy to learn easy to learn Cons:Cons: unpredictable, requires clarification unpredictable, requires clarification

dialog, require more work to clean updialog, require more work to clean up

► Ex.Ex. let’s figure out how to specify the let’s figure out how to specify the date in each of the following styles:date in each of the following styles: Direct ManipulationDirect Manipulation Form Fill inForm Fill in Command LanguageCommand Language Natural LanguageNatural Language

► Could use more than oneCould use more than one

Page 27: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Eight Golden Rules of Interface Eight Golden Rules of Interface DesignDesign

► 1. Strive for Consistency1. Strive for Consistency► 2. Cater to universal Usability2. Cater to universal Usability► 3. Offer informative feedback3. Offer informative feedback► 4. Design dialogs to yield closure4. Design dialogs to yield closure► 5. Prevent errors5. Prevent errors► 6. Permit easy reversal of actions6. Permit easy reversal of actions► 7. Support internal locus of control.7. Support internal locus of control.► 8. Reduce short-term memory load.8. Reduce short-term memory load.

Page 28: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Strive for ConsistencyStrive for Consistency

► Consistent sequence of Consistent sequence of actions for similar actions for similar situationssituations

► Identical Terminology Identical Terminology (prompts, menus, help)(prompts, menus, help)

► Consistent visual layout Consistent visual layout (fonts, color, etc.)(fonts, color, etc.)

► Exceptions:Exceptions: Confirmation of deletionConfirmation of deletion No password echoingNo password echoing LimitedLimited

Page 29: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Cater to Universal UsabilityCater to Universal Usability

►Recognize the needs of a diverse user Recognize the needs of a diverse user groupgroup

►Design for Design for plasticity plasticity (transformation of (transformation of content)content) Can be used on any type of displayCan be used on any type of display

►Novice -> ExpertNovice -> Expert►DisabledDisabled►Ex. cnn.comEx. cnn.com

Page 30: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Offer Informative FeedbackOffer Informative Feedback

► For every user action, the system should For every user action, the system should provide feedbackprovide feedback

► Frequency of task affects feedback typeFrequency of task affects feedback type Common tasks – modest feedbackCommon tasks – modest feedback Errors/uncommon tasks – substantial feedbackErrors/uncommon tasks – substantial feedback

► Visual approaches make feedback easyVisual approaches make feedback easy► Funny error messages: Funny error messages:

http://worsethanfailure.com/Articles/Pohttp://worsethanfailure.com/Articles/Pop-up_Potpourri_0x3a__Julialicious.aspxp-up_Potpourri_0x3a__Julialicious.aspx

►What’s wrong with the message when you What’s wrong with the message when you type in a wrong web address?type in a wrong web address?

Page 31: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Design Dialogs to Yield Design Dialogs to Yield ClosureClosure

► Action sequences should Action sequences should have a beginning, have a beginning, middle, and end.middle, and end.

► Feedback provides sense Feedback provides sense of accomplishmentof accomplishment

► Ex. Purchasing items via Ex. Purchasing items via internet has a clearly internet has a clearly defined step-by-step defined step-by-step processprocess

Page 32: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Permit easy reversal of Permit easy reversal of actionsactions

► As much as possible, As much as possible, actions should be reversibleactions should be reversible Trash canTrash can Relieves anxietyRelieves anxiety

►Design decision should Design decision should includeinclude History sizeHistory size What does it mean to undo What does it mean to undo

something?something?► Let the user Let the user knowknow they can they can

reverse an actionreverse an action

Page 33: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Support Internal Locus of Support Internal Locus of ControlControl

► Experienced operators want to feel in controlExperienced operators want to feel in control User is in charge of the interfaceUser is in charge of the interface Interface rapidly responds to the userInterface rapidly responds to the user

► Lack of control builds anxiety and dissatisfactionLack of control builds anxiety and dissatisfaction Surprising interface actionsSurprising interface actions Tedious actionsTedious actions Difficulty in obtaining necessary abilityDifficulty in obtaining necessary ability Difficulty in producing actionDifficulty in producing action Ex. LagEx. Lag

► Good rules: Good rules: Avoid acausality, make users initiators Avoid acausality, make users initiators rather than respondersrather than responders Ex. Sound when clicking on a linkEx. Sound when clicking on a link

Page 34: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Reduce Short-term Memory Reduce Short-term Memory LoadLoad

►Rule of thumb: Humans can remember Rule of thumb: Humans can remember 7 +/- 2 chunks of information7 +/- 2 chunks of information

►Displays kept simpleDisplays kept simple►Multiple page displays should be Multiple page displays should be

consolidatedconsolidated►Training if using codes, mnemonics, Training if using codes, mnemonics,

long sequence of actionslong sequence of actions►Online access to command-syntax, Online access to command-syntax,

abbreviations, codes, etc.abbreviations, codes, etc.

Page 35: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Prevent ErrorsPrevent Errors

► Limit errors a user can Limit errors a user can makemake Gray out menu items Gray out menu items

that don’t applythat don’t apply No characters in a No characters in a

numeric fieldnumeric field

► In case of errorsIn case of errors Detect errorDetect error Simple, constructive, Simple, constructive,

and specific instructionsand specific instructions Do not change system Do not change system

statestate

Page 36: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Prevent ErrorsPrevent Errors

► Error rate is typically higher than expectedError rate is typically higher than expected What are common errors for us?What are common errors for us?

► Coding, typing, dialing, grammarCoding, typing, dialing, grammar► How can we design software to reduce them?How can we design software to reduce them?

Better error messagesBetter error messages► Specific, positive, and constructiveSpecific, positive, and constructive

““Printer is off, please turn on” instead of “Illegal Operation” Helps Printer is off, please turn on” instead of “Illegal Operation” Helps fix current errorfix current error

► Helps reduce similar errorsHelps reduce similar errors► Increases satisfactionIncreases satisfaction

Reduce chance for errorReduce chance for error► Organizing info, screens, menusOrganizing info, screens, menus► Commands and menu choices should be distinctiveCommands and menu choices should be distinctive► State of the interface should be known (change cursor when State of the interface should be known (change cursor when

busy)busy)► Consistency of actions (Yes/No order of buttons)Consistency of actions (Yes/No order of buttons)

Page 37: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Prevent Prevent ErrorsErrors

► Correct actionsCorrect actions Elevator – can’t open Elevator – can’t open

doors until not movingdoors until not moving Aircraft engines – can’t Aircraft engines – can’t

go in reverse unless go in reverse unless landing gear is downlanding gear is down

Choose a date from a Choose a date from a visual calendar instead visual calendar instead of having them type it inof having them type it in

Cellphones let you Cellphones let you choose from recently choose from recently dialed #s or received dialed #s or received callscalls

Automatic command Automatic command completioncompletion

Spell checkerSpell checker

Page 38: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Prevent ErrorsPrevent Errors► Complete SequencesComplete Sequences

One action can perform a sequence of One action can perform a sequence of eventsevents► Ex. Left turn signalEx. Left turn signal

Same concept for interfacesSame concept for interfaces► Ex. Dialing in, scripts, macros, making a Ex. Dialing in, scripts, macros, making a

passage or all headings “bold”passage or all headings “bold”► Relieve operator attention/possibilities Relieve operator attention/possibilities

for errorfor error► What are atomic operations and what are What are atomic operations and what are

sequences that can be automatically sequences that can be automatically strung together?strung together?

Study usage, error patterns, and user Study usage, error patterns, and user preferences via user groups, studiespreferences via user groups, studies

Log errorsLog errors► Universal Usability can help lower Universal Usability can help lower

errorserrors Large buttons helps with readability, Large buttons helps with readability,

and reduces errorand reduces error

Page 39: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Integrating Automation while Integrating Automation while Preserving User ControlPreserving User Control

► AutomationAutomation Increases familiarityIncreases familiarity Increases over timeIncreases over time Improves speedImproves speed Reduces errorReduces error

► Why have humans if we can Why have humans if we can automate tasks?automate tasks? Real world is an Real world is an open systemopen system Computers are a Computers are a closed systemclosed system

► Humans are there forHumans are there for Unexpected situationsUnexpected situations Preserve safetyPreserve safety Avoid failuresAvoid failures Increase product qualityIncrease product quality

What’s the rightlevel of automationin this app?

Page 40: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Integrating Automation while Integrating Automation while Preserving User ControlPreserving User Control

► Example Air Traffic ControlExample Air Traffic Control Easy to automateEasy to automate Unpredictable events (weather, Unpredictable events (weather,

emergencies, etc.). Need ‘context’, emergencies, etc.). Need ‘context’, can’t jump in coldcan’t jump in cold

► Some real world situations are just Some real world situations are just too complex to modeltoo complex to model

► What happens if some parts of the What happens if some parts of the system go down?system go down?

► How can you be sure that the How can you be sure that the system can handle what will system can handle what will happen?happen? Regression testingRegression testing User testingUser testing

► Look at Box 2.3 on pg. 74Look at Box 2.3 on pg. 74

What’s the rightlevel of automationin this app?

Page 41: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

AutomationAutomation► Create tools to help w/ interfaces?Create tools to help w/ interfaces?► Create anthropomorphic agents that track Create anthropomorphic agents that track

user tendenciesuser tendencies Based on human-human interactionBased on human-human interaction Apple Computer bow-tied helperApple Computer bow-tied helper Microsoft’s BOB and ClippyMicrosoft’s BOB and Clippy Actually a long line of failures (ATMs, cars, Actually a long line of failures (ATMs, cars,

online help)online help)► Change interface based on user choicesChange interface based on user choices

Adaptive menusAdaptive menus► Pros: If using a few choices, makes it fasterPros: If using a few choices, makes it faster► Cons: Retention is poor, if user uses many Cons: Retention is poor, if user uses many

choices, this becomes much slower, users choices, this becomes much slower, users might miss an interface changemight miss an interface change

Email SPAM filtersEmail SPAM filters Amazon.com’s page that you builtAmazon.com’s page that you built

► Ethical concerns (agents that break Ethical concerns (agents that break security, etc.)security, etc.)

Page 42: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

ExampleExample►Five fastest places to click on for a Five fastest places to click on for a

right-handed user?right-handed user?

Page 43: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

ExampleExample►What affects time?What affects time?

Fitt’s law:MT = a + b log2(D/W +1)

MT is movement timea is approximate start /stop time for a given deviceb is the inherent speed of the deviceD is the distance that the user had to moveW is the target size

Page 44: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

TheoriesTheories► Tested, reliable, broadly applicableTested, reliable, broadly applicable► Descriptive and explanatoryDescriptive and explanatory

Help develop consistent terminology, actions, and objectsHelp develop consistent terminology, actions, and objects► PredictivePredictive

Execution time, pointing time, error ratesExecution time, pointing time, error rates Satisfaction, emotional reactionSatisfaction, emotional reaction Small group behavior, organizational dynamics, sociology -> collaboration Small group behavior, organizational dynamics, sociology -> collaboration

interfacesinterfaces► Types of Theories based on taskTypes of Theories based on task

Motor-taskMotor-task► Click on an iconClick on an icon► Fitt’s Law exampleFitt’s Law example

PerceptionPerception► Finding the computer iconFinding the computer icon► Predicting reading time for a task, visual task, etc.Predicting reading time for a task, visual task, etc.

CognitiveCognitive► Deciding which icon to click onDeciding which icon to click on► Memory of actions, problem solving, f(response time) = productivity Memory of actions, problem solving, f(response time) = productivity

Guidelines

Principles

Theories

Page 45: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

What makes good Design so What makes good Design so ImportantImportant

►Ratio completion time of novice to Ratio completion time of novice to expert users can be as high as:expert users can be as high as:

►100 to 1100 to 1

►Not many other fields or problems Not many other fields or problems have this disparity (Try to think of a have this disparity (Try to think of a comparable task!)comparable task!)

Page 46: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Web design theoryWeb design theory

► Information-architecture model with Information-architecture model with navigationnavigation

►Users typically forage for information, Users typically forage for information, and thus designers leave information and thus designers leave information scents (via links) to help users find what scents (via links) to help users find what they want.they want.

►ex. download demoex. download demo► Information-foraging theory attempts to Information-foraging theory attempts to

predict user success rates given a set of predict user success rates given a set of tasks and a web site.tasks and a web site.

Page 47: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

TaxonomyTaxonomy

► Part of a descriptive theoryPart of a descriptive theory► Classify a real world system into Classify a real world system into

categoriescategories► Let’s classify input devicesLet’s classify input devices

Direct vs. indirectDirect vs. indirect Linear vs. rotaryLinear vs. rotary Dimensions (1-3D)Dimensions (1-3D)

► Task, personality, user Task, personality, user experience, technical aptitudeexperience, technical aptitude

► Useful comparisons, organize Useful comparisons, organize topics, guide design, show where topics, guide design, show where new ideas might be needednew ideas might be needed

Page 48: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Levels of Analysis TheoriesLevels of Analysis Theories► Separate concepts into levels (used Separate concepts into levels (used

in software engineering, network in software engineering, network design)design)

► Foley (late 1970s)Foley (late 1970s)► Conceptual level Conceptual level – user’s mental – user’s mental

model. High level of what we are model. High level of what we are working with. (ex. painting working with. (ex. painting programs – either pixel or object programs – either pixel or object based [Powerpoint vs. paint])based [Powerpoint vs. paint])

► Semantic level Semantic level – meanings – meanings conveyed by user input and conveyed by user input and computer output (ex. ways to delete computer output (ex. ways to delete an object. delete-object action OR an object. delete-object action OR undo)undo)

► Syntactic level Syntactic level – user actions – user actions convey semantics (ex. select object, convey semantics (ex. select object, hit delete key OR click file->edit-hit delete key OR click file->edit->delete, then confirm)>delete, then confirm)

► Lexical level Lexical level – device – device dependencies, precise mechanisms dependencies, precise mechanisms (ex. 200 ms double click)(ex. 200 ms double click)

► Let’s create an example for the 3d Let’s create an example for the 3d problem of moving an object in VRproblem of moving an object in VR

► Not as useful for today’s GUI based Not as useful for today’s GUI based systemssystems

Page 49: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Stages of ActionStages of Action► Donald Norman (1988)Donald Norman (1988)► Simulate the stages of action that users go throughSimulate the stages of action that users go through

Form the goalForm the goal Form the intentionForm the intention Specify the actionSpecify the action Execute the actionExecute the action Perceive the system statePerceive the system state Interpret the system stateInterpret the system state Evaluate the outcomeEvaluate the outcome

► Ex. Insert a word into a documentEx. Insert a word into a document► Cycle of action and evaluationCycle of action and evaluation► Gulf of execution Gulf of execution (what you want vs. what you could (what you want vs. what you could

do)do)► Gulf of evaluation Gulf of evaluation (what you got vs. what you (what you got vs. what you

wanted)wanted)

I want to do something

Here’s how I need to do interactwith the system to accomplish it

Do it

See how it turned out

Page 50: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Stages of ActionStages of Action

► Four Components of Good DesignFour Components of Good Design 1. Make the system state and all action alternatives visible1. Make the system state and all action alternatives visible 2. Good conceptual model with consistent system image2. Good conceptual model with consistent system image 3. Interface should have good mappings between stages3. Interface should have good mappings between stages 4. Continuous feedback4. Continuous feedback

► Errors occur when transitioning from goals-Errors occur when transitioning from goals->intentions->actions->outcome>intentions->actions->outcome User forms inadequate goalsUser forms inadequate goals Cannot find the correct interface action to accomplish goalCannot find the correct interface action to accomplish goal Do not know how to specify correct set of actionsDo not know how to specify correct set of actions User receives poor feedbackUser receives poor feedback

► Which of them can be affected by good design?Which of them can be affected by good design?

Page 51: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Stages of ActionStages of Action

►Other domainsOther domains► Information-seeking:Information-seeking:

► Think about searching on the internet for a document or Think about searching on the internet for a document or looking for a restaurantlooking for a restaurant

► Stages of ActionStages of Action► Recognize and accept an information problemRecognize and accept an information problem► Define the problemDefine the problem► Choose a search systemChoose a search system► Form a queryForm a query► Execute the searchExecute the search► Examine the resultsExamine the results► Make judgmentsMake judgments► Extract informationExtract information► Reflect/iterate/stopReflect/iterate/stop

Page 52: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

GOMS and Keystroke-Level GOMS and Keystroke-Level ModelModel

► CMU (1980-1983)CMU (1980-1983)► Two modelsTwo models

GOMS – goals, operators, methods, and selection rulesGOMS – goals, operators, methods, and selection rules► User forms goals and subgoals (write a paper, insert word) User forms goals and subgoals (write a paper, insert word) ► User develop a series of operators – elementary acts (hit delete key, move hand to User develop a series of operators – elementary acts (hit delete key, move hand to

mouse, etc.)mouse, etc.)► User executes methods – highlights text, hits a keyUser executes methods – highlights text, hits a key► Selection relates to how the user selects between several methods (several ways to Selection relates to how the user selects between several methods (several ways to

delete a paragraph)delete a paragraph) Keystroke-LevelKeystroke-Level

► Predicts time for error-free expert performancePredicts time for error-free expert performance► Sum up times for keystrokes, pointing, homing, drawing, thinking, and waiting for the Sum up times for keystrokes, pointing, homing, drawing, thinking, and waiting for the

systemsystem► Mainly for experts, otherwise variance gets too large to be usefulMainly for experts, otherwise variance gets too large to be useful► Does not say how useful the system is to accomplish a goal (problem solving, Does not say how useful the system is to accomplish a goal (problem solving,

cognitive amplification, satisfaction, etc.)cognitive amplification, satisfaction, etc.)► Advances include conditional statements, incorporating judgment callsAdvances include conditional statements, incorporating judgment calls► Breaking things down like this allows for tools to be built to evaluate Breaking things down like this allows for tools to be built to evaluate

systemssystems► Case study: Using CPM-GOMS [cognitive, perceptual, motor] modeling, a Case study: Using CPM-GOMS [cognitive, perceptual, motor] modeling, a

telephone company saved $2million per year in operating costs.telephone company saved $2million per year in operating costs.

Page 53: Guidelines, Principles, and Theories User Interfaces and Usability CS5153

Challenges to HCI TheoriesChallenges to HCI Theories

► Theories should be more central to research Theories should be more central to research and practiceand practice Understand relationship between concepts and Understand relationship between concepts and

resultsresults Help designers understand tradeoffsHelp designers understand tradeoffs Short term for predictive theories, long term for Short term for predictive theories, long term for

descriptivedescriptive

► Theories should lead rather than lag behind Theories should lead rather than lag behind practicepractice Help design, refine, and Help design, refine, and suggestsuggest new products new products