COMP30019 Graphics and Interaction How Humans Work · 2011-08-26 · Design Theories Adrian Pearce ... I Can lead to confusion and mistakes Adrian Pearce University of Melbourne COMP30019

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


Lecture outline

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




Norman’s Model of Task Performance

mental

Goals

Perception

Interpretation

Evaluation

ActionSpecification

Execution

Intention

activity

physicalactivity

expectation




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?




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.




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.




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.




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




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




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




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







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




Which is the cold tap?




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.




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




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




Some Design Guidelines

Know your user

Provide a good conceptual model

Make things visibleI link intentions, actions, resultsI provide visible affordances, mappings, constraints




Important ConceptsRevisited

Norman’s model of human task performanceI affordancesI constraintsI natural mappingI visibilityI cultural expectationsI causalityI transfer effectsI mental models




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




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



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




User’s Mental Model

Can be static or dynamic—runnable

Runnable models are, in effect, internal simulationsI causality, sequencing




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




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.




Some Common Forms of Mental Model

I state-transition modelsI object-action modelsI mapping modelsI analogies (metaphors)




State-transition models

Based on observed changes in system’s overall state

I e.g., telephone dialling




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




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




Analogies (metaphors)

I e.g., ubiquitous desktop metaphor




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




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




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)




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




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.




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.




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.




Perceive/Think/Act Cycle

50−200ms

Subsytem

30−100ms

Act

Think

Perceive

Cognitive

Subsystem

25−170ms

Perceptual

Subsystem

Motor




Fitts’s LawDerivation

I x0 – initial distance to cover, amplitude AI x1 – remaining distance after first “move” (error)I x2 – . . . after second “move”I . . .




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.




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)




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



Dashed

Plain

Double

Arrow

Custom

DblArrow

Line

Type


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.




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.




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.



Documents

COMP30019 Graphics and Interaction How Humans Work · 2011-08-26 · Design Theories Adrian Pearce ... I Can lead to confusion and mistakes Adrian Pearce University of Melbourne COMP30019