Visual Perception. human perception display devices. CS Visual Perception

Transcription

1 Visual Perception human perception display devices 1

2 Reference Chapters 4, 5 Designing with the Mind in Mind by Jeff Johnson 2

3 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

4 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

5 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 5

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

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

8 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 8

9 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

10 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

11 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 mm Modern monitors are typically PPI, which is a pixel size of mm this is sufficient! 11

12 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

13 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 13

14 XKCD Colour Survey 14

15 What color is the dress? How you perceive this image depends on what assumptions your brain makes. White & gold? Blue & black? 15

16 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 nm, but orange light can be brighter or darker, and can have other wavelengths added to make it less orange 16

17 Describing Colour 17

18 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

19 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

20 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

21 HSV/HSB For Colour Selection 21

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

23 Our Brain is Filling in the Picture Blind spot 23 Image: National Eye Institute

24 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

25 Color Sensitivity humans are trichromatic (cones detect 3 different colours) 25 Image Credit: Fleet

26 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

27 Humans, Birds, and Bees 27 Image:

28 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)

29 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

30 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 30

31 Fovea vs. Periphery: Resolution The spatial resolution of the human visual field drops significantly from centre to edges 31 Image:

32 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

33 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

34 Implications (Johnson, page 58) 34

35 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

36 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision Hardware 36

37 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

38 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

39 CRT Monitors 39

40 LCD Displays 41

41 Colour LCD each pixel is actually 3 sub pixels 42

42 LED Displays Just LCD display with LED backlight more efficient, more even lighting 43

43 OLED (Organic LED) no backlight, bendable, more expensive to produce (currently) 44

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