Visual Perception - University of Waterloocs349/s17/slides/...Visual Perception human perception...

Visual Perception

human perception

display devices

CS 349 - Visual Perception1

Refe

ren

ce

Chapters 4, 5

“Designing with the Mind in Mind

by Jeff Johnson


Vis

ual P

erc

ep

tio

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


Hu

ma

n E

lem

en

ts o

f G

rap

hic

al O

utp

ut

• Psychophysics: “out there” vs. “in here”

– relationship between external stimuli and internal sensations

– has informed the development of models and methods of

lossy compression


presentperceive

Ou

tlin

e • Temporal Resolution

• Spatial Resolution

• Colour Perception

• Peripheral Vision

• Hardware


Te

mp

ora

l R

eso

luti

on

: F

licker

• 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 Perception6 Image: http://webvision.med.utah.edu

brighter stimulus

~ 45 Hz

Tem

po

ral

Reso

luti

on

: F

lic

ker

into

Mo

tio

n • 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 Perception7 Image: http://webvision.med.utah.edu

Ou

tlin





• Hardware


Th

e H

um

an

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.


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

images/eyediagram.gif

Sp

ati

al

Reso

luti

on

: V

isu

al A

cu

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


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)

• other 99% of photoreceptors help determine where to focus

Sp

ati

al

Reso

luti

on

: Im

plica

tio

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


Ap

ple

’s “

Reti

na D

isp

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


Ou

tlin





• Hardware


XK

CD

Co

lou

r S

urv

ey

http://blog.xkcd.com/2010/05/03/color-survey-results/CS 349 - Visual Perception14

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

Wh

at

co

lor

is t

he d

ress? • How you perceive this image depends on what assumptions

your brain makes.


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

Blue &

black?

White &

gold?

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

Co

lou

r &

th

e V

isib

le S

pectr

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

Descri

bin

g C

olo

ur


Ad

dit

ive / S

ub

tracti

ve C

olo

ur

Mo

dels 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


HS

V/H

SB

Co

lor

Mo

del

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


Va

lue

/Bri

gh

tne

ss

vs

. S

atu

rati

on 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


HS

V/H

SB

Fo

r C

olo

ur

Sele

cti

on


http://www.colorpicker.com/

http://www.colorpicker.com/

Perc

eiv

ing

Co

lou

rTwo 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 Perception22 Image: www.webexhibits.org

Ou

r B

rain

is F

illin

g i

n t

he P

ictu

re


Image: National Eye Institute

Blind

spot

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

images/eyediagram.gif

Pe

rceiv

ing

co

lou

r via

co

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


Co

lor

Sen

sit

ivit

y • humans are trichromatic (cones detect 3 different colours)

CS 349 - Visual Perception25 Image Credit: Fleet

Blu

e,

Gre

en

, an

d R

ed

Rece

pto

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

Hu

man

s, B

ird

s, an

d B

ees

CS 349 - Visual Perception27 Image: http://fieldguidetohummingbirds.wordpress.com

Co

lou

r P

resen

tati

on

Matt

ers 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 Perception28(Johnson, page 41)

Co

lou

r B

lin

dn

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

Ou

tlin





• Hardware


Fo

vea v

s.

Peri

ph

ery

: R

eso

luti

on The spatial resolution of the human visual field drops

significantly from centre to edges


Image: www.webexhibits.org

Peri

ph

ery

Vis

ion 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


Imp

licati

on

s The implication for user interfaces is that sometimes we do not

notice important information (e.g. error messages) in the

periphery.


Johnson, page 56

Imp

licati

on

s


(Johnson, page 58)

Makin

g M

essag

es V

isib

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


Ou

tlin





• Hardware


Gra

ph

ic D

isp

lay T

ech

no

log

y • 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?


RG

B c

olo

ur

• 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


CR

T M

on

ito

rs


LC

D D

isp

lays


Co

lou

r L

CD • each pixel is actually 3 sub pixels


“L

ED

” D

isp

lays • Just LCD display with LED backlight

• more efficient, more even lighting


OL

ED

(O

rgan

ic L

ED

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


Su

mm

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


Visual Perception - University of Waterloocs349/s17/slides/...Visual Perception human perception...

Documents

Transcript of Visual Perception - University of Waterloocs349/s17/slides/...Visual Perception human perception...