Visual Perception Jeff Avery
Source Chapter 4,5 Designing with Mind in Mind by Jeff Johnson
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.
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
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision
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
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, HFR video 120 FPS Mechanical example: Zoetrope https://www.youtube.com/watch?v=-3yart_h2ws Image: http://webvision.med.utah.edu
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision
Spatial Resolution: 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 ) apart at 20 feet (6m) High resolution only applies to about 1% of the photoreceptor in the eye eye focus means moving area of interest to the highres part of the retina other 99% of photoreceptors help determine where to focus Snellen Chart
Spatial Resolution: Implications Best pixel density for displays? Density is measured in PPI (pixels per inch), ppcm (pixels per cm) Monitors are typically positioned 0.4-0.7 m from a user s eyes. 2 lines become indistinguishable at 2 minutes of arc (or 1/30 degree) The threshold for distinguishing individual pixels (y) is 0.23-0.41mm Modern monitors are typically 62-109 PPI (25-43 ppm), which is a pixel size of 0.23-0.25mm.
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 326 DPI): At what distance are the pixels distinguishable? Is this a valid claim? size of each pixel distance where pixel is perceptible
Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision
XKCD Colour Survey Results at http://blog.xkcd.com/2010/05/03/color-survey-results/
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
Colour Models Additive RGB used on displays HSV/HSB used to describe colour YUV optimized for human perception capabilities Subtractive CMY/CMYK common in printing
Describing Colors
HSV/HSB Color model Based on visible spectrum Hue Determines colour (approximation of wavelength) Saturation How much hue: e.g. red vs. pink vs. white Value/Brightness how much light is reflected/ projected
Value/Brightness versus Saturation Reflecting less to more light Containing less to more hue Black to white Fixed saturation changing value/brightness Gray to Red/Green/Blue Fixed brightness (value) changing saturation
HSV/HSB for Colour Selection http://www.colorpicker.com
Perceiving Colour Two different light sensors in human eye Cones are used to perceive colour (focus) - 6-7 million cones Rods distinguish light from dark (peripheral vision) - 120 million rods The cones and rods are not evenly distributed. The spatial resolution of the human visual field drop significantly from centre to edges. Image: www.webexhibits.org
Our Brain is Filling in the Picture Blind Spot Image: National Eye Institute
Color sensitivity humans are trichromatic (cones detect 3 different colours) 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 of different colours. (Johnson, page 38)
Humans, Birds, and Bees Image: http://fieldguidetohummingbirds.wordpress.com http://www.visualnews.com/2013/04/hidden-patterns-how-a-bee-sees-the-world-of-flowers/
What colour do we see? It depends http://www.wired.com/2015/02/science-one-agrees-color-dress/ https://www.youtube.com/watch?v=bg41xfnibvk
http://www.ted.com/talks/ beau_lotto_optical_illusions_show_how_we_see
Contrast, not Brightness We are more sensitive to differences in colour and brightness, than absolute brightness levels. http://www.psy.ritsumei.ac.jp/~akitaoka/ecvp2005b.html
Colour presentation matters Our ability to discriminate colours depends on how colours are presented. It is 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)
Colour Perception: 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
Colour Perception: Colour Blindness original red-blind (protanopia) blue-blind (tritanopia) http://www.color-blindness.com/ coblis-color-blindness-simulator/
Display Monitors CRT LCD / LED Plasma OLED
Graphic Display Technology The common idea: Each pixel is actually three sub-pixels, a red, green and blue pixel Pack the sub-pixels very close together so they seem to be co-located Varying the amounts (intensity) of red, green, and blue sub-pixels varies excitation of cones Recall: What is the spatial acuity of vision? https://www.youtube.com/watch? v=r3unpcjdbcc
RGB colour 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
Subpixels https://www.youtube.com/watch?v=_o66qhq1ys4
Outline Temporal Resolution Spatial Resolution Color Perception Peripheral Vision
Fovea versus Periphery: Resolution The spatial resolution of the human visual field drop significantly from centre to edges. 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: guides fovea (provides low resolution cues to guide eye movement) detects motion helps us see better in the dark
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)
Implications (Johnson, page 58)
Making Messages Visible Put it where users are looking Place the error near what it refers to Use an error symbol Reserve red for errors (colour pops ) Pop-up message in error dialog box Use sound Wiggle (e.g., Apple icloud) Blink (e.g., Copy)
Summary Our perception of the 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.