Human Computer Interfacing
CSE - 476
Introduction
1
Course Information
BOOK
Human-Computer Interaction, Third Edition, by Alan Dix, Janet
Finlay, Gregory Abowd, and Russell Beale. Prentice Hall.
2
Lecture Contents
Introduction
Human
Input/Output Channels
Human Memory
Thinking
4/25/2019 Introduction 3
User Interface – Hall of Shame
4/25/2019 Introduction 4
User Interface – Hall of Shame
Presents a number of templates
Prints custom award certificates
Good points about the Interface?
Graphical – Mouse Driven
No complicated commands to remember
User gets a preview of the certificate
4/25/2019 Introduction 5
User Interface – Hall of Shame
Why isn’t it usable?
Long help message for a simple ‘selection’ task
Because the interface is bizarre
Moving the scroll bar changes the template
How many templates?
How are they sorted?
How much to move the bar to select the next template?
Frequent users: How to find a template already used
How would you redesign?
4/25/2019 Introduction 6
The Interface Redesigned
4/25/2019 Introduction 7
The Error Dialog
We see it all the time
What’s good about the design
of this error box?
The user knows there is an error
What’s poor about the design
of this error box?
Not enough information
The user does not know how to resolve the error (instructions
or contact info)
4/25/2019 Introduction 8
What is HCI
Human–computer interaction (HCI) is the study of interaction
between people (users) and computers.
HCI is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use.
Human and a computer system interact to perform a task?
task - write document, calculate budget, solve equation, learn about
Bosnia, drive home, make a reservation, land a plane...
4/25/2019 Introduction 9
Interfaces in the Real World
Not just computers!
VCR
ATM
Phone
Copier
Car
Plane cockpit
……..
4/25/2019 Introduction 10
Why HCI is important
HCI is not just ‘how big should I make buttons’ or ‘how
to layout menu choices’
It can affect:
Effectiveness
Productivity
Morale
Safety
Example: A car with poor HCI
4/25/2019 Introduction 11
The Human
User – Information Processing System
Information
Comes in (Input)
Is stored (Memory)
Is processed (Processing)
Is passed out (Output)
4/25/2019 Introduction 12
The Human
Information i/o …
visual, auditory, haptic (touch), movement
Information stored in memory
sensory, short-term, long-term
Information processed and applied
reasoning, problem solving, skill, error
Emotion influences human capabilities
Each person is different
4/25/2019 Introduction 13
Lecture Contents
Introduction
Human
Input/Output Channels
Human Memory
Thinking
4/25/2019 Introduction 14
Input/Output Channels
Input – Output
Person interacts with outside world through information being
received and sent
User’s output = Computer’s Input (vice versa)
Human
Input : Senses
Output: Effectors
4/25/2019 Introduction 15
Input/Output Channels
Input – Five senses
Sight/Vision
Hearing
Touch
Taste
Smell
Output – Effectors
limbs
Fingers (primary role, typing or mouse control)
Eyes
Head & Body
4/25/2019 Introduction 16
Example
Computer with keyboard and mouse
Application: GUI, Menus & Icons
Information Received
Sight
Ears?
Touch?
Information Sent
Hands: Keyboard, mouse
4/25/2019 Introduction 17
Vision
Vision is primary source of information for humans
Visual Perception – Two Stages
Physical reception of stimulus from outside world
Processing & Interpretation of stimulus
4/25/2019 Introduction 18
The Eye
4/25/2019 Introduction 19
The Eye – Physical Reception
Eye is a mechanism for receiving light and transforming
it into electrical energy
Light is reflected from objects
Images are focused upside-down on retina
Retina contains photoreceptors
Rods: Highly sensitive to light
Cones: Color Vision
4/25/2019 Introduction 20
Interpreting the Signal
Size and depth
Visual angle indicates how much of view object
occupies
Relates to size and distance from eye
4/25/2019 Introduction 21
Interpreting the Signal
Visual Angle
4/25/2019 Introduction 22
Interpreting the Signal
Size and depth
Familiar objects perceived
as constant size
Size constancy: an object
appears to maintain a constant
size even though its retinal
image size changes with
distance
Cues like overlapping help
perception of depth
4/25/2019 Introduction 23
Interpreting the Signal
Brightness
Reaction to levels of light
Affected by luminance of object
Contrast: luminance of object & its background
Colour
Made up of hue, saturation, value
Cones sensitive to colour wavelengths
Red, Green, Blue
8% males and 1% females colour blind
4/25/2019 Introduction 24
Interpreting the Signal - Colour
Hue
Hue is what most people think of when we say color
Hue is the name of a distinct color of the spectrum, It is the particular
wavelength frequency
Saturation
Saturation is the purity of a colour
Value (Intensity, Brightness, Lightness)
Refers to the intensity of light present. When light is at
its fullest intensity, colors will become bright
Unlike saturation, there isn't necessarily less of the
color – it is just not as intense
4/25/2019 Introduction 25
Interpreting the Signal - Color
HSV
4/25/2019 Introduction 26
Interpreting the Signal
Ambiguity
B or 13 ???
Context is used to resolve ambiguity
Interpret & exploit the expectation
4/25/2019 Introduction 27
Interpreting the Signal
Optical Illusions
the Ponzo illusion the Muller Lyer illusion
4/25/2019 Introduction 28
Reading
Several stages:
Visual pattern of a word perceived
Decoded using internal representation of language
Interpreted using knowledge of syntax, semantics
Reading involves saccades* and fixations
*Jerky movements of eye
4/25/2019 Introduction 29
Reading
Perception occurs during fixations
94% of the elapsed time
Regression
Forwards & Backward movements of eye over text
Word shape is important to recognition
Reading speed
Legibility: font size, line length etc.
4/25/2019 Introduction 30
Hearing
Provides information about environment:
Distances, directions, objects etc.
Physical apparatus:
Outer ear
Middle ear
Inner ear
Sound
Pitch – Sound frequency
Loudness – Amplitude
Timbre – Type or quality
4/25/2019 Introduction 31
Hearing
Humans can hear frequencies from 20Hz to 15kHz
Auditory system filters sounds
Can attend to sounds over
background noise
For example, the cocktail party
phenomenon
4/25/2019 Introduction 32
Touch
Provides important feedback about environment
May be key sense for someone who is visually
impaired
Stimulus received via receptors in the skin:
Thermoreceptors – heat and cold
Nociceptors – pain
Mechanoreceptors – pressure
Some areas more sensitive than others e.g. fingers
Ecommerce (CDs & Books vs. Clothes)
4/25/2019 Introduction 33
Movement
Fitt’s Law
Describes the time taken to hit a screen target
Movement Time = a + b log2(D/S + 1)
Where
a and b are empirically determined constants
D is Distance from target centre
S is Size of target
Important: D & S are calculated along the axis of motion
4/25/2019 Introduction 34
Movement
Fitt’s Law
Movement Time = a + b log2(D/S + 1)
Index of Difficulty
=> Targets as large as possible
=> Distances as small as possible
4/25/2019 Introduction 35
Movement
Fitt’s Law
4/25/2019 Introduction 36
Movement
Pie-chart shaped menus
All options are equidistant (As opposed to lists)
Increased used of screen estate
4/25/2019 Introduction 37
Today’s Interface Hall of Shame
Where does it come from?
Microsoft Word
Problem?
Four pairs of mutually exclusive options
Check boxes?
4/25/2019 Introduction 38
Today’s Interface Hall of Shame
Software Automate Pro
Interface: Entering schedule time for an event
How would you enter the time?
Click on Set time
Use the special clock control
4/25/2019 Introduction 39
Today’s Interface Hall of Fame
Useful solution to a very common problem
Indicating that the state of the Caps Lock key may
interfere with the processing of the password is a
good idea
4/25/2019 Introduction 40
Lecture Contents
Introduction
Human
Input/Output Channels
Human Memory
Thinking
4/25/2019 Introduction 41
Human Memory
There are three types of memory functions
Sensory Memory
Short-term or working memory
Long-term memory
4/25/2019 Introduction 42
Human Memory
4/25/2019 Introduction 43
Sensory Memory
Buffers for stimuli received through senses
Iconic memory: visual stimuli
Echoic memory: aural stimuli
Haptic memory: tactile stimuli
Continuously overwritten
From Sensory to Working memory
Attention: Concentration of mind on one out of a number of
competing stimuli or thoughts
Example: Cocktail party phenomenon
4/25/2019 Introduction 44
Short Term Memory
Temporary recall of information
Reading a sentence, Performing an arithmetic operation etc.
Rapid access
Rapid decay
Limited capacity: 7± 2 chunks
Examples
212348278493202
00 44 112 245 8920
Chunking Information can increase short term memory
Pattern Abstraction
4/25/2019 Introduction 45
Short Term Memory
Closure
Desire to complete or close the task in short term memory
ATM Cash Machine
Closure
Flush out STM
Card/Cash ???
4/25/2019 Introduction 46
Short Term Memory
4/25/2019 Introduction 47
Long Term Memory
Repository for all our knowledge
Slow access ~ 1/10 second
Slow decay, if any
Huge or unlimited capacity
4/25/2019 Introduction 48
Long Term Memory
How to …..
Events and Experiences Facts
4/25/2019 Introduction 49
Reading Assignment
Long – term Memory structure
(HCI, Dix et al. Chapter 1)
4/25/2019 Introduction 50
Long Term Memory - Processes
Storage
Forgetting
Retrieval
4/25/2019 Introduction 51
Long Term Memory - Storage
Rehearsal
Information moves from STM to LTM
Total time hypothesis
Amount retained proportional to rehearsal time
Distribution of practice effect
Optimized by spreading learning over time
Structure, meaning and familiarity
Information easier to remember
Past, Faith, Idea, Cold, Value, Courtesy, Logic, Quiet, Ambitious
Boat, Tree, Cat, Child, Gun, Plate, Home, Table, Computer, Spoon
4/25/2019 Introduction 52
Long Term Memory - Forgetting
Decay
Information is lost gradually but very slowly
Interference
New information replaces old: retroactive interference
Recalling older telephone number
Old may interfere with new: proactive inhibition
Driving to old house
4/25/2019 Introduction 53
Long Term Memory - Retrieval
Recall
Act of reproducing a specific incident, fact or other item (from long term
memory)
Recalling where you were last weekend, fill-in-the-blank on exams
Recognition
Information provided gives knowledge/cue that it has been seen before
People are more likely to recognize a suspect in a police line-up than to provide
an accurate description from recall memory
It is easier to answer multiple-choice questions than essay questions because
the correct answer may be recognized
People recognize more than they can recall.
4/25/2019 Introduction 54
Lecture Contents
Introduction
Human
Input/Output Channels
Human Memory
Thinking
4/25/2019 Introduction 55
o Thinking
o Reasoning
o Problem Solving
4/25/2019 Introduction 56
Reasoning
Use the knowledge we have to draw conclusion or
infer something new about the domain of interest
Deductive Reasoning
Inductive Reasoning
Abductive Reasoning
4/25/2019 Introduction 57
Deductive Reasoning
Deduction:
Derive logically necessary conclusion from given premises
e.g. If it is Friday then she will go to work
It is Friday
Therefore she will go to work.
Logical conclusion not necessarily true:
e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
4/25/2019 Introduction 58
Deductive Reasoning
When truth and logical validity clash …
e.g. Some people are babies
Some babies cry
Inference - Some people cry
Correct?
4/25/2019 Introduction 59
Inductive Reasoning
Induction
Generalize from cases seen to cases unseen
e.g. All elephants we have seen have trunks
therefore all elephants have trunks
Unreliable
Can never prove it true
… but useful!
Humans not good at using negative evidence
e.g. Wason's cards.
4/25/2019 Introduction 60
Inductive Reasoning
Wason’s Cards
7 E 4 K
If a card has a vowel on one side it has an even number on the other
Is this true?
How many cards do you need to turn over to find out?
…. and which cards?
4/25/2019 Introduction 61
Inductive Reasoning
Wason’s Cards
Common Responses
Select E & 4: Positive Evidence
Check Negative Evidences
Select E & 7
7 E 4 K
If a card has a vowel on one side it has an even number on the other
4/25/2019 Introduction 62
Abductive Reasoning
Reasoning from event to cause
e.g. Sam drives fast when drunk.
If I see Sam driving fast, assume drunk.
Unreliable
May lead to false explanations
4/25/2019 Introduction 63
Problem Solving
Reasoning: Inferring new information from what is known
Problem Solving: Finding solution to unfamiliar task using
knowledge
Several theories
Gestalt theory, Problem space theory
Analogy
Mapping: Using knowledge of similar problems/domains
Skill Acquisition
Driver, Player, Surgeon
4/25/2019 Introduction 64
Errors and Mental Models
Errors
Mistakes
Errors in choosing an objective or specifying a method of achieving it
Causes: Incorrect understanding
Humans create mental models to explain behaviour
If the model is wrong (different from actual system) errors can occur
Example: Lift button and light switch.
4/25/2019 Introduction 65
Emotion
Implications for Interface Design
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
4/25/2019 Introduction 66
Emotion
4/25/2019 Introduction 67
Individual Differences
Long term
Gender, physical and intellectual abilities
Short term
Effect of stress or fatigue
Changing
Age
4/25/2019 Introduction 68
Humans as information processors
Input from environment (I/O)
Store, manipulate and use information and reacting
Information received through senses
Stored in Memory (Short Term / Long Term)
Use memory in reasoning and problem solving
Recurrent familiar situations allow people to acquire skills in
particular domain
Can be error when changed.
4/25/2019 Introduction 69
References
Human Computer Interaction by Dix et al.
User Interface Design and
Implementation, Prof. Robert Miller - MIT
User Interface Hall of Fame/Shame
4/25/2019 Introduction 70
