Slides from History of Interaction Design course at SVA.

1. HISTORY OF
INTERACTION DESIGN
Week 4: Personal Computing

2. Research
TIMELINE OF ADOPTION Professional Use
(AND ADAPTATION!) Personal Use
Punched Cards / Switches
1880s ?
Keyboard / Terminal
Graphical User Interface
Hypertext Networks
Mobility
1945 1955 1965 1975 1985 1995 2005

3. MITS ALTAIR 8800
(1975)
3

4. ALTAIR BASIC
http://en.wikipedia.org/wiki/File:Altair_Basic_Sign.jpg
4

5. http://upload.wikimedia.org/wikipedia/commons/6/6e/Homebrew_Computer_Club_Sep1976.png
5

6. http://upload.wikimedia.org/wikipedia/commons/a/a1/Apple_I_Computer.jpg
6

7. PERSONAL COMPUTING
(1975)

8. HOME COMPUTERS
(Late 70s)
Apple II IBM 5150
Commodore PET Tandy Radio Shack TRS-80 Commodore VIC-20
8

9. APPLICATION INTERFACES
9

10. DIRECT MANIPULATION

11. WHIRLWIND
COMMAND LINE GRAPHICAL USER
INTERFACE
11

12. BATCH TIME
PROCESSING SHARING
12

13. DIRECT MANIPULATION
13

14. IVAN SUTHERLAND
“
(b.1938)
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.
http://www.cc.gatech.edu/classes/cs6751_97_fall/projects/abowd_team/ivan/ivanbw_45.jpg 14

15. SKETCHPAD
(1963)
http://design.osu.edu/carlson/history/images/ivan-sutherland.jpg 15
http://images.businessweek.com/ss/08/10/1006_ceo_guide/image/ivanssketchpad600gimpr.jpg

16. “
DOUGLAS ENGELBART
(b. 1925)
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
http://en.wikipedia.org/wiki/File:Engelbartmice.jpg
16

17. X/Y POSITION INDICATOR
ALSO KNOWN AS “THE MOUSE”
(1964)
The number of
buttons on a mouse
is one of the most
controversial issues
in the industry.
People get religious.
—Bill Gates
http://upload.wikimedia.org/wikipedia/commons/
e/ed/Mouse-patents-englebart-rid.png 17

18. NLS – ONLINE SYSTEM
(60s)
http://www.dougengelbart.org/ 18

19. THE MOTHER OF ALL DEMOS
(1968)
http://blogs.discovermagazine.com/80beats/files/2008/12/engelbart-demo.jpg http://video.google.com/videoplay?docid=-8734787622017763097 19

20. THE GRAPHICAL USER
INTERFACE

21. WIMPs
Windows Icons
Menus Pointers
21

22. WINDOWS
22

23. ICONS
23

24. MENUS
24

25. POINTERS
25

26. XEROX PARC
(1970s)
_ Laser Printer
_ Ethernet local area computer
network
_ Computer generated bitmap
graphics
_ Graphical user interface
featuring windows and icons
_ WYSIWYG text editor
26

27. XEROX ALTO
(1973)
27

28. XEROX STAR
(1981)
28

29. APPLE LISA
(1983)

30. APPLE MACINTOSH
(1983)
30

31. SOFTWARE IN A BOX
(1990s)

32. 32

33. 33

34. 34

35. MOBILITY

36. DYNABOOK
(1968)

37. MOBILE COMPUTING
(1990s)
Osborne 1 (1981) Apple Powerbook (1991)

38. INTERNET

39. ARPANET AND USENET
(1980s)
ARPANET 1977 USENET 1980
USENET 1993
39

40. WORLD WIDE WEB
(1990s)
Netscape, 1994
First Web Browser/Editor, 1990
Yahoo, 1994

41. THE INTERACTION
DESIGN DISCIPLINE

42. “
JOHN M. CARROLL
HCI is the name for a community of
communities.
In the early 1980s, HCI was a small and
focused specialty area. It was a cabal trying to
establish what was then a heretical view of
computing. Today, largely due to the success
of that endeavor, HCI is a vast and
multifaceted community, loosely bound by the
evolving concept of usability, and the
integrating commitment to value human
concerns as the primary consideration in
creating interactive systems.
42

43. NEXT WEEK
CLASS PRESENTATIONS DUE