Human Computer Interaction
Course Overview (1)
• 13.9.1 Code: ITU 08204
• 13.9.2 Name: Human Computer Interface Design
• 13.9.3 Number of Credits 12
• 13.9.4 Sub enabling outcomes:
❖ 2.6.1 Describe fundamental principles for Human Computer
Interaction
❖ 2.6.2 Describe Paradigms of Human Computer Interaction
❖ 2.6.3 Describe constituent of HCI design process
❖ 2.6.4 Discuss design approaches that are suitable to
different classes of user and application
❖ 2.6.5 Discuss different kinds of prototyping to be used for
different purposes at different stages
Course Overview (2)
1. History and Future of HCI
(i) History of HCI
(ii)Future HCI technologies (Research &
Prediction)
2. Goals of HCI, Affordance, Usability and
Usability Principles
3. Human Factors in Interaction Design
4. Prototyping Purpose, Process and Techniques
5. User-Centered Design Basics
6. Usability Evaluation Basics (Usability Testing)
7. Process of Interaction Design
Goals of HCI
Allow users to carry out tasks
– Safely
– Effectively
– Efficiently
– Enjoyably
HCI
What happens when a human and a computer get
together to perform a task
– task - write document, calculate budget, solve equation, learn
about Antarctica, drive home,...
HCI Deals With The Interaction Of A
Person And A Computer
Technological perspective Human perspective
Technological Perspective
Technical constraints
• Beyond the mouse the and keyboard?
Human Perspective
How people process information
• Memory, perception, motor skills, attention etc.
Language, communication and interaction
Ergonomics
Human Computer Interaction
A discipline concerned with the
design,
implementation and
evaluation
…of interactive computing systems for human use
design
evaluation implementation
EXAMPLES OF USER INTERFACES
EXAMPLES OF USER INTERFACES
EXAMPLES OF USER INTERFACES
EXAMPLES OF USER INTERFACES
EXAMPLES OF USER INTERFACES
EXAMPLES OF USER INTERFACES
EXAMPLES OF USER INTERFACES
History of HCI
History of HCI
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
History of HCI
RAND’s vision of the future
Future Prediction
A previous picture is from an issue of 1954 Popular Mechanics
magazine forecasting the possibility of ‘home computers’ in 50
years. It appears that the ‘mouse’ replaced the steering wheel …
“Scientists from RAND Corporation have created this model to
illustrate how a “home computer” could look in the year 2004.
However the needed technology will not be economically feasible
for the average home. Also the scientists readily admit that the
computer will require not yet invented technology to actually
work, but 50 years from now scientific progress is expected to
solve these problems. With teletype interface and the Fortran
language, the computer will be easy to use.”
History of HCI
Eniac (1943)
– A general view of the ENIAC, the world's first all electronic
numerical integrator and computer.
From IBM Archives.
History of HCI
Mark I (1944)
– The Mark I paper tape readers.
From Harvard University Cruft Photo Laboratory.
History of HCI
IBM SSEC (1948)
From IBM Archives.
History of HCI
Stretch (1961)
A close-up of the Stretch technical control panel.
From IBM Archives.
History of HCI
Bush’s Memex
Memex is the name of the hypothetical electromechanical
device that Vannevar Bush described in his 1945 article "As
We May Think". Bush envisioned the memex as a device in
which individuals would compress and store all of their
books, records, and communications, "mechanized so that
it may be consulted with exceeding speed and flexibility".
The individual was supposed to use the memex as
automatic personal filing system, making the memex "an
enlarged intimate supplement to his memory“
Source: Wikipedia
https://en.wikipedia.org/wiki/Memex
History of HCI
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
– acts as an external memory!
Bush’s Memex based on microfilm records! mmm
– but not implemented
m
mmm mmm
mmmm
mmmm m m
mmmm
mmmm mmm mmm
mmm mm
mmmm mmm mm m mm
mmm mmmm mmm
mmm mm
mmm
m
mmm mmm
m
mmm
History of HCI
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.
History of HCI
Ivan Sutherland’s SketchPad-1963 PhD
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
History of HCI
Ivan Sutherland’s SketchPad-1963 PhD
Parallel developments in hardware:
– “low-cost” graphics terminals
– input devices such as data tablets (1964)
History of HCI
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
History of HCI
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
History of HCI
The First Mouse (1964)
History of HCI
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...”
History of HCI
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
History of HCI
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
History of HCI
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!
History of HCI
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
History of HCI
Commercial Machines: 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
History (and future) of HCI
-Large displays -Speech recognition
-Small displays -Multimedia
-Peripheral displays -Video conferencing
-Alternative I/O -Artificial intelligence
-Ubiquitous computing -Software agents (AI: Alexa and Siri)
-Virtual environments -Recommender systems (Machine
-Implants Learning)
...
History of HCI
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
