This document provides a brief history of the development of human-computer interaction (CHI) from the earliest computers through modern interfaces. It describes early computers that were programmed via switches and batch processing, the introduction of punch cards, time-sharing systems with command line interfaces, and the pioneering work developing graphical user interfaces at Xerox PARC and in the development of the Macintosh. It also discusses the introduction of windows and the mouse in personal computing with Windows 1.0. The document presents this history through a combination of text and embedded images.

1. History of CHI
Leuven, 11 March 2013
Erik Duval
http://erikduval.wordpress.com
@ErikDuval
1
Sunday 17 March 13

2. http://www.slideshare.net/erik.duval
2
Sunday 17 March 13

3. HUGE thanks to...
http://www.slideshare.net/mrettig/interaction-design-history
marc rettig
marcrettig.com
interaction
presented at
design history
in a teeny
carnegie
mellon
university
2 april 2004
mrettig@well.com
little nutshell
version 1.5
Sunday 17 March 13

4. when? what?
• ???
4
Sunday 17 March 13

5. wiring the ENIAC with a new program
ENIAC
1946
Mauchly and Eckert
stats:
3,000 cubic feet
30 tons
18,000 vacuum tubes
70,000 resistors
170 kilowatt power req.
~1 kilobit memory
approximate processing power of today’s
singing birthday card
but not a stored-program device
Great description here: www.computinghistorymuseum.org/teaching/lectures/pptlectures/7b-eniac.ppt
Sunday 17 March 13

6. front panel switches
DEC PDP-8
TI 980
1960’s
The internal architecture of the
machine is exposed in the
controls. You can see that the
PDP-8 is an octal computer,
with its switches in three-bit
configurations (it takes three
bits to count from 0 to 7, for a
total of 8 numbers. Base 8.
Octal. Get it?). The TI 980 is a
hexadecimal machine, with
switches in groups of four. Using
the switches, you program the
machine one word at a time (a
word being, say, two
hexadecimal bytes for the TI).
Sunday 17 March 13

7. configure switches, run batch, output to tape
Sunday 17 March 13

8. batch processing: feed it cards, wait while it runs
What you used to do
punch a deck of cards; take
the cards to a little window,
hand them to the operator; she
puts them in line with everyone
else’s jobs; when it’s your turn
she puts your cards in the
hopper and pushes “RUN”; your
program works or it doesn’t; an
hour or twelve later, you pick up
your cards and (hopefully)
printout at the same little
window.
What you do now
double-click an icon, see what
happens immediately.
Sunday 17 March 13

9. preparing punch cards
An important by-product:
confetti . All
the chaff from all those cards
was just great to throw around
the dorm.
Sunday 17 March 13

10. preparing punch cards
Each key press punches holes,
so there’s no “erase.” Fixing a
mistake almost always required
ejecting the card and starting it
over.
In a pinch – say you really
needed to fix a card and the
punch was down – a clever
operator might know enough
about the card encoding to
close some holes with tape and
open others with a knife.
we
So on the one hand,
were adapting
to the machines.
On the other hand, the
workings of the machines were
exposed, right out where we
could get to them.
Sunday 17 March 13

11. punch cards
http://en.wikipedia.org/wiki/File:FortranCardPROJ039.agr.jpg
11
Sunday 17 March 13

12. http://upload.wikimedia.org/wikipedia/commons/e/e8/IBM_card_punch_029.JPG
12
Sunday 17 March 13

13. operator console
IBM System 360
1960’s
Sunday 17 March 13

14. at home, it’s still the switches – but what to do with it?
MITS Altair 8800
1975
One of the first commercially
available home computers.
You ordered it. You built it. You
operated it through front
panel switches.
Sunday 17 March 13

15. next?
15
Sunday 17 March 13

16. Command Line Interface
16
Sunday 17 March 13

17. http://www.secretgeometry.com/apps/cathode/
17
Sunday 17 March 13

18. Nog vb?
18
Sunday 17 March 13

19. Nog vb?
18
Sunday 17 March 13

20. Grafische gebruikersinterface
19
Sunday 17 March 13

21. WIMP
• Windows
Icons
Menus, and
Pointing devices
• Characteristics
• intuitive
• consistent
• forgiving
• protective
• But not necessarily best
for expert!
20
Sunday 17 March 13

22. Turing Award 1988 Ivan Sutherland: Sketchpad (1962)
21 http://www.youtube.com/watch?v=USyoT_Ha_bA
Sunday 17 March 13

23. D. Engelbart, Augment
• Stanford Research Institute
• invented interactive
computing (mouse,
windows, groupware, ...)
• team went to Xerox PARC
• http://dougengelbart.org/
22
Sunday 17 March 13

24. D. Engelbart, Augment
• demo at 1968 Fall
Joint Computer
Conference
• video, microwave
transmission, ...
• http://
www.dougengelbart.o
rg/firsts/dougs-1968-
demo.html
23
Sunday 17 March 13

25. http://www.youtube.com/watch?v=X4kp9Ciy1nE
24
Sunday 17 March 13

26. http://cfdj.sys-con.com/read/536976.htm
Sunday 17 March 13

27. http://cfdj.sys-con.com/read/536976.htm
Sunday 17 March 13

28. http://cfdj.sys-con.com/read/536976.htm
Sunday 17 March 13

29. http://erikduval.wordpress.com/2010/01/31/happy-85th-carrying-the-torch/
Sunday 17 March 13

30. XEROX PARC Star
(1981)
27
Sunday 17 March 13

31. http://www.youtube.com/watch?v=QYvxgNhUwBk
28
Sunday 17 March 13

32. a tool for home and small business calculations
visicalc
Dan Bricklin
1979
Finally people had a reason to
buy a home computer
(specifically, an Apple II): so
they could use VisiCalc, the first
spreadsheet.
THE place to learn about Visicalc: www.bricklin.com/visicalc.htm
Download a working version!
Sunday 17 March 13

33. Macintosh, 1984
30 http://www.youtube.com/watch?v=G0FtgZNOD44
Sunday 17 March 13

34. Macintosh, 1984
30 http://www.youtube.com/watch?v=G0FtgZNOD44
Sunday 17 March 13

35. All 39 pages of advertising that Apple bought in a 1984 issue of newsweek are available here: http://www.aci.com.pl/mwichary/
computerhistory/ads/macnewsweek
Sunday 17 March 13

36. Windows 1.0 (1985)
32
Sunday 17 March 13

37. http://www.youtube.com/watch?v=y48rthTbrA8&NR=1
33
Sunday 17 March 13

38. beyond then ...
34
Sunday 17 March 13

39. http://blogs.msdn.com/tom/archive/2009/03/03/future-vision-ux-ideas.aspx
35
Sunday 17 March 13

40. http://www.youtube.com/watch?v=6Cf7IL_eZ38
36
Sunday 17 March 13

41. http://www.youtube.com/watch?v=CGwvZWyLiBU
37
Sunday 17 March 13

42. http://www.youtube.com/watch?v=9c6W4CCU9M4
38
Sunday 17 March 13

43. http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html
39
Sunday 17 March 13

44. http://www.lce.hut.fi/research/css/bci/
40
Sunday 17 March 13

45. http://dagkrant.kuleuven.be/files/pdf/ck21-nr06.pdf
41
Sunday 17 March 13

46. 42 http://emotiv.com/
Sunday 17 March 13

47. The future has already arrived.
It's just not evenly distributed yet.
43
Sunday 17 March 13

48. what did you...
• like most?
• want most?
• dislike most?
• fear most?
• ...?
and why...
44
Sunday 17 March 13

49. Questions?
http://erikduval.wordpress.com/
@ErikDuval
Sunday 17 March 13
Thanks! 45