1. history of CHI
geschiedenis van de informatica - 23 maart 2009
erik duval
K.U.Leuven
http://www.cs.kuleuven.be/~erikd
1
Wednesday, March 25, 2009

2. 2
Wednesday, March 25, 2009

3. http://www.slideshare.net/erik.duval
Wednesday, March 25, 2009
3

4. HUGE thanks to...
http://www.slideshare.net/mrettig/interaction-design-history
marc rettig
marcrettig.com
interaction
presented at
design
history in a
carnegie
mellon
university
2 april 2004
mrettig@well.com
teeny
Wednesday, March 25, 2009

5. when? what?
• text -> grafisch: 1982
• touchscreen: 1995 -> nu
• force feedback: 1990
• menu: 1982
• scherm: 1955
• muis: 1970
5
Wednesday, March 25, 2009

6. 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
Wednesday, March 25, 2009

7. 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).
Wednesday, March 25, 2009

8. configure switches, run batch, output to tape
Wednesday, March 25, 2009

9. 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.
Wednesday, March 25, 2009

10. preparing punch cards
An important by-product:
confetti. All the chaff from all
those cards was just great to
throw around the dorm.
Wednesday, March 25, 2009

11. 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.
So on the one hand, we were
adapting to the machines. On
the other hand, the workings of
the machines were exposed,
right out where we could get to
them.
Wednesday, March 25, 2009

12. punch cards
http://en.wikipedia.org/wiki/File:FortranCardPROJ039.agr.jpg
12
Wednesday, March 25, 2009

13. http://upload.wikimedia.org/wikipedia/commons/e/e8/IBM_card_punch_029.JPG
13
Wednesday, March 25, 2009

14. operator console
IBM System 360
1960’s
Wednesday, March 25, 2009

15. 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.
Wednesday, March 25, 2009

16. next?
16
Wednesday, March 25, 2009

17. Command Line Interface
17
Wednesday, March 25, 2009

18. Nog vb?
18
Wednesday, March 25, 2009

19. Nog vb?
18
Wednesday, March 25, 2009

20. 19 http://www.designinginteractions.com/
Wednesday, March 25, 2009

21. Grafische gebruikersinterface
20
Wednesday, March 25, 2009

22. WIMP
• Windows
Icons
Menus, and
Pointing devices
• Characteristics
• intuitive
• consistent
• forgiving
• protective
• But not necessarily best
for expert!
21
Wednesday, March 25, 2009

23. Turing Award 1988 Ivan Sutherland: Sketchpad (1962)
http://www.archive.org/details/AlanKeyD1987 http://www.youtube.com/watch?v=495nCzxM9PI
http://www.youtube.com/watch?v=USyoT_Ha_bA 22
Wednesday, March 25, 2009

24. D. Engelbart, Augment
• Stanford Research Institute
• invented interactive
computing (mouse,
windows, groupware, ...)
• team went to Xerox PARC
• now: bootstrap institute
• http://www.bootstrap.org/
23
Wednesday, March 25, 2009

25. D. Engelbart, Augment
• demo at 1968 Fall
Joint Computer
Conference
• video, microwave
transmission, ...
• http://
sloan.stanford.edu/
mousesite/
1968Demo.html
• http://
www.youtube.com
/watch?
v=X4kp9Ciy1nE
24
Wednesday, March 25, 2009

26. http://www.youtube.com/watch?v=X4kp9Ciy1nE
25
Wednesday, March 25, 2009

27. http://cfdj.sys-con.com/read/536976.htm
Wednesday, March 25, 2009

28. http://cfdj.sys-con.com/read/536976.htm
Wednesday, March 25, 2009

29. http://cfdj.sys-con.com/read/536976.htm
Wednesday, March 25, 2009

30. http://cfdj.sys-con.com/read/536976.htm
Wednesday, March 25, 2009

31. Fast forward to …
now :) !
Text
Text
http://flash.kmi.open.ac.uk:8080/fm/fmm.php?code=c785a5-890&room=fm890
27
Wednesday, March 25, 2009

32. Fast forward to …
now :) !
Text
Text
http://hyperscope.org/
http://flash.kmi.open.ac.uk:8080/fm/fmm.php?code=c785a5-890&room=fm890
27
Wednesday, March 25, 2009

33. Fast forward to …
now :) !
Text
Text
http://hyperscope.org/
http://flash.kmi.open.ac.uk:8080/fm/fmm.php?code=c785a5-890&room=fm890
http://video.google.com/videoplay?docid=-3914718330476864051&q=doug+engelbart
27
Wednesday, March 25, 2009

34. 28 http://www.designinginteractions.com/
Wednesday, March 25, 2009

35. 29
http://programforthefuture.org/
Wednesday, March 25, 2009

36. 29
http://programforthefuture.org/
Wednesday, March 25, 2009

37. XEROX PARC Star
(1981)
30
Wednesday, March 25, 2009

38. http://www.youtube.com/watch?v=XQ6ng1_TMN4
31
Wednesday, March 25, 2009

39. 32 http://www.designinginteractions.com/
Wednesday, March 25, 2009

40. 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!
Wednesday, March 25, 2009

41. Macintosh, 1984
http://www.youtube.com/watch?v=G0FtgZNOD44
34
Wednesday, March 25, 2009

42. 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
Wednesday, March 25, 2009

43. Windows 1.0 (1985)
36
Wednesday, March 25, 2009

44. http://www.youtube.com/watch?v=tGvHNNOLnCk
37
Wednesday, March 25, 2009

45. http://www.youtube.com/watch?v=y48rthTbrA8&NR=1
38
Wednesday, March 25, 2009

46. 39 http://www.designinginteractions.com/
Wednesday, March 25, 2009

47. beyond then ...
40
Wednesday, March 25, 2009

48. http://www.philipglass.com/glassengine/ 41 http://www.designinginteractions.com/
Wednesday, March 25, 2009

49. http://www.ted.com/index.php/talks/anand_agarawala_demos_his_bumptop_desktop.html 42
Wednesday, March 25, 2009

50. 43 http://www.ted.com/index.php/talks/jeff_han_demos_his_breakthrough_touchscreen.html
Wednesday, March 25, 2009

51. http://portal.mace-project.eu/ 44
Wednesday, March 25, 2009

52. http://blogs.msdn.com/tom/archive/2009/03/03/future-vision-ux-ideas.aspx
45
Wednesday, March 25, 2009

53. http://www.ted.com/index.php/talks/david_merrill_demos_siftables_the_smart_blocks.html 46
Wednesday, March 25, 2009

54. http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html
47
Wednesday, March 25, 2009

55. http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html
47
Wednesday, March 25, 2009

56. http://www.lce.hut.fi/research/css/bci/
48
Wednesday, March 25, 2009

57. http://www.youtube.com/watch?v=qCSSBEXBCbY&NR=1
49
Wednesday, March 25, 2009

58. http://www.youtube.com/watch?v=NIG47YgndP8
50
Wednesday, March 25, 2009

59. 51 http://emotiv.com/
Wednesday, March 25, 2009

60. http://www.youtube.com/watch?v=JMLH_QyPTYM
52
Wednesday, March 25, 2009

61. The future has already arrived.
It's just not evenly distributed yet.
53
Wednesday, March 25, 2009

62. what did you...
• like most?
• want most?
• dislike most?
• fear most?
• ...?
and why...
54
Wednesday, March 25, 2009

63. 55
Wednesday, March 25, 2009

64. Thanks!
55
Wednesday, March 25, 2009

65. Questions?
Thanks!
55
Wednesday, March 25, 2009

66. Questions?
http://www.cs.kuleuven.ac.be/~erikd
Thanks!
55
Wednesday, March 25, 2009

67. Questions?
http://www.cs.kuleuven.ac.be/~erikd
http://erikduval.wordpress.com
Thanks!
55
Wednesday, March 25, 2009