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

Visual Perception

human perception display devices

CS 349 - Visual Perception 1

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

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

Outline

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

CS 349 - Visual Perception 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 …

CS 349 - Visual Perception 6

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

brighter stimulus

~ 45 Hz

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

Outline

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

CS 349 - Visual Perception 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 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

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

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)

• ther 99% of photoreceptors help determine where to focus

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

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

Outline

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

CS 349 - Visual Perception 13

XKCD Colour Survey

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

CS 349 - Visual Perception 14

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?

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” …

Describing Colour

CS 349 - Visual Perception 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

CS 349 - Visual Perception 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

CS 349 - Visual Perception 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

CS 349 - Visual Perception 20

HSV/HSB For Colour Selection

CS 349 - Visual Perception 21

http://www.colorpicker.com/

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

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

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

Color Sensitivity

• humans are trichromatic (cones detect 3 different colours)

CS 349 - Visual Perception 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.

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

Humans, Birds, and Bees

CS 349 - Visual Perception 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

CS 349 - Visual Perception 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)

CS 349 - Visual Perception 29

protanopia deuteranopia tritanopia

Outline

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

CS 349 - Visual Perception 30

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

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

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

Implications

CS 349 - Visual Perception 34

(Johnson, page 58)

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

Outline

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

CS 349 - Visual Perception 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?

CS 349 - Visual Perception 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

CS 349 - Visual Perception 38

CRT Monitors

CS 349 - Visual Perception 39

LCD Displays

CS 349 - Visual Perception 41

Colour LCD

• each pixel is actually 3 sub pixels

CS 349 - Visual Perception 42

“LED” Displays

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

CS 349 - Visual Perception 43

OLED (Organic LED)

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

CS 349 - Visual Perception 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