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 Goals expectation Intention Evaluation Action Interpretation Specification Execution Perception mental activity physical activity 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