Terry Winograd CS247 - Human-Computer Interaction Design ...CS247 - Terry Winograd - 3 Three...
20
CS247 - Terry Winograd - 1 Models and Metaphors Terry Winograd CS247 - Human-Computer Interaction Design Studio Computer Science Department Stanford University Winter 2010
Transcript of Terry Winograd CS247 - Human-Computer Interaction Design ...CS247 - Terry Winograd - 3 Three...
CS247 - Terry Winograd - 1
Models and Metaphors
Terry Winograd CS247 - Human-Computer Interaction
Design Studio Computer Science Department
Stanford University Winter 2010
CS247 - Terry Winograd - 2
Three models of the same system
• Designer’s model • User's model • System image
CS247 - Terry Winograd - 3
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
CS247 - Terry Winograd - 4
Technology
CS247 - Terry Winograd - 5
The Desktop Metaphor – Xerox Star, 1981
CS247 - Terry Winograd - 6
Icons for Familiar Office Objects
CS247 - Terry Winograd - 7
Notebook Metaphor – Penpoint, 1991
CS247 - Terry Winograd - 8
Timeline Metaphor - Lifestreams, 1997
CS247 - Terry Winograd - 9
The House Metaphor – Microsoft Bob, 1995
CS247 - Terry Winograd - 10
The House Metaphor – Microsoft Bob, 1995
CS247 - Terry Winograd - 11
Virtual World metaphor
There.com Secondlife.com
CS247 - Terry Winograd - 12
Bookshelf Metaphor
CS247 - Terry Winograd - 13
Physical Device Metaphors
Apple Quicktime 4.0
CS247 - Terry Winograd - 14
Conversational Agents
CS247 - Terry Winograd - 15
Clippy - Microsoft
CS247 - Terry Winograd - 16
Three basic physical interaction metaphors
• Manipulation: – Desktop, notebook,…
• Navigation: – WWW, virtual spaces…
• Conversation: – Speech, agents…
CS247 - Terry Winograd - 17
Three design aspects [Liddle]
• Conceptual model • Information display • Control mechanism
CS247 - Terry Winograd - 18
Conceptual Model Metaphors
• Bucket catching drops
• Racket bouncing pingpong ball
• Bomb killing diving invaders
• …
CS247 - Terry Winograd - 19
Control Metaphors
• Dragging a screen element
• Sliding a brick
• Steering a car
• Pointing to a destination
• Attracting/repelling
• Blowing air
• …
CS247 - Terry Winograd - 20
Potential problems with metaphors
• Don’t scale well • Too constraining • Conflict with design principles • Makes true functionality invisible • Overly literal translations • Can limit the designer's imagination
