Human Computer

Interaction
Chapter 02 – Human and Computer

Trinh Thanh Trung

School of ICT, HUST

Upon completion of this lesson, students will be able to:

1. Identify the potential channels that are used by human to
interact with computers.

2. Show the limitation of information that are perceived and

stored by human
3. Clarify the type, domain of values of information that could
be perceived through human‘s I/O channels and stored in
their memories.
4. Clarify the way human judge and solve problems, and the
limitation of their information processing system.

5. Identify the type, domain of values of information that could

be exchanged and operated by human and computers in
Human Computer Interaction

the scope of an interactive system.

Objectives
School of ICT, HUST

1. Overview
2. Reasoning & problem solving
A. Human
B. I/O
C. Memory

3. Computer
Human Computer Interaction

Content
Overview • Building blocks of interactive system
revisited
• Physiological and psychological capabilities
• Objective
School of ICT, HUST
Human Computer Interaction

Main components of interactive

system revisited
School of ICT, HUST

Physiological and psychological capabilities

• Perceptual systems: capture information

• Motor systems: process information
• Memory system: stock information
• Human ability is limited and is affected by their emotions and states.
Human Computer Interaction
School of ICT, HUST

Objective

• In order to successfully build usable interactive systems, we need

knowledge of:
•The users who will use the system (physiological and psychological capabilities).
•The tasks for which it will be used (types of tasks, theirs organizational and
environmental aspects).
•The environment in which it will be used (technical constraints of the system).
Human Computer Interaction
Human • I/O
• Memory
• Reasoning & problem solving
Human I/O
2.1
Visual system

Auditory system

Haptic system

Motor system
 Human’s I/O channels
School of ICT, HUST

visual, auditory smell

taste
kinesthesia
Human Computer Interaction

tactile proprioception
 Human’s I/O channels
School of ICT, HUST

speech
vocal
non-vocal
visual prosody
auditory facial expression
tactile hand gesture
haptics body gesture
proprioception eye movement
taste breath control
smell neural control
EEG: Electroencephalography
Senses
Human Computer Interaction

bio-signals
(receptors)
heart rate
EMG: Electromyography
GSR: Galvanic Skin Response

Effectors
School of ICT, HUST

Visual system
Human’s I/O channels
Visual system
• Receptors
• Visual angle
• Texture, shape and symbols
• Visual interaction
Human Computer Interaction

• Illusions
School of ICT, HUST

(1) Recepters
Rods: perceiving brightness, contrast

• Luminance • Photo receptors: rods (120

• Measured amount of light coming million rods per eye)
from some place • Sensitive to light → Allow us to see
• Brightness under low level of illumination
• Unable to resolve fine detail and are
• Perceived amount of light coming from
subject to light saturation → Cause
source
of temporary blindness when moving
Human Computer Interaction

• Contrast from dark areas to very bright ones

• Important for foreground –
background colors to differ in
brightness
School of ICT, HUST

Hello, here is some text. Can you read its content ?

Hello, here is some text. Can you read its content ?
Hello, here is some text. Can you read its content ?
Hello, here is some text. Can you read its content ?
Hello, here is some text. Can you read its content ?
Hello, here is some text. Can you read its content ?
Human Computer Interaction

Example
School of ICT, HUST

(1) Recepters
Cones: perceiving colors
• Less sensitive to light: Can
tolerate more light than
Rods
• Basic function is color
vision
• Three types: each sensitive
Human Computer Interaction

to a different wavelength
(RGB)
School of ICT, HUST

Practice - Possible Color Sequences

Can you order these (low->hi) ?

Gray scale Full spectral scale Single sequence Single sequence Double-ended
part spectral scale single hue scale multiple hue scale
Human Computer Interaction
School of ICT, HUST

Color Purposes

• Call attention to specific data

• Increase appeal, memorability
• Increase number of dimensions for encoding data
Example, Ware and Beatty ‘88
• x,y - variables 1 & 2
Human Computer Interaction

• amount of r,g,b - variables 3, 4, & 5

School of ICT, HUST

(2) Vision angle

Perceiving size and depth

• Visual angle
•Indicates how much of the field of view is taken by the object
•Measured in degree or minutes of arc
Human Computer Interaction
School of ICT, HUST

(3) Texture, shape and symbol

Texture

• Appears to be combination of
orientation
scale
contrast

• Complex attribute to analyze

Human Computer Interaction
School of ICT, HUST

(3) Texture, shape and symbol

Shape, Symbol

• Symbols should be rapidly perceived and differentiated

• Application for maps, logo, etc.
Human Computer Interaction
School of ICT, HUST

Basic Symbolic Displays 600

500
600
500
600
500
400 400 400
300 300 300
200 200 200
• Graphs: show the relationships between 100 100 100

variables’ values in a data table 0

1 2 3 4 5 6 7
0
1 2 3 4 5 6 7
0
0 5 10
•Visual display that illustrates one or more
relationships among entities Line Scarter
Graph
•Shorthand way to present information
•Allows a trend, pattern or comparison to be
easily comprehended

• Charts:
•Structure is important, relates entities to each
Human Computer Interaction

other
•Primarily uses lines, enclosure, position to link
entities
•Examples: flowchart, family tree, org chart, …
School of ICT, HUST

Basic Symbolic Displays

• Maps:
•Representation of spatial relations
•Locations identified by labels

• Diagrams
• Schematic picture of object or entity
Human Computer Interaction

• Parts are symbolic

School of ICT, HUST

(4) Visual interaction

Stage 1 Stage 2

• Visual perception depends on Early, parallel Serial processing of

•Shape and size detection of
color, texture,
object identification (using
memory) and spatial layout,
•Brightness, color and texture shape, spatial action
attributes
•Capacity and limitation of visual system

• How the symbols convey meaning?

•Two stage process
Human Computer Interaction

• Parallel extraction of low-level properties of scene

• Sequential goal-directed processing
School of ICT, HUST

(5) Illusions
Muller-Lyer and Ponzo

Muller-Lyer:
Human Computer Interaction

Which is the longer line ?

Ponzo:
Which is the longer line ?
 Ponzo & Muller-Layer effect
School of ICT, HUST Human Computer Interaction
School of ICT, HUST

Auditory system
• Less used than visual system in HCI
Human Computer Interaction
School of ICT, HUST

Auditory perception

• Auditory perception depends on

•Frequency (20Hz-15Khz),
•Tone
•Loudness (sound level for familial sound) “If a tree falls in the forest and
nobody is there to hear it, will
it make a sound?”
Human Computer Interaction
School of ICT, HUST

Practice
Talk about some ideas of designing
interactive sound interfaces
Speech sound interface
Non-speech sound interface
Human Computer Interaction
School of ICT, HUST

Haptic system
• Recognize objects through
touch:
•Pressure and tension perception
(tactile)
•Mechanical perception: quick
response and slow response
(kinesthesia)
Human Computer Interaction

•Temperature perception
(proprioception)
 Motor system
School of ICT, HUST

• Movement = integrated function of

•Nervous system
•Articular system
•Muscular system

• Example: press on a button to response to the

application
•Perceptual system perceives the stimulus and transfers the
information about this stimulus to the nervous system as a
request
Human Computer Interaction

•The nervous system performs this request ; it initializes the

response by ordering the articular and muscular system.

• Each activity needs time to response and to move.

•Response time depends on the health and the age
School of ICT, HUST

Fitts’ Law (Fitts, 1954)

• First demonstrated for tapping with

finger, later extrapolated to mouse and d
other input devices
• The time to point at an object using a X0 X1 X2
device is a function of the distance from s
the target object and the object’s size. Tmsec= a + b log2 (d/s + 1)
•The further away & the smaller the object, the
longer the time to locate it & point to it. a, b = empirically-derived constants
d = distance
→ Fitts’ Law is useful for evaluating
Human Computer Interaction

s = width of target
systems for which the time to locate an ID (Index of Difficulty) = log2 (d/s + 1)
object is important, e.g., a cell phone, a
handheld devices.
School of ICT, HUST

Fitts’ Law Intuition

• Time depends on relative precision (d/s)

• Time is not limited by motor activity of moving your arm / hand, but
rather by the cognitive activity of keeping on track
• Below, time will be the same because the ratio d/s is the same
Human Computer Interaction

Target 1 Target 2
Human memory
2.2
Sensory memory

Short-term memory

Long-term memory
 Memory system
School of ICT, HUST

Stimulus
• Stimuli: sense data we
encounter in the form of sights,
sounds, smell, feel, and taste Sensory organs

• Three kinds of memory

•Sensory memory
•Short-term or working memory Sensory memory
•Long-term memory
Human Computer Interaction

Short-term
memory

Long-term
memory
 Human’s memory
School of ICT, HUST

Sensory memory

• Sensory memory registers stimuli.

• Each sensory organ has its proper memory retaining an exact copy of
what is perceived through this.
•The stored sense data is overwritten

• Sensory memory has an unlimited capacity; however, it has a very

short duration
•Visual memory: 200ms
•Auditory memory: 1500ms
Human Computer Interaction

• Information from sensory memory is filtered before transferring to

short-term memory
 Human’s memory
School of ICT, HUST

Short-term memory

• Short term memory is like a small holding pen

for perceived data from sensory memory.
• Short term memory has a limited capacity.
•People can hold 7 +-2 bits of information
•Rapid access time (700ms)
•Rapid decay (200ms)
•Encoding accordingly to sound of the words
Human Computer Interaction
 Human’s memory
School of ICT, HUST

Long-term memory

• Characteristics:
•Store much larger quantities of information for potentially unlimited duration
•Slow access (1/10 s) and slow decay

• Encoding: accordingly to meaning of the words

•Episodic: linear structure of events
•Semantic: structure of events, concepts and types
Human Computer Interaction
 Information processing model
School of ICT, HUST

• The progress of information through these storage systems is often

referred to as the Information Processing Model (Marzano, 1998) :

rehearsed

transferred
Short- Long-
Information Sensory
from transferred term term
memory
environment memory memory
retrieved
Human Computer Interaction

forgotten forgotten
(If not transferred to the next stage )
 Human Information Processing System
School of ICT, HUST

Model of cognition (Newell & Simon, 1972)

Environment

Receptors Effectors
(perception) (motor actions)

Processor

Memory
Human Computer Interaction

Perceptual Processor Cognitive Processor Motor Processor

-Input from sensory organs -Input: selective perception from sensory -Input: response from short term
(audio, visual stimuli, etc.) memories memory
-Process: register / encode -Process: access long-term memory to -Process: carry out response
information symbolically determine response -Output: response to stimuli
-Output: into sensory memories -Output :response into short-term
memory
School of ICT, HUST

Practice

How long to do the following tasks ?

Task Time
Execute a mental step 70 msec
Choose among methods 1250 msec
Enter a keystroke 230 msec
Point with a mouse 1500 msec
Human Computer Interaction

Move hands to mouse 360 msec

Perceive 100 msec
Retrieve from memory 1200 msec
School of ICT, HUST

Practice

• Create your own illusion using colors, lines, arrows, etc.

See how the following variations might affect the
relative strength of this illusion.
Does changing the color of the background change
the effect?
Does changing the color of the arrows change the
effect?
Try changing the color of the equal lines, is there any
combination of colors that is stronger than the others?
Try fat lines. Try skinny lines. Does the thickness of the
lines affect this illusion?
Human Computer Interaction

Does the distance from which you view the illusion

change the illusion?
• What can you conclude, if anything, about how we
perceive things from this exercise?
 2.3
Reasoning and problem solving

Reasoning

Problem solving

Skill acquisition

Errors and emotions

 DEDUCTIVE REASONING: INDUCTIVE REASONING: ABDUCTIVE REASONING:
DERIVES THE LOGICALLY GENERALIZES FROM CASES REASONS FROM A FACT TO
NECESSARY CONCLUSIONS WE HAVE SEEN TO INFER THE ACTION OR THE STATE
FROM THE GIVEN PREMISES INFORMATION ABOUT CASES THAT CAUSED IT
WE HAVE NOT SEEN

Reasoning
School of ICT, HUST

(1) Deductive reasoning

• Deduction: starts with a general case and deduces specific instances.

• IF [conditions] THEN [actions]
• Example:
If it is Friday then she will go to work
It is Friday therefore she will go to work.

• The answer does not necessarily right.

Human Computer Interaction

If it is raining then the ground is dry

It is raining therefore the ground is dry
School of ICT, HUST

Wason card problem

• Given 4 cards: A, B, 4, 7. Each card has a
letter on one side and a number on other
side.
• Does the following rule apply to these cards?
(Which cards must you turn over to test the
rule)
If there’s a vowel on one side then there’s an even
number on other side
Human Computer Interaction

A B 4 7
School of ICT, HUST

(2) Inductive reasoning

• Induction: reasoning from a specific case or cases and deriving a

general rule
• Example:
We have seen 10 elephants, and all of them have trunks → All elephants have
trunks.
Human Computer Interaction

• The conclusion is not always reliable.

One of your friend is good → All of your friends are good.
School of ICT, HUST

(3) Abductive reasoning

• Abduction: begins with an incomplete set of observations and

proceeds to the likeliest possible explanation for the set
• Example: Some coins conduct electricity (fact).
If these coins are made of gold (hypothesis), then they would conduct electricity
(prediction).
→ These coins are made of gold.
Human Computer Interaction
Problem solving • Gestalt principles
• General problem solving
School of ICT, HUST

(1) Gestalt principles

• Similarity
• Proximity
• Continuation
• Closure
Human Computer Interaction
School of ICT, HUST

Proximity
Proximity occurs when elements
are placed close together. They
tend to be perceived as a group.

(1) (2) (3)

Human Computer Interaction
School of ICT, HUST

Similarity
• Similarity occurs when objects
look similar to one another.
People often perceive them as a
group or pattern.

(1) (2)
Human Computer Interaction
School of ICT, HUST

Continuation
• Continuation occurs when the
eye is compelled to move
through one object and
continue to another object.
Human Computer Interaction
School of ICT, HUST

Closure
• Closure occurs when an object is
incomplete or a space is not
completely enclosed. If enough of the
shape is indicated, people perceive
the whole by filling in the missing
information.
Human Computer Interaction
 School of ICT, HUST
Human Computer Interaction

Case Study: Gestalt laws in Web design

• An example of a website using various
Gestalt laws:
http:// www.suddenoakdeath.org/
Practice
School of ICT, HUST

Gestalt laws in Web design

• One way to think about the function of Gestalt Principles is that they provide
"low frequency" information that helps people to organize a web page even
before the reader has processed the "high frequency" information of the actual
text and details of the graphics on the web page.”
• You can demonstrate this by blurring a screenshot of a web page.
Human Computer Interaction

• (From Jim Levin’s page at :

http://tepserver.ucsd.edu/~jlevin/gp/blurred/index.html)
School of ICT, HUST

Gestalt laws in Web

design
• Easy to differentiate
different elements into
groups without seeing
detailed content
Human Computer Interaction
School of ICT, HUST

(2) Problem space theory

• General problem solving is the ability to find answers to problems using an organized thought
process.
Is largely applied in well-defined areas rather than knowledge intensive areas

• Define the problem: initial state, goal state, all possible state in between
Problem space comprises problem states

• Problem solving involves generating states using legal operators

Brainstorm possible solutions - this can be done by convenient state transitions
Heuristics may be employed to select operators (select or decide on a solution that seems best and put it into action)
Human Computer Interaction

• e.g. means-ends analysis

Operates within human information processing system
• e.g. STM limits etc.
School of ICT, HUST

Chess: of Human and artificial intelligence

Human Computer Interaction

Deepblue Garry Kimovich Kasparov

Carnegie Mellon and move to IBM Research
Skills acquisition • Skilled activity characterized by chunking
lot of information is chunked to optimize short term
memory
• Conceptual rather than superficial grouping of
problems
• Information is structured more effectively
School of ICT, HUST

Example: knowledge compilation

• Given a dialog box produced by

the print command in the Office
menu of Microsoft Office, how to
use this box to print a file ?
Human Computer Interaction
Errors • Slips
• Mistakes
School of ICT, HUST

Errors

• Slips: right intention, but failed to do it right

Causes: poor physical skills, inattention etc.
Change to aspect of skilled behaviour can cause slip

• Mistakes: wrong intention

Cause: incorrect understanding
• humans create mental models to explain behaviour.
Human Computer Interaction

If wrong (different from actual system) errors can occur

School of ICT, HUST

Slips

Action-based Memory-lapse
• User’s action description doesn’t • The error is caused by an
include all necessary details incorrect (implicit) assumption
• Some of the remaining details about the current context
are supplied incorrectly → The intended action is not
→ the wrong action is performed. done or its results are not
Human Computer Interaction

evaluated.

Example ?
How to prevent these errors ?
School of ICT, HUST

Mistakes

Rule-based Knowledge-based / Memory-lapse

• A sequence of actions that has • An intention − or an already
become automatic is executed performed action - is forgotten
instead of a different sequence
that begins with the same
actions
Human Computer Interaction

Example ?
How to prevent these errors ?
School of ICT, HUST

Example: What’s wrong here ?

• http://interfacehallofshame.eu/www.iarchite
ct.com/shame.htm
Human Computer Interaction
Emotions • cognitive and physical responses to stimuli
School of ICT, HUST

Emotion

• Various theories of how emotion works

James-Lange: emotion is our interpretation of a physiological response to a stimuli
Cannon: emotion is a psychological response to a stimuli
Schacter-Singer: emotion is the result of our evaluation of our physiological
responses, in the light of the whole situation we are in

• Emotion clearly involves both cognitive and physical responses to

Human Computer Interaction

stimuli
School of ICT, HUST

Emotion

• Affect:
the biological response to physical stimuli
influences how we respond cognitively to situations
• positive → creative problem solving
• negative → narrow thinking

→ Implications for interface design

Human Computer Interaction

stress will increase the difficulty of problem solving

relaxed users will be more forgiving of shortcomings in design
aesthetically pleasing and rewarding interfaces will increase positive affect
School of ICT, HUST

Individual differences

• Long term
Sex, physical and intellectual abilities
• Short term
Effect of stress or fatigue
• Changing
Age
Human Computer Interaction

• Ask yourself:
Will design decision exclude section of user population?
 IO channels
Computer
• Direct interactivity
• Input devices
• Output devices
Memory
Information processing
School of ICT, HUST

(1) Direct interactivity

How do these affect to the interactive

• Computers’ main components design?
Input/output devices
• Keyboard, mouse, screen
Memory
• RAM, HD, CD
Processor
Human Computer Interaction

• Batch
• Online
 (2) Input devices
a. Keyboard

• QWERTY
School of ICT, HUST Human Computer Interaction
School of ICT, HUST

(2) Input devices

a. Keyboard

• Letter keyboard
Human Computer Interaction
School of ICT, HUST

(2) Input devices

a. Keyboard

• DVORAK simplified keyboard

Human Computer Interaction
School of ICT, HUST

(2) Input devices

a. Keyboard

• MALTRON Ergonomic Keyboards

Human Computer Interaction
School of ICT, HUST

Practice
What are the difference
of num pad design
principles to:
Quickly press keys
Remember passwords (PIN
Code)
Human Computer Interaction
School of ICT, HUST

(2) Input devices

b. Manuscript

• Recognize hand writing

• Convert to text file.
• Difficulties:
Correctness
Lots of specialized forms

• Advantages:
Human Computer Interaction

Small size interactive system

Native interaction
School of ICT, HUST

(2) Input devices

c. Voice

• Voice recognition
• Recognition speed: 90%
• Advantage:
Natural
Easy to use

• Inconvenient:
Human Computer Interaction

Correctness
Orthographic error
School of ICT, HUST

(2) Input devices

d. Pointer and locator

• Mouse
• Touch pad
• Trackball
• Joystick
• Touch screen
Human Computer Interaction

• Pen
• Eyegaz
School of ICT, HUST

(3) Output devices

• Screen:
CRT
LCD
Touch screen

• Printer
Human Computer Interaction

• Speaker
•…
School of ICT, HUST

Memory

• “Sensory”: I/O buffer, cache

• Short-term: RAM
• Long-term: HD, CD
Human Computer Interaction
School of ICT, HUST

Information processing

• Processing speed:
low speed of processing → low speed of response

• Some limitation to be considered for an effective design:

Limitation of computing capabilities
Limitation of stockage channel
Human Computer Interaction

Limitation of graphical capabilities

Limitation of network capabilities
School of ICT, HUST

Practice
• Describe some kinds of IO devices that are
convenient for the following interactive
system:
Portable word processor
Tourist Information system
Air traffic control system
Human Computer Interaction
School of ICT, HUST

Portable word
processors
• Input:
• Output:
• Advantage:
Human Computer Interaction

• Disadvantage:
School of ICT, HUST

Tourist Information
system
• Input:
• Output:
• Advantage:
Human Computer Interaction

• Disadvantage:
School of ICT, HUST

Air traffic control

system
• Input:
• Output:
• Advantage:
Human Computer Interaction

• Disadvantage:
Thank you for Any questions?

your attentions!
 References
School of ICT, HUST

• References:
HCI: Chapter 1, 2
ID: Chapter 3
• Textbook
HCI: Alan J. Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, Janet E. Finley.
Human-Computer Interaction, 3rd edition. Prentice Hall, 834 pages, 2004. ISBN: 978-
0130461094.
ID: Helen Sharp, Yvonne Rogers, Jenn Preece. Interaction Design: Beyon Human-
Computer Interaction, 2nd edition. Addison Wesley Publishing Company, 800 pages,
2007. ISBN: 978-0-470-01866-8
Human Computer Interaction

More book
• and related papers