Your SlideShare is downloading. ×
0
FROM TYPING TO SWIPING
A Brief History of Interaction Design
HOW WE TALK TO COMPUTERS
 HOW MACHINES TALK BACK




                           2
FIT THE PERSON TO THE MACHINE




FIT THE MACHINE TO THE PERSON

                                3
WHO’S THE USER?
WHAT’S THE INTERFACE?
HOW WAS IT USED?
WHO BOUGHT THEM?
BEFORE 1945
MECHANICAL TOOLS
Who’s                        What’s
the user?                    the
                        ...
An undetected error in a logarithmic table is
like a sunken rock at sea yet undiscovered,
upon which it is impossible to s...
CHARLES BABBAGE


                                                       “
(1791–1871)

                                  ...
THE DIFFERENCE ENGINE
(1822)




http://upload.wikimedia.org/wikipedia/en/4/45/Difference_engine.JPG
                     ...
THE ANALYTICAL ENGINE
(1833)




                  web.arch.usyd.edu.au/~sriz8189/computing7.html   12
DIFFERENTIAL ANALYZER
(1930–40s)




http://en.wikipedia.org/wiki/File:KayMcNultyAlyseSnyderSisStumpDifferentialAnalyzer.j...
“
VANNEVAR BUSH
(1890 – 1974)

                Vannevar Bush is a great name for
                playing six degrees of se...
1945–1950
THE NEW INVENTION
Who’s                                What’s
the user?                            the
         ...
PRESPER ECKERT & JOHN MAUCHLEY
(1946)




                             16
“
One would think that if a man invented a machine
that revolutionized the world, took out a patent
on that machine, and h...
ENIAC
(1946)




http://mrsec.wisc.edu/Edetc/SlideShow/slides/computer/eniac.html   18
ENIAC
(1946)




http://www.columbia.edu/acis/history/eniac4.png
                                                  19
“
The principle flaw was ENIAC’s inability to hold
easily altered instructions in its memory. Every
time the machine neede...
1950 –1960
THE CALCULATOR
Who’s                                 What’s the
the user?                             interface...
HERMAN HOLLERITH
(1860 – 1929)




http://www.census.gov/history/img/Hollerith.jpg   http://www.columbia.edu/acis/history/...
(1880)
                                                                              THE CENSUS




23




http://upload.w...
HOLLERITH CENSUS TABULATOR
(1890)




http://www.columbia.edu/acis/history/census-tabulator.html   24
READING PUNCH CARDS
        1.     Card reader
        2.     Cups of mercury
        3.     Tabulating dials
        4.  ...
F.W. TAYLOR


                                                “
 (1856 – 1915)

                                          ...
SCIENTIFIC MANAGEMENT




http://images.google.com/hosted/life/l?imgurl=bd5182b00cffc073   27
http://www-03.ibm.com/ibm/history/exhibits/vintage/images/4506VV2015.jpg
                                                 ...
http://www-03.ibm.com/ibm/history/exhibits/vintage/vintage_4506VV9002.html
                                               ...
1925   1933




              http://www-03.ibm.com/ibm/history/
1949   1964
                                            30
“
One place where IBM did succeed was in keeping
viable the basic input medium of the punched
card, and with that the basi...
PUNCHED HOLE FUNCTIONS
1. Adds
2. Subtracts
3. Multiplies
4. Divides
5. Lists itself
6. Reproduces itself
7. Classifies it...
IBM ELECTRONIC CALCULATORS
       (1950s)




http://www.digibarn.com/collections/ads/ibm-50s/index.html
                 ...
1960 –1970
THE GIANT BRAIN
Who’s the                              What’s the
user?                                  interf...
“
MAN-COMPUTER SYMBIOSIS
                The hope is that, in not too
                many years, human brains
           ...
http://www.digibarn.com/collections/ads/univac-50s/stand-alone/index.htm   http://www.digibarn.com/collections/ads/univac-...
37
UNIVAC
(1951)




http://americanhistory.si.edu/collections/comphist/objects/univac.htm
                                  ...
http://www.library.upenn.edu/exhibits/rbm/mauchly/img/unidia.jpg
39
GRACE MURRAY HOPPER


                                                             “
(1906 – 1992)

                      ...
“
Not only would a
programmer hardly
ever see the
computer, he or she
might never even
see the keypunch on
which the progr...
HENRY DREYFUSS


                                                 “
(1904 – 1972)

                                       ...
DESIGNING FOR PEOPLE
(1955)




                       43
44
1970 –1985
PINK COLLAR LABOR
Who’s the                          What’s the
user?                              interface?

...
WHIRLWIND
(1952)




 http://www.computermuseum.li/Testpage/Whirlwind-1949.htm
 http://www.computerhistory.org/collections...
WHIRLWIND




COMMAND LINE   GRAPHICAL USER
                 INTERFACE
                                47
DATA ENTRY




             48
“
By the mid-1960s, data processing computers for
business had become well established. The
commercial computer installati...
WHIRLWIND




COMMAND LINE   GRAPHICAL USER
                 INTERFACE
                                50
BATCH        TIME
PROCESSING   SHARING



                       51
DIRECT MANIPULATION



                      52
IVAN SUTHERLAND


                                    “
(b.1938)

                                                        ...
SKETCHPAD
 (1963)




http://design.osu.edu/carlson/history/images/ivan-sutherland.jpg                                    ...
“
DOUGLAS ENGELBART
(b. 1925)

                                                      By augmenting man's intellect
       ...
X/Y POSITION INDICATOR
ALSO KNOWN AS “THE MOUSE”
(1964)

                             The number of
                      ...
NLS – ONLINE SYSTEM
(60s)




http://www.dougengelbart.org/   57
THE MOTHER OF ALL DEMOS
(1968)




http://blogs.discovermagazine.com/80beats/files/2008/12/engelbart-demo.jpg   http://vid...
1985 –1995
PERSONAL COMPUTING
Who’s                                What’s the
the user?                            interfa...
MITS ALTAIR 8800
(1975)




                   60
ALTAIR BASIC




http://en.wikipedia.org/wiki/File:Altair_Basic_Sign.jpg
                                                 ...
PERSONAL COMPUTING
(1975)
http://upload.wikimedia.org/wikipedia/commons/6/6e/Homebrew_Computer_Club_Sep1976.png
                                    ...
http://upload.wikimedia.org/wikipedia/commons/a/a1/Apple_I_Computer.jpg
                                                  ...
HOME COMPUTERS
 (Late 70s)




Apple II                     IBM 5150




 Commodore PET   Tandy Radio Shack TRS-80   Commo...
APPLICATION INTERFACES
(70s)




Command Line         WordStar




Hierarchical Menus   VisiCalc
XEROX PARC
(1970s)

             _ Laser Printer
             _ Ethernet local area computer
               network
      ...
XEROX ALTO
(1973)




             68
XEROX STAR
(1981)




             69
APPLE LISA
(1983)
APPLE MACINTOSH
(1983)




                  71
WORLD WIDE WEB
(1990s)




                                 Netscape, 1994




First Web Browser/Editor, 1990
            ...
1995 – ?
NETWORKED UBIQUITY
Who’s                           What’s the
the user?                       interface?




    ...
THANKS!

@karenmcgrane
karen@bondartscience.com
www.bondartscience.com
+1 (917) 887-8149
Upcoming SlideShare
Loading in...5
×

From Typing to Swiping: A Brief History of Interaction Design

4,932

Published on

Guest lecture for SVA program in Interaction Design Fundamentals Studio.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,932
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
84
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "From Typing to Swiping: A Brief History of Interaction Design"

  1. 1. FROM TYPING TO SWIPING A Brief History of Interaction Design
  2. 2. HOW WE TALK TO COMPUTERS HOW MACHINES TALK BACK 2
  3. 3. FIT THE PERSON TO THE MACHINE FIT THE MACHINE TO THE PERSON 3
  4. 4. WHO’S THE USER?
  5. 5. WHAT’S THE INTERFACE?
  6. 6. HOW WAS IT USED?
  7. 7. WHO BOUGHT THEM?
  8. 8. BEFORE 1945 MECHANICAL TOOLS Who’s What’s the user? the interface? MAD SCIENTISTS GEARS AND CRANKS How Who is it bought used? 1, 2, 3, 4... them? COUNTING IT DEPENDS
  9. 9. An undetected error in a logarithmic table is like a sunken rock at sea yet undiscovered, upon which it is impossible to say what wrecks may have taken place. —Sir John Herschel (1842) First published table of Logarithms by John Napier, 1614 http://www.math.yorku.ca/SCS/Gallery/images/dan/napier_logtable.jpg 9
  10. 10. CHARLES BABBAGE “ (1791–1871) As soon as an Analytical Engine exists, it will necessarily guide the future course of the science. Whenever any result is sought by its aid, the question will then arise — by what course of calculation can these results be arrived at by the machine in the shortest time? —Passages from the Life of a Philosopher, ch. 8 “Of the Analytical Engine” http://en.wikipedia.org/wiki/File:CharlesBabbage.jpg 10
  11. 11. THE DIFFERENCE ENGINE (1822) http://upload.wikimedia.org/wikipedia/en/4/45/Difference_engine.JPG 11
  12. 12. THE ANALYTICAL ENGINE (1833) web.arch.usyd.edu.au/~sriz8189/computing7.html 12
  13. 13. DIFFERENTIAL ANALYZER (1930–40s) http://en.wikipedia.org/wiki/File:KayMcNultyAlyseSnyderSisStumpDifferentialAnalyzer.jpg 13
  14. 14. “ VANNEVAR BUSH (1890 – 1974) Vannevar Bush is a great name for playing six degrees of separation. Turn back the clock on any aspect of information technology — from the birth of Silicon Valley and the marriage of science and the military to the advent of the World Wide Web — and you find his footprints. As historian Michael Sherry says, "To understand the world of Bill Gates and Bill Clinton, start with understanding Vannevar Bush. —G. Pascal Zachary, The Godfather 14
  15. 15. 1945–1950 THE NEW INVENTION Who’s What’s the user? the interface? THE INVENTORS MOVING CABLES AROUND How Who is it bought used? them? BRUTE FORCE ARITHMETIC THE MILITARY
  16. 16. PRESPER ECKERT & JOHN MAUCHLEY (1946) 16
  17. 17. “ One would think that if a man invented a machine that revolutionized the world, took out a patent on that machine, and had the full financial and legal resources of a major American corporation on his side, he would spend most of the rest of his life enjoying fortune and fame. Edison did. Bell did. By and large, Pres Eckert and John Mauchley did not. —Shurkin, Engines of the Mind 17
  18. 18. ENIAC (1946) http://mrsec.wisc.edu/Edetc/SlideShow/slides/computer/eniac.html 18
  19. 19. ENIAC (1946) http://www.columbia.edu/acis/history/eniac4.png 19
  20. 20. “ The principle flaw was ENIAC’s inability to hold easily altered instructions in its memory. Every time the machine needed reprogramming, operators had to run around the room turning dials, throwing switches, replugging cables, and rolling function tables about. It was realized that this whole method of programming was a clumsy method, and archaic… but it did not matter with firing tables, which permitted the same program to run for weeks. —Joel Shurkin, Engines of the Mind 20
  21. 21. 1950 –1960 THE CALCULATOR Who’s What’s the the user? interface? EXPERTS AND PIONEERS PUNCH CARDS AND TAPE How is it Who used? bought them? HIGH SPEED CALCULATIONS ROCKET SCIENTISTS
  22. 22. HERMAN HOLLERITH (1860 – 1929) http://www.census.gov/history/img/Hollerith.jpg http://www.columbia.edu/acis/history/1890-card.gif 22
  23. 23. (1880) THE CENSUS 23 http://upload.wikimedia.org/wikipedia/en/b/b0/1880_census_Hollerith.gif
  24. 24. HOLLERITH CENSUS TABULATOR (1890) http://www.columbia.edu/acis/history/census-tabulator.html 24
  25. 25. READING PUNCH CARDS 1. Card reader 2. Cups of mercury 3. Tabulating dials 4. Sorting compartment 1 2 4 3 http://www.columbia.edu/acis/history/census- tabulator.html 25
  26. 26. F.W. TAYLOR “ (1856 – 1915) Now one of the very first requirements for a man who is fit to handle pig iron as a regular occupation is that he shall be so stupid and so phlegmatic that he more nearly resembles in his mental make-up the ox than any other type. The man who is mentally alert and intelligent is for this very reason entirely unsuited to what would, for him, be the grinding monotony of work of this character. http://explorepahistory.com/images/ExplorePAHistory-a0j8p9-a_349.jpg 26
  27. 27. SCIENTIFIC MANAGEMENT http://images.google.com/hosted/life/l?imgurl=bd5182b00cffc073 27
  28. 28. http://www-03.ibm.com/ibm/history/exhibits/vintage/images/4506VV2015.jpg 28
  29. 29. http://www-03.ibm.com/ibm/history/exhibits/vintage/vintage_4506VV9002.html 29
  30. 30. 1925 1933 http://www-03.ibm.com/ibm/history/ 1949 1964 30
  31. 31. “ One place where IBM did succeed was in keeping viable the basic input medium of the punched card, and with that the basic flow of data through a customer’s installation. The same card, encoded the same way and using a keypunch little changed since the 1930s, served IBMs computers through the 1960s and beyond. The sequential processing and file structure, implicit in punched card operations, also survived in the form of batch processing common to most mainframe computer centers of the 1960s. —Ceruzzi, A History of Modern Computing 31
  32. 32. PUNCHED HOLE FUNCTIONS 1. Adds 2. Subtracts 3. Multiplies 4. Divides 5. Lists itself 6. Reproduces itself 7. Classifies itself 8. Selects itself 9. Prints to an IBM Card 10. Automatic balance forward 11. Files itself 12. Posts itself 13. Reproduces and prints 14. Punch from pencil mark 15. Print total 16. Compare to something 17. Advance/eject a form 32
  33. 33. IBM ELECTRONIC CALCULATORS (1950s) http://www.digibarn.com/collections/ads/ibm-50s/index.html 33
  34. 34. 1960 –1970 THE GIANT BRAIN Who’s the What’s the user? interface? COMPUTER CENTER ACOLYTES TELETYPE AND TERMINAL How is it Who used? bought them? BATCH PROCESSING INFORMATION INTENSIVE BUSINESSES
  35. 35. “ MAN-COMPUTER SYMBIOSIS 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.C.R. Licklider Man-Computer Symbiosis 35
  36. 36. http://www.digibarn.com/collections/ads/univac-50s/stand-alone/index.htm http://www.digibarn.com/collections/ads/univac-50s/divide-by-zero/index.htm 36
  37. 37. 37
  38. 38. UNIVAC (1951) http://americanhistory.si.edu/collections/comphist/objects/univac.htm 38
  39. 39. http://www.library.upenn.edu/exhibits/rbm/mauchly/img/unidia.jpg 39
  40. 40. GRACE MURRAY HOPPER “ (1906 – 1992) A ship in port is safe; but that is not what ships are built for. Sail out to sea and do new things. “ It's easier to ask forgiveness than it is to get permission. http://www.flickr.com/photos/publicresourceorg/493885707/ 40
  41. 41. “ Not only would a programmer hardly ever see the computer, he or she might never even see the keypunch on which the programs were entered into the computer. —A History of Modern Computing 41
  42. 42. HENRY DREYFUSS “ (1904 – 1972) The products we design are going to be ridden in, sat upon, looked at, talked into, activated, operated, or in some way used by people individually or en masse. If the point of contact between the product and the people becomes a point of friction, then the industrial designer has failed. If, on the other hand, people are made safer, more comfortable, more eager to purchase, more efficient—or just plain happier—the industrial designer has succeeded. http://perpenduum.com/wp-content/uploads/2007/09/henrydreyfuss.jpg 42
  43. 43. DESIGNING FOR PEOPLE (1955) 43
  44. 44. 44
  45. 45. 1970 –1985 PINK COLLAR LABOR Who’s the What’s the user? interface? DATA ENTRY OPERATORS GREEN-SCREEN ALPHANUMERIC How is it Who used? bought them? TIME SHARING MOST BUSINESSES
  46. 46. WHIRLWIND (1952) http://www.computermuseum.li/Testpage/Whirlwind-1949.htm http://www.computerhistory.org/collections/accession/102622503 46
  47. 47. WHIRLWIND COMMAND LINE GRAPHICAL USER INTERFACE 47
  48. 48. DATA ENTRY 48
  49. 49. “ By the mid-1960s, data processing computers for business had become well established. The commercial computer installation was characterized by a large, centralized computer manufactured by IBM or one of the other half- dozen mainframe computer companies, running a batch-processing or real-time application. The role of the user in this computing environment was to feed data into the computer system and interact with it in the very restricted fashion determined by the application. —Kelly and Aspray, “Computer” 49
  50. 50. WHIRLWIND COMMAND LINE GRAPHICAL USER INTERFACE 50
  51. 51. BATCH TIME PROCESSING SHARING 51
  52. 52. DIRECT MANIPULATION 52
  53. 53. 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 53
  54. 54. SKETCHPAD (1963) http://design.osu.edu/carlson/history/images/ivan-sutherland.jpg 54 http://images.businessweek.com/ss/08/10/1006_ceo_guide/image/ivanssketchpad600gimpr.jpg
  55. 55. “ 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 55
  56. 56. 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 56
  57. 57. NLS – ONLINE SYSTEM (60s) http://www.dougengelbart.org/ 57
  58. 58. THE MOTHER OF ALL DEMOS (1968) http://blogs.discovermagazine.com/80beats/files/2008/12/engelbart-demo.jpg http://video.google.com/videoplay?docid=-8734787622017763097 58
  59. 59. 1985 –1995 PERSONAL COMPUTING Who’s What’s the the user? interface? GEEKS GUIs How is Who it used? bought them? PACKAGED SOFTWARE APPS UPWARDLY MOBILE HOME USERS
  60. 60. MITS ALTAIR 8800 (1975) 60
  61. 61. ALTAIR BASIC http://en.wikipedia.org/wiki/File:Altair_Basic_Sign.jpg 61
  62. 62. PERSONAL COMPUTING (1975)
  63. 63. http://upload.wikimedia.org/wikipedia/commons/6/6e/Homebrew_Computer_Club_Sep1976.png 63
  64. 64. http://upload.wikimedia.org/wikipedia/commons/a/a1/Apple_I_Computer.jpg 64
  65. 65. HOME COMPUTERS (Late 70s) Apple II IBM 5150 Commodore PET Tandy Radio Shack TRS-80 Commodore VIC-20 65
  66. 66. APPLICATION INTERFACES (70s) Command Line WordStar Hierarchical Menus VisiCalc
  67. 67. XEROX PARC (1970s) _ Laser Printer _ Ethernet local area computer network _ Computer generated bitmap graphics _ Graphical user interface featuring windows and icons _ WYSIWYG text editor 67
  68. 68. XEROX ALTO (1973) 68
  69. 69. XEROX STAR (1981) 69
  70. 70. APPLE LISA (1983)
  71. 71. APPLE MACINTOSH (1983) 71
  72. 72. WORLD WIDE WEB (1990s) Netscape, 1994 First Web Browser/Editor, 1990 Yahoo, 1994
  73. 73. 1995 – ? NETWORKED UBIQUITY Who’s What’s the the user? interface? EVERYONE. GUIs How is Who it used? bought them? WEB-ENABLED TOOLS THEY’RE CHEAP! BUY SEVERAL!
  74. 74. THANKS! @karenmcgrane karen@bondartscience.com www.bondartscience.com +1 (917) 887-8149
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×