Guidelines, Principles, Guidelines, Principles, and Theoriesand Theories

Human Computer InteractionHuman Computer Interaction

CIS 6930/4930CIS 6930/4930

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 experienceReminders based on 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

GuidelinesGuidelines

► Specific and practicalSpecific and practical Cures for design Cures for design

problemsproblems 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 design team (good because of large visual because of large visual component)component)

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?

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 to Not 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?

Navigating the InterfaceNavigating the Interface

► Example from National Cancer InstituteExample from National Cancer Institute http://www.nci.nih.gov/http://www.nci.nih.gov/ 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?

Navigating the InterfaceNavigating the Interface

►User: Novice, Intermediate, ExpertUser: Novice, Intermediate, Expert►Task: Education, Search, ResearchTask: Education, Search, Research►Standardize task sequencesStandardize task sequences►Ensure that embedded links are Ensure that embedded links are

descriptivedescriptive►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 Use thumbnail images to preview

larger imageslarger images

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?

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

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

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)

Get the user’s attentionGet the user’s attention

► User sees most data in front User sees most data in front of themof them

► Urgent, exceptional, and Urgent, exceptional, and time-dependent conditions time-dependent conditions need to be brought forwardneed to be brought forward

► Ex. games and damage Ex. games and damage (visual, audio)(visual, audio)

► Intensity – two levels only, Intensity – two levels only, limited use of high intensitylimited use of high intensity

► Marking – underlines, box, Marking – underlines, box, arrows, asterisk, bullet, arrows, asterisk, bullet, dash, Xdash, X

► Size – Up to 4 sizesSize – Up to 4 sizes► Fonts – three fontsFonts – three fonts

Get the user’s attentionGet the user’s attention

► Inverse video – Inverse video – inverse coloringinverse coloring

►Question – which two Question – which two colors are most colors are most noticeable to noticeable to humans?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 Multiple levels are

difficult to distinguishdifficult to distinguish Voice is cognitively Voice is cognitively

expensiveexpensive

Get the user’s attentionGet the user’s attention

► Danger in overusing Danger in overusing the abovethe above Animation should provide Animation should provide

needed information needed information (including progress)(including progress)

Similarly highlighted Similarly highlighted items imply relationshipsitems imply relationships

Novices: simple, logically Novices: simple, logically organized, well-labeled organized, well-labeled displaysdisplays

Experts: shorter labels, Experts: shorter labels, more flexibility, subtle more flexibility, subtle highlight of changed highlight of changed valuesvalues

► Test w/ user groupsTest w/ user groups

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

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

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

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

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

Knowledge-able Knowledge-able Intermittent Intermittent

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

managers and code/word managers and code/word processors. Me and the UF processors. Me and the UF travel formstravel forms

► 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

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

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

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 many = need special cases, inflexible, frustratingToo many = 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

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

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

Choose an Interaction StyleChoose an Interaction Style

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

requires clarification requires clarification dialog, require more dialog, require more work to clean upwork to clean up

► Ex.Ex. let’s figure out how let’s figure out how to specify the date in to specify the date in each of the above each of the above methods.methods.

► Could use more than Could use more than oneone

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.► Homework 2Homework 2: Find an example of a UI that : Find an example of a UI that

conforms to each of the above, and one that does conforms to each of the above, and one that does not.not.

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

Cater to Universal UsabilityCater to Universal Usability

►Recognize the Recognize the needs of a diverse needs of a diverse user groupuser group

►Design for Design for plasticity plasticity (transformation of (transformation of content)content)

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

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 the message when you type What’s wrong the message when you type in a wrong web address?in a wrong web address?

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

Permit easy reversal of Permit easy reversal of actionsactions

► As much as possible, actions As much as possible, actions should be reversibleshould 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

Support Internal Locus of Support Internal Locus of ControlControl

► Experiences operators want to feel in controlExperiences 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

► Builds anxiety and dissatisfactionBuilds 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

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.

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

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)

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

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”► Waypoints Waypoints ► Relieve operator attention/possibilities for Relieve operator attention/possibilities for

errorerror► 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 errorsUniversal Usability can help lower errors

Large buttons helps with readability, and Large buttons helps with readability, and reduces errorreduces error

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?

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. 79Look at Box 2.3 on pg. 79

What’s the rightlevel of automationin this app?

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

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

right-handed user?right-handed user?

ExampleExample►What affects time?What affects time?

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

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!)

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.

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 (virtual characters), Task (virtual characters), personality, user experience, personality, user experience, technical aptitude, taxonomies technical aptitude, taxonomies

► 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

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

(software engineering, network (software engineering, network design)design)

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

modal. High level of what we are modal. High level of what we are working with. (ex. painting programs working with. (ex. painting programs – either pixel or object based – either pixel or object based [Powerpoint vs. paint])[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 files, convey semantics (ex. select files, 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

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

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?

Stages of ActionStages of Action

►Other domainsOther domains Information-seekingInformation-seeking

►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►Extra infoExtra info► Iterate/stopIterate/stop

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

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, cognitive Does not say how useful the system is to accomplish a goal (problem solving, cognitive

amplification, satisfaction, etc.)amplification, satisfaction, etc.)► Let’s look at a GOMS sheet on Pg. 89Let’s look at a GOMS sheet on Pg. 89► 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.

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