1. Human-Computer Interaction
Lecture 8 Human Input-Output Channels - Part II 1

2. In the Last Lecture Input-Output Channels Input via Senses
Output via Effectors
Vision
Human Eye
Visual Perception
Capabilities and Limitations 2

3. Input via Senses
Vision
Hearing
Touch
Taste
Smell 1

4. Output via Effectors (Responders)
Limbs
Fingers
Eyes
Head
Vocal system 1

5. Human Eye

6. Visual Perception
Size
Depth
Brightness
Color

7. Factors Affecting Visual Perception
Perception of depth
Cues to determine relative positions of objects
Objects overlapping
Size and height of object
Provides cue for distance
Familiarity
Certain size helps to judge the distance accordingly

8. Perceiving Brightness
subjective reaction to levels of light
affected by luminance of object
Luminance
Depends on
Amount of light falling on object
Reflective properties of object
Measured by photometer
Contrast
Function of the luminance of an object and the luminance of its background

9. Perceiving Color 3 components 7 million colors can be perceived Hue
Determined by the spectral wavelength
Blue (short)
Green (medium)
Red (long)
150 hues determined by eye
Intensity
Brightness of color
Saturation
Amount of whiteness in the color
7 million colors can be perceived

10. Over Compensation Illusions
Optical illusions sometimes occur due to over compensation
Our perception of size is not reliable
concave
convex
the Muller Lyer illusion
the Ponzo illusion

11. Proof-Reading Illusion

12. In Today’s Lecture Vision Hearing Touch (Haptic Perception) Movement
Color Theory
3D Vision
Reading
Hearing
Human Ear
Processing Sound
Touch (Haptic Perception)
Skin Physiology
Types of haptic senses
Movement
Movement Perception 1

13. Why Study Color?
Color can be a powerful tool to improve user interfaces, but its inappropriate use can severely reduce the performance of the systems we build

14. Color
Sensory response to electromagnetic radiation in the spectrum between wavelengths micrometers

15. Color Theory Primary Color Secondary Color Tertiary Color
Color Harmony
Color Context 2

16. Color Theory Primary Color Secondary Color Tertiary Color
Red,yellow and blue
3 pigment colors that can not be mixed
Can not be formed by any combination of other color
Secondary Color
formed by mixing the primary colors
Tertiary Color
formed by mixing one primary and one secondary color
PRIMARY COLORS Red, yellow and blue
SECONDARY COLORS Green, orange and purple 1
TERTIARY COLORS Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green

17. Color Harmony
pleasing arrangement of parts, whether it be music, poetry, color, or even an ice cream sundae
When something is not harmonious, it's either boring or chaotic
extreme unity leads to under-stimulation
extreme complexity leads to over-stimulation.
Harmony is a dynamic equilibrium.

18. Color Harmony Some Formulas for Color Harmony analogous colors
any three colors which are side by side on a 12 part color wheel
yellow-green, yellow, and yellow-orange
Usually one of the three colors predominates.
A color scheme based on analogous colors

19. Color Harmony Some Formulas for Color Harmony complementary colors
any two colors which are directly opposite each other
red and green and red-purple and yellow-green
A color scheme based on complementary colors

20. Color Harmony
Nature provides a perfect departure point for color harmony
red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony
A color scheme based on nature

21. Color Context
How color behaves in relation to other colors and shapes is a complex area of color theory.
Compare the contrast effects of different color backgrounds for the same red square

22. Color Context Different readings of the same color
Which is the lighter vertical bar?
Figure b
Figure a

23. Color Perception via Cones
Photopigments” used to sense color
3 types
blue, green, “red” (really yellow)
each sensitive to different band of spectrum
ratio of neural activity of the 3  color
other colors are perceived by combining stimulation

24. Color Perception via Cones

25. Color Sensitivity
from:

26. Color Sensitivity

27. Distribution of Photopigments
Photopigments” used to sense color
Not distributed evenly
mainly reds (64%) & very few blues (4%) ?
insensitivity to short wavelengths
cyan to deep-blue
Center of retina (high acuity) has no blue cones ?
disappearance of small blue objects you fixate on

28. Color Sensitivity & Image Detection
Most sensitive to the center of the spectrum
blues & reds must be brighter than greens & yellows
Brightness determined mainly by R+G
combine brightness & color
differences for sharpness
Shapes detected by finding edges
Implications?
hard to deal w/ blue edges
& blue shapes

29. Color Sensitivity & Image Detection
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
Implications?
don’t rely on blue for text or small objects!
older users need brighter colors

30. Focus
Different wavelengths of light focused at different distances behind eye’s lens
need for constant refocusing  ?
causes fatigue
be careful about color combinations

31. Focus
Different wavelengths of light focused at different distances behind eye’s lens
need for constant refocusing  ?
causes fatigue
be 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)

32. Color Guidelines Opponent colors go well together
(red & green) or (yellow & blue)
Hering's opponent colors diagram 
Pick non-adjacent colors on the hue circle

33. Color Guidelines Size of detectable changes in color varies
hard to detect changes in reds, purples, & greens
easier to detect changes in yellows & blue-greens
Older users need higher brightness levels to distinguish colors
Hard to focus on edges created by color alone ?
use both brightness & color differences
Avoid red & green in the periphery - why?
lack of RG cones there -- yellows & blues work in periphery

34. Color Guidelines Avoid pure blue for text, lines, & small shapes
blue makes a fine background color
avoid adjacent colors that differ only in blue
Avoid single-color distinctions
mixtures of colors should differ in 2 or 3 colors
e.g., 2 colors shouldn’t differ only by amount of red
helps color-deficient observers

35. Color Guidelines Accurate color discrimination
-+60 degree of straight head position.
Not uniform across the whole field of vision
Limit of color awareness
-+90 degree of straight head position
Cultural issue
Society classifies color differently

36. 3D vision
give an immediate perception of depth on the basis of the difference in points of view of the two eyes.
Also known as binocular vision and stereopsis
most reliable clue for depth
This is possible only when the eyes of a creature look in the same direction, and have overlapping fields.
Stereopsis gives a reliable distance clue as far away as 450 meters 1

37. 2D to 3D Strong Clues Weaker Clues Strongest Clue
apparent sizes of objects of known size
overlapping and parallax
shadows and perspective
Weaker Clues
atmospheric perspective (haze and scattering)
speed of movement
observed detail
Strongest Clue
stereopsis 1

38. 2D to 3D free fusion stereo pair Keep two pictures side by side
each eye sees its picture straight ahead
a third, fused, image appears
appears strikingly solid
Brain regards this real one
stereo pair
The two images are called a stereo pair

39. Reading
Stages
visual pattern perceived
decoded using internal representation of language
interpreted using knowledge of syntax, semantics, pragmatics
Reading involves saccades and fixations (perception here: 94%)
Perception occurs during fixations
Regressions: eye move backwards and forwards
Word shape is important to recognition

40. Reading Negative contrast improves reading from computer screen
Average Reading Speed: 250 words per minute
Word shape important: Bat, BAT
Reading speed is a measure of legibility
Font sizes ….
Reading from computer screen slower due to …
Legibility can be increased using negative contrast …

41. Human Auditory Perception
Second to sight
We under estimate amount of info received via ears
Lets hear a few sounds
Sound 1 of a Vehicle coming Towards you
Sound 2 of a Vehicle going away from you

42. Hearing
Provides information about environment: distances, directions, objects etc.
Vibration in air – Sound Waves
Human Ear
Outer
Middle
Inner Ear

43. Human Ear Outer Ear Outer ears purpose Middle Ear Inner Ear
Visible part divided into two
Pinna
Auditory Cannal
Outer ears purpose
Protect middle ear from damage
Middle ear temperature maintenance
Pinna and Cannal amplify some sounds
Middle Ear
Tympanic membrane or ear drum connection to outer ear
Cochlea to inner ear
Ossicles (smallest bones in the body)
Inner Ear
Filled with Cochlea fluid
Within are Cilia which bend with vibration and cause impulses to brain.

44. Processing Sound Sound characteristics Pitch Loudness Timbre
frequency of sound
Loudness
proportional to amplitude of sound
Timbre
relates to type of sound

45. Processing Sound Audible range 20 Hz to 15 KHz
Distinguish between changes less than 1.5 Hz but less accurate at higher frequencies
Different frequencies trigger neuron activity causing nerve impulses
Auditory system filters sounds
Cocktail Party Effect: can attend to sounds over background noise
Sound rarely used in interface design

46. Touch

47. Touch (Haptic Perception)
Close your eyes and pick a cup of tea
What can you tell about the cup?
Can you identify its material ?
Is it hot of cold
What is the texture
Can you find the handle?
Speed and accuracy reduced without touch

48. Touch (Haptic Perception)
What has this got to do with Computers?
Imagine a key board where you cannot feel the buttons pressed?
Have you ever noticed the “marking” on “F” and “J” keys ?
How your Mobile phone has an indicator to digit 5 ?
Virtual Reality has no touch
Provides important feedback about environment.
May be key sense for someone who is visually impaired - braille

49. How haptic interaction works?
From MIT “TouchLab”

50. Types of human haptic sensing
Tactile
sense stimulus though the skin
heat, pain, pressure, texture (cutaneous)
Kinesthesia
sense of limb motions
affects comfort and performance
Due to receptors in joints:
Rapidly adapting: limb in particular direction
Slowly adapting: limb movement and static
Positional receptors: limb static
Proprioception
awareness of limb locations
movements and shapes, temperature, and pain

51. Types of human haptic sensing
active & passive touch
“exploratory procedures”: directed manipulations to determine specific properties of touched objects

52. Skin Physiology Some areas more sensitive than others e.g. fingers.
2-point threshold test
2 pencils: place 12mm apart on thumb and move
>distance => > sensitivity
Fingers have highest acuity (10x forearms)
Spatial resolution of about 2.5 mm
Multiple forces closer are sensed as one
Stimulus received via sensory receptors in the skin
thermoreceptors – heat and cold
nociceptors – pain
Mechanoreceptors: pressure (of concern in HCI)
Rapidly adapting (immediate and increased pressure)
Slowly adapting (continuously applied pressure)

53. Movement (Motor Control)
Time taken to respond to stimulus: reaction time + movement time
Movement time dependent on age, fitness etc.
Reaction time - dependent on stimulus type:
visual ~ 200ms
auditory ~ 150 ms
pain ~ 700ms
Increasing reaction time decreases accuracy in the unskilled operator but not in the skilled operator.

54. Movement Speed and accuracy Relationship between the two?
Depends on skill: typists

55. Movement
Fitts' Law describes the time taken to hit a screen target (function of size of target and distance that has to be moved):
Mt = a + b log2(D/S + 1)
where: a and b are empirically determined constants
Mt is movement time
D is Distance
S is Size of target
targets as large as possible distances as small as possible

56. Movement Perception Three modes of viewing a moving object
hold our heads and eyes still as a moving object passes in front of us
Stare at bird
Perceive Car moves from right to left.

57. Movement Perception
hold our heads still and let our eyes follow the object
image remains on the fovea during the motion of the car and your eyes.

58. Movement Perception
hold our eyes steady and move only our head to follow an object
This causes the image to project to exactly the same retinal location at each instant (assuming you move your head at precisely the correct angular velocity) as the car moves from right to left.

59. Movement Perception Motion After Effect Explanation Phi phenomenon
Known as adaptation effect
when the stimulus is not moving
a waterfall example
Explanation
motion detection system
motion detectors
undergo spontaneous activity
Phi phenomenon
motion being seen, when there is no physical motion
two illuminated spots of light about 6 to 8 inches apart
Films and Cartoons
Still frames are rapidly projected.

60. Movement Perception induced motion Auto kinetic movement
Sit in a stationary train
When any other train passes next to you
You feel moving
Auto kinetic movement
view a small very dim light in an otherwise completely dark room
After sometime in the dark, the small light will appear to move somewhat randomly
Cortical neuron
specialized for movement
respond best when the motion is in a specific direction

61. Smell/olfaction Nose and Computing ???
Experiments are being done to transmit smells across the net
Biometric devices to identify one person from another

62. Next Lecture
Memory Structures