foundations of interaction design

100
FOUNDATIONS OF INTERACTION DESIGN Smart Experience

Upload: karen-mcgrane

Post on 08-Sep-2014

28 views

Category:

Technology


1 download

DESCRIPTION

Workshop presented as a Smart Experience course in 2007 on the history of interaction design.

TRANSCRIPT

Page 1: Foundations of Interaction Design

FOUNDATIONS OF INTERACTION DESIGNSmart Experience

Page 2: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

IN THE SAME WAY THAT INDUSTRIAL DESIGNERS HAVE SHAPED OUR EVERYDAY LIFE THROUGH OBJECTS THEY DESIGN FOR OUR OFFICES AND FOR OUR HOMES, INTERACTION DESIGN IS SHAPING OUR LIFE WITH INTERACTIVE TECHNOLOGIES — COMPUTERS, TELECOMMUNICATIONS, MOBILE PHONES, AND SO ON.

— GILLIAN CRAMPTON SMITHINTERACTION DESIGN INSTITUTE, IVREA

Page 3: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

MACHINES SHAPE USWE SHAPE THE MACHINES

Page 4: Foundations of Interaction Design
Page 5: Foundations of Interaction Design

Interpretation

Execution Perception

THE MACHINE

Goals

Gulf of Execution Gulf of Evaluation

INPUTS DISPLAY

Intention

Action Specification

Evaluation

Page 6: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 7: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Cards / Switches

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 8: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

WORLD WAR II AVIATION PSYCHOLOGY (1940s)

Page 9: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

ENIAC (1943)

Page 10: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

SWITCHES, TAPE & PUNCH CARDS (1940s–1960s)

9

Page 11: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

“MAN-COMPUTER SYMBIOSIS” (1950s)

“The hope is that, in not too many years, human brains and computing machines will be coupled together very tightly and that the resulting partnership will think as no human brain has ever thought and process data in a way not approached by the information-handling machines we know today.”

— J.R. Licklider

Page 12: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

BINAC (1949)

11

Page 13: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

12IBM ELECTRONIC CALCULATORS (1950s)

Page 14: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

UNIVAC (1956)

13

Page 15: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Cards / Switches

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 16: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Cards / Switches

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

?

Page 17: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

MITS ALTAIR 8800 (1975)

15

Page 18: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

MITS ALTAIR 8800 (1975)

15

Page 19: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 20: Foundations of Interaction Design

LINC

Apple II

NLS

Xerox ALTO and STAR

IBM PCApple Lisa and Mac

Whirlwind

Windows 3.1

Typing Interaction Pointing Interaction

Page 21: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

WHIRLWIND (1951)

Page 22: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Designer Wesley A. Clark shown with the first Laboratory Instrument Computer (LINC)

LINC (1962)

Page 23: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

Apple II

Commodore PET Tandy Radio Shack TRS-80

IBM 5150

Commodore VIC-20

HOME COMPUTERS (70s)

20

Page 24: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

PERSONAL COMPUTING (1975)

Page 25: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Command Line

VisiCalc

APPLICATION INTERFACES (70s)

WordStar

Hierarchical Menus

Page 26: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 27: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

GRAPHICAL USER INTERFACES

Windows Icons

Menus Pointers

24

Page 28: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

WINDOWS

25

Page 29: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

ICONS26

Page 30: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

MENUS

27

Page 31: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

POINTERS28

Page 32: Foundations of Interaction Design

LINC

Apple II

NLS

Xerox ALTO and STAR

IBM PCApple Lisa and Mac

Whirlwind

Windows 3.1

Typing Interaction Pointing Interaction

Page 33: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

IVAN SUTHERLAND AND SKETCHPAD (1963)

The Sketchpad system makes it possible for a man and a computer to converse rapidly through the medium of line drawings. Heretofore, most interaction between man and computers has been slowed down by the need to reduce all communication to written statements that can be typed; in the past, we have been writing letters to rather than conferring with our computers. The Sketchpad system, by eliminating typed statements (except for legends) in favor of line drawings, opens up a new area of man-machine communication.

Page 34: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

“By augmenting man's intellect we mean increasing the capability of a man to approach a complex problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems. One objective is to develop new techniques, procedures, and systems that will better adapt people's basic information-handling capabilities to the needs, problems, and progress of society.”

—Douglas Englebart

X/Y POSITION INDICATOR (THE MOUSE) (1964)

Page 35: Foundations of Interaction Design
Page 36: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

NLS – ONLINE SYSTEM (60s)

Page 37: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

XEROX ALTO (1973)

Page 38: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

XEROX ALTO (1973)

Page 39: Foundations of Interaction Design
Page 40: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

XEROX STAR (1981)

Page 41: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

APPLE LISA (1983)

Page 42: Foundations of Interaction Design
Page 43: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

Page

APPLE MACINTOSH (1983)

39

Page 44: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

Page 45: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

MICROSOFT SOFTWARE IN A BOX(1990s)

Page 46: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 47: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

VANNEVAR BUSH AND MEMEX (1945)

43

Page 48: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

ARPANET AND USENET (1980s)

44

ARPANET 1977 USENET 1980

USENET 1993

Page 49: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

First Web Browser/Editor, 1990Netscape, 1994

Yahoo, 1994

WORLD WIDE WEB (1990s)

Page 50: Foundations of Interaction Design

Cards / Switches

Foundations of Interaction DesignSeptember 2007

1945 1955 1965 1975 1985 1995 2005

Keyboard

Graphical User Interface

Hypertext Networks

Mobility

TIMELINE OF ADOPTION (AND ADAPTATION!)

Professional UsePersonal Use

Page 51: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

XEROX DYNABOOK (1968)

Page 52: Foundations of Interaction Design
Page 53: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

MOBILE COMPUTING (1990s)

Osborne 1 (1981) Apple Powerbook (1991)

Page 54: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

MOBILE DEVICES (2000s)

Page 55: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

51

Page 56: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

51

LET’S RECAP.

Page 57: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

51

LET’S RECAP._Who’s the user?

Page 58: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

51

LET’S RECAP._Who’s the user?_What’s the interface?

Page 59: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

51

LET’S RECAP._Who’s the user?_What’s the interface?_How is it used?

Page 60: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

51

LET’S RECAP._Who’s the user?_What’s the interface?_How is it used?_Who can afford it?

Page 61: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

BEFORE 1945: THE NEW INVENTION

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 62: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

THE INVENTOR HIMSELF

BEFORE 1945: THE NEW INVENTION

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 63: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

MOVING CABLES AROUNDTHE INVENTOR HIMSELF

BEFORE 1945: THE NEW INVENTION

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 64: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

BRUTE FORCE ARITHMETIC

MOVING CABLES AROUNDTHE INVENTOR HIMSELF

BEFORE 1945: THE NEW INVENTION

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 65: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

BRUTE FORCE ARITHMETIC

MOVING CABLES AROUNDTHE INVENTOR HIMSELF

BEFORE 1945: THE NEW INVENTION

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

THE MILITARY

Page 66: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

1945 –1955: THE CALCULATOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 67: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

EXPERTS AND PIONEERS

1945 –1955: THE CALCULATOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 68: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

PUNCH CARDS AND SWITCHESEXPERTS AND PIONEERS

1945 –1955: THE CALCULATOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 69: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

HIGH SPEED CALCULATIONS

PUNCH CARDS AND SWITCHESEXPERTS AND PIONEERS

1945 –1955: THE CALCULATOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 70: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

ROCKET SCIENTISTSHIGH SPEED CALCULATIONS

PUNCH CARDS AND SWITCHESEXPERTS AND PIONEERS

1945 –1955: THE CALCULATOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 71: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

1955 –1965: THE GIANT BRAIN

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 72: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

PROFESSIONAL ENGINEERS

1955 –1965: THE GIANT BRAIN

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 73: Foundations of Interaction Design

TELETYPE AND TERMINAL

Foundations of Interaction DesignSeptember 2007

PROFESSIONAL ENGINEERS

1955 –1965: THE GIANT BRAIN

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 74: Foundations of Interaction Design

TELETYPE AND TERMINAL

Foundations of Interaction DesignSeptember 2007

COMMAND LINE INTERFACE

PROFESSIONAL ENGINEERS

1955 –1965: THE GIANT BRAIN

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 75: Foundations of Interaction Design

TELETYPE AND TERMINAL

Foundations of Interaction DesignSeptember 2007

INFORMATION INTENSIVE BUSINESSESCOMMAND LINE INTERFACE

PROFESSIONAL ENGINEERS

1955 –1965: THE GIANT BRAIN

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 76: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

1965 –1980: WHITE COLLAR LABOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 77: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

SPECIALIZED COMPUTER OPERATORS

1965 –1980: WHITE COLLAR LABOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 78: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

GREEN-SCREEN ALPHANUMERICSPECIALIZED COMPUTER OPERATORS

1965 –1980: WHITE COLLAR LABOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 79: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

BATCH PROCESSING

GREEN-SCREEN ALPHANUMERICSPECIALIZED COMPUTER OPERATORS

1965 –1980: WHITE COLLAR LABOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 80: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

MOST LARGE BUSINESSESBATCH PROCESSING

GREEN-SCREEN ALPHANUMERICSPECIALIZED COMPUTER OPERATORS

1965 –1980: WHITE COLLAR LABOR

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 81: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

1980 –1995: PRODUCTIVITY TOOL

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 82: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

1980 –1995: PRODUCTIVITY TOOL

How is it used?

Who can afford them?

GEEKS

Who’s the user?

What’s the interface?

Page 83: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

GUIs

1980 –1995: PRODUCTIVITY TOOL

How is it used?

Who can afford them?

GEEKS

Who’s the user?

What’s the interface?

Page 84: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

GUIs

SHRINK-WRAPPED SOFTWARE

1980 –1995: PRODUCTIVITY TOOL

How is it used?

Who can afford them?

GEEKS

Who’s the user?

What’s the interface?

Page 85: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

GUIs

SHRINK-WRAPPED SOFTWARE UPWARDLY MOBILE HOME USERS

1980 –1995: PRODUCTIVITY TOOL

How is it used?

Who can afford them?

GEEKS

Who’s the user?

What’s the interface?

Page 86: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

1995 – ?: NETWORKED UBIQUITY

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 87: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

EVERYONE.

1995 – ?: NETWORKED UBIQUITY

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

Page 88: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

EVERYONE.

1995 – ?: NETWORKED UBIQUITY

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

GUIs

Page 89: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

WEB-ENABLED TOOLS

EVERYONE.

1995 – ?: NETWORKED UBIQUITY

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

GUIs

Page 90: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

THEY’RE CHEAP! BUY SEVERAL!WEB-ENABLED TOOLS

EVERYONE.

1995 – ?: NETWORKED UBIQUITY

How is it used?

Who can afford them?

Who’s the user?

What’s the interface?

GUIs

Page 91: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

WHAT NEXT?

Page 92: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

TOUCHSCREEN INTERFACES BLUR THE LINES

BETWEEN INPUT AND DISPLAY

Page 93: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

NEW “VERBS” ARE A REALITY60

Voice Recognition

Bi-touch

Gestures

Pinch

Page 94: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

APPLICATIONS, DATA, CONTENT AND PROFILES ARE MOVING TO THE

CLOUD.

Page 95: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

APPLICATIONS, DATA, CONTENT AND PROFILES ARE MOVING TO THE

CLOUD.

Page 96: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

“The application model is constraining to users who have integrated tasks that require multiple applications to solve.”

—Jakob Nielsen

62

Page 97: Foundations of Interaction Design
Page 98: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2007

64

WHAT DO YOU THINK IS NEXT?

Page 99: Foundations of Interaction Design

Foundations of Interaction DesignSeptember 2008

THANKS TO:65

Michael Wesch, “The Machine is Us/ing Us”

Mike Tuck, “The Real History of the GUI”

Jakob Nielsen, “Noncommand User Interfaces”

Richard T. Griffiths, “History of the Internet for Historians (and just about everyone else)”

Brad Myers, “A Brief History of Human Computer Interaction Technology”

Saul Greenberg, “History of Human Computer Interaction”

Mark Rettig, “Interaction Design History In A Teeny Little Nutshell”

Bill Moggridge, Designing Interactions

Donald Norman, The Design of Everyday Things

Digibarn Computer Museum

Wikipedia

Google Images

Page 100: Foundations of Interaction Design

38 West 21st Street3rd FloorNew York, NY 10010

212-226-6344 main212-898-0369 fax

[email protected]

THANKS!