Seng310 Lecture 2. History of HCI

Objectives

• Understand historical underpinnings of HCI

History of HCI

• Longer than you might think! • Processing power, following Moore’s

law, has only recently allowed designs that were conceived decades ago to be realized

• Some amazingly fleshed out designs pre-date computational capabilities

A timeline from 1945-1995

Dynabook, Alto, Star,

Apple MAC

1990’s   2010-

Mainframes

1940’s-­‐  1960’s  

1980’s   2000’s  

WWW

HCI CSCW

Web 2.0

Smart interac-

tions

Social media

Hypertext/

Hypermedia

Smart services

Smart media

Social

Computing

Text

Visionaries

1970’s  

Vannevar Bush: “As we may think” (1945)

Identified the information storage and retrieval problem: new knowledge does not reach the people who could benefit from it

“publication has been extended far beyond our present ability to make real use of the record”

Memex - Vannevar Bush (1945)

Bush’s Memex Conceived Hypertext and the World Wide Web

  a device where individuals stores all personal books, records, communications etc

  items retrieved rapidly through indexing, keywords, cross references,...

  can annotate text with margin notes, comments...

  can construct and save a trail (chain of links) through the material

  Based on microfilm, not implemented mmmm

mmmm

mmm mm

mmmm mmm

mmmm mmmm

mmm mm

mmmm mmm

mmmm

mmmm

mmm mm

mmmm

mmm

mmmm mmmm

mmm

mm

mmmm mmm

Douglas Engelbart (1950’s)

“...The world is getting more complex, and problems are getting more urgent. These must be dealt with collectively. However, human abilities to deal collectively with complex / urgent problems are not increasing as fast as these problems.”

...Doug Engelbart

Douglas Engelbart The Vision (Early 50’s)

…I had the image of sitting at a big CRT screen with all kinds of symbols, new and different symbols, not restricted to our old ones. The computer could be manipulated, and you could be operating all kinds of things to drive the computer

... I also had a clear picture that one's colleagues could be sitting in other rooms with similar work stations, tied to the same computer complex, and could be sharing and working and collaborating very closely. And also the assumption that there'd be a lot of new skills, new ways of thinking that would evolve

...Doug Engelbart

“….the  human  foot  was  a  pre2y  sensi5ve  controller  of  the  gas  pedal  in  cars.  With  a  li2le  work,  we  discovered  that  the  knee  offered  even  be2er  control  at  slight  movements  in  all  direc5ons.  In  tests,  it  outperformed  the  mouse  by  a  

small  margin.”              ...Doug  Engelbart  

•  Document Processing –  modern word processing –  outline processing –  hypermedia

•  Input / Output –  the mouse and one-handed corded

keyboard –  high resolution displays –  multiple windows –  specially designed furniture

•  Shared work –  shared files and personal annotations –  electronic messaging –  shared displays with multiple pointers –  audio/video conferencing –  ideas of an Internet

Sutherland’s SketchPad-1963

Sophisticated drawing package • hierarchical structures defined pictures and sub-

pictures • object-oriented programming: master picture with

instances •  constraints: specify details which the system maintains

through changes •  icons: small pictures represented more complex items •  copying: pictures and constraints •  input techniques: light pen • world coordinates: separation of

screen from drawing coordinates •  recursive operations: applied to

children of hierarchical objects

From  h2p://accad.osu.edu/~waynec/history/images/ivan-­‐sutherland.jpg  

Ted Nelson’s Xanadu (1965)

•  Coined the words hypertext and hypermedia •  Designed to store all the world’s literature! •  Could link from any substring to another

substring •  Text would never be deleted (may be linked!) •  Most recent version is always retrieved •  Original author gets royalties (attribution) •  Transclusion -- the inclusion of part of a

document into another document by reference

Ted Nelson’s one liners!

The Xanadu® project did not "fail to invent HTML". HTML is precisely what we were trying to PREVENT-- ever-breaking links, links going outward only, quotes you can't follow to their origins, no version management, no rights management.

The "Browser" is an extremely silly concept-- a window for looking sequentially at a large parallel structure. It does not show this structure in a useful way.

Early Hypertext systems (Brown University, 1969)

Alan Kay’s Dynabook (1969)

“Imagine having your own self-contained knowledge manipulator in a portable package the size and shape of an ordinary notebook. Suppose it had enough power to out-race your senses of sight and hearing, enough capacity to store for later retrieval thousands of page-equivalents of reference materials, poems, letters, recipes, records, drawings, animations, musical scores...”

The Personal Computer 70’s

• Alto Xerox PARC, mid-’70s – local processor but on local area

networks (shared resources) – bit-mapped display, mouse – GUI, windows, menus – Apps: email, text and drawing

editing

The Personal Computer (80’s)

Star, 1981 (first commercial PC) • familiar user’s conceptual model (the

desktop) • promoted recognizing/pointing rather

than remembering/typing • what you see is what you get (WYSIWYG) • small set of generic commands that could

be used throughout the system • high degree of consistency and simplicity • limited amount of user tailorability

Why weren’t pen interfaces adopted until recently?

• Ergonomics – pen on vertical display • Lack of widespread uses outside of

CAD? • Other reasons?

Early PCs

Apple  MacIntosh  

Xerox  Alto  Xerox  Star  

Apple  Lisa  

Video

Triumph of the nerds: • http://video.google.com/videoplay?

docid=-2539790754467363791&ei=JzdFS8aQHY-SqAO4t_DXDg&q=triumph+of+the+nerds+part1#docid=-8579920210107554913

•  (finish at home!)

Answer these questions as you watch the video:

1. Sketch a timeline (write approx dates) of how the GUI was developed…. i.e. from Xerox Parc through to IBM to Apple Macintosh to Windows

2. What features in the Alto GUI are also in the familiar Windows or Apple system you use. What differences did you see?

3. Why did Xerox fail? 4. Why was the Macintosh successful while Lisa was not? 5. Why did the IBM give the Macintosh a good run for its

money……? 6. What role did Microsoft play throughout the development of the

GUI 7. What challenges are we facing today…. How different is the

graphical user interface we use today as compared with the Star?

Lessons?

•  The Star failed because… – high pricing –  closed architecture –  too much direct

manipulation –  too few applications

•  But the Apple Macintosh was successful!

Key Points

•  Successful technologies were modeled after human needs (user centered design).

•  Evolution of ideas into commercially viable products took several iterations.

•  Computers have not always looked like the modern PC and do not need to look that way. Think outside the box when doing design.