history of CHI
  gebruikersinterfaces - 5 mei 2009




           erik duval
          K.U.Leuven
http://www.cs.kuleuven.b...
2
http://www.slideshare.net/erik.duval




3
HUGE                      thanks to...
      http://www.slideshare.net/mrettig/interaction-design-history


              ...
when? what?
• muis: ’60
 • ipv toetsen
• trackball: voor muis, na scherm
• scherm: ’50
• toetsenbord: gebaseerd op schrijf...
wiring the ENIAC with a new program




ENIAC
1946
Mauchly and Eckert

stats:
3,000 cubic feet
30 tons
18,000 vacuum tubes...
front panel switches




DEC PDP-8

TI 980


1960’s


The internal architecture of the
machine is exposed in the
controls....
configure switches, run batch, output to tape
batch processing: feed it cards, wait while it runs




What you used to do
punch a deck of cards; take the
cards to a lit...
preparing punch cards




An important by-product:
confetti. All the cha from all
those cards was just great to
throw arou...
preparing punch cards




Each key press punches holes,
so there’s no “erase.” Fixing a
mistake almost always
required eje...
punch cards




http://en.wikipedia.org/wiki/File:FortranCardPROJ039.agr.jpg

                             12
http://upload.wikimedia.org/wikipedia/commons/e/e8/IBM_card_punch_029.JPG
                                   13
operator console




IBM System 360
1960’s
at home, it’s still the switches – but what to do with it?




MITS Altair 8800
1975

One of the first commercially
availab...
next?


 16
Command Line Interface




          17
Nog vb?




   18
Nog vb?




   18
http://www.designinginteractions.com/
19
Grafische gebruikersinterface




             20
WIMP
•   Windows
    Icons
    Menus, and
    Pointing devices

•   Characteristics

    •   intuitive

    •   consistent...
Ivan Sutherland: Sketchpad (1962)
Turing Award 1988




                                                                  ...
you admire?
• gnome lead developer: minder knopjes
• steve jobs - jonge jaren: durf, anders

• jeff raskin: apple, macinto...
D. Engelbart, Augment
• Stanford Research Institute
• invented interactive
  computing (mouse,
  windows, groupware, ...)
...
D. Engelbart, Augment
•   demo at 1968 Fall
    Joint Computer
    Conference
    •   video, microwave
        transmissio...
http://www.youtube.com/watch?v=X4kp9Ciy1nE
26
http://www.youtube.com/watch?v=X4kp9Ciy1nE
26
http://cfdj.sys-con.com/read/536976.htm
http://cfdj.sys-con.com/read/536976.htm
http://cfdj.sys-con.com/read/536976.htm
http://cfdj.sys-con.com/read/536976.htm
Fast forward to …
      now :) !

                     Text
                      Text




  http://flash.kmi.open.ac.uk:80...
Fast forward to …
                         now :) !

                                            Text
                    ...
Fast forward to …
                         now :) !

                                                                   Te...
http://www.designinginteractions.com/
29
30
     http://programforthefuture.org/
30
     http://programforthefuture.org/
XEROX PARC Star
    (1981)




       31
http://www.youtube.com/watch?v=XQ6ng1_TMN4
                    32
http://www.designinginteractions.com/
33
a tool for home and small business calculations




visicalc
Dan Bricklin
1979


Finally people had a reason to
buy a home...
Macintosh, 1984




            http://www.youtube.com/watch?v=G0FtgZNOD44
       35
Macintosh, 1984




            http://www.youtube.com/watch?v=G0FtgZNOD44
       35
All 39 pages of advertising that Apple bought in a 1984 issue of newsweek are available here: http://www.aci.com.pl/mwicha...
Windows 1.0 (1985)




        37
http://www.youtube.com/watch?v=tGvHNNOLnCk
                      38
http://www.youtube.com/watch?v=y48rthTbrA8NR=1

                      39
beyond then ...

       40
???
• ubicomp
• table surface

• interactive whiteboard
• mume at home: PS3-tv-pc-ipod
• gedachte besturing
• ai - gebruik...
http://www.ted.com/index.php/talks/anand_agarawala_demos_his_bumptop_desktop.html   42
43   http://www.ted.com/index.php/talks/jeff_han_demos_his_breakthrough_touchscreen.html
http://portal.mace-project.eu/   44
http://blogs.msdn.com/tom/archive/2009/03/03/future-vision-ux-ideas.aspx



                                  45
http://www.ted.com/index.php/talks/david_merrill_demos_siftables_the_smart_blocks.html   46
http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html




                                   47
http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html




                                   47
http://www.lce.hut.fi/research/css/bci/



48
http://www.youtube.com/watch?v=qCSSBEXBCbYNR=1




                      49
http://www.youtube.com/watch?v=NIG47YgndP8




                   50
51   http://emotiv.com/
http://www.youtube.com/watch?v=JMLH_QyPTYM
                    52
The future has already arrived.
It's just not evenly distributed yet.
                 53
• past: what struck you most and why?
• future: what did you
 • like most?
 • want most?
 • dislike most?
 • fear most?
 •...
• les volgende week!
 • demo + rationale
 • 6*15 (20 max)
• template eindverslag


                    55
56
Thanks!
  56
Questions?

   Thanks!
     56
Questions?
http://www.cs.kuleuven.ac.be/~erikd



         Thanks!
                56
Questions?
http://www.cs.kuleuven.ac.be/~erikd
  http://erikduval.wordpress.com


         Thanks!
                56
Upcoming SlideShare
Loading in …5
×

History of CHI (Human-Computer Interaction)

2,733 views
2,664 views

Published on

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,733
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
































































  • History of CHI (Human-Computer Interaction)

    1. 1. history of CHI gebruikersinterfaces - 5 mei 2009 erik duval K.U.Leuven http://www.cs.kuleuven.be/~erikd 1
    2. 2. 2
    3. 3. http://www.slideshare.net/erik.duval 3
    4. 4. HUGE thanks to... http://www.slideshare.net/mrettig/interaction-design-history interaction marc rettig marcrettig.com design presented at history in a carnegie mellon university 2 april 2004 teeny mrettig@well.com
    5. 5. when? what? • muis: ’60 • ipv toetsen • trackball: voor muis, na scherm • scherm: ’50 • toetsenbord: gebaseerd op schrijfmachine • windows: ’88 • schakelaar: artilleriebanen • mac interface guidelines: ’86 - metafoor, consistentie 5
    6. 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
    7. 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).
    8. 8. configure switches, run batch, output to tape
    9. 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.
    10. 10. preparing punch cards An important by-product: confetti. All the cha from all those cards was just great to throw around the dorm.
    11. 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.
    12. 12. punch cards http://en.wikipedia.org/wiki/File:FortranCardPROJ039.agr.jpg 12
    13. 13. http://upload.wikimedia.org/wikipedia/commons/e/e8/IBM_card_punch_029.JPG 13
    14. 14. operator console IBM System 360 1960’s
    15. 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.
    16. 16. next? 16
    17. 17. Command Line Interface 17
    18. 18. Nog vb? 18
    19. 19. Nog vb? 18
    20. 20. http://www.designinginteractions.com/ 19
    21. 21. Grafische gebruikersinterface 20
    22. 22. WIMP • Windows Icons Menus, and Pointing devices • Characteristics • intuitive • consistent • forgiving • protective • But not necessarily best for expert! 21
    23. 23. Ivan Sutherland: Sketchpad (1962) Turing Award 1988 http://www.archive.org/details/AlanKeyD1987 http://www.youtube.com/watch?v=495nCzxM9PI http://www.youtube.com/watch?v=USyoT_Ha_bA 22
    24. 24. you admire? • gnome lead developer: minder knopjes • steve jobs - jonge jaren: durf, anders • jeff raskin: apple, macintosh, vooruitstrevend • linus torvalds: free os • timbl: www, ted talk • jakob nielsen: useit.com 23
    25. 25. D. Engelbart, Augment • Stanford Research Institute • invented interactive computing (mouse, windows, groupware, ...) • team went to Xerox PARC • now: bootstrap institute • http://www.bootstrap.org/ 24
    26. 26. 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 25
    27. 27. http://www.youtube.com/watch?v=X4kp9Ciy1nE 26
    28. 28. http://www.youtube.com/watch?v=X4kp9Ciy1nE 26
    29. 29. http://cfdj.sys-con.com/read/536976.htm
    30. 30. http://cfdj.sys-con.com/read/536976.htm
    31. 31. http://cfdj.sys-con.com/read/536976.htm
    32. 32. http://cfdj.sys-con.com/read/536976.htm
    33. 33. Fast forward to … now :) ! Text Text http://flash.kmi.open.ac.uk:8080/fm/fmm.php?code=c785a5-890room=fm890 28
    34. 34. Fast forward to … now :) ! Text Text http://hyperscope.org/ http://flash.kmi.open.ac.uk:8080/fm/fmm.php?code=c785a5-890room=fm890 28
    35. 35. Fast forward to … now :) ! Text Text http://hyperscope.org/ http://flash.kmi.open.ac.uk:8080/fm/fmm.php?code=c785a5-890room=fm890 http://video.google.com/videoplay?docid=-3914718330476864051q=doug+engelbart 28
    36. 36. http://www.designinginteractions.com/ 29
    37. 37. 30 http://programforthefuture.org/
    38. 38. 30 http://programforthefuture.org/
    39. 39. XEROX PARC Star (1981) 31
    40. 40. http://www.youtube.com/watch?v=XQ6ng1_TMN4 32
    41. 41. http://www.designinginteractions.com/ 33
    42. 42. 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!
    43. 43. Macintosh, 1984 http://www.youtube.com/watch?v=G0FtgZNOD44 35
    44. 44. Macintosh, 1984 http://www.youtube.com/watch?v=G0FtgZNOD44 35
    45. 45. 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
    46. 46. Windows 1.0 (1985) 37
    47. 47. http://www.youtube.com/watch?v=tGvHNNOLnCk 38
    48. 48. http://www.youtube.com/watch?v=y48rthTbrA8NR=1 39
    49. 49. beyond then ... 40
    50. 50. ??? • ubicomp • table surface • interactive whiteboard • mume at home: PS3-tv-pc-ipod • gedachte besturing • ai - gebruiker modelleren en voorspellen 41
    51. 51. http://www.ted.com/index.php/talks/anand_agarawala_demos_his_bumptop_desktop.html 42
    52. 52. 43 http://www.ted.com/index.php/talks/jeff_han_demos_his_breakthrough_touchscreen.html
    53. 53. http://portal.mace-project.eu/ 44
    54. 54. http://blogs.msdn.com/tom/archive/2009/03/03/future-vision-ux-ideas.aspx 45
    55. 55. http://www.ted.com/index.php/talks/david_merrill_demos_siftables_the_smart_blocks.html 46
    56. 56. http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html 47
    57. 57. http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html 47
    58. 58. http://www.lce.hut.fi/research/css/bci/ 48
    59. 59. http://www.youtube.com/watch?v=qCSSBEXBCbYNR=1 49
    60. 60. http://www.youtube.com/watch?v=NIG47YgndP8 50
    61. 61. 51 http://emotiv.com/
    62. 62. http://www.youtube.com/watch?v=JMLH_QyPTYM 52
    63. 63. The future has already arrived. It's just not evenly distributed yet. 53
    64. 64. • past: what struck you most and why? • future: what did you • like most? • want most? • dislike most? • fear most? • ...? • and why? • and: how do both relate to your work? 54
    65. 65. • les volgende week! • demo + rationale • 6*15 (20 max) • template eindverslag 55
    66. 66. 56
    67. 67. Thanks! 56
    68. 68. Questions? Thanks! 56
    69. 69. Questions? http://www.cs.kuleuven.ac.be/~erikd Thanks! 56
    70. 70. Questions? http://www.cs.kuleuven.ac.be/~erikd http://erikduval.wordpress.com Thanks! 56

    ×