From Typing to Swiping: A Brief History of Interaction Design
Upcoming SlideShare
Loading in...5
×
 

From Typing to Swiping: A Brief History of Interaction Design

on

  • 4,585 views

Guest lecture for SVA program in Interaction Design Fundamentals Studio.

Guest lecture for SVA program in Interaction Design Fundamentals Studio.

Statistics

Views

Total Views
4,585
Views on SlideShare
4,583
Embed Views
2

Actions

Likes
2
Downloads
64
Comments
0

2 Embeds 2

http://smok.se 1
http://www.smok.se 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 interface? MAD SCIENTISTS GEARS AND CRANKS How Who is it bought used? 1, 2, 3, 4... them? COUNTING IT DEPENDS
  • 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
  • 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
  • THE DIFFERENCE ENGINE (1822) http://upload.wikimedia.org/wikipedia/en/4/45/Difference_engine.JPG 11
  • THE ANALYTICAL ENGINE (1833) web.arch.usyd.edu.au/~sriz8189/computing7.html 12
  • DIFFERENTIAL ANALYZER (1930–40s) http://en.wikipedia.org/wiki/File:KayMcNultyAlyseSnyderSisStumpDifferentialAnalyzer.jpg 13
  • “ 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
  • 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
  • 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 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
  • 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 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
  • 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
  • HERMAN HOLLERITH (1860 – 1929) http://www.census.gov/history/img/Hollerith.jpg http://www.columbia.edu/acis/history/1890-card.gif 22
  • (1880) THE CENSUS 23 http://upload.wikimedia.org/wikipedia/en/b/b0/1880_census_Hollerith.gif
  • 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. Sorting compartment 1 2 4 3 http://www.columbia.edu/acis/history/census- tabulator.html 25
  • 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
  • SCIENTIFIC MANAGEMENT http://images.google.com/hosted/life/l?imgurl=bd5182b00cffc073 27
  • http://www-03.ibm.com/ibm/history/exhibits/vintage/images/4506VV2015.jpg 28
  • http://www-03.ibm.com/ibm/history/exhibits/vintage/vintage_4506VV9002.html 29
  • 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 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
  • 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
  • IBM ELECTRONIC CALCULATORS (1950s) http://www.digibarn.com/collections/ads/ibm-50s/index.html 33
  • 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
  • “ 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
  • 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
  • UNIVAC (1951) http://americanhistory.si.edu/collections/comphist/objects/univac.htm 38
  • http://www.library.upenn.edu/exhibits/rbm/mauchly/img/unidia.jpg 39
  • 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
  • “ 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
  • 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
  • DESIGNING FOR PEOPLE (1955) 43
  • 44
  • 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
  • WHIRLWIND (1952) http://www.computermuseum.li/Testpage/Whirlwind-1949.htm http://www.computerhistory.org/collections/accession/102622503 46
  • 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 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
  • WHIRLWIND COMMAND LINE GRAPHICAL USER INTERFACE 50
  • BATCH TIME PROCESSING SHARING 51
  • DIRECT MANIPULATION 52
  • 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
  • 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
  • “ 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
  • 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
  • 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://video.google.com/videoplay?docid=-8734787622017763097 58
  • 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
  • MITS ALTAIR 8800 (1975) 60
  • ALTAIR BASIC http://en.wikipedia.org/wiki/File:Altair_Basic_Sign.jpg 61
  • PERSONAL COMPUTING (1975)
  • http://upload.wikimedia.org/wikipedia/commons/6/6e/Homebrew_Computer_Club_Sep1976.png 63
  • http://upload.wikimedia.org/wikipedia/commons/a/a1/Apple_I_Computer.jpg 64
  • HOME COMPUTERS (Late 70s) Apple II IBM 5150 Commodore PET Tandy Radio Shack TRS-80 Commodore VIC-20 65
  • APPLICATION INTERFACES (70s) Command Line WordStar Hierarchical Menus VisiCalc
  • 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
  • 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 Yahoo, 1994
  • 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!
  • THANKS! @karenmcgrane karen@bondartscience.com www.bondartscience.com +1 (917) 887-8149