COMP30019 Graphics and Interaction How Humans Work Adrian Pearce - - PowerPoint PPT Presentation

Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories

COMP30019 Graphics and Interaction How Humans Work

Adrian Pearce

Department of Computer Science and Software Engineering University 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 performance

◮ affordances ◮ constraints ◮ natural mapping ◮ visibility ◮ cultural expectations ◮ causality ◮ transfer effects ◮ 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 Action Specification Execution Intention

activity physical activity 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

◮ Screengrab of Emacs window before toolbar save. ◮ Screengrab of Emacs window after toolbar save.

What’s changed? What does it mean for the achievement of my goal?

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?

◮ What actions are available? ◮ 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 chose had the intended effect?

◮ Easily visible and interpretable feedback on effect of

actions E.g., I clicked on the “save” menu item. How do I know that my document 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 done with them—signals of use

◮ e.g., a suitable handle affords grasping ◮ e.g., a suitable door-plate affords pushing

Norman: When simple things need an instruction manual, even a 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

Constraints

Some constraint on the use of objects Norman’s Lego set construction example Physical blocks fit together in only certain ways Semantic windscreen goes in front of rider Cultural red light is tail light Logical last part has to go in last available position Some overlap between the concepts, affordance and various kinds of constraints

◮ Sometimes a matter of interpretation ◮ But usually distinction is reasonably clear ◮ 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

◮ E.g., position of light switches corresponds spatially with

position of lights

◮ E.g., Turning steering wheel to left makes car go to left ◮ 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)

◮ 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 switches

◮ up is on, down is off versus up is off, down is on

Water taps

◮ hot on left or right? ◮ 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 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?

◮ 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 false causality.

◮ E.g., start an unfamiliar application, and just then your

computer crashes.

◮ Did the program cause the crash, or was it just

coincidence?

◮ 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

◮ People transfer their learning and expectations to objects

perceived to be similar

◮ E.g.

◮ typewriter to computer ◮ MacOSX: delete files by dragging them to the trash.

But also to “eject” media.

◮ Cuts both ways, depending on how it’s used

◮ Can speed learning and be a source of helpful metaphors ◮ 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

Interplay

There is an interplay between all these factors in good design:

◮ e.g., key in lock ◮ lock affords insertion of the key ◮ for many locks the key will fit in only one way up, and which

way isn’t obvious One solution: increase visibility by distinctive design

◮ e.g., T cross-section key and lock

Another solution: symmetric design, key will fit either way up (like most car keys)

◮ 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 visible

◮ link intentions, actions, results ◮ 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 Concepts

Revisited

Norman’s model of human task performance

◮ affordances ◮ constraints ◮ natural mapping ◮ visibility ◮ cultural expectations ◮ causality ◮ transfer effects ◮ 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 Models

User’s mental model

◮ what “mental picture” the user has of the system

System model

◮ how the system actually works: the designers’ mental

model

◮ unnecessarily inflicting system model on user is a common

failing System image

◮ what the system presents to the user ◮ 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

Examples

Hot and cold water

◮ system model: separate controllable supplies of hot and

cold water

◮ user’s task: obtain desired flow of water at desired

temperature

◮ traditional two-tap user interface doesn’t hide system

model

◮ 2-dof single-lever supply provides a more usable system

image

◮ up-down controls flow (which way?) ◮ left-right controls temperature (which way?)

Files and directories versus documents and folders Colour chooser: RGB numbers versus hue-saturation colour wheel with intensity slider/dial

Adrian Pearce University of Melbourne COMP30019 Graphics and Interaction How Humans Work

Human-Machine Interaction Affordances Mental Models Human Virtual Machine Design Theories

Colour Chooser

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 simulations

◮ 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:

◮ using the system ◮ being taught ◮ reading documentation ◮ observing other users ◮ 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

◮ Difficult to infer what a user’s mental model is. ◮ Mental model guides user’s interaction. ◮ User’s mental model may be faulty. ◮ Design to help users acquire effective mental models. ◮ Take user’s mental model into account in walkthroughs:

◮ how mental model affects user’s selection of actions and

interpretation of responses,

◮ 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

◮ state-transition models ◮ object-action models ◮ mapping models ◮ 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

◮ 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 states and attributes, causal relationships, and of actions that can be performed on the objects

◮ 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” action sequences

◮ e.g., :wq<return> in vi ◮ e.g., double-click, control-I to italicize a word ◮ 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)

◮ 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 with particular interaction styles, e.g.

◮ object-action model with direct-manipulation interface ◮ 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.:

◮ state-transition model for an individual object in an overall

• bject-action model

◮ experienced users may use mapping model for speed in

normal operation, then fall back on deeper model when things 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 Design

Explanatory theories

◮ e.g., turn-taking in conversations

Empirical laws

◮ e.g., Hick’s Law T = k log2(n + 1) for selecting from menus

Dynamic models

◮ e.g., KLM, Keystroke-Level Modelling ◮ Fitts’s Law ◮ 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

• n display

1.10 H Home hand(s) on keyboard

• r other device

0.40 M Mentally prepare 1.35 R(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 analysis Goal What the user is trying to achieve Operators Basic operations available to user Methods Procedures, sequences of operators, for achieving a goal Selection rules Invoked to choose a method GOMS analysis most applicable when choice of methods is limited.

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 numeric argument strings proper (e.g., text or numbers). Place Ms in front of all Ps that select commands (not arguments). Rule 1. If an operator following an M is fully anticipated in an operator just 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 name

• f a command), then delete all Ms but the first.

Rule 3. If a K is a redundant terminator (e.g., the terminator of a command immediately following the terminator of its argument), 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 a variable string (e.g., an argument string) then keep the M in front 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 Range Perceptual 100 50–200 Cognitive 70 25–170 Motor 70 30–100 Times are in milliseconds

◮ 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 Law

Derivation

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

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 Law

Derivation, comments

◮ Assume constant relative error, xn xn−1 ≈ ǫ. ◮ Geometric sequence of errors. ◮ Want error to be less that half target width. ◮ 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 Law

Formulation

◮ Original formulation of Fitts’s Law (1954) is

Tpos = K log2(2A/W)

◮ 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

◮ Closer is better

◮ pop-up menus at current position ◮ menu ordering ◮ pie-menus

◮ Bigger is better

◮ competition for screen real-estate ◮ variable-size buttons ◮ keyboard key sizes ◮ non-uniform menus

◮ Roughly logarithmic dependency ◮ “Infinite” targets ◮ Screen-edge capture effects

Adrian Pearce University of Melbourne COMP30019 Graphics and Interaction How Humans Work

Dashed Plain Double Arrow Custom Dbl Arrow 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

◮ People rarely perform a complex task in isolation, ◮ almost always in collaboration with other people. ◮ These interactions may not be formalized, may be

• verlooked, 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

◮ Choose the mental model you intend the user to adopt. ◮ Link your choice of mental model to your choice of

interaction style.

◮ Hide aspects of system model that conflict with user’s

performance.

◮ Exploit the system image to convey the intended mental

model.

◮ Ensure currency and consistency of system image.

Adrian Pearce University of Melbourne COMP30019 Graphics and Interaction How Humans Work