from typing to swiping: a brief history of interaction design

FROM TYPING TO SWIPINGA Brief History of Interaction Design

2

HOW WE TALK TO COMPUTERSHOW MACHINES TALK BACK

FIT THE PERSON TO THE MACHINE

3

FIT THE MACHINE TO THE PERSON

WHO’S THE USER?

WHAT’S THE INTERFACE?

HOW WAS IT USED?

WHO BOUGHT THEM?

COUNTING

GEARS AND CRANKS

BEFORE 1945

MECHANICAL TOOLS

How is it used?

Who bought them?

Who’s the user?

What’s the interface?

IT DEPENDS

1, 2, 3, 4...

MAD SCIENTISTS

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, 1614http://www.math.yorku.ca/SCS/Gallery/images/dan/napier_logtable.jpg

CHARLES BABBAGE(1791–1871)

10http://en.wikipedia.org/wiki/File:CharlesBabbage.jpg

“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”

THE DIFFERENCE ENGINE(1822)

11http://upload.wikimedia.org/wikipedia/en/4/45/Difference_engine.JPG

THE ANALYTICAL ENGINE(1833)

12web.arch.usyd.edu.au/~sriz8189/computing7.html

13

DIFFERENTIAL ANALYZER(1930–40s)

http://en.wikipedia.org/wiki/File:KayMcNultyAlyseSnyderSisStumpDifferentialAnalyzer.jpg

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

BRUTE FORCE ARITHMETIC

MOVING CABLES AROUND

1945–1950

THE NEW INVENTION

How is it used?

Who bought them?

Who’s the user?

What’s the interface?

THE MILITARY

THE INVENTORS

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)

18http://mrsec.wisc.edu/Edetc/SlideShow/slides/computer/eniac.html

ENIAC(1946)

19http://www.columbia.edu/acis/history/eniac4.png

“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 Mind20

1950 –1960

THE CALCULATOR

ROCKET SCIENTISTSHIGH SPEED CALCULATIONS

PUNCH CARDS AND TAPEEXPERTS AND PIONEERS

How is it used?

Who bought them?

Who’s the user?

What’s the interface?

HERMAN HOLLERITH(1860 – 1929)

22http://www.census.gov/history/img/Hollerith.jpg http://www.columbia.edu/acis/history/1890-card.gif

THE CENSUS(1880)

23

http

://up

load

.wik

imed

ia.o

rg/w

ikip

edia

/en/

b/b0

/188

0_ce

nsus

_Hol

lerit

h.gi

f

HOLLERITH CENSUS TABULATOR(1890)

24http://www.columbia.edu/acis/history/census-tabulator.html

25http://www.columbia.edu/acis/history/census-tabulator.html

READING PUNCH CARDS1. Card reader2. Cups of mercury3. Tabulating dials4. Sorting compartment

1 2

34

F.W. TAYLOR(1856 – 1915)

26

“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

SCIENTIFIC MANAGEMENT

27http://images.google.com/hosted/life/l?imgurl=bd5182b00cffc073

28http://www-03.ibm.com/ibm/history/exhibits/vintage/images/4506VV2015.jpg

29http://www-03.ibm.com/ibm/history/exhibits/vintage/vintage_4506VV9002.html

30

1925

http://www-03.ibm.com/ibm/history/

1933

19641949

“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 Computing31

32

PUNCHED HOLE FUNCTIONS1. Adds2. Subtracts3. Multiplies4. Divides5. Lists itself6. Reproduces itself7. Classifies itself8. Selects itself9. Prints to an IBM Card10. Automatic balance forward11. Files itself12. Posts itself13. Reproduces and prints14. Punch from pencil mark15. Print total16. Compare to something17. Advance/eject a form

33

IBM ELECTRONIC CALCULATORS (1950s)

http://www.digibarn.com/collections/ads/ibm-50s/index.html

TELETYPE AND TERMINAL

INFORMATION INTENSIVE BUSINESSESBATCH PROCESSING

COMPUTER CENTER ACOLYTES

1960 –1970

THE GIANT BRAIN

How is it used?

Who bought them?

Who’s the user?

What’s the interface?

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

36http://www.digibarn.com/collections/ads/univac-50s/stand-alone/index.htm http://www.digibarn.com/collections/ads/univac-50s/divide-by-zero/index.htm

37

38http://americanhistory.si.edu/collections/comphist/objects/univac.htm

UNIVAC(1951)

39

http

://w

ww

.libr

ary.

upen

n.ed

u/ex

hibi

ts/r

bm/m

auch

ly/im

g/un

idia

.jpg

GRACE MURRAY HOPPER(1906 – 1992)

40http://www.flickr.com/photos/publicresourceorg/493885707/

“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.

“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.

42http://perpenduum.com/wp-content/uploads/2007/09/henrydreyfuss.jpg

DESIGNING FOR PEOPLE(1955)

43

44

1970 –1985

PINK COLLAR LABOR

MOST BUSINESSESTIME SHARING

GREEN-SCREEN ALPHANUMERICDATA ENTRY OPERATORS

How is it used?

Who bought them?

Who’s the user?

What’s the interface?

WHIRLWIND (1952)

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

46

WHIRLWIND

COMMAND LINE GRAPHICAL USER INTERFACE

47

48

DATA ENTRY

“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 PROCESSING

TIME SHARING

51

52

DIRECT MANIPULATION

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.

53http://www.cc.gatech.edu/classes/cs6751_97_fall/projects/abowd_team/ivan/ivanbw_45.jpg

SKETCHPAD (1963)

54http://images.businessweek.com/ss/08/10/1006_ceo_guide/image/ivanssketchpad600gimpr.jpghttp://design.osu.edu/carlson/history/images/ivan-sutherland.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 Englebart55http://en.wikipedia.org/wiki/File:Engelbartmice.jpg

X/Y POSITION INDICATOR ALSO KNOWN AS “THE MOUSE” (1964)

56http://upload.wikimedia.org/wikipedia/commons/e/ed/Mouse-patents-englebart-rid.png

The number of buttons on a mouse is one of the most controversial issues in the industry. People get religious.

—Bill Gates

NLS – ONLINE SYSTEM (60s)

57http://www.dougengelbart.org/

THE MOTHER OF ALL DEMOS(1968)

58http://blogs.discovermagazine.com/80beats/files/2008/12/engelbart-demo.jpg http://video.google.com/videoplay?docid=-8734787622017763097

GUIs

PACKAGED SOFTWARE APPS UPWARDLY MOBILE HOME USERS

1985 –1995

PERSONAL COMPUTING

How is it used?

Who bought them?

GEEKS

Who’s the user?

What’s the interface?

MITS ALTAIR 8800 (1975)

60

ALTAIR BASIC

61http://en.wikipedia.org/wiki/File:Altair_Basic_Sign.jpg

PERSONAL COMPUTING (1975)

63http://upload.wikimedia.org/wikipedia/commons/6/6e/Homebrew_Computer_Club_Sep1976.png

64http://upload.wikimedia.org/wikipedia/commons/a/a1/Apple_I_Computer.jpg

Apple II

Commodore PET Tandy Radio Shack TRS-80

IBM 5150

Commodore VIC-20

HOME COMPUTERS (Late 70s)

65

Command Line

VisiCalc

APPLICATION INTERFACES (70s)

WordStar

Hierarchical Menus

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

First Web Browser/Editor, 1990

Netscape, 1994

Yahoo, 1994

WORLD WIDE WEB (1990s)

THEY’RE CHEAP! BUY SEVERAL!WEB-ENABLED TOOLS

EVERYONE.

1995 – ?

NETWORKED UBIQUITY

How is it used?

Who bought them?

Who’s the user?

What’s the interface?

GUIs

THANKS!

@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149