visual perception - university of waterloocs349/s17/slides/...visual perception human perception...
TRANSCRIPT
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
CS 349 - Visual Perception2
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.
CS 349 - Visual Perception3
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
CS 349 - Visual Perception4
presentperceive
Ou
tlin
e • Temporal Resolution
• Spatial Resolution
• Colour Perception
• Peripheral Vision
• Hardware
CS 349 - Visual Perception5
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
e • Temporal Resolution
• Spatial Resolution
• Colour Perception
• Peripheral Vision
• Hardware
CS 349 - Visual Perception8
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.
CS 349 - Visual Perception9
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)
CS 349 - Visual Perception10
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!
CS 349 - Visual Perception11
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
CS 349 - Visual Perception12
Ou
tlin
e • Temporal Resolution
• Spatial Resolution
• Colour Perception
• Peripheral Vision
• Hardware
CS 349 - Visual Perception13
XK
CD
Co
lou
r S
urv
ey
http://blog.xkcd.com/2010/05/03/color-survey-results/CS 349 - Visual Perception14
Wh
at
co
lor
is t
he d
ress? • How you perceive this image depends on what assumptions
your brain makes.
CS 349 - Visual Perception15
http://www.wired.com/2015/02/science-one-agrees-color-dress/
Blue &
black?
White &
gold?
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)
CS 349 - Visual Perception16
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
CS 349 - Visual Perception17
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
CS 349 - Visual Perception18
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
CS 349 - Visual Perception19
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
CS 349 - Visual Perception20
HS
V/H
SB
Fo
r C
olo
ur
Sele
cti
on
CS 349 - Visual Perception21
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
CS 349 - Visual Perception23
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
CS 349 - Visual Perception24
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.
CS 349 - Visual Perception26
(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)
CS 349 - Visual Perception29
protanopia deuteranopia tritanopia
Ou
tlin
e • Temporal Resolution
• Spatial Resolution
• Colour Perception
• Peripheral Vision
• Hardware
CS 349 - Visual Perception30
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
CS 349 - Visual Perception31
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
CS 349 - Visual Perception32
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.
CS 349 - Visual Perception33
Johnson, page 56
Imp
licati
on
s
CS 349 - Visual Perception34
(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
CS 349 - Visual Perception35
Ou
tlin
e • Temporal Resolution
• Spatial Resolution
• Colour Perception
• Peripheral Vision
• Hardware
CS 349 - Visual Perception36
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?
CS 349 - Visual Perception37
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
CS 349 - Visual Perception38
CR
T M
on
ito
rs
CS 349 - Visual Perception39
LC
D D
isp
lays
CS 349 - Visual Perception41
Co
lou
r L
CD • each pixel is actually 3 sub pixels
CS 349 - Visual Perception42
“L
ED
” D
isp
lays • Just LCD display with LED backlight
• more efficient, more even lighting
CS 349 - Visual Perception43
OL
ED
(O
rgan
ic L
ED
) • no backlight, bendable, more expensive to produce (currently)
CS 349 - Visual Perception44
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.
CS 349 - Visual Perception47