Lecture 4 Models and Metaphors Terry Winograd CS147 - Introduction - PowerPoint PPT Presentation

Lecture 4 – Models and Metaphors Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006 CS147 - Terry Winograd - 1

Learning Goals • Understand the use of metaphors in designing interfaces and be able to choose them appropriately • Understand the need for a clear conceptual model in interface design and be able to analyze and create appropriate models for specific applications CS147 - Terry Winograd - 2

Conceptual Models • In interacting with any system (software or others), a person has a concept of what the system is: what its components are, what properties they have, and what interactions they can enter into. This conceptual model underlies the more specific aspects of interface, such as screen representations and command structures. CS147 - Terry Winograd - 3

Metaphors • A key issue in software design is to make the model as clear and comprehensible as possible, and to relate it appropriately to the person's models based on prior experience with other systems and aspects of ordinary life. • Metaphors can help the designer communicate the mental model based on the user’s prior understanding. CS147 - Terry Winograd - 4

Three Paradigms [Cooper] • Technology paradigm – To use the device (or program) you need to understand the mechanism • Metaphor paradigm – Let users apply what they know from some familiar part of life in understanding the interface • Idiomatic Paradigm – Design simple interactions and imbue them with meaning CS147 - Terry Winograd - 5

The Desktop Metaphor – Xerox Star, 1981 CS147 - Terry Winograd - 6

Icons for Familiar Office Objects CS147 - Terry Winograd - 7

Notebook Metaphor – Penpoint, 1991 CS147 - Terry Winograd - 8

The House Metaphor – Microsoft Bob, 1995 CS147 - Terry Winograd - 9

PDA – Magic House for a Cap 1994 CS147 - Terry Winograd - 13

Virtual World metaphor Secondlife.com There.com CS147 - Terry Winograd - 14

Bookshelf Metaphor CS147 - Terry Winograd - 15

Web Book – Xerox PARC CS147 - Terry Winograd - 16

Physical Device Metaphors Apple Quicktime 4.0 CS147 - Terry Winograd - 17

Conversational Agents CS147 - Terry Winograd - 18

Clippy - Microsoft CS147 - Terry Winograd - 19

Three basic physical interaction metaphors • Manipulation: –Desktop, notebook,… • Navigation: –WWW, virtual spaces… • Conversation: –Speech, agents… CS147 - Terry Winograd - 20

Transporting metaphor vs. Familiarizing metaphor [Heckel and Clanton] • Provide a structure that can be learned and that enables new kinds of applications CS147 - Terry Winograd - 21

The Spreadsheet – Visicalc, 1979 CS147 - Terry Winograd - 22

Timeline Metaphor - Lifestreams, 1997 CS147 - Terry Winograd - 23

Map Metaphor(s) CS147 - Terry Winograd - 24

Map Metaphor(s) CS147 - Terry Winograd - 25

Collaborative Tagging CS147 - Terry Winograd - 26

Three design aspects [Liddle] • Conceptual model • Information display • Control mechanism CS147 - Terry Winograd - 27

Conceptual Model • User’s concept of (software) system she interacts with – Components, properties, interactions • Goal in interaction design – Clear, comprehensible model CS147 - Terry Winograd - 28

Three models of the same system • Designer’s model • User's model • System image CS147 - Terry Winograd - 29

How do conceptual models present themselves to the user of a system? • Implied by the interface metaphor • Design of affordances – (e.g., how much lights up when you do a selection) • Responses to actions • Use of natural language terms – (e.g., "page, kill, trash") which have prior understandings. – In documentation, help, tutorials, etc. – In menus, dialog boxes, etc. CS147 - Terry Winograd - 30

Example: Word processing • Uses metaphors from many worlds – language, direct manipulation, typewriter, teletype, typography&printing • Many conceptual model differences between alternative applications CS147 - Terry Winograd - 31

Example: Formatting a Paper • What kinds of page elements are manipulable as distinct objects? • What aspects of their layout can you control? • What happens when you make changes? • What is the overall conceptual model for how things are laid out onto pages? • For that matter, what is a "page" CS147 - Terry Winograd - 32

The Target Layout CS147 - Terry Winograd - 33

Microsoft Word Page and column margins Section with 1 column Section with 2 columns Section with 2 columns Some paragraphs CS147 - Terry Winograd - 34

Table 3 row, 2 col Table 1 row, 2 col Table 1 row, 2 col HTML CS147 - Terry Winograd - 35 Some paragraphs

HTML Source The Overface A key design criterion for our environment <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> is to provide support on a variety of devices <html><head> <title>Untitled Document</title></head> for <body> </td> <td width="50%" align="TOP"> <center>Barehands: existing modes of .... Implement-Free Interaction with a Wall-Mounted These include: Display</center> <table width="310" border="0" cellspacing="2" <table width="649" border="0" cellspacing="2" cellpadding="0"> cellpadding="0"> <tbody> <tbody> <tr> <tr valign="Top"> <td width="51%"> <td width="9%" align="TOP">• </td> <td width="91%"> <center>Meredith Ringel device Computer Science Department augmentation ...screen) Brown University </td> Providence, RI 02912 </tr> mringel@cs.brown.edu <tr valign="Top"> </center> <td width="9%">•</td> </td> <td width="91%"> <td width="49%"> multi-device ... wall-screen) <center>Henry Berg, Yuhui Jin, Terry Winograd </td> Computer Science Department </tr> Stanford University <tr valign="Top"> Stanford, CA 94305-9035 <td width="9%">•</td><td width="91%"> {hgberg, yhjin, winograd}@cs.stanford.edu meta-screen </center> ...display) </td> </td> </tr> </tr> </tbody> </tbody> </table> </table> <table border="0" cellspacing="2" cellpadding="10"> <tbody> <tr> <center><img <td width="50%"> src="../../../../../../Program%20Files/Adobe/PageMill%203.0/Pag ABSTRACT align="Baseline" border="0" naturalsizeflag="3"> We describe Barehands,...interactive surfaces. </center> Keywords Interaction technique, ... interaction tool. FIGURE 1: Projection, ... analysis. face="Arial">INTRODUCTION </tr> As part of our project ...surface. </tbody> Barehands ... </table> techniques. </body></html> CS147 - Terry Winograd - 36

Lecture 4 Models and Metaphors Terry Winograd CS147 - Introduction - PowerPoint PPT Presentation

Lecture 4 Models and Metaphors Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006 CS147 - Terry Winograd - 1 Learning Goals Understand the use of

Models for our Planet Metaphors for our World Islands: Models for our Planet Metaphors for

Chapter 7 Friday, February 05, 1999 Interface Metaphors and Conceptual Models Preview of

Models & Metaphors Normans Gulfs Cues Errors Metaphors Jrg Cassens Tutorial

METAPHORS WE COMPUTE BY THE YEAR IS 1980 GEORGE LAKOFF & MARK JOHNSON METAPHORS WE LIVE BY

A frame-based analysis of synaesthetic metaphors W. Petersen, J. Fleischhauer, H. Beseoglu, P .

+ The many uses of imageries and metaphors in problem gambling counselling Lowell Wan &

Inves&ga&ng the use of violence metaphors by

Personality as an Emergent Process: Some Metaphors/Speculation Steven N. Durlauf University of

Principles of neural network design Francois Belletti, CS294 RISE Human brains as metaphors of

Metaphors for good and bad deaths in interviews

The role of metaphors in the recent history of the way -construction Florent Perek University of

Useless Metaphors? Useless Metaphors? Why Specifying Security Why Specifying Security is So

Lecture 05:Examples of & Metrics for Process Models what are the constituting elements of

Forward and Inverse Models in the Cerebellum Computational Models of Neural Systems Lecture 2.3

Lecture Outline Regeltechniek Previous lecture: representation of dynamic models, transfer func-

Math 211 Math 211 Lecture #5 Models of Motion September 6, 2002 2 Models of Motion Models of

Math 211 Math 211 Lecture #5 Models of Motion September 5, 2003 2 Models of Motion Models of

Probabilistic Graphical Models Lecture 12 Dynamical Models CS/CNS/EE 155 Andreas Krause

Lecture 5 : Sparse Models Homework 3 discussion (Nima) Sparse Models Lecture - Reading :

Lecture 8 AR, MA, and ARMA Models 9/27/2018 1 AR models AR(p) models We can generalize from

Database Management Objectives of Lecture 7 Systems Transactions Models Transactions Models

EE359 Lecture 2 Outline TX and RX Signal Models Path Loss Models Free-space and

4 Why do we need channel models? Lecture no: Narrowband models Review of properties

Lecture Outline Systeem- en Regeltechniek II Previous lecture: State-space models,

Lecture 4 Models and Metaphors Terry Winograd CS147 - Introduction - PowerPoint PPT Presentation

Lecture 4 Models and Metaphors Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006 CS147 - Terry Winograd - 1 Learning Goals Understand the use of

Models for our Planet Metaphors for our World Islands: Models for our Planet Metaphors for

Chapter 7 Friday, February 05, 1999 Interface Metaphors and Conceptual Models Preview of

Models &amp; Metaphors Normans Gulfs Cues Errors Metaphors Jrg Cassens Tutorial

METAPHORS WE COMPUTE BY THE YEAR IS 1980 GEORGE LAKOFF &amp; MARK JOHNSON METAPHORS WE LIVE BY

A frame-based analysis of synaesthetic metaphors W. Petersen, J. Fleischhauer, H. Beseoglu, P .

+ The many uses of imageries and metaphors in problem gambling counselling Lowell Wan &amp;

Inves&amp;ga&amp;ng the use of violence metaphors by

Personality as an Emergent Process: Some Metaphors/Speculation Steven N. Durlauf University of

Principles of neural network design Francois Belletti, CS294 RISE Human brains as metaphors of

Metaphors for good and bad deaths in interviews

The role of metaphors in the recent history of the way -construction Florent Perek University of

Useless Metaphors? Useless Metaphors? Why Specifying Security Why Specifying Security is So

Lecture 05:Examples of &amp; Metrics for Process Models what are the constituting elements of

Forward and Inverse Models in the Cerebellum Computational Models of Neural Systems Lecture 2.3

Lecture Outline Regeltechniek Previous lecture: representation of dynamic models, transfer func-

Math 211 Math 211 Lecture #5 Models of Motion September 6, 2002 2 Models of Motion Models of

Math 211 Math 211 Lecture #5 Models of Motion September 5, 2003 2 Models of Motion Models of

Probabilistic Graphical Models Lecture 12 Dynamical Models CS/CNS/EE 155 Andreas Krause

Lecture 5 : Sparse Models Homework 3 discussion (Nima) Sparse Models Lecture - Reading :

Lecture 8 AR, MA, and ARMA Models 9/27/2018 1 AR models AR(p) models We can generalize from

Database Management Objectives of Lecture 7 Systems Transactions Models Transactions Models

EE359 Lecture 2 Outline TX and RX Signal Models Path Loss Models Free-space and

4 Why do we need channel models? Lecture no: Narrowband models Review of properties

Lecture Outline Systeem- en Regeltechniek II Previous lecture: State-space models,

Models & Metaphors Normans Gulfs Cues Errors Metaphors Jrg Cassens Tutorial

METAPHORS WE COMPUTE BY THE YEAR IS 1980 GEORGE LAKOFF & MARK JOHNSON METAPHORS WE LIVE BY

+ The many uses of imageries and metaphors in problem gambling counselling Lowell Wan &

Inves&ga&ng the use of violence metaphors by

Lecture 05:Examples of & Metrics for Process Models what are the constituting elements of