9/15/2019
1
PV182
Human Computer Interaction
Lecture 1
Introduction to Human-Computer Interaction
Fotis Liarokapis
liarokap@fi.muni.cz
16th September 2019
Fotis Liarokapis
• PhD in Computer Engineering
– University of Sussex, UK
• MSc in Computer Graphics
and Virtual Environments
– University of Hull, UK
• BSc in Computer Systems
Engineering
– University of Sussex, UK
My Research
• Research areas:
– Virtual Reality
– Augmented Reality
– Brain-computer Interfaces
– Procedural Modeling
– Serious Games
Contact Details
• Email:
– liarokap@fi.muni.cz
• Telephone:
– 549493948
• Office Location:
– C411
• Office Hour:
– Wednesday 13:00 to 14:00
Course Details
• Lectures
– Every Monday
– Time: 12:00 to 13:50
– Location: A318
Course Objectives
• The course deals with basics of humancomputer
interaction
• It is focused on psychological and physiological
aspects of interface design, graphical user
interface design and its usability assessment
9/15/2019
2
Learning Outcomes
• After finishing the course students
– Will be able to evaluate existing screen designs
– Will practice in developing human-computer
interfaces with respect to a usability
– Will be able to assess the usability of SW products
– Will understand the usability issues of products in
general
– Will gain practical knowledge of designing process
based on in-depth knowledge of high and low level
models of human-computer interaction
Indicative Syllabus
• Introduction to human
computer interaction. Taskcentred
system design
• High level models of
human-computer behaviour
• User-centred design and
prototyping
• Evaluating interfaces with
users
• Evaluation - controlled
experiments
• Design of everyday things
• Representations, visual
variables, metaphors and
direct manipulation
• Evaluation based on
cognitivemodels
• Graphical screen design
• Physical user interfaces
• Heuristic evaluation of
interfaces
Teaching Methods
• Delivery of the material will
be based on
– Expositional lectures
– Reinforced by computer
demonstrations of the
application of the material
– Video demonstrations
Labs
• Critical to your success in assignments
– Elaboration of details
– Learn specific skills
– Discuss intermediate results
– Class feedback on assignment milestones
Assessment Methods
• Project is split in 5 HWA solved
mostly in a lab using specialized
software
– Steps include a design of interface
for a specific purpose: from a paper
prototype to complete GUI design
– Every step is graded 0-10 points
– Points exceeding limit 20 are added
as bonus to the grading of a written
exam
• Written exam
– 5 questions, 90 minutes
Plagiarism and Cheating
• If you use an external resource cite it clearly!
• Don’t do things that would be considered
dishonest... if in doubt ask
• Cheating earns you:
– Fail in the class
– Getting reported to the University
– No exceptions
9/15/2019
3
Literature
• MULLET, Kevin and Darrell SANO. Designing visual
interfaces : communication oriented techniques.
Englewood Cliffs, NJ: SunSoft Press, 1995. xv, 273.
ISBN 0133033899.
• PREECE, Jenny. Human computer interaction.
Harlow: Addison-Wesley, 1994. xxxviii, 7. ISBN 0-
201-62769-8
• DIX Alan, FINLAY Janet E., ABOWD Gregory D., BEALE
Russell, Human-Computer Interaction (3rd Edition),
Pearson Education Ltd, 2004. ISBN-10: 0130461091
History of HCI
RAND’s vision of the Future
http://www.imageshack.us/ (original source unknown)
RAND’s vision of the Future
• Scientists from the RAND Corporation have created
this model to illustrate how a “home computer”
could look like 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
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
9/15/2019
4
‘As We May Think’ (1945)
• Vannevar Bush identified the
information storage and
retrieval problem:
– New knowledge does not reach
the people who could benefit
from it
• Desired for a sort of collective
memory machine with his
concept of the memex that
would make knowledge more
accessible
– Memex was the hypothetical
proto-hypertext system
https://en.wikipedia.org/wiki/As_We_May_Think
Vannevar Bush
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 .
• Bush’s Memex based on microfilm records!
– 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
Ball Tracker System (1946)
• Ralph Benjamin invented a ball tracker system
called the roller ball in 1946
– Invented as part of a post-World War II-era radar
plotting system named Comprehensive Display
System (CDS)
– Kept as a military secret for a few years!
– Only fully implemented as a usable device by the
Canadian navy some years later in its Digital
Automated Tracking and Radar system (DATAR)
https://arcadeblogger.com/2016/07/29/the-secret-history-of-the-arcade-trackball/
IBM SSEC (1948)
• IBM Selective Sequence
Electronic Calculator
(SSEC) was an
electromechanical
computer built by IBM
– Design started in late
1944
– Operated from January
1948 to 1952
From IBM Archives
https://en.wikipedia.org/wiki/IBM_SSEC
DATAR (1952-1953)
• The DATAR was a
method of giving all
ships within a particular
fleet a “single view” of
their operational status
– Collated information
provided by sensors
placed on board of each
vessel
https://arcadeblogger.com/2016/07/29/the-secret-history-of-the-arcade-trackball/
9/15/2019
5
DATAR (1952-1953) .
• The trackball could be used
by operators of the system
to manage and upload this
data to the main DATAR
mainframe for processing
and regurgitation back to
each ship
– The actual hardware used to
display this information was
adapted from a radar screen
https://arcadeblogger.com/2016/07/29/the-secret-history-of-the-arcade-trackball/
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.”
IBM 7030 - Stretch (1961-62)
• The IBM 7030, also known as
Stretch, was IBM's first
transistorized
supercomputer
• Fastest computer in the
world from 1961 until 1964
– The first CDC 6600 became
operational in 1964
https://en.wikipedia.org/wiki/IBM_7030_Stretch
SketchPad (1963)
• Ivan Sutherland’s
SketchPad-1963 PhD
• Sophisticated drawing
package
• Many ideas/concepts
now found in today’s
interfaces
http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg
SketchPad Concepts (1963)
• Hierarchicalstructures:
– Defined pictures and sub-
pictures
• Object-oriented
programming:
– Master picture with instances
• Constraints:
– Details which the system
maintains through changes
• Icons:
– Small pictures that represent
more complex items
• Copying:
– 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
First Mouse Prototype (1964)
• Bill English joined ARC,
where he helped
Engelbart build the first
mouse prototype
• Early models had a
cord attached to the
rear part of the device
which looked like a tail
– This resembled to the
common mouse
Douglas Engelbart
Douglas Engelbart holding the first computer mouse
BillEnglish
https://en.wikipedia.org/wiki/Computer_mouse
9/15/2019
6
Xerox Alto (1973)
• The Xerox Alto was the first
computer designed from its
inception to support an
operating system based on a
graphical user interface (GUI)
– Later using the desktop
metaphor
https://en.wikipedia.org/wiki/Xerox_Alto
The Xerox Alto Mouse (1973)
• The first mouse driven GUI
computer
• Featured:
– A three button mouse
– Utilised a steel ball
https://github.com/Gouthamve/Evolution-of-a-mouse/blob/master/README.md
ALTAIR 8800 (1974)
• The Altair 8800 is a
microcomputer designed in
1974 by MITS
– Based on the Intel 8080 CPU
https://en.wikipedia.org/wiki/Altair_8800
Xerox Star 8010 (1981)
• First commercial personal
computer designed for ‘business
professionals’
– Introductory price : $16,500
(equivalent to $43,467 in 2016)
– Discontinued: 1985
• Incorporated various technologies
that have since become standard
in personal computers
– i.e. a bitmapped display, a
window-based graphical user
interface, icons, folders, mouse
(two-button), Ethernet
networking, file servers, print
servers, and e-mail
https://en.wikipedia.org/wiki/Xerox_Star
Apple Lisa (1983)
• Based upon many ideas in
the Star
– Predecessor of Macintosh
– Somewhat cheaper
($10,000)
– Commercial failure
http://fp3.antelecom.net/gcifu/applemuseum/lisa2.html
Macintosh 128K (1984)
• Succeeded because:
– Aggressive pricing ($2500)
– 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
https://en.wikipedia.org/wiki/Macintosh
9/15/2019
7
Logitech Wireless Mouse (1991)
• In 1991, Logitech released the
first wireless mouse:
– Logitech’s Cordless MouseMan
• Before released:
– 1982: a 3-button mouse in
– 1990: introduced the MouseMan
Left, MouseMan Right and
MouseMan Large
https://github.com/Gouthamve/Evolution-of-a-mouse/blob/master/README.md
Logitech MX-1000 (2004)
• In 2004, Logitech MX-
1000 introduced the first
optical mouse with Laser
baser tracking
– Made the mouse
experience a lot smoother
https://github.com/Gouthamve/Evolution-of-a-mouse/blob/master/README.md
Magic Mouse (2009)
• Apple released the Magic Mouse in 2009
• Minimalist design
• Multi-touch pad
https://github.com/Gouthamve/Evolution-of-a-mouse/blob/master/README.md
Other Events
• MIT Architecture Machine Group
– Nicholas Negroponte (1969-1980+) with many innovative
inventions:
• 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
Introduction to HCI
Definition
• “Human–computer interaction (commonly referred
to as HCI) researches the design and use of
computer technology, focused on the interfaces
between people (users) and computers. Researchers
in the field of HCI both observe the ways in which
humans interact with computers and design
technologies that let humans As a field of research,
human-computer interaction is situated at the
intersection of computer science, behavioral
sciences, design, media studies, and several other
fields of study.”
https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction
9/15/2019
8
The Field of HCI
https://www.pinterest.com/pin/388998486545084172/
What is HCI?
• Human-Computer Interaction
Advanced HCI? HCI Importance
• 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 developedinnovative designs, but often
commercially unviable
– Settler systems incorporated (many years later) wellresearched
designs
• People no longer willing to accept products with
poor interfaces
HCI Discipline
A discipline concerned with the:
of interactive computing systems for human use
design implementation
evaluation
HCI Discipline Definition
• “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.”
Association for Computing Machinery (ACM)
9/15/2019
9
Three paradigms of HCI
• The Three Paradigms of HCI Harrison, Tatar
and Sengers, CHI 2007
Human Factors Classical Cognitivism Information Embodied Cognition Interaction
Three paradigms of HCI .
1st HCI Paradigm
Human Factors
Engineering
2nd HCI Paradigm
Classical Cognitivism
Information
3rd HCI Paradigm
Embodied Cognition
Interaction
Metaphor of
Interaction
Interaction as ManMachine
Coupling
Interaction as
Information Transfer
Interaction as
Phenomenologically Situated
Central Goal
for Interaction
Optimise fit
between man and
machine
Optimise accuracy and
Efficiency of Information
Transfer
Support of SituationAction in
the World
Typical Questions
of Interest How can we fix
specific problems
that arise in
Interaction?
What mismatches arise
in communication
between humans and
computers?
How can we accurately
model what people do?
How can improve the
efficiency of HCI?
What existing situated activities
should we support? How do
users appropriate technology?
How can we support interaction
with constraining it by what a
computer can do/understand?
What is the wider context roles,
politics and values?
Three paradigms of HCI ..
1st HCI Paradigm
Human Factors
Engineering
2nd HCI Paradigm
Classical Cognitivism
Information
3rd HCI Paradigm
Embodied Cognition
Interaction
Appropriate
Disciplines for
Interaction
Engineering,
Programming,
Ergonomics
Laboratory and
Theoretical Behavioural
Science
Ethnography, Action Research
Ethnomethodology, Interaction
Design, User Centred Design
Desirable
Methodologies Cool Hacks
Verifiable Quantitative
design and evaluation
methods that can be
applied regardless of
context
Apalette of situated design and
evaluation strategies
Legitimate kinds
of Knowledge
Pragmatic Objective
Details
Objective facts and
models with general
applicability
Thick Description of Context
and Stakeholder Concerns.
How do you know
something is
True?
You Tried it out and
it worked
You confirm of refute
your hypothesis based
on a statistical analysis
of the evidence
You argue about the
relationship between your data
and what you seek to
understand
Three paradigms of HCI …
1st HCI Paradigm
Human Factors
Engineering
2nd HCI Paradigm
Classical Cognitivism
Information
3rd HCI Paradigm
Embodied Cognition
Interaction
Values
Reduce errors and
make it work.
Ad Hoc is OK.
Cool Hacks that
exploit a specific
instance are desired
Optimisation.
Strive for Objective,
Abstract, Quantitative,
Generalizable
Knowledge wherever
possible.
Principled evaluation is
a priori better than ad
hoc, since design can
be structured to suite
this paradigm.
Structured Design
better than unstructured.
Reduce
Ambiguity. Top Down
View of Knowledge.
Construction of meaning is
intrinsic to and unfolds from
interaction. What goes on
around systems is more
interesting than what’s
happening at the interface.
“Zensign” - what you don’t build
is as important and what you do
build. Goal is to grapple with
the full complexity around the
system.Knowledge can not just
be a powerful abstraction but
can be embedded in the world
as hidden context and tacit skill
which is revealed through
engagement
Which HCI Paradigm is Correct?
• The key question is not which of the paradigms is
“correct” but what different perspectives,
strengths, weaknesses, insights and tools they
offer and when they are appropriate to apply
Classical Cognitive
Information Epoc
Embodied/Situated
Interaction Epoc
An interface design process
Articulate:
•who users are
•their key tasks
User and
task
descriptions
Goals:
Methods:
Products:
Brainstorm
designs
Task
centered
system
design
Participatory
design
User-
centered
design
Evaluate
Psychology of
everyday
things
User
involvement
Representation
& metaphors
low fidelity
prototyping
methods
Throw-away
paper
prototypes
Participatory
interaction
Task
scenario
walk-
through
Refined
designs
Graphical
screen
design
Interface
guidelines
Style
guides
high fidelity
prototyping
methods
Testable
prototypes
Usability
testing
Heuristic
evaluation
Completed
designs
Alpha/beta
systems or
complete
specification
Field
testing
9/15/2019
10
Why Interface Design Process?
• 63% of large software projects go
over cost
• Managers gave four usabilityrelated
reasons
– Users requested changes
– Overlooked tasks
– Users did not understand their own
requirements
– Insufficient user-developer
communication and understanding
Why Interface Design Process? .
• Usability engineering is software engineering
– Pay a little now, or pay a lot later!
– Far too easy to jump into detailed design
that is:
• founded on incorrect requirements
• has inappropriate dialogue flow
• is not easily used
• is never tested until it is too late
Foundations for designing interfaces
• Understanding users and their tasks
– Task-centered system design
• How to develop task examples
• How to evaluate designs through a task-centered walk-
through
Foundations for designing interfaces .
• Designing with the user
– User centered design and prototyping
• methods for designing with the user
• low and medium fidelity prototyping
– Evaluating interfaces with users
• the role of evaluation in interface design
• how to observe people using systems to detect
interface problems
Foundations for designing interfaces ..
• Designing visual interfaces
– Design of everyday things
• What makes visual design work?
– Beyond screen design
• Representations and metaphors
– Graphical screen design
• The placement of interface components on a screen
Foundations for designing interfaces …
• Principles for design
– Design principles, guidelines, and usability
heuristics
• Using guidelines to design and discover usability
problems
This is a
great
design!
9/15/2019
11
Computer
Computer
• What is a computer?
Nowadays Many Mediums
• Mobile and Social Media
• Social Computing
• Virtual and Augmented Reality
• Ubiquitous Computing
• Tangible Computing
• Brain-Computer Interfaces
Mobile and Social Media
• Smart Phones
• Apps vs HTML5
• Location Based Services (LBS)
• Communication and Content
Creation
• A post PC era of phones and
tablets?
• Constantly changing
interactions, social context
and place.
• Twitter, Facebook,
Foursquare, Google Maps
Social Computing
• Computer Supported
Collaborative Working
(CSCW)
• Beyond immediate
interaction to a web of
surrounding relations
• Ethnography,
Ethnomethodology
• Actual Practices
Virtual and Augmented Reality
• Virtual Worlds - Simulation,
immersion
• Second Life, Massive Multiplayer
Online Role Playing
Games MMORPG
• Virtual Reality - A separate
virtual place
• HeadMounted Displays, Caves
• Augmented Reality - The Real
World Plus
• Tablets, Phones, Google Glasses
9/15/2019
12
Ubiquitous Computing
• Computers omnipresent
but “invisible”
• Computers escape
from the desktop and
disappear
• Wireless, Wearable,
Small, Embedded
• RFID tags,
• Micro-controllers,
Speckled computing,
Machine to Machine
• Internet of Things (IoT)
Tangible Computing
• Physical Interface
• Use of Embodied
skills
• Rich tactile and
proprioceptive
feedback
• Physical affordances
and constraints of
the physical world
Ishii and Ullmer, CHI 97.
Tangible Bits: Towards Seamless Interfaces
Between People, Bits and Atoms
Brain-Computer Interfaces
• BCI is a direct communication pathway
between an enhanced or wired brain and an
external device
– Research on BCIs began in the 1970s at the
University of California, Los Angeles (UCLA)
– More to come …
Conclusions
• HCI is one of the most important disciplines of
Computing and Engineering
• Traditional HCI is changing
– What will be the new technology that will
dominate?
Questions Acknowledgements
• Prof. Ing. Jiří Sochor