Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
COMP30019 Graphics and InteractionHow Humans Work
Adrian Pearce
Department of Computer Science and Software EngineeringUniversity of Melbourne
The University of Melbourne
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Lecture outline
Human-Machine Interaction
Affordances
Mental Models
Human Virtual Machine
Design Theories
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Important Concepts
Norman’s model of human task performanceI affordancesI constraintsI natural mappingI visibilityI cultural expectationsI causalityI transfer effectsI mental models
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Norman’s Model of Task Performance
mental
Goals
Perception
Interpretation
Evaluation
ActionSpecification
Execution
Intention
activity
physicalactivity
expectation
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Example
Example of saving Emacs file
I Screengrab of Emacs window before toolbar save.I Screengrab of Emacs window after toolbar save.
What’s changed? What does it mean for the achievement of mygoal?
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Gulf of Execution
How do users know what to do to achieve their goal?I What actions are available?I Which one does what I want?
E.g., How do I save the document I’m working on?
The smaller the gulf the better.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Gulf of Evaluation
How do users know (evaluate) whether the action they chosehad the intended effect?
I Easily visible and interpretable feedback on effect ofactions
E.g., I clicked on the “save” menu item. How do I know that mydocument actually got saved?
The smaller the gulf the better.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Affordances
Visible properties of objects that suggest what can be donewith them—signals of use
I e.g., a suitable handle affords graspingI e.g., a suitable door-plate affords pushing
Norman: When simple things need an instruction manual, evena one-word manual, then design has failed.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
ConstraintsSome constraint on the use of objectsNorman’s Lego set construction example
Physical blocks fit together in only certain waysSemantic windscreen goes in front of rider
Cultural red light is tail lightLogical last part has to go in last available position
Some overlap between the concepts, affordance and variouskinds of constraints
I Sometimes a matter of interpretationI But usually distinction is reasonably clearI Cultural factors often escape notice
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Natural Mapping
Natural mapping between controls and effects
I E.g., position of light switches corresponds spatially withposition of lights
I E.g., Turning steering wheel to left makes car go to leftI E.g., Grouping of GUI controls by related function
Mainly geometric, but other modalities possible
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Visibility and Feedback
Visibility of possible actions
Visibility of state of system
Visibility of effects of actions (feedback)I should be immediate and unambiguous
Mainly visual, but other modalities possible, e.g., sound, touch
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Cultural Expectations
Light switchesI up is on, down is off versus up is off, down is on
Water tapsI hot on left or right?I clockwise or anticlockwise to turn off?
Various “trash” and “mailbox” icons
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Figure 6: Which is the cold tap?
nothing like any mailbox in my culture? We’ll look at this issue at greaterdepth later under the topic of internationalization.
Even things that are so widespread as to be almost universal are still cul-turally dependent. Consider the various symbols used for “play”, “pause”,“fast forward”, “rewind”, etc., originally on audio tape decks and VCRs, nowcarried across into various software media players. Even though widely used,and in some ways suggestive of their meanings, they are still just arbitrarysymbols, invested with their meanings by a (mostly) shared culture. Theycould easily have been different. Even today, there is variability in inter-pretation: On different media players I use, the “fast forward” symbol canvariously mean: “playback faster”, “skip to next (DVD) chapter”, or “skipto next playlist item”.
Causality
• How do you infer what causes what?
• People often assume that what happens immediately after an action iscaused by it.
• Probably correct most of the time, but can lead to imputing falsecausality.
13
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Which is the cold tap?
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Causality
How do you infer what causes what?I People often assume that what happens immediately after
an action is caused by it.
Probably correct most of the time, but can lead to imputing falsecausality.
I E.g., start an unfamiliar application, and just then yourcomputer crashes.
I Did the program cause the crash, or was it justcoincidence?
I Can lead to superstitious behavior.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Transfer Effects
I People transfer their learning and expectations to objectsperceived to be similar
I E.g.I typewriter to computerI MacOSX: delete files by dragging them to the trash.
But also to “eject” media.I Cuts both ways, depending on how it’s used
I Can speed learning and be a source of helpful metaphorsI Can lead to confusion and mistakes
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
InterplayThere is an interplay between all these factors in good design:
I e.g., key in lockI lock affords insertion of the keyI for many locks the key will fit in only one way up, and which
way isn’t obvious
One solution: increase visibility by distinctive designI e.g., T cross-section key and lock
Another solution: symmetric design, key will fit either way up(like most car keys)
I cultural factors in that we’re used to putting keys in locks
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Some Design Guidelines
Know your user
Provide a good conceptual model
Make things visibleI link intentions, actions, resultsI provide visible affordances, mappings, constraints
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Important ConceptsRevisited
Norman’s model of human task performanceI affordancesI constraintsI natural mappingI visibilityI cultural expectationsI causalityI transfer effectsI mental models
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Mental ModelsUser’s mental model
I what “mental picture” the user has of the system
System modelI how the system actually works: the designers’ mental
modelI unnecessarily inflicting system model on user is a common
failing
System imageI what the system presents to the userI may hide system model
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
ExamplesHot and cold water
I system model: separate controllable supplies of hot andcold water
I user’s task: obtain desired flow of water at desiredtemperature
I traditional two-tap user interface doesn’t hide systemmodel
I 2-dof single-lever supply provides a more usable systemimage
I up-down controls flow (which way?)I left-right controls temperature (which way?)
Files and directories versus documents and folders
Colour chooser: RGB numbers versus hue-saturation colourwheel with intensity slider/dialAdrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Colour Chooser
Figure 7: Color chooser.
User’s Mental Model
• Can be static or dynamic—runnable
• runnable models are, in effect, internal simulations
– causality, sequencing
Model Acquisition
Users acquire mental models by:
• using the system
• being taught
• reading documentation
• observing other users
• transfer from similar systems or real-world domains
19
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
User’s Mental Model
Can be static or dynamic—runnable
Runnable models are, in effect, internal simulationsI causality, sequencing
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Model Acquisition
Users acquire mental models by:I using the systemI being taughtI reading documentationI observing other usersI transfer from similar systems or real-world domains
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Models—Comments
I Difficult to infer what a user’s mental model is.I Mental model guides user’s interaction.I User’s mental model may be faulty.I Design to help users acquire effective mental models.I Take user’s mental model into account in walkthroughs:
I how mental model affects user’s selection of actions andinterpretation of responses,
I how interaction with system affects user’s mental model.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Some Common Forms of Mental Model
I state-transition modelsI object-action modelsI mapping modelsI analogies (metaphors)
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
State-transition models
Based on observed changes in system’s overall state
I e.g., telephone dialling
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Object-action models
Users see system in terms of objects, their respective statesand attributes, causal relationships, and of actions that can beperformed on the objects
I e.g., typical GUI desktop
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Mapping models
Users know how to map intentions into “canned” actionsequences
I e.g., :wq<return> in vi
I e.g., double-click, control-I to italicize a wordI e.g., common four-function calculator
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Analogies (metaphors)
I e.g., ubiquitous desktop metaphor
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Models and Interaction Styles
Particular kinds of mental models tend to go hand in hand withparticular interaction styles, e.g.
I object-action model with direct-manipulation interfaceI state-transition model with function-key interface
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Mixtures of Models
Users may use mixtures of models, e.g.:I state-transition model for an individual object in an overall
object-action modelI experienced users may use mapping model for speed in
normal operation, then fall back on deeper model whenthings go wrong
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Kinds of Theories Useful in DesignExplanatory theories
I e.g., turn-taking in conversations
Empirical laws
I e.g., Hick’s Law T = k log2(n + 1) for selecting from menus
Dynamic modelsI e.g., KLM, Keystroke-Level ModellingI Fitts’s LawI May be partially empirical (e.g., values of model
parameters)
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Keystroke-Level Modelling (KLM)
Card et al. (1983)
Operator Description Typical time(seconds)
K Press key or button 0.50 (0.08–1.2)P Point with mouse to target
on display1.10
H Home hand(s) on keyboardor other device
0.40
M Mentally prepare 1.35R(t) Response by system t
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
GOMS
KLM is example of GOMS analysisGoal What the user is trying to achieve
Operators Basic operations available to userMethods Procedures, sequences of operators, for achieving
a goalSelection rules Invoked to choose a methodGOMS analysis most applicable when choice of methods islimited.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
KLM Rules for Placing M Operators
Rule 0. Insert Ms in front of all Ks that are not part of text or numericargument strings proper (e.g., text or numbers).Place Ms in front of all Ps that select commands (notarguments).
Rule 1. If an operator following an M is fully anticipated in an operatorjust previous to M, then delete the M (e.g., PMK gives PK).
Rule 2. If a string of MKs belongs to a cognitive unit (e.g., the nameof a command), then delete all Ms but the first.
Rule 3. If a K is a redundant terminator (e.g., the terminator of acommand immediately following the terminator of itsargument), then delete the M in front of it.
Rule 4. If a K terminates a constant string (e.g., a command name),then delete the M in front of it; but if the K terminates avariable string (e.g., an argument string) then keep the M infront of it.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Human Information Processing Cycle Times
Again, from Card et al. (1983)
Subsystem Average Cycle Time RangePerceptual 100 50–200Cognitive 70 25–170Motor 70 30–100
Times are in milliseconds
I Note, typical neural firing time is 5–10ms.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Perceive/Think/Act Cycle
50−200ms
Subsytem
30−100ms
Act
Think
Perceive
Cognitive
Subsystem
25−170ms
Perceptual
Subsystem
Motor
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Fitts’s LawDerivation
I x0 – initial distance to cover, amplitude AI x1 – remaining distance after first “move” (error)I x2 – . . . after second “move”I . . .
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Fitts’s LawDerivation, comments
I Assume constant relative error, xnxn−1
≈ ε.I Geometric sequence of errors.I Want error to be less that half target width.I Leads to logarithmic formula, number of steps, each
assumed to take approx. constant cycle time.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Fitts’s LawFormulation
I Original formulation of Fitts’s Law (1954) is
Tpos = K log2(2A/W )
I Empirically modified version(MacKenzie, 1992):
Tpos = K log2(A/W + 1)
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Implications of Fitts’s Law
I Closer is betterI pop-up menus at current positionI menu orderingI pie-menus
I Bigger is betterI competition for screen real-estateI variable-size buttonsI keyboard key sizesI non-uniform menus
I Roughly logarithmic dependencyI “Infinite” targetsI Screen-edge capture effects
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Dashed
Plain
Double
Arrow
Custom
DblArrow
Line
Type
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Exploratory Learning
Learning how to use an unfamiliar system through exploration(Polson & Lewis, 1990)Goal setting Users start with a rough description of what they
want to accomplish—a task.Exploration Users explore the system’s interface to discover
actions useful in accomplishing their current task.Selection Users select actions that they think will accomplish
their current task.Assessment Users assess progress by trying to understand
system response.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Social and Organizational Issues in HCI
I People rarely perform a complex task in isolation,I almost always in collaboration with other people.I These interactions may not be formalized, may be
overlooked, but can be of great importance.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work
Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories
Conceptual Design Heuristics
I Choose the mental model you intend the user to adopt.I Link your choice of mental model to your choice of
interaction style.I Hide aspects of system model that conflict with user’s
performance.I Exploit the system image to convey the intended mental
model.I Ensure currency and consistency of system image.
Adrian Pearce University of Melbourne
COMP30019 Graphics and Interaction How Humans Work