Human Computer

Interaction
( HCI 101)

ENGR. RICARDO A. RAQUION , CoE ,

MACEd
Professor
Human Computer Interaction

Introduction to HCI
 PART 1

Overview of Human Computer

Interaction
 What is HCI?
• Stands for

COMMUNICATION

USER MACHINE
 What is HCI?
HUMAN COMPUTER INTERACTION
• Single user • Desktop • Direct/Indirect
• Groups • Embedded communication
• I/O channels system • Models
• Memory • Data entry • Frameworks
• Reasoning devices • Styles
• • Output • Ergonomics
Problem solving
• Error devices
• • Memory
Psychology
• Processing
What is HCI?
 Why Study HCI?
BUSINESS VIEW
• To employ people more
productively and effectively
– people costs now far outweigh
hardware and software
costs
• People now expect “easy to
use” systems
– generally they are not tolerant
of poorly designed systems
– if a product is hard to use, they
will seek other products
 Why Study HCI?
HUMAN FACTORS VIEW
• Human have limitations

• Errors are costly in terms of

– loss of time & money
– loss of lives in critical systems
– loss of morale
Computer Abilities
Transistors
Speed
Cost
Moore’s Law
Human vs. Computer
 Definition of HCI (1)
• “Human-computer interaction is a discipline
concerned with the design, evaluation
and implementation of interactive
computing system for human use and
with the study of major phenomena
surrounding them.”
[ACM SIGCHI Curricula Human-Computer Interaction]
 Definition of HCI (2)
• “The study of interaction between people and
computer-based systems; concern with
the physical, psychological and theoretical
aspects of this process.”

[Alan Dix et al. 2003]

 Components of HCI

Analysis

Evaluation Design

Implementation
 Goal of HCI
To develop or improve the safety, utility and
effectiveness of systems that include computers,
often through improving usability
 Field of HCI
• Psychology • Information science
• Sociology • Information security
• Cognitive science • Speech-language
• Ergonomics / Human pathology
factors • Personal information
• Computer science management
• Visualization • Phenomenology
• Design
• Interactive art
Meta Models of HCI
 PART 2

Evolution of Human Computer

Interaction
Computer Evolution
Human Evolution
 History of HCI

Henry Dreyfuss designed specific measurements & proportions of the human body for
specific work & environment. [Source: Book “Designing for People” (1955)]
 Electronic Numerical Integrator And
Computer (ENIAC)
• First electronic general-purpose computer
(1946)
Compilers
Graphical User Interface (GUI)

• Ivan Sutherland’s Sketchpad (1963)

 Hypertext

Ted Nelson introduced the Hypertext Editing System (HES) was an early hypertext
terms “hypertext” & research project conducted at Brown University in 1967
“hypermedia” in 1963.
 Mouse
• Douglas Engelbart was an
inventor of the computer
mouse
• Invented in 1960s
 Model Human
Processor
• Introduced by Card,
Moran & Newell in
1983
• To calculate how long
it takes to perform a
certain task using
cognitive modeling
method
Memory Extender (Memex)
[“As We May Think”, Vannevar Bush,
1945]
• A device to store all
books, records
and
communication

• Mechanized to be
consulted with
exceeding speed
and flexibility

• Support for full-text

search, text & audio
annotations and
hyperlinks
 Man-Computer Symbiosis
[J.C.R. Licklider, 1960]
• Tightly coupled human brain & machine,
speech recognition, time sharing and
character recognition
 DynaBook
[Alan Kay, 1968]
• s
 XEROX Machines

XEROX Alto (1973) XEROX Star (1981)

[1984
]
Apple LISA & Mac (1984)
• An electronic musical
instrument with a
tabletop/mobile device
• A multi-touch interface
for playing music
 HotHand Device
• A ring worn by music players that uses motion
sensors and a wireless transmitter

• To create different kinds of sound effects by

various hand gestures
Rovio Robotic Webcam

• Wirelessly connected to
the internet

• It roams around the

house providing an
audio and video link to
keep an eye on family/
pets when you are out
 Film Productions
Minority Report (2002) Iron Man (2008)

Avatar (2009)
 PART 3

User Interface Design

The Perfect User (every designer ‘s wish)
 What is Interaction Design?
• Designing interactive products to support the way
people communicate and interact in their
everyday and working lives
[Sharp, Rogers and Preece, 2011]

• The design of spaces for human communication and

interaction
[Winograd, 1997]
 Which Kind of Design?
• Number of other terms used emphasizing what is
being designed, e.g.
– user interface design, software design, user-centered design, product
design, web design, experience design (UX)

• Interaction design is the umbrella term covering all

of these aspects
– fundamental to all disciplines, fields, and approaches concerned with
researching and designing computer-based systems for people
Field of Interaction Design
 Common Issues in User
Interface Design
• Software developers are forced to “do it all”
• Often based on intuition and experience than
on theory-based models
• Tendency to let the art of interface design
beats its usability
• Inconsistent features that do not fit into a
good user interface design criteria
Importance of Interface Design
• 63% of large software projects go over cost
– Managers gave 4 usability-related reasons
1. User requested changes
2. Overlooked tasks
3. Users did not understand their own requirements
4. Insufficient user-developer communication &
understanding
Importance of Interface Design
• Usability engineering is software engineering
– Pay a little now, or pay a lot later!
– Far too easy to jump into detailed design that is:
1. Incorrect requirements
2. Inappropriate flow
3. Difficult to use
4. Never tested until it is too late
 Goals of User Interface Design
• Measurable factors
1. Time to learn
2. Performance speed
3. Error rate
4. Retention over time
5. Subjective satisfaction
6. Cost
 Bad Design (1)
• How fast am I going?

[www.baddesigns.com]
 Bad Design (2)
• How do I get out of the lift?

[www.baddesigns.com]
 Bad Design (3)
• Where do you plug the mouse?

• Where do you plug the

keyboard?

• Top or bottom
connector?

• Do the color-coded
icons help?

[www.baddesigns.com]
 Bad Design (3)
• What is wrong with the remote
on the right?
• Why is the TiVo remote so
much better designed?
– Peanut shaped to fit in
hand
– Logical layout and color-coded,
distinctive buttons
– Easy to locate buttons

[www.baddesigns.com]
Good & Bad Design
• What is wrong with the remote
controller on the right?

• Why is the TiVo remote so

much better designed?
– Peanut shaped to fit in
hand
– Logical layout and color-coded,
distinctive buttons
– Easy to locate buttons
 What to Design?
• Need to take into account:
– Who the users are
– What activities are being carried out
– Where the interaction is taking place

• Need to optimize the interactions users have with a

product
– So that they match the users’ activities and needs
 Core Characteristics of
Interaction Design

• Users should be involved through the

development of the project
• Specific usability and user experience goals
need to be identified, clearly documented
and agreed at the beginning of the project
• Iteration is needed through the core
activities
 Understanding Users’ Needs
• Need to take into account what people are
good and bad at
• Consider what might help people in the way
they currently do things
• Think through what might provide quality
user experiences
• Listen to what people want and get them
involved
• Use tried and tested user-centered
methods
 Working in
Multidisciplinary Teams
• Many people from different
backgrounds involved

• Different perspectives
and ways of seeing
and talking about
things
• Benefits
– more ideas and designs
generated
• Disadvantages
– difficult to
communicate and
progress forward the
designs being create
 PART 4

Theories of Human Computer

Interaction
 What is a Model?
• Model = simplification of reality
– Goal: to be useful!
– Abstraction of reality: omit non-relevant details
– Conflict between precision and generality: choose the
level of abstraction
• Power of a model
– Descriptive: ability to represent (aspects of) a
phenomenon
– Predictive: ability to anticipate behavior
– Generative : ability to imagine new solutions
to a problem
 What is a Theory?
• Theory = (attempt to) explain reality

• Often based on a model

• Validity not only of the predictions of the
model, but also of the model itself
 Levels-of-Analysis Theory (1)
• 4 levels of analysis:
– Conceptual: describes the user’s mental model.
(Text Processing with Word/Latex/Page
Maker)
– Semantic: meanings of user actions (e.g. delete a
paragraph)
– Syntactic: select paragraph with mouse, select
“delete” from menu
– Lexical: move mouse cursor, click, press function
key, etc.
 Levels-of-Analysis Theory (2)
• Advantage:
– Clean top-down-approach
– Good for designers

• Disadvantage:
– Less relevant today, as systems are
very complex
 Stages-of-Action Theory (1)
• Explanatory thesis of HCI, Norman (1988)
• 7 Stages (“executed” in a cyclic way by the user):
1. Forming the goal
2. Forming the intention
3. Specifying the action
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the outcome
 Stages-of-Action Theory (2)
• Norman suggests four principles of good design:
1. State and action alternatives should be visible
2. Good conceptual model with consistent system image
3. The interface should include good mapping that reveal
the relationships between the stages
4. Users should receive continuous feedback
 GOMS (1)
INPUT
• Decompose user actions into small measurable steps
[detailed description of task(s)]
• GOMS stands for
– Goals Task
Task 3
– Operators 2
– Methods Task
1
– Selection rules

OUTPUT
[qualitative & quantitative measures]
 GOMS (2)

1. Goals and sub-goals

• Edit text, delete paragraph
2. Operators
• Move mouse, press mouse button, check if mouse cursor is at the
end of a paragraph but also: recall file name, search for menu option
3. Methods To reach the goal
• Move mouse, click button, press delete to delete a paragraph
4. Selection rules Select one of many methods
• Delete Paragraph with “delete” key, use “delete” menu entry, use
multiple “backspace” to delete paragraph
 Widget-Level Theory
• Instead of decomposing along elementary tasks, use
decomposition of high-level UI toolkits
• Create model based on widgets and predict user
performance based on widgets used
• Interface model emerges from implementation task,
estimates of perceptual complexity and motoric skills
needed emerges as well
• Goal: develop well-established UI patterns (with
predictive model of user performance attached)
 Context-of-Use Theory
• Suchman (1987): Plans and Situated Action
• Actions situated in place and time
• User behavior responsive to other people
and environment
• Actions depend on situation: time pressure,
safety-critical etc.
• Mobile (and wearable!) computing: physical
space becomes relevant
• Dourish (2002): social/psychological space
also has to be considered
Object Action Interface Theory

• Descriptive and explanatory model

• Can also be used to guide design
• Observation: syntax becomes simpler in
modern GUI systems
• Object Action Design: decompose objects and
actions
• Objects may include “real world objects”,
Tasks may include “common activities”