1. CSCD 487/587 Human Computer Interface Winter 2013 Lecture 7 Human Visual Perception

2. 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

3. 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

4. Input via Senses Vision Hearing Touch Taste Smell

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

6. 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

7. 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...

8. Human Eye Lens Front of the eye Focuses light onto the retina at the back Optical element of refraction How is the image projected? Retina Retina has over 100 million photoreceptors Light sensitive cells

9. 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

10. Human Eye

11. 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.

12. 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

13. Human Eye

14. Human Vision

15. 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

17. Vision

19. 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

20. Human Brain in Seeing

21. 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

22. 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

23. Human Visual Capabilities

24. 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

25. 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

26. 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

27. 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.

28. Human Eye: Chromatic Aberration

29. 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.

30. 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 ~1 o of visual angle –1 cm (2/5”) object at 57 cm (20”), monitor distance, ~1 o of visual angle

31. 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

32. 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?

33. 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.

34. 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

35. Color Perception How do we perceive color? two main theories that are strongly supported They are: Trichromatic receptor theory known as Young-Helmholtz Theory and Opponent-Process theory First, Trichromatic Receptors...

36. Trichromacy Color Perception Cones (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

37. 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

38. 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

39. 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.

40. 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/wha thap/ubnrp/aesthetics/perception.html

41. 41

42. 42 Coding of Visual Information in the Retina Coding 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.

43. 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

44. 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

45. Color Blindness Examples Normal: –trichromatic No red, green, blue: –dichromatic

46. 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. 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

48. 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!

49. Perceived Color With color of x touching …

50. 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

51. Afterimage Example

52. Optical Illusions the Ponzo illusionthe Mueller-Lyer illusion

53. Optical Illusions

54. 54 More Illusions Can you guess the woman’s age? Keep looking.

55. Waves

56. Illusions due to shading

57. Rotating Snakes

58. 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

59. Size illusions due to perspective

60. Summary Human Visual knowledge is interesting Can use it to improve what we build for users Try to design them with human visual attributes in mind

61. References Dog Vision http://dog-vision.com/ Vision from Neuroscience http://neuroscience.uth.tmc.edu/s2/chapter14.html How sight works http://neuroscience.uth.tmc.edu/s2/chapter14.html Color perception http://www.macalester.edu/academics/psychology/whathap/ubnrp/aesthet ics/perception.html Purkinje Effect http://www.grand-illusions.com/articles/purkinje_effect/

62. The End Look at the project for this class