CSCD 487/587Human Computer Interface

Winter 2013

Lecture 7Human Visual Perception

Overview Humans interact with their environments through

their senses Utilize input from vision, taste, smell, touch and

hearing Process the input into actions As designers of interactions with technology,

need to know how humans work

– Memory models, visual processing, movements and timing, sound processing

– Vision is likely the most important Look at vision and how it affects interface design

Information Input and Output

• Again, if we consider humans as information processors

• Input channels are the five senses– With some more important

than others– For hci, Vision is most

important

• Output channels are human effectors– Limbs, fingers, head, vocal

system

Input via Senses• Vision

• Hearing

• Touch

• Taste

• Smell

Output via Effectors (Responders)• Limbs

• Fingers

• Eyes

• Head

• Vocal system

Interaction with PC Using Input-Output Channels

• Most devices are GUI-based

• Vision: Information received by sight – Most important input device for

humans Hearing: Beeps received by ear Feeling: Keyboard and mouse with

fingers

Vision• Highly complex activity

• 2 stages of visual perception:– Physical reception of the stimulus

• Structure of the Eye and connection to brain

– Interpretation/processing of stimulus• Context of image is important for creating meaning

• Processing allows construction of images from incomplete information

• First the Human Eye ...

Human EyeLensFront of the eyeFocuses light onto the retina at the backOptical element of refractionHow is the image projected?

RetinaRetina has over 100 million photoreceptorsLight sensitive cells

Human Eye Lens

• Eye has compound Lens– Cornea (power) and Lens (adjust focal length)

The cornea contributes between 65-75 percent of the eye's total

focusing power. When light strikes the cornea, it bends -- or refracts -- the incoming

light onto the lens. The lens further refocuses that light onto the retina,– Flexibility of lens changes with age, approaching 0 at 60 years

Cornea

Lens

Human Eye

Brains Job in “Seeing” The fibers from lateral geniculate nucleus lead to

group of fibers called optic radiations. Optic radiations are cluster of neurons that end up or synapse in occipital lobe.

Visual cortex is another name given to this area. It is in occipital lobe that vision reaches consciousness.

Human Eye

Eye color is determined by the concentration and distribution of melanin within the iris. Pupil, which is the hole in the middle of the iris through which light passes, defines the level of illumination on the retina Pupil size is largely determined by the overall level of illumination

Human Eye

Human Vision

Human Eye: Retinal Receptors

• Two types of (photo) receptors on retina: rods and cones– Rods look like, well, rods …

• Rods– spread all over the retinal surface (75 - 150 million)– low resolution, no color vision, but very sensitive to low light

That's why at very low light levels, humans see things in B&W• Cones

– Dense array around central portion of retina - fovea centralis (6 - 7 million)– high-resolution, color vision, but require brighter light

Vision

Vision

Vision

Light coming through the pupil must pass, not only through the cornea, lens, and aqueous and vitreous humors, but also through the ganglion cells before reaching the photoreceptors

Human Brain in Seeing

How do we actually “See”?

The light can originate directly either from the object (e.g. the sun, bulb) or

Indirectly from an object chair, book, moon by

Reflected light from its surface Explains why we can’t see in the dark

Darkness is absent of light thus, there is no light reflected from the object to enter through our pupil to form an image on our retina in eye

How we actually “See”

When light image hits retina an image will form upside down on its membrane surface containing photoreceptors cells (light-sensitive cells)

Image will then form upside down because light rays cross while going through cornea

This will then stimulate photoreceptors cells to change light image into an electrochemical impulse (signals) which then travels along optic nerve (bundle of retinal fibers )to vision center (occipital cortex) of brain

Here brain interprets electrical signal and re-adjust image upward allowing us to “see” the object

Human Visual Capabilities

Human Visual Capabilities

Human eyes it turns out are only sensitive to the range that is between

780 nanometers and 380 nanometers in length

These are very tiny waves! This is called visible spectrum or visible light.

Wavelengths of visible color

Luminance, Brightness, Lightness• Luminance

– Amount of light (energy) coming from region of space, Which translates to light intensity factored by the sensitivity of normal human eye.

• E.g., foot-candles / square ft, candelas / square m• Physical

• Brightness– Perceived amount of light coming from a source

• Lightness– Perceived reflectance of a surface– E.g., white surface is light, black surface is dark

Luminance• Amount of light (energy) hitting the eye• To take into account human observer:

– Weighted by the sensitivity of the photoreceptors to each wavelength

• Spectral sensitivity function:

• Humans about 100 times less sensitive to light at 450nm than at 510nm

L=∫400

700

V λ Eλ δλ

Luminance http://colorusage.arc.nasa.gov/lum_and_chrom.php

Even though lights of various wavelengths are equal in power from a physical standpoint, the visual system is not equally sensitive to them

For moderate-to-high light energies ("photopic" lights), brightness is greatest at wavelengths in the vicinity of 555 nm and decreases toward both ends of the spectrum

Photopic luminance is defined as:

Function of spectral power, photopic spectral sensitivity, and wavelength.

where P is spectral power and V is the photopic spectral sensitivity of the standard observer.

Human Eye: Chromatic Aberration

Human Eye: Chromatic Aberration

• Different wavelengths of light focus at different distances within eye

– Short-wavelength blue light refracted more than long-wavelength red light

– Focusing on a red patch, an adjacent blue patch will be significantly out of focus

• Strong illusory depth effects

• Human eye has no correction for chromatic aberration!

– Inadvisable: fine blue patterns in visualizations!

– Visual effects in soap bubbles, crystal sculptures, etc.

Human Eye: Visual Angle

• Size and depth Visual angle indicates how much of view object occupies

(relates to size and distance from eye)

• Visual angle - angle subtended by object at eye of viewer– In degrees, minutes, seconds of arc– Thumbnail at arm’s length subtends ~1o of visual

angle– 1 cm (2/5”) object at 57 cm (20”), monitor distance, ~1o of

visual angle

Human Lens Accomodation

Range of accommodation in young adult human is about 8 cm to infinity

Ability to focus on close objects is highly dependent on age and begins to deteriorate almost from birth

Child can focus on objects at 5 cm from the eyes, whereas a 40-year old will struggle to focus at 20 cm.

This deterioration, known as presbyopia, is due to increasing rigidity of the lens, which becomes completely inflexible in old age

Changes in shape, and therefore power, of lens allow human eye to change focus for objects at different distances

Human Visual Accuity

One’s visual acuity is an indication of the clarity or clearness of one’s vision. It is a measurement of how well a person sees

The word “acuity” comes from the Latin acuitas, which means sharpness

What does it mean to have 20/20 vision?

Human Visual Accuity What does it mean to have 20/20 vision? Someone with 20/20 (visual acuity) is just able to

decipher a letter that bisects a visual angle of 5 minutes of arc (written 5') at the eye from distance of 20 feet

5' of arc is 5/60 of degree, since there are 60' of arc in 1 degree

For angles smaller than 1 degree we use arcminutes and arcseconds as a measurement. An arcminute is equal to one sixtieth (1/60) of one degree

What this means is that if you draw a line from the top of a 20/20 letter to eye and another line from bottom of letter to eye, the size of angle at intersection of these two lines at eye is 5' of arc.

Acuities: Point, Letter, Stereo, Vernier

• Point acuity– 1 minute of arc– Ability to resolve two distinct point

targets

• Letter acuity – 5 minute of arc– Ability to resolve letters– Snellen eye chart

• 20/20 means a 5-minute letter target can be seen 90% of time

• Stereo acuity– 10 seconds of arc– Ability to resolve objects in depth– Measured as difference between 2

angles (a and b) for a just-detectable difference

• Vernier acuity– 10 seconds of arc– Ability to see if two lines are collinear

Color Perception

How do we perceive color?two main theories that are strongly supportedThey are:

Trichromatic receptor theory known as Young-Helmholtz Theory and

Opponent-Process theory

First, Trichromatic Receptors ...

Trichromacy Color PerceptionCones (3 types) differentially sensitive to

wavelengths

“trichromacy”

Each type cone has different peak sensitivity: S: 450 nm “blue”

M: 540 nm “green”

L: 580 nm “red”

No accident 3 colors in monitor Relative sensitivity curves for the three types of cones, the Vos & Walraven curves on a normal vertical scale

Trichromacy Color Perception

• Cone receptors least sensitive to (least output for) to blue

Relative sensitivity curves for the three types of cones, log vertical scale, cone spectral curves from Vos & Walraven, 1974

Relative sensitivity curves for the three types of cones, the Vos & Walraven curves on a normal vertical scale

Purkinje Effect

In dim light, we we are most sensitive to wavelengths around 500 nm reflecting on the functions of the rods. In bright light, we are most sensitive to wavelengths around 550 nm reflecting on the functions of the cones. This is the basis for differences in our sensitivities to colors in bright or dim lighting. This is called the Purkinje Effect. Bluish-green object appear brighter in dim light than in bright light and greenish-yellow objects appear brighter in bright light than in dim light.

An illustration of the Purkinje Shift. In bright light the eye is more sensitive to longer (red) wavelengths; in dim lighting the eye’s sensitivity shifts slightly to the shorter (blue/violet) wavelengths

Purkinje Effect and Roses A red rose in daylight

makes the red petals appear brighter and the green leaves duller.

In twilight, the red petals appear duller and the green leaves appear brighter.

Opponent-Process theory Another theory that has been used to explain how we

perceive color is the opponent process theory, Proposed by Ewald Hering in 1920 He noticed certain pairs of colors one never sees

together in same place and at same time For example, we do not see reddish greens or

yellowish blues But we do see yellowish greens, bluish reds,

yellowish reds Hering also observed that there was a distinct pattern

in color of the afterimages we see

http://www.macalester.edu/academics/psychology/whathap/ubnrp/aesthetics/perception.html

41

42

Coding of Visual Information in the RetinaCoding of Visual Information in the Retina Retinal Ganglion Cells:

Opponent-Process Coding

Negative afterimage: The image seen after a portion of the retina is exposed to an

intense visual stimulus; consists of colors complimentary to those of the physical stimulus.

Complimentary colors: Colors that make white or gray when mixed together.

Opponent-Process theory

Like trichromatic receptor theory, Opponent Process theory also has three types of receptors. However, each type is responsible for a pair of opponent color processes:

blue-yellow, a green-red, and a white-black,

With one color on one end and the other on the other end.

However, it might be that both theories work together

Truth is, we don't completely know how we perceive color

Color Blindness

• ~9% male, and ~1% females have some form of color vision deficiency!

• Most common:– Lack of long wave length

sensitive receptors (red, protanopia)

• See figure at right bottom

– Lack of mid wave length receptors (green, deuteranopia)

• Results in inability to distinguish red and green

• Trichromatic vs. dichromatic vision

Color Blindness Examples

• Normal:– trichromatic

• No red, green, blue:– dichromatic

Using Physiology for Design

• Fovea has few blue (S - short wavelength) cones– Can’t resolve small blue features,unless they have

high contrast with background

• Lens and aqueous humor turn yellow with age– Blue wavelengths are filtered out

• Lens weakens with age

Implications?

Don’t rely on blue for text or small objects!

Older users need brighter colors

47

Using Physiology for Design Most sensitive to the center of the spectrum

Blues & reds must be brighter than greens & yellows

Brightness determined mainly by R+G Shapes detected by finding edges

Combine brightness & color differences for sharpness

Implications? Hard to deal w/ blue edges

& blue shapes

Perceived Color

• Color perceived relative to context– Are the “X”s in the figure below the same color?– Easy implications for use in maps

• Contrast illusion – An illusion is an extreme case

• Somewhat “surprising” because it leads to error– Appears to be different color X!

Perceived Color

• With color of x touching …

Afterimage

• Occurs due to bleaching of photopigments– (demo next slide)

• Implications for misperceiving (especially contiguous colors – and black and white)– “I thought I saw …”

• To illustrate:– Stare at + sign on left

• May see colors around circle

– Move gaze to right– See yellow and desaturated

red

Afterimage Example

Optical Illusions

the Ponzo illusion the Mueller-Lyer illusion

Optical Illusions

54

More IllusionsCan you guess the woman’s age? Keep looking.

Waves

Illusions due to shading

Rotating Snakes

Explanation of motion illusion

“Rotating Snake” by Akiyoshi Kitaoka, http://www.ritsumei.ac.jp/~akitaoka/rotsnake.gif Rotation perceived during eye movements. On steady fixation the effect vanishes. Asymmetric luminance steps cause illusory

movement Direction of perceived motion from light to

medium

Size illusions due to perspective

Summary

Human Visual knowledge is interestingCan use it to improve what we build

for usersTry to design them with human visual

attributes in mind

References

Dog Visionhttp://dog-vision.com/

Vision from Neurosciencehttp://neuroscience.uth.tmc.edu/s2/chapter14.html

How sight workshttp://neuroscience.uth.tmc.edu/s2/chapter14.html

Color perceptionhttp://www.macalester.edu/academics/psychology/whathap/ubnrp/aesthetics/

perception.html

Purkinje Effecthttp://www.grand-illusions.com/articles/purkinje_effect/

The End

Look at the project for this class