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