Visual Perception human perception display devices 1 CS 349 - Visual Perception
Reference Chapters 4, 5 “Designing with the Mind in Mind by Jeff Johnson CS 349 - Visual Perception 2
Visual Perception Most user interfaces are visual in nature. So, it is important that we understand the inherent strengths and weaknesses of our visual system, the factors that affect the way we perceive objects and their properties (e.g., colour, motion), and the implications these have on user interface design. CS 349 - Visual Perception 3
Human Elements of Graphical Output • Psychophysics: “out there” vs. “in here” – relationship between external stimuli and internal sensations – has informed the development of models and methods of lossy compression perceive present CS 349 - Visual Perception 4
Outline • Temporal Resolution • Spatial Resolution • Colour Perception • Peripheral Vision • Hardware CS 349 - Visual Perception 5
Temporal Resolution: Flicker • Critical Flicker Frequency (Flicker Fusion Threshold) – when perception of intermittent light source changes from flickering to continuous light – dependent on brightness of stimulus, wavelength, others … ~ 45 Hz brighter stimulus Image: http://webvision.med.utah.edu CS 349 - Visual Perception 6
Temporal Resolution: Flicker into Motion • CFF can also create perception of continuous motion – motion blur, frame interlacing helps – 24 FPS film, 60 FPS NTSC video (smooth) compared to HFR video 120 FPS (soap-opera effect) – Mechanical example: Zoetrope Image: http://webvision.med.utah.edu CS 349 - Visual Perception 7
Outline • Temporal Resolution • Spatial Resolution • Colour Perception • Peripheral Vision • Hardware CS 349 - Visual Perception 8
• Light is focused through the The Human Eye cornea and pupil (like light through a camera lens). • The iris is like a shutter, controlling the amount of light that can enter. • The retina is the image- sensitive part of the eye, that decodes the image and transmits data to the brain (via the optic nerve). • The macula is the center part of the retina, responsible for central vision and color perception. https://nei.nih.gov/sites/default/files/nehep- images/eyediagram.gif CS 349 - Visual Perception 9
Spatial Resolution: Visual Acuity Visual acuity: A measure of the spatial resolution of the visual processing system • 20/20 (6/6) vision: separate lines 1 arc minute (1/60°) at 20 feet (6 meters) 1º High resolution only applies to about 1% of the photoreceptors in the eye • eye “focus” means moving area of interest to the high -res part of the retina (macula) • other 99% of photoreceptors help determine where to focus Snellen Chart CS 349 - Visual Perception 10
Spatial Resolution: Implications Best pixel density for displays? • Density measured in PPI (pixels per inch), ppcm (pixels per cm) • Monitors are typically .4m to .7m from eyes • 2 lines become indistinguishable at 2 minutes of arc (1/30°) • Threshold for distinguishing individual pixels (y) is 0.23 – 0.41mm • Modern monitors are typically 62-109PPI, which is a pixel size of 0.23 – 0.25mm – this is sufficient! CS 349 - Visual Perception 11
Apple’s “Retina Display” Apple marketing term for a display where you “cannot see the pixels”. Given a 2”x3” display at 640x960 resolution (about 326DPI): • At what distance are the pixels distinguishable? • Is Apple’s claim valid? size of each pixel distance where a pixel is perceptible CS 349 - Visual Perception 12
Outline • Temporal Resolution • Spatial Resolution • Colour Perception • Peripheral Vision • Hardware CS 349 - Visual Perception 13
XKCD Colour Survey http://blog.xkcd.com/2010/05/03/color-survey-results/ CS 349 - Visual Perception 14
What color is the dress? • How you perceive this image depends on what assumptions your brain makes. White & Blue & gold? black? http://www.wired.com/2015/02/science-one-agrees-color-dress/ CS 349 - Visual Perception 15
Colour & the Visible Spectrum • Wavelength determines colour (in nanometres, nm) – Ultraviolet (UV) – Infrared (IR) (near IR used for input ~850nm) e.g. orange wavelength is around 600 – 620 nm, but “orange light” can be brighter or darker, and can have other wavelengths added to make it “less orange” … CS 349 - Visual Perception 16
Describing Colour 17 CS 349 - Visual Perception
Additive / Subtractive Colour Models Additive Subtractive • Coloured light is added to • Coloured light is absorbed produce white to produce black • Displays produce light • Printed pages reflect/absorb light • RGB – used for displays • CMY/CMYK – common in • HSV/HSB – describe printing colour • YUV – optimized for human perception capabilities 18 CS 349 - Visual Perception
HSV/HSB Color Model Based on visible spectrum • Hue – Determines color (approximation of wavelength) • Saturation – How much hue: e.g. red vs. pink vs. white • Value/Brightness – how much light is reflected/projected CS 349 - Visual Perception 19
Value/Brightness vs. Saturation Value/Brightness Saturation • Black to white • Gray to Red/Green/Blue • Fixed saturation; • Fixed brightness (value); • Less to more brightness • Less to more saturation • Vertical stripe in HSB • Horizontal stripe in HSB 20 CS 349 - Visual Perception
HSV/HSB For Colour Selection http://www.colorpicker.com/ 21 CS 349 - Visual Perception
Perceiving Colour Two different light sensors in human eye • Cones are used to perceive colour (focus) – 6-7 million • Rods distinguish light from dark (peripheral vision) – 120 million Rods and cones are not evenly distributed. The spatial resolution of the human visual field drops significantly from centre to edges. CS 349 - Visual Perception 22 Image: www.webexhibits.org
Our Brain is Filling in the Picture Blind spot Image: National Eye Institute https://nei.nih.gov/sites/default/files/nehep- images/eyediagram.gif 23 CS 349 - Visual Perception
Perceiving colour via cones • Three primary types of cones – Blue, green, and “red” (yellow) – Variations in stimulation lead to sensing of different colors – Few blue cones (but rods sense blue too) – Harder to notice blues than reds and no blues in center CS 349 - Visual Perception 24
Color Sensitivity • humans are trichromatic (cones detect 3 different colours) Image Credit: Fleet CS 349 - Visual Perception 25
Blue, Green, and Red Receptors There are three primary types of cones – Blue, green, and “red” (yellow). • Each type of cone is sensitive to a range of light frequencies. • Variations in stimulation lead to sensing different colours. (Johnson, page 38) CS 349 - Visual Perception 26
Humans, Birds, and Bees Image: http://fieldguidetohummingbirds.wordpress.com 27 CS 349 - Visual Perception
Colour Presentation Matters Our ability to discriminate colours depends on how colours are presented. It’s harder to tell two colours apart when • the colours are pale • the object is small or thin • the colour patches are far apart (Johnson, page 41) CS 349 - Visual Perception 28
Colour Blindness • Monochromacity: 2 or 3 types of cones missing • Dichromacy: 1 type of cone missing – Protanopia: missing red cones (~1% of males) – Deuteranopia: missing green cones (~1% of males) – Tritanopia: missing blue cones, (and blue sensitive rods) (rare) protanopia deuteranopia tritanopia CS 349 - Visual Perception 29
Outline • Temporal Resolution • Spatial Resolution • Colour Perception • Peripheral Vision • Hardware CS 349 - Visual Perception 30
Fovea vs. Periphery: Resolution The spatial resolution of the human visual field drops significantly from centre to edges Image: www.webexhibits.org CS 349 - Visual Perception 31
Periphery Vision In the periphery of our visual field, we are essentially blind. So what is peripheral vision good for? Peripheral vision has three functions: 1. guides fovea (provides low resolution cues to guide eye movement) 2. detects motion 3. helps us see better in the dark CS 349 - Visual Perception 32
Implications The implication for user interfaces is that sometimes we do not notice important information (e.g. error messages) in the periphery. Johnson, page 56 CS 349 - Visual Perception 33
Implications (Johnson, page 58) 34 CS 349 - Visual Perception
Making Messages Visible • Put it where users are looking • Place the error message near what it refers to • Use an error symbol • Reserve red for errors (colour “pops”) – But be aware of color blindness and implications • “Heavy Artillery” – Pop-up message in an error dialog box – Use sound – Use motion (e.g. wiggle or blink) – Use these techniques sparingly and briefly CS 349 - Visual Perception 35
Outline • Temporal Resolution • Spatial Resolution • Colour Perception • Peripheral Vision • Hardware CS 349 - Visual Perception 36
Recommend
More recommend
