Visual Perception human perception display devices 1 CS 349 - - - PowerPoint PPT Presentation

visual perception
SMART_READER_LITE
LIVE PREVIEW

Visual Perception human perception display devices 1 CS 349 - - - PowerPoint PPT Presentation

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


slide-1
SLIDE 1

Visual Perception

human perception display devices

CS 349 - Visual Perception 1

slide-2
SLIDE 2

Reference

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

CS 349 - Visual Perception 2

slide-3
SLIDE 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.

CS 349 - Visual Perception 3

slide-4
SLIDE 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

CS 349 - Visual Perception 4

present perceive

slide-5
SLIDE 5

Outline

  • Temporal Resolution
  • Spatial Resolution
  • Colour Perception
  • Peripheral Vision
  • Hardware

CS 349 - Visual Perception 5

slide-6
SLIDE 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 …

CS 349 - Visual Perception 6

Image: http://webvision.med.utah.edu

brighter stimulus

~ 45 Hz

slide-7
SLIDE 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

CS 349 - Visual Perception 7

Image: http://webvision.med.utah.edu

slide-8
SLIDE 8

Outline

  • Temporal Resolution
  • Spatial Resolution
  • Colour Perception
  • Peripheral Vision
  • Hardware

CS 349 - Visual Perception 8

slide-9
SLIDE 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 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.

CS 349 - Visual Perception 9

https://nei.nih.gov/sites/default/files/nehep- images/eyediagram.gif

slide-10
SLIDE 10

Spatial Resolution: Visual Acuity Visual acuity: A measure of the spatial resolution

  • f the visual processing system
  • 20/20 (6/6) vision: separate lines 1 arc minute

(1/60°) at 20 feet (6 meters)

CS 349 - Visual Perception 10

Snellen Chart

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)

  • ther 99% of photoreceptors help determine where to focus
slide-11
SLIDE 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 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

slide-12
SLIDE 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

CS 349 - Visual Perception 12

slide-13
SLIDE 13

Outline

  • Temporal Resolution
  • Spatial Resolution
  • Colour Perception
  • Peripheral Vision
  • Hardware

CS 349 - Visual Perception 13

slide-14
SLIDE 14

XKCD Colour Survey

http://blog.xkcd.com/2010/05/03/color-survey-results/

CS 349 - Visual Perception 14

slide-15
SLIDE 15

What color is the dress?

  • How you perceive this image depends on what assumptions

your brain makes.

CS 349 - Visual Perception 15

http://www.wired.com/2015/02/science-one-agrees-color-dress/

Blue & black? White & gold?

slide-16
SLIDE 16

Colour & the Visible Spectrum

  • Wavelength determines colour (in nanometres, nm)

– Ultraviolet (UV) – Infrared (IR) (near IR used for input ~850nm)

CS 349 - Visual Perception 16

e.g. orange wavelength is around 600 – 620 nm, but “orange light” can be brighter or darker, and can have

  • ther wavelengths added to make it “less orange” …
slide-17
SLIDE 17

Describing Colour

CS 349 - Visual Perception 17

slide-18
SLIDE 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

CS 349 - Visual Perception 18

slide-19
SLIDE 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

CS 349 - Visual Perception 19

slide-20
SLIDE 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

CS 349 - Visual Perception 20

slide-21
SLIDE 21

HSV/HSB For Colour Selection

CS 349 - Visual Perception 21

http://www.colorpicker.com/

slide-22
SLIDE 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.

CS 349 - Visual Perception 22

Image: www.webexhibits.org

slide-23
SLIDE 23

Our Brain is Filling in the Picture

CS 349 - Visual Perception 23

Image: National Eye Institute

Blind spot

https://nei.nih.gov/sites/default/files/nehep- images/eyediagram.gif

slide-24
SLIDE 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

CS 349 - Visual Perception 24

slide-25
SLIDE 25

Color Sensitivity

  • humans are trichromatic (cones detect 3 different colours)

CS 349 - Visual Perception 25 Image Credit: Fleet

slide-26
SLIDE 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.

CS 349 - Visual Perception 26 (Johnson, page 38)

slide-27
SLIDE 27

Humans, Birds, and Bees

CS 349 - Visual Perception 27

Image: http://fieldguidetohummingbirds.wordpress.com

slide-28
SLIDE 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

CS 349 - Visual Perception 28

(Johnson, page 41)

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

CS 349 - Visual Perception 29

protanopia deuteranopia tritanopia

slide-30
SLIDE 30

Outline

  • Temporal Resolution
  • Spatial Resolution
  • Colour Perception
  • Peripheral Vision
  • Hardware

CS 349 - Visual Perception 30

slide-31
SLIDE 31

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

CS 349 - Visual Perception 31

Image: www.webexhibits.org

slide-32
SLIDE 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

CS 349 - Visual Perception 32

slide-33
SLIDE 33

Implications

The implication for user interfaces is that sometimes we do not notice important information (e.g. error messages) in the periphery.

CS 349 - Visual Perception 33

Johnson, page 56

slide-34
SLIDE 34

Implications

CS 349 - Visual Perception 34

(Johnson, page 58)

slide-35
SLIDE 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

CS 349 - Visual Perception 35

slide-36
SLIDE 36

Outline

  • Temporal Resolution
  • Spatial Resolution
  • Colour Perception
  • Peripheral Vision
  • Hardware

CS 349 - Visual Perception 36

slide-37
SLIDE 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?

CS 349 - Visual Perception 37

slide-38
SLIDE 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

CS 349 - Visual Perception 38

slide-39
SLIDE 39

CRT Monitors

CS 349 - Visual Perception 39

slide-40
SLIDE 40

LCD Displays

CS 349 - Visual Perception 41

slide-41
SLIDE 41

Colour LCD

  • each pixel is actually 3 sub pixels

CS 349 - Visual Perception 42

slide-42
SLIDE 42

“LED” Displays

  • Just LCD display with LED backlight
  • more efficient, more even lighting

CS 349 - Visual Perception 43

slide-43
SLIDE 43

OLED (Organic LED)

  • no backlight, bendable, more expensive to produce (currently)

CS 349 - Visual Perception 44

slide-44
SLIDE 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.

CS 349 - Visual Perception 47