Visual Perception. Jeff Avery

Transcription

1 Visual Perception Jeff Avery

2 Source Chapter 4,5 Designing with Mind in Mind by Jeff Johnson

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.

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

5 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision

6 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision

7 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

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

9 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision

10 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

11 Spatial Resolution: Implications Best pixel density for displays? Density is measured in PPI (pixels per inch), ppcm (pixels per cm) Monitors are typically positioned 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 mm Modern monitors are typically PPI (25-43 ppm), which is a pixel size of mm.

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 326 DPI): At what distance are the pixels distinguishable? Is this a valid claim? size of each pixel distance where pixel is perceptible

13 Outline Temporal Resolution Spatial Resolution Colour Perception Peripheral Vision

14 XKCD Colour Survey Results at

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

16 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

17 Describing Colors

18 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

19 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

20 HSV/HSB for Colour Selection

21 Perceiving Colour Two different light sensors in human eye Cones are used to perceive colour (focus) million cones Rods distinguish light from dark (peripheral vision) 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:

22 Our Brain is Filling in the Picture Blind Spot Image: National Eye Institute

23 Color sensitivity humans are trichromatic (cones detect 3 different colours) Image Credit: Fleet

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

25 Humans, Birds, and Bees Image:

26 What colour do we see? It depends

27 beau_lotto_optical_illusions_show_how_we_see

28 Contrast, not Brightness We are more sensitive to differences in colour and brightness, than absolute brightness levels.

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

30 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

31 Colour Perception: Colour Blindness original red-blind (protanopia) blue-blind (tritanopia) coblis-color-blindness-simulator/

32 Display Monitors CRT LCD / LED Plasma OLED

33 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? v=r3unpcjdbcc

34 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

35 Subpixels

36 Outline Temporal Resolution Spatial Resolution Color Perception Peripheral Vision

37 Fovea versus Periphery: Resolution The spatial resolution of the human visual field drop significantly from centre to edges. Image:

38 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

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

40 Implications (Johnson, page 58)

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

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