1. FOUNDATIONS OF
INTERACTION DESIGN
Smart Experience

2. 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 SMITH
INTERACTION DESIGN INSTITUTE, IVREA
Foundations of Interaction Design
September 2007

3. MACHINES SHAPE US
WE SHAPE THE MACHINES
Foundations of Interaction Design
September 2007

5. Goals
Intention Evaluation
Gulf of Execution Gulf of Evaluation
Action Specification Interpretation
Execution Perception
INPUTS THE MACHINE DISPLAY

6. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

7. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

8. WORLD WAR II AVIATION PSYCHOLOGY
(1940s)
Foundations of Interaction Design
September 2008

9. ENIAC
(1943)
Foundations of Interaction Design
September 2008

10. SWITCHES, TAPE & PUNCH CARDS
(1940s–1960s)
Foundations of Interaction Design
September 2007
Page 9

11. “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
Foundations of Interaction Design
September 2008

12. BINAC
(1949)
Foundations of Interaction Design
September 2007
Page 11

13. IBM ELECTRONIC CALCULATORS
12
(1950s)
Foundations of Interaction Design
September 2008

14. UNIVAC
(1956)
Foundations of Interaction Design
September 2007
Page 13

15. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

16. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
?
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

17. MITS ALTAIR 8800
(1975)
Foundations of Interaction Design
September 2007
Page 15

18. MITS ALTAIR 8800
(1975)
Foundations of Interaction Design
September 2007
Page 15

19. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

20. Typing Interaction Pointing Interaction
Whirlwind
NLS
LINC
Xerox ALTO and
STAR
Apple II
Apple Lisa and Mac
IBM PC
Windows 3.1

21. WHIRLWIND
(1951)
Foundations of Interaction Design
September 2007

22. LINC
(1962)
Designer Wesley A.
Clark shown with
the first Laboratory
Instrument
Computer (LINC)
Foundations of Interaction Design
September 2007

23. HOME COMPUTERS
(70s)
Apple II IBM 5150
Commodore PET Tandy Radio Shack TRS-80 Commodore VIC-20
Foundations of Interaction Design
September 2007
Page 20

24. PERSONAL COMPUTING
(1975)
Foundations of Interaction Design
September 2008

25. APPLICATION INTERFACES
(70s)
WordStar
Command Line
VisiCalc
Hierarchical Menus
Foundations of Interaction Design
September 2007

26. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

27. GRAPHICAL USER INTERFACES
Windows Icons
Pointers
Menus
Foundations of Interaction Design
September 2007
Page 24

28. WINDOWS
Foundations of Interaction Design
September 2007
Page 25

29. 26
ICONS
Foundations of Interaction Design
September 2008

30. MENUS
Foundations of Interaction Design
September 2007
Page 27

31. 28
POINTERS
Foundations of Interaction Design
September 2008

32. Typing Interaction Pointing Interaction
Whirlwind
LINC NLS
Xerox ALTO and
STAR
Apple II
Apple Lisa and Mac
IBM PC
Windows 3.1

33. 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.
Foundations of Interaction Design
September 2007

34. X/Y POSITION INDICATOR (THE MOUSE)
(1964)
“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
Foundations of Interaction Design
September 2007

36. NLS – ONLINE SYSTEM
(60s)
Foundations of Interaction Design
September 2007

37. XEROX ALTO
(1973)
Foundations of Interaction Design
September 2007

38. XEROX ALTO
(1973)
Foundations of Interaction Design
September 2007

40. XEROX STAR
(1981)
Foundations of Interaction Design
September 2007

41. APPLE LISA
(1983)
Foundations of Interaction Design
September 2007

43. APPLE MACINTOSH (1983)
Foundations of Interaction Design
September 2007
Page 39

44. Foundations of Interaction Design
September 2008

45. MICROSOFT SOFTWARE IN A BOX
(1990s)
Foundations of Interaction Design
September 2008

46. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

47. 43
VANNEVAR BUSH AND MEMEX
(1945)
Foundations of Interaction Design
September 2008

48. 44
ARPANET AND USENET
(1980s)
ARPANET 1977 USENET 1980
USENET 1993
Foundations of Interaction Design
September 2008

49. WORLD WIDE WEB
(1990s)
First Web Browser/Editor, 1990
Netscape, 1994
Yahoo, 1994
Foundations of Interaction Design
September 2008

50. TIMELINE OF ADOPTION Professional Use
Personal Use
(AND ADAPTATION!)
Cards / Switches
Keyboard
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005
Foundations of Interaction Design
September 2007

51. XEROX DYNABOOK
(1968)
Foundations of Interaction Design
September 2007

53. MOBILE COMPUTING
(1990s)
Osborne 1 (1981) Apple Powerbook (1991)
Foundations of Interaction Design
September 2008

54. MOBILE DEVICES
(2000s)
Foundations of Interaction Design
September 2008

55. 51
Foundations of Interaction Design
September 2007

56. 51
LET’S RECAP.
Foundations of Interaction Design
September 2007

57. 51
LET’S RECAP.
_ Who’s the user?
Foundations of Interaction Design
September 2007

58. 51
LET’S RECAP.
_ Who’s the user?
_ What’s the interface?
Foundations of Interaction Design
September 2007

59. 51
LET’S RECAP.
_ Who’s the user?
_ What’s the interface?
_ How is it used?
Foundations of Interaction Design
September 2007

60. 51
LET’S RECAP.
_ Who’s the user?
_ What’s the interface?
_ How is it used?
_ Who can afford it?
Foundations of Interaction Design
September 2007

61. BEFORE 1945: THE NEW INVENTION
Who’s What’s
the user? the
interface?
How Who can
is it afford
used? them?
Foundations of Interaction Design
September 2007

62. BEFORE 1945: THE NEW INVENTION
Who’s What’s
the user? the
interface?
THE INVENTOR HIMSELF
How Who can
is it afford
used? them?
Foundations of Interaction Design
September 2007

63. BEFORE 1945: THE NEW INVENTION
Who’s What’s
the user? the
interface?
THE INVENTOR HIMSELF MOVING CABLES AROUND
How Who can
is it afford
used? them?
Foundations of Interaction Design
September 2007

64. BEFORE 1945: THE NEW INVENTION
Who’s What’s
the user? the
interface?
THE INVENTOR HIMSELF MOVING CABLES AROUND
How Who can
is it afford
used? them?
BRUTE FORCE ARITHMETIC
Foundations of Interaction Design
September 2007

65. BEFORE 1945: THE NEW INVENTION
Who’s What’s
the user? the
interface?
THE INVENTOR HIMSELF MOVING CABLES AROUND
How Who can
is it afford
used? them?
BRUTE FORCE ARITHMETIC THE MILITARY
Foundations of Interaction Design
September 2007

66. 1945 –1955: THE CALCULATOR
Who’s What’s the
the user? interface?
How is it Who can
used? afford
them?
Foundations of Interaction Design
September 2007

67. 1945 –1955: THE CALCULATOR
Who’s What’s the
the user? interface?
EXPERTS AND PIONEERS
How is it Who can
used? afford
them?
Foundations of Interaction Design
September 2007

68. 1945 –1955: THE CALCULATOR
Who’s What’s the
the user? interface?
EXPERTS AND PIONEERS PUNCH CARDS AND SWITCHES
How is it Who can
used? afford
them?
Foundations of Interaction Design
September 2007

69. 1945 –1955: THE CALCULATOR
Who’s What’s the
the user? interface?
EXPERTS AND PIONEERS PUNCH CARDS AND SWITCHES
How is it Who can
used? afford
them?
HIGH SPEED CALCULATIONS Foundations of Interaction Design
September 2007

70. 1945 –1955: THE CALCULATOR
Who’s What’s the
the user? interface?
EXPERTS AND PIONEERS PUNCH CARDS AND SWITCHES
How is it Who can
used? afford
them?
HIGH SPEED CALCULATIONS ROCKET SCIENTISTS
Foundations of Interaction Design
September 2007

71. 1955 –1965: THE GIANT BRAIN
What’s the
Who’s the
interface?
user?
Who can
How is it
afford
used?
them?
Foundations of Interaction Design
September 2007

72. 1955 –1965: THE GIANT BRAIN
What’s the
Who’s the
interface?
user?
PROFESSIONAL ENGINEERS
Who can
How is it
afford
used?
them?
Foundations of Interaction Design
September 2007

73. 1955 –1965: THE GIANT BRAIN
What’s the
Who’s the
interface?
user?
PROFESSIONAL ENGINEERS TELETYPE AND TERMINAL
Who can
How is it
afford
used?
them?
Foundations of Interaction Design
September 2007

74. 1955 –1965: THE GIANT BRAIN
What’s the
Who’s the
interface?
user?
PROFESSIONAL ENGINEERS TELETYPE AND TERMINAL
Who can
How is it
afford
used?
them?
COMMAND LINE INTERFACE
Foundations of Interaction Design
September 2007

75. 1955 –1965: THE GIANT BRAIN
What’s the
Who’s the
interface?
user?
PROFESSIONAL ENGINEERS TELETYPE AND TERMINAL
Who can
How is it
afford
used?
them?
COMMAND LINE INTERFACE INFORMATION INTENSIVE BUSINESSES
Foundations of Interaction Design
September 2007

76. 1965 –1980: WHITE COLLAR LABOR
What’s the
Who’s the
interface?
user?
Who can
How is it
afford
used?
them?
Foundations of Interaction Design
September 2007

77. 1965 –1980: WHITE COLLAR LABOR
What’s the
Who’s the
interface?
user?
SPECIALIZED COMPUTER OPERATORS
Who can
How is it
afford
used?
them?
Foundations of Interaction Design
September 2007

78. 1965 –1980: WHITE COLLAR LABOR
What’s the
Who’s the
interface?
user?
GREEN-SCREEN ALPHANUMERIC
SPECIALIZED COMPUTER OPERATORS
Who can
How is it
afford
used?
them?
Foundations of Interaction Design
September 2007

79. 1965 –1980: WHITE COLLAR LABOR
What’s the
Who’s the
interface?
user?
GREEN-SCREEN ALPHANUMERIC
SPECIALIZED COMPUTER OPERATORS
Who can
How is it
afford
used?
them?
BATCH PROCESSING Foundations of Interaction Design
September 2007

80. 1965 –1980: WHITE COLLAR LABOR
What’s the
Who’s the
interface?
user?
GREEN-SCREEN ALPHANUMERIC
SPECIALIZED COMPUTER OPERATORS
Who can
How is it
afford
used?
them?
BATCH PROCESSING MOST LARGE BUSINESSESInteraction Design
Foundations of
September 2007

81. 1980 –1995: PRODUCTIVITY TOOL
Who’s What’s the
the user? interface?
Who can
How is
afford
it used?
them?
Foundations of Interaction Design
September 2007

82. 1980 –1995: PRODUCTIVITY TOOL
Who’s What’s the
the user? interface?
GEEKS
Who can
How is
afford
it used?
them?
Foundations of Interaction Design
September 2007

83. 1980 –1995: PRODUCTIVITY TOOL
Who’s What’s the
the user? interface?
GEEKS GUIs
Who can
How is
afford
it used?
them?
Foundations of Interaction Design
September 2007

84. 1980 –1995: PRODUCTIVITY TOOL
Who’s What’s the
the user? interface?
GEEKS GUIs
Who can
How is
afford
it used?
them?
SHRINK-WRAPPED SOFTWARE Foundations of Interaction Design
September 2007

85. 1980 –1995: PRODUCTIVITY TOOL
Who’s What’s the
the user? interface?
GEEKS GUIs
Who can
How is
afford
it used?
them?
SHRINK-WRAPPED SOFTWARE UPWARDLY MOBILE HOME USERS Interaction Design
Foundations of
September 2007

86. 1995 – ?: NETWORKED UBIQUITY
Who’s What’s the
the user? interface?
Who can
How is
afford
it used?
them?
Foundations of Interaction Design
September 2007

87. 1995 – ?: NETWORKED UBIQUITY
Who’s What’s the
the user? interface?
EVERYONE.
Who can
How is
afford
it used?
them?
Foundations of Interaction Design
September 2007

88. 1995 – ?: NETWORKED UBIQUITY
Who’s What’s the
the user? interface?
GUIs
EVERYONE.
Who can
How is
afford
it used?
them?
Foundations of Interaction Design
September 2007

89. 1995 – ?: NETWORKED UBIQUITY
Who’s What’s the
the user? interface?
GUIs
EVERYONE.
Who can
How is
afford
it used?
them?
WEB-ENABLED TOOLS Foundations of Interaction Design
September 2007

90. 1995 – ?: NETWORKED UBIQUITY
Who’s What’s the
the user? interface?
GUIs
EVERYONE.
Who can
How is
afford
it used?
them?
WEB-ENABLED TOOLS THEY’RE CHEAP! BUY SEVERAL! of Interaction Design
Foundations
September 2007

91. WHAT NEXT?
Foundations of Interaction Design
September 2007

92. TOUCHSCREEN INTERFACES BLUR THE LINES
BETWEEN INPUT AND DISPLAY
Foundations of Interaction Design
September 2007

93. 60
NEW “VERBS” ARE A REALITY
Bi-touch Pinch
Voice Recognition Gestures
Foundations of Interaction Design
September 2008

94. APPLICATIONS, DATA, CONTENT AND
PROFILES ARE MOVING TO THE
CLOUD.
Foundations of Interaction Design
September 2007

95. APPLICATIONS, DATA, CONTENT AND
PROFILES ARE MOVING TO THE
CLOUD.
Foundations of Interaction Design
September 2007

96. 62
“The application model is constraining to
users who have integrated tasks that require
multiple applications to solve.”
—Jakob Nielsen
Foundations of Interaction Design
September 2008

98. 64
WHAT DO YOU THINK IS NEXT?
Foundations of Interaction Design
September 2007

99. 65
THANKS TO:
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
Foundations of Interaction Design
September 2008

100. THANKS!
38 West 21st Street
3rd Floor
New York, NY 10010
212-226-6344 main
212-898-0369 fax
www.bondartscience.com
info@bondartscience.com