Visual Perception human perception display devices 1
Reference Chapters 4, 5 Designing with the Mind in Mind by Jeff Johnson 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. 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 4
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 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 6 Image: http://webvision.med.utah.edu
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 7 Image: http://webvision.med.utah.edu
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 8
The Human Eye Light is focused through the 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 imagesensitive 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. 9 https://nei.nih.gov/sites/default/files/nehepimages/eyediagram.gif
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 10 Snellen Chart
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! 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 12
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 13
XKCD Colour Survey 14 http://blog.xkcd.com/2010/05/03/color-survey-results/
What color is the dress? How you perceive this image depends on what assumptions your brain makes. White & gold? Blue & black? http://www.wired.com/2015/02/science-one-agrees-color-dress/ 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 16
Describing Colour 17
Additive / Subtractive Colour Models Additive Coloured light is added to produce white Displays produce light RGB used for displays HSV/HSB describe colour YUV optimized for human perception capabilities Subtractive Coloured light is absorbed to produce black Printed pages reflect/absorb light CMY/CMYK common in printing 18
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 19
Value/Brightness vs. Saturation Value/Brightness Black to white Fixed saturation; Less to more brightness Vertical stripe in HSB Saturation Gray to Red/Green/Blue Fixed brightness (value); Less to more saturation Horizontal stripe in HSB 20
HSV/HSB For Colour Selection http://www.colorpicker.com/ 21
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. 22 Image: www.webexhibits.org
Our Brain is Filling in the Picture Blind spot 23 Image: National Eye Institute https://nei.nih.gov/sites/default/files/nehepimages/eyediagram.gif
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 24
Color Sensitivity humans are trichromatic (cones detect 3 different colours) 25 Image Credit: Fleet
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) 26
Humans, Birds, and Bees 27 Image: http://fieldguidetohummingbirds.wordpress.com
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 28 (Johnson, page 41)
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 29
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 30
Fovea vs. Periphery: Resolution The spatial resolution of the human visual field drops significantly from centre to edges 31 Image: www.webexhibits.org
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 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 33
Implications (Johnson, page 58) 34
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 35
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 36
Graphic Display Technology Various display hardware Colours all based on RGB How colours/pixels rendered differs Common idea Create a display using a series of pixels Represent each pixel using three sub-pixels: a red, green and blue sub-pixel Pack the subpixels very close together so they seem to be colocated Recall: What is the spatial acuity of vision? 37
RGB colour Vary amounts (intensity) of red, green, and blue sub-pixels Varies excitation of cones 16 versus 24 versus 32 bit colour 16 = 5 red, 5 blue, 6 green 2^5 = 32 values for red and blue, 64 for green 65,536 colours 24 = 8 bits for each colour 16,777,216 distinct colours 32 = 24 bit colour + 8 bit alpha channel 16,777,216 distinct colours + transparency 38
CRT Monitors 39
LCD Displays 41
Colour LCD each pixel is actually 3 sub pixels 42
LED Displays Just LCD display with LED backlight more efficient, more even lighting 43
OLED (Organic LED) no backlight, bendable, more expensive to produce (currently) 44
Summary Our perception of reality and reality itself are not necessarily the same. When constructing user interfaces (e.g. choosing colours or where to place things), we need to be keenly aware of the relationship between external stimuli and how people actually perceive that stimuli. 47