Chapter One

Introduction to HCI(Human Computer

Interaction)
Definition
The most famous definition of “Human Computer

Interaction” is:
“Human-computer interaction is a discipline concerned with

the design, evaluation and implementation of interactive

computing systems for human use and with the study of
major phenomena surrounding them.”
A key aim is:

 to understand how humans interact with computers

 to represent how knowledge is passed between the two.

Historical background of HCI
Where did HCI innovations and philosophy come
from?
Who were the major personalities?
What were the important systems?
How did ideas move from the laboratory to the
market?
 Input/output devices
 Input Output

Early days connecting wires lights on display

paper tape & punch cards paper
keyboard teletype

Today keyboard scrolling glass teletype

+ cursor keys character terminal
+ mouse bit-mapped screen
+ microphone audio

Soon? data gloves + suits head-mounted displays

computer jewelry ubiquitous computing
natural language autonomous agents
cameras multimedia
 The lesson
 keyboards & terminals are just artifacts of today’s technologies
 new input/output devices will change the way we interact with computers
 Eniac (1943)
A general view of the ENIAC, the world's first all
electronic numerical integrator and computer.

From IBM Archives.

 Mark I (1944)
The Mark I paper tape readers.

From Harvard University Cruft Photo Laboratory.

IBM SSEC (1948)

 From IBM Archives.

Stretch (1961)
A close-up of the Stretch technical control panel.

From IBM Archives.

Intellectual foundations

Vannevar Bush (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”
 Bush’s Memex
Conceiving 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
mmm
acts as an external memory! m
mmmm mmm mmm
mmmm m m
Bush’s Memex based on microfilm records!
mmmm
mmm mm mmmm
mmm mm
mmm
m
mmm
mm
mmmm
mmm mmmm mmm
but not implemented mmm mm
mmm
m
mmm mmm
m
mmm
 J.C.R. Licklider (1960)
Outlined “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 (continued)
Produced goals that are pre-requisite to “man-
computer symbiosis”

Immediate goals:
time sharing of computers among many users
electronic I/O for the display and communication of
symbolic and pictorial information
interactive real time system for information processing
and programming
large scale information storage and retrieval
J.C.R. Licklider (continued)
intermediate goals:
facilitation of human cooperation in the design &
programming of large systems
combined speech recognition, hand-printed character
recognition & light-pen editing

long term visions:

natural language understanding (syntax, semantics,
pragmatics)
speech recognition of arbitrary computer users
heuristic programming
 Significant Advances 1960 - 1980
Mid ‘60s
computers too expensive for a single person
Time-sharing
the illusion that each user was on their own personal machine
led to immediate need to support human-computer interaction
dramatically increased accessibility of machines
afforded interactive systems and languages vs batch “jobs”
community as a whole communicated through computers
(and eventually through networks) via email, shared files, etc.
 Ivan Sutherland’s SketchPad-1963
 Sophisticated drawing package
introduced many ideas/concepts now found in today’s interfaces

 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 that represented more complex items
 copying: both pictures and constraints
 input techniques: efficient use of
light pen
 world coordinates: separation of
screen from drawing coordinates
 recursive operations: applied to
children of hierarchical objects

From http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg
Ivan Sutherland’s SketchPad-1963
Parallel developments in hardware:
 “low-cost” graphics terminals
 input devices such as data tablets (1964)
 display processors capable of real-time manipulation of
images (1968)
 Douglas Engelbart

The Problem (early ‘50s)

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

If you could do something to improve

human capability to deal with these
problems, then you'd really contribute
something basic.”
...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
Douglas Engelbart
A Conceptual Framework for Augmenting Human
Intellect (SRI Report, 1962)

"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."
...Doug Engelbart
The First Mouse (1964)
AFIP Fall Joint
Conference, 1968
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
User testing, training
The Personal Computer
Alan Kay (1969)
Dynabook vision (and cardboard prototype) of a notebook
computer:
• “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...”
1974: “Computer Lib/Dream Machines”
popular book describing what computers can do for people
(instead of business!)
The Personal Computer
Xerox PARC, mid-’70s
Alto computer, a personal workstation
 local processor, bit-mapped display, mouse
modern graphical interfaces
 text and drawing editing, electronic mail
 windows, menus, scroll bars, mouse selection, etc
local area networks (Ethernet) for personal workstations
 could make use of shared resources

ALTAIR 8800 (1975)

Popular electronics article that showed people
how to build a computer for under $400
Commercial machines: Xerox Star-
1981
First commercial personal computer designed for “business
professionals”
First comprehensive GUI used many ideas developed at
Xerox PARC
familiar user’s conceptual model (simulated desktop)
promoted recognizing/pointing rather than remembering/typing
property sheets to specify appearance/behaviour of objects
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
modeless interaction
limited amount of user tailorability
 Xerox Star (continued)
First system based upon usability engineering
inspired design
extensive paper prototyping and usage analysis
usability testing with potential users
iterative refinement of interface
Commercial failure
cost ($15,000);
 IBM had just announced a less expensive machine
limited functionality
 e.g., no spreadsheet
closed architecture, 3rd party vendors could not add applications
perceived as slow but really fast!
slavish adherence to direct manipulation
 Commercial Machines: Apple Lisa (1983)
based upon many ideas in the Star
predecessor of Macintosh,
somewhat cheaper ($10,000)
commercial failure as well

http://fp3.antelecom.net/gcifu/applemuseum/lisa2.html
Commercial Machines: Apple
Apple Macintosh (1984)
“old ideas” but well done!
 succeeded because:
aggressive pricing ($2500)
did not need to trailblaze
 learnt from mistakes of Lisa and corrected them; ideas now “mature”
 market now ready for them
developer’s toolkit encouraged 3rd party non-Apple software
interface guidelines encouraged consistency between applications
domination in desktop publishing because of affordable laser
printer
and excellent graphics
Other events:
 MIT Architecture Machine Group
 Nicholas Negroponte (1969-1980+)
 many innovative inventions, including
 wall sized displays
 use of video disks
 use of artificial intelligence in interfaces (idea of agents)
 speech recognition merged with pointing
 speech production
 multimedia hypertext
 ....
 ACM SIGCHI (1982)
 special interest group on computer-human interaction
 conferences draw between 2000-3000 people

 HCI Journals
 Int J Man Machine Studies (1969)
 many others since 1982
You know now:
HCI importance result of:

cheaper/available computers/workstations meant people more

important than machines

excellent interface ideas modeled after human needs instead of

system needs (user centered design)

evolution of ideas into products through several generations

 pioneer systems developed innovative designs, but often commercially
unviable
 settler systems incorporated (many years later) well-researched designs
people no longer willing to accept products with poor interfaces