SlideShare a Scribd company logo
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

More Related Content

PPTX
Radio Programme Production 1-1.pptx
PPTX
Dadasasheb Phalke (THE FATHER OF INDIAN CINEMA)
PPTX
Barc and Tam Media Audience measurement
PPTX
The role of newspaper in indian freedom struggle
PPT
History of indian advertising
PPTX
Presentation on touchscreen
PPTX
materi bahasa inggris SMA Advertisement
KEY
Week 2 IxD History: Interaction Design before Computers
Radio Programme Production 1-1.pptx
Dadasasheb Phalke (THE FATHER OF INDIAN CINEMA)
Barc and Tam Media Audience measurement
The role of newspaper in indian freedom struggle
History of indian advertising
Presentation on touchscreen
materi bahasa inggris SMA Advertisement
Week 2 IxD History: Interaction Design before Computers

Similar to From Typing to Swiping: A Brief History of Interaction Design (20)

PDF
An Illustrated History of Computation
PPT
102 Evolution of computers
PPTX
ENG322-PPT223fh hug dhhxhhh KB zvhcxhbxdc
PPT
Brief_History_Computing
PPTX
The History of Computers
PPT
Abriefhistoryofcomputers 121009151031-phpapp01
PPT
Brief history computing
PPT
History of computers2
PPT
A brief history of computers
PPT
The history of computers
PPTX
PPT
A brief history of computers
PPTX
History of computers
PDF
L13 The Rise of the Machine
PPTX
Historical background of ICT
KEY
Week 3 IxD History: Computing Technology in the Workplace
PDF
L13 The Rise of the Machine
PPT
sejarah komputer dari awal sampai saat ini
DOCX
Generation of computers
PPTX
Introduction to computers
An Illustrated History of Computation
102 Evolution of computers
ENG322-PPT223fh hug dhhxhhh KB zvhcxhbxdc
Brief_History_Computing
The History of Computers
Abriefhistoryofcomputers 121009151031-phpapp01
Brief history computing
History of computers2
A brief history of computers
The history of computers
A brief history of computers
History of computers
L13 The Rise of the Machine
Historical background of ICT
Week 3 IxD History: Computing Technology in the Workplace
L13 The Rise of the Machine
sejarah komputer dari awal sampai saat ini
Generation of computers
Introduction to computers
Ad

More from Karen McGrane (20)

PDF
Adaptive: Content, Context, and Controversy
PDF
The Future of Adaptive Content
PDF
The Mobile Content Mandate
PDF
Content in a Zombie Apocalypse
PDF
Thriving in a world of change: Future-friendly content with Drupal
PDF
IA Summit 2013 Closing Plenary
PDF
Content Strategy for Mobile: The Workshop
KEY
Uncle Sam Wants You (To Optimize Your Content For Mobile)
PDF
Adapting Ourselves to Adaptive Content
PDF
Adapting ourselves to adaptive content
PDF
Developing Successful Content Management Solutions
PDF
Adapting ourselves to adaptive content
PDF
The Way Forward: What's next for content strategy
KEY
Selling content strategy
KEY
Nailing Your Performance
KEY
Making the most of mobile
KEY
Nashville UX Meetup
KEY
How to do content strategy
PDF
Avoiding the 11th Hour Sh*storm at SxSW
PDF
Baby Got Backend: Content Administrators are Users Too
Adaptive: Content, Context, and Controversy
The Future of Adaptive Content
The Mobile Content Mandate
Content in a Zombie Apocalypse
Thriving in a world of change: Future-friendly content with Drupal
IA Summit 2013 Closing Plenary
Content Strategy for Mobile: The Workshop
Uncle Sam Wants You (To Optimize Your Content For Mobile)
Adapting Ourselves to Adaptive Content
Adapting ourselves to adaptive content
Developing Successful Content Management Solutions
Adapting ourselves to adaptive content
The Way Forward: What's next for content strategy
Selling content strategy
Nailing Your Performance
Making the most of mobile
Nashville UX Meetup
How to do content strategy
Avoiding the 11th Hour Sh*storm at SxSW
Baby Got Backend: Content Administrators are Users Too
Ad

Recently uploaded (20)

PDF
Mushroom cultivation and it's methods.pdf
PDF
Web App vs Mobile App What Should You Build First.pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PPTX
1. Introduction to Computer Programming.pptx
PDF
Encapsulation theory and applications.pdf
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
WOOl fibre morphology and structure.pdf for textiles
PDF
Hybrid model detection and classification of lung cancer
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
1 - Historical Antecedents, Social Consideration.pdf
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
TLE Review Electricity (Electricity).pptx
Mushroom cultivation and it's methods.pdf
Web App vs Mobile App What Should You Build First.pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
MIND Revenue Release Quarter 2 2025 Press Release
1. Introduction to Computer Programming.pptx
Encapsulation theory and applications.pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
WOOl fibre morphology and structure.pdf for textiles
Hybrid model detection and classification of lung cancer
A comparative analysis of optical character recognition models for extracting...
1 - Historical Antecedents, Social Consideration.pdf
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
Unlocking AI with Model Context Protocol (MCP)
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Zenith AI: Advanced Artificial Intelligence
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
Encapsulation_ Review paper, used for researhc scholars
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Building Integrated photovoltaic BIPV_UPV.pdf
TLE Review Electricity (Electricity).pptx

From Typing to Swiping: A Brief History of Interaction Design