TOPIC 1

FUNDAMENTALS OF HUMAN
COMPUTER INTERACTION
HUMAN ABILITIES
ICT551
HUMAN COMPUTER INTERACTION
How People Do Things?
The Seven Stages of Action
1) Forming a goal
 example: I want more light so I can see better.
2) Forming the intention
 example: I will turn on some lights.
3) Specifying an action
 example: I will walk to the wall, and move the light
switch up.
4) Executing the action
 example: Attempting to do the action.
5) Perceiving the state of the world
 example: I look around.
6) Interpreting the state of the world
 example: Can I see better?
7) Evaluating the outcome
How People Do Things?

See – Think - Act

Human Model
Processor

1. Perceptual system
• handle sensory
stimulus

2. Cognitive system
• provides the
necessary
processing to
connect the two

3. Motor system
• controls action

(Card, Moran and Newell,

1983)
mu: Storage capacity in
terms
delta: decay time of an
item
kappa: main code type
tau: cycle time
Human Abilities – sensory & perceptual
Definition

 Perceptual
the ability to interpret or become aware of
something through the senses.

 Senses
A faculty by which the body perceives an external
stimulus; one of the faculties of sight, smell,
hearing, taste, and touch.
Perceptual/Perception

 understanding of how we put together the basic

features (edges, colors, motion, depth etc.)
 to see a coherent organized world of things/surfaces.

 Perception is the key in processing information

Design Model User’s Model
DESIGNER USER

System Image:
the only way to
SYSTEM communicate
the designer’s
System Image model
Perceptual/Perception

Fundamental for HCI

 Perceive info presented at/through interface
 Perception influences how we react in environment
 Theories of perception influence interface design
 Present info in easily understandable or unambiguous
manner i.e. user-centered
 Active process
Sense: sight
Human Visual System
Visual Perception:
Perceptual world can be different from real/human world!

 Human system is capable of perceiving objects

 brightest of sunlight/darkest of night
 rapidly moving objects/rapidly decaying events
 Human system cannot perceive
 Bullet being shot / Plant growing / Infrared light

 So we can obtain info from displays

 which vary in quality, size and other characteristics
 Perceptual processor: Physical store from our senses -
here sight
 Pre-attentive perception: color, direction...
Pre-attentive perception:
How many 3s???

12
Pre-attentive perception:
How many 3s???

13
Where are the cherries?

14
Where are the cherries?

15
Visual Perception: Brightness &
Colour
 Perceiving Brightness
 subjective reaction to levels of light
 affected by luminance (the amount of light reflected by
an object)
 visual acuity increases with luminance as does flicker

 Perceiving Colour
 made up of hue, intensity, saturation
 cones sensitive to colour wavelengths
 blue acuity is lowest, green medium and red long
Color

 Color can be a powerful tool to improve user interfaces

but its inappropriate use can severely reduce user
performance and even make user interaction impossible

 The frequencies of the

reflected waves determine
the color we perceive
Color: Components

Hue
property of the wavelengths of light (i.e., “color”)

Lightness (Intensity/brightness/ value)

how much light appears to be reflected from a surface
some hues are inherently lighter or darker

Saturation
purity of the hue
e.g., red is more saturated than pink

color is mixture of pure hue & achromatic color

portion of pure hue is the degree of saturation
Color: Sensitivity

 As we age
 lens yellows & absorbs shorter wavelengths
 sensitivity to blue is even more reduced
 fluid between lens and retina absorbs more light
 perceive a lower level of brightness

Blue text on a dark background to Blue text on a dark background to

be avoided. be avoided.
We have few short-wavelength We have few short-wavelength
sensitive cones in the retina and sensitive cones in the retina and
they are not very sensitive. they are not very sensitive.
Older users need brighter colors. Older users need brighter colors.
Colour: Yellow
 Yellow causes a lot of emotions, so this bright colour
should be used carefully. Yellow is used to help people
to make a tough decision or concentrate on something.
It can also prevent panic and depression.
 Yellow is the colour of the world’s top brands such as
McDonald’s, Ikea, Best Buy, Lipton Tea, Subway, Nikon,
Lamborghini, Shell, Burger King, and others.
http://crazypixels.net
Color: Focus

 Different wavelengths of light focused at different

distances behind eye’s lens
 need for constant refocusing
 causes fatigue
 careful about color combinations
 Pure (saturated) colors require more focusing then less
pure (desaturated)
 don’t use saturated colors in UIs unless you really need
something to stand out (stop sign)
Color Blindness

 Inability to perceive differences in certain colours

 Color blindness or partial inability to differentiate
colors makes it harder to define the hues of a similar
color
 Types of color blindness:
 Protanopia: No ability to perceive red
 Deuteranopia: No ability to perceive green
 Tritanopia: No ability to perceive blue
 Color Oracle - Design for the Color Impaired
http://colororacle.org/index.html
Color Blindness
Normal Color Vision

Deuteranopic Color
Vision

Dichromatic Color Vision

Color Blind-friendly UI

 Do not use colors to convey important information;

 Increase contrast between similar colors;
 Lighten light colors and darken the dark ones;
 Increase saturation of colors;
 Use patterns, symbols and strokes.

http://blog.templatemonster.com/2012/03/21/designing-colorblind-friendly-website/
Visual Perception: Illusions

 Visual processing – transformation and interpretation

of a complete image from the light thrown onto retina
 The visual processing compensates for:
 the movement of the image on the retina which occurs as we
move around and as object we see moves
 changes in luminance (the intensity of light emitted from a
surface per unit area in a given direction).
 Ability to interpret is used to resolve ambiguity
 Optical illusions sometimes occur due to over
compensation
Illusions: Length
Optical Illusions
How many triangle ?
Optical Illusions

Illustration from Sensation and Perception, Fourth Edition, by Stanley Coren, Lawrence M. Ward, and James T. Enns, copyright © 1994 by Harcourt,
Brace, and Company, reprinted by permission of the publisher.
Context in Visual Processing

 context in which an image is viewed can change what

we see
 can be used to assist or disambiguate
 e.g., what image do you see?
Reading

 text can be considered a special case of visual

processing
 majority of computer users are experienced readers
 many of the techniques used in reading are common
amongst all readers
 exploiting these properties can improve interface
design
 negative contrast (eg. dark characters on a light
screen) improves reading from computer screen
 reading involves saccades and fixations
 eye moves both forward and backwards over text
 adults read ~250 words a minute
Can you read?

I cnduo't bvleiee taht I culod aulaclty uesdtannrd waht I

was rdnaieg. Unisg the icndeblire pweor of the hmuan
mnid, aocdcrnig to rseecrah at Cmabrigde Uinervtisy, it
dseno't mttaer in waht oderr the lterets in a wrod are,
the olny irpoamtnt tihng is taht the frsit and lsat ltteer
be in the rhgit pclae. The rset can be a taotl mses and
you can sitll raed it whoutit a pboerlm. Tihs is bucseae
the huamn mnid deos not raed ervey ltteer by istlef,
but the wrod as a wlohe. Aaznmig, huh?
 Read Flow

• Read-flow principle:
– Action items (buttons, links) should support the flow of
the user in the same way as reading occurs.
– The last action should be the most-likely action to avoid
backtracking.

– Left = back, stop, quit, cancel, previous

– Right = next, continue, submit

<< Previous Slide Next Slide >>

Read Flow

FLOWS

DOES NOT FLOW

Sense: hearing
Auditory System

 Includes:
 the ear
 physical reception of the sound

 the brain
 interpretation of the sound

 Human can process sounds between 20 Hz to 15 kHz

 Having two ears allows us to locate sound
 Provides information about environment:
distances, directions, objects etc.
 Sound (changes in the air pressure)
 pitch – sound frequency
 loudness – amplitude
 timbre – sound caused by different
Auditory System

 used heavily in game development

 how is sound use in interface?
 issue warning
 convey information

 Auditory system filters sounds

 Ignore background noise, concentrate on important
information
Eg. can pick up our name spoken across a crowded
noisy room
Sense: touch
Touch( Haptic) Sensory

 used less in HCI than sight and sound

 provides additional environment information/feedback
 Allows us to know position of our limbs through
receptors in our joints (kinesthesis)
 may be key sense for someone who is visually impaired.
 received through sensory receptors in skin:
 Thermoreceptors : heat/cold (temperature)
 Nociceptors : pain,heat, intense pressure
 Mechanoreceptors : pressure(normal) - some
instant,
some continuous
 some areas more sensitive than others e.g. Fingers.
Sense: TASTE & smell
Taste & Smell

 typically not exploited in computer interface design

 however, there is some research:
 adding smell to simulation:
 http://news.bbc.co.uk/1/hi/england/7716971.stm

 edible user interfaces:

 http://www.monzy.org/eui/
Human Abilities – Motor system
Motor System

 our response to stimulus and thought

 actions generated by muscle movements
 two important considerations:
 speed

 accuracy

 typically, a tradeoff exists

 more speed = less accuracy
 this tradeoff is not always present
 practice can improve speed and accuracy
 fatigue can reduce speed and accuracy
Motor System

transmit process Valid the brain signal

response Muscle
brain
generated response

Reaction time Movement time

 Physical response = reaction time + movement time

 Reaction time depends on: • Movement time depends on:
 the stimulus type: · size
 Auditory ~ 150 ms · age and fitness
 Visual ~ 200 ms
 Pain ~ 700 ms
Reaction Time

 There exists trade-off between speed of reaction &

accuracy
 more speed = less accuracy
 this tradeoff is not always present
 Fitts’ Law used to evaluate movement & design
principles
 movement time was a logarithmic function of
distance when target size was held constant
Fitts’ Law
 “Fitts's law (often cited as Fitts' law) is a model of
human movement in human–computer interaction and
ergonomics that predicts that the time required to
rapidly move to a target area is a function of the
distance to and the size of the target. “
Wikipedia
 Fitts’ law can be used to determine the size and
location of a screen object.
 The bigger an object and the closer it is to us, the
easier it is to move to.
 The quicker you can reach a target object, the more
convenient and easy it is to use.
Fitts’ Law

 the farther away an object is, the longer it takes to

acquire with a mouse
 in order to keep the average acquisition speed, object
needs to be larger
Fitts’ Law
 (a) distance to a target, and the (b) size of the target [i.e. a
button or a link] affected the (c) speed at which a user could
effectively reach the target.
 applied by designers to
 suggest moving target buttons closer
 making them larger for extremely
commonly used buttons
 put things in edges and corner
 applying the formula can be extremely
useful for exact design of
time-critical applications
Further Reading
 Improving Usability with Fitts’ Law -
http://sixrevisions.com/usabilityaccessibility/improving-usability-
with-fitts-law/

 When You Shouldn’t Use Fitts’s Law To Measure User Experience -

http://uxdesign.smashingmagazine.com/2012/12/04/fittss-law-
and-user-experience/
Human Abilities – cognition
Cognition

 Cognition – The mental action or process of acquiring

knowledge and understanding through thought,
experience, and the senses.
 Cognitive psychology – the study of how people
perceive, learn, and remember
Cognition

 Process by which we became acquainted with things or

in other words gain knowledge
 Understanding

 Remembering

 Reasoning

 Attending

 Creating a new idea

 How Humans and Computers interact with one another
in terms of knowledge transmitted by them
 Most relevant (and most studied) aspect: memory
Cognition

 Also described in terms of specific process

 Attention

 Perception and recognition

 Memory

 Learning

 Reading, speaking and listening

 Problem solving, planning, reasoning, decision
making
 Information Processing

 Behind the scenes of Information processing in Humans:

 Input Channels Sight, hearing, touch, smell, taste
 Encoding information from environment in some kind of
internal representation
 Internal representation is compared with memorized
representations (Comparison)
 Concerned with deciding on a response to the encoded stimulus
(Response Selection)
 Organizing response and necessary action (Response
Input or Execution)
stimulus Output
Encoding Comparison Response Response
selection Execution
Human Model Processor (Barber,1988)
Extension to the
Information Processing Model
 How Information is perceived by the perceptual
processors
 How information is attended to
 How information is processes and stored in Memory
Attention

Encoding Comparison Response Response

Selection Execution

Memory
Attention

 Need to consider certain aspects of attention

 Focused and divided attention
 Focused Attention - The cocktail party syndrome
 Hearing your name in a crowded room whilst talking
to someone
 Seeing someone out of the corner of your eye
 Divided attention - attempt to attend to more than
one thing at a time
 In both cases you have been distracted and may have to
have the information repeated
 Alternatively can have divided attention. Can carry on
conversation and observe what is going on – TV
presenters – highly skilled
Users Attention at the interface

 Since we know users can be distracted involuntarily we

need to consider how we can
• Get their attention again
• Get them to focus on what they should be looking at

 Cognitive psychology provides a number of techniques

which can be used:
• reduce search time by structuring layout so user
perceives meaningful components in information
• highlighting through dividers, windows, colour to
emphasize structure
Focus attention at the interface

 alerting user to new or important information (look at me) using

flashing, video, auditory warnings…
 locating information on screen guided by its relative importance
 important requiring immediate attention - prominent
 less important - less prominent but in a consistent location
 much less important - not presented but available on request
 structuring information
 structure interface so it is easy to navigate through
 “right amount” of information per screen
 grouped and ordered into meaningful parts
(See Gestalt laws of perceptual grouping)
Gestalt Principles

 Gestalt is a psychology term which means "unified

whole“
 Gestalt Principles cause us to associate visual elements
into “wholes” based on …
1. Proximity: group by distance or location
2. Similarity : group by type
3. Symmetry: group by meaning
4. Continuity: group by flow of lines (alignment)
5. Closure: perceive shapes that are not (completely)
there
MEMORY
Memory

 3 types of memory:
 Sensory
 Short-term
 Long-term
 Humans tend to remember novel
and unexpected events rather than
regular, recurring ones
 Humans are pattern-recognition
animals, matching things that
appear similar to past events
SENSORY MEMORY
Sensory memory

 Sensory memory is the shortest-term element of memory.

 It acts as a kind of buffer for stimuli received through the
five senses of sight, hearing, smell, taste and touch, which
are retained accurately, but very briefly. For example, the
ability to look at something and remember what it looked
like with just a second of observation is an example of
sensory memory.
 The sensory memory for
 visual stimuli is sometimes known as the iconic memory,
 aural stimuli is known as the echoic memory,
 touch as the haptic memory.
SHORT-TERM MEMORY
(STM)
Short-term Memory (STM)

 The ability to remember and process information at the

same time.
 It holds a small amount of information (typically around
7 items or even less) in mind in an active, readily-
available state for a short period of time (typically from
10 to 15 seconds, or sometimes up to a minute).
 attention allows us to selectively choose what is copied
from perceptual to working memory
 e.g. cocktail party effect
Short-term Memory (STM)

 temporary recall of information

 Examples
 where my car is parked today
 phone number I just rehearsed and dialed
 name of someone I just met
 used for:
 calculations
 reading
 fast reactions
 Like cache memory in a CPU
What makes an expert?

 the ability of experts to package information into chunks in STM

• Chunk - a meaningful grouping of stimuli that can be stored
(encoded) as a unit in STM
 can be group of numbers or words
 humans have a subconscious desire to “chunk” – optimizes
memory
 compared to novices, experts can form and use chunks that are
 longer
 more complex
 the capacity of STM is about 5 chunks … but … the chunks can be
short and simple …or… long and complex
Memorize in 3 seconds

60355211205
How many digits you can remember?

4?
5?
6? …
Memorize in 3 seconds

603 5521 1205

Chunk

 on average, a person can remember roughly between

5 - 9 chunks of information in STM
 dependent on category
• numbers: ~7
• Letters : ~6
 How many chunks in . . .

www.bestbookbuys.com

20? Not really:

 www.
 best
 book
 buys
Chunk: Experts vs Novices

 Experts perceive visual stimuli differently than novices

 Expert chunks are …
 large
 rich in semantic information

 Novice chunks are …

 small
 focused on syntactic features
Pattern

• identifying patterns can be useful in optimizing short term memory storage

HEC ATR ANU PTH ETR EET

THE CAT RAN UP THE TREE

Say the Colors of the Words
Say the Colors of the Words

• Took longer …
• This is known as the Stroop effect
• An example of interference during retrieval
Interference and Recency

 items in short term memory can be affected by new incoming

information
 interference
 affects decay rate of short term memory
 typically, newer items are easier to recall than older items
 the recency effect

 The Stroop Effect is an interference effect that occurs when one is

forced to interpret the words in this list as colours based on the
hue in which they are written. The brain gets confused because we
are taught that what a word reads is more important than its
colour.
Stroop Effect

 This term refers to a

phenomenon in which it is
easier to say the color of a
word if it matches the
semantic meaning of the
word. For example, if
someone asked you to say the
color of the word "Black" that
was also printed in black ink,
it would be much easier to
say the correct color than if
it were printed in green ink.
Say the Colors of the Words

GREEN PURPLE ROSSO

BLUE YELLOW ARANCIA
ORANGE BLUE VIOLA
PURPLE GREEN GIALLO
GREEN BLUE AZZURRO
RED VERDE
RED
GREEN AZZURRO
YELLOW
ORANGE PURPLE ROSSO
ORANGE VERDE
PURPLE
YELLOW VIOLA
YELLOW
RED ARANCIA
BLUE
ORANGE GIALLO
RED
Interference in Design
Stroop Effect

Is there Stroop interference when entering a phone

number, such as
1-800-HELLO, on a telephone keypad?
Or Dial: 1-800-O-Canada
ABC DEF
1
2 3

GHI JKL MNO

4 5 6

PQRS TUV WXYZ

7 8 9

0 #
*
Short term Memory in Design

 users should not be expected to hold more than seven

pieces of information in memory
 patterns can improve short term memory
 improves chunking
 familiar words, icons
 when creating a sequence of tasks, consider:
 interference and recency
LONG-TERM MEMORY (LTM)
Long-term Memory

 long term storage of:

 factual information
 experiental knowledge
 in short, everything we "know"
 differs from short term memory:
 capacity is enormous
 needs no refreshing to prevent decay
 decay rate is very slow
 complete forgetting is debatable
 access time is "slow" (0.1 sec)
Long-term Memory: Types

 episodic
 memory of events and experiences
 non-structured form (images, sound, etc)
 semantic
 record of facts, concepts, skills, relationships
 structured form
 derived from episodic memory
 e.g. semantic network
Long-Term Memory: Semantic Network
Long-term Memory: Storage

 Information gets into LTM from STM, via rehearsal and

integration

 The major task of learning new material is to integrate

it into the existing structure of information that is
already in LTM
 Rehearsal helps retain information in STM … but …
 LTM requires rehearsal + integration

 Information + integration = KNOWLEDGE

Long-term Memory: Retrieval

 information is retrieved through association with contents of working

memory
 i.e. contents of working memory used to retrieve associated items in
long term memory
 retrieval can fail, even when the information is present
 no effective associations present for data in working memory
 similar associations with multiple chunks interfere with the target chunk
 recall can be assisted through:
 retrieval cues
 allow subject to quickly access information in memory
 e.g., categories
 imagery and visualization
 a powerful memory cue
 e.g., icons
Long-term Memory: Recognition vs
Recall
 Information gets out of LTM via
retrieval which comes in two flavors
 recall
 recognition (easier)

 In recall
 information to be retrieved from
LTM must first be found and then
recalled
 information must be reproduced
from memory

 In recognition
 an informational cue is provided
and the information retrieved is
Long-term Memory:
Long-term Memory: Recognition vs
Recall
 What is the name of the dinosaur from the last slide?

 Write your answer.

Long-term Memory: Recognition vs
Recall
 What is the name of the dinosaur from two slides ago?

A. Parasaurolophus
B. Pachycephalosaurus
C. Plateosaurus
D. Patagosaurus
Recognition vs. Recall in Interface
Design
 early computer systems used to rely on command line interfaces,
requiring recall memory for hundreds of commands.
Recognition vs. Recall in Interface
Design
 The shift to graphical user
interfaces, which present
commands in menus allowing
much easier recognition of
desired options, eliminated the
need to remember so much
information, simplifying usability
and opening up access to
computing power to many more
users.
Recognition vs. Recall in Interface
Design
Recognition vs. Recall in Interface
Design
 Generally recall is more difficult than
recognition
 menus may be easier for novices to use
as compared to command-line
interactions
 List Boxes may be easier for novices to
use as compared to Edit Boxes
 Could use Combo Boxes and get the
best of both