Visual Perception

Week 2
Visualization is not something that happens on a
page or on a screen; it happens in the mind.
– Robert Spence, 2007
 How Visual Perception Works
• Our eyes sense light that enters them after reflecting off the surface of objects in
the world.
• What we perceive as an object is built up in our brains as a composite of several
visual properties.
• Even though we perceive this composite of properties as a whole object, we can
still distinguish the properties that compose it.
• Vision is specifically tuned to sense the following properties: two-dimensional (2D)
location, length, width, area, shape, color, and orientation.
 Visual Information Processing
• Stage 1: information is processed in
parallel to extract basic features of
the environment.
• Stage 2: active processes of pattern
perception pull out structures and
segment the visual scene into regions
of different color, texture, and motion
patterns.
• Stage 3: the information is reduced to
only a few objects held in visual
working memory by active
mechanisms of attention to inform the
basis of visual thinking.
Vision & Perception
Vision is fast, but reason is slow.
 Light
• Light is electromagnetic radiation described as waves that scatter in different
lengths, frequencies, and energy charges.
• The visible range for humans runs from violet to red.
• When light hits any object, the surface absorbs some of the light and reflects the
rest.
 Light and Photoreceptors
• The pupil controls the amount of light
that enters the eye.
• The retina is covered with several kinds
of cells, including photoreceptors (most
relevant for light detection).
• Rods and cones

• The fovea is a small area in the center

of the retina that is densely packed
only with cones.
 Light and Photoreceptors
• Each retina has around 100
million rods that see in black
and white and are active
when light is dim and only 6
million cones that are
sensitive under normal
working light levels.
 Visual Field
• Both eyes together provide a
visual field of a bit more than
180°.
• Visual acuities are measurement
of our ability to see detail.
Is the acuity of our vision is the
same throughout our entire visual
field?
Image source: Cognition and the Visual Arts, by Robert Solso, (c) MIT Press
 Visual Field
• We only see with full acuity the things that lie in a very narrow field in front of us
(an angle around two degrees wide). This angle is centered around the retinal
region called the fovea.
• The fovea contains only cones on a tiny surface of just one square millimeters.
• The cones grow sparser as we move away from the fovea to another small,
surrounding region called the parafovea. Outside the parafovea, the retina is
covered only with rods.
 Saccades
• A saccade is a biological process by which a rapid, small eye movement is made
as the eye changes focus from one point to another within the visual field.
Saccades generally are made towards stationary objects, but sometimes occur
when the eyes need to catch up to a quickly moving target. (source:
https://www.nature.com/subjects/saccades)
• Each stop your eyes make on a particular point is called a fixation.
 Vision
• Vision is the result of mapping your environment based on the aggregated
information your eyes obtain from multiple fixations.
 Saccades
• Saccadic movements and fixations are
unconscious, but they are not random.
• Humans are attracted by moving
creatures and objects, bright colored
patches in front of us, and uncommonly
shaped items, even if they are in our
peripheral vision range.

Moving things attract our attention very quickly. This gets our focus
 Saccades
• When facing a human head, our eyes fix first on
those features that can better help identify the
person it belongs to and his or her emotional state.
• Example from “Eye Movements and Vision” by Alfred L.
Yarbus

Movements are not random

Your eyes will fix on certain points, for a face it is the part that help us identify
 Design Implications
If you know that the brain prioritizes what it pays attention to,
prioritize beforehand.
• You should never simultaneously show moving objects (e.g., an animation) on one
side of the screen and uncommon shapes (e.g., text box) on the other side of the
screen.
• Filling your graphic with objects colored in pure accent tones will disorient your
audience.

If this is random it can impact your communication of the purpose

 Visual Illusion
• Blind spot: a small region on the retina
where there is no photosensitive cells (no
rods, no cones).
• Example: Kanizsa Triangle

see?
do you
What
s
triangle
kinesia
 Blind Spot
• Blind spot: a small region on the retina where there is no photosensitive cells (no
rods, no cones).
• When both eyes are open, the brain sees a composite image based on the
information coming from the two eyes.

• Your brain makes an assumption based on what it knows about how its
environment works.
 Why Visual Illusions?
• The reasons may be efficiency and response speed.
• What we commonly call seeing is not a single
phenomenon, but a group of at least three operations:
sight, perception, and cognition.
• The eye, the brain, light, and memory work together.
Low-Level Visual Perception
Preattentive Features
 Contrast
• The detection of object boundaries is based on variations of
light intensity and color, and how well the edges of the
things you see are defined.
• The differences between object (foreground) and
background in the first two illustrations are sensed before
attention and reason come into play.

higher contrast between two object the easier they are to identify
 Contrast
• We do not attend to everything that we see. Visual perception is selective, as it
must be, for awareness of everything would overwhelm us. Our attention is often
drawn to contrasts to the norm.
 Contrast
• The brain is much better at quickly detecting shade variations than shape
differences.
 Contrast
• It is easier to spot the number 3 in the number sequence when we highlight it with
a different shade.
 Patterns
• Which panel has more structure in it?
 Gestalt Principles of Visual Perception
• The visual brain is a device that evolved to detect patterns.
• Brains don’t see patches of color and shapes as individual entities, but as
aggregates.
• Gestalt rules: The strong inferences we make about relationships between visual
elements from relatively sparse visual information
• Proximity, Similarity, Connectedness, Figure and ground, Continuity, Closure, Common fate
 Proximity
• Things that are spatially near to one another seem to be related.

• Objects that are related should be near one another in your composition, and
aligned on the vertical or horizontal axis.
 Similarity
• Things that look alike seem to be related.
 Connectedness
• Things that are visually tied to one another seem to be related.
 Figure and Ground
• Visual elements are taken to be either in the foreground or in the background.
 Continuity
• It is easier to perceive the gross shape of an object as a coherent whole when its
contours are smooth and rounded than when they are angular and sharp.
 Continuity
• Continuity is better perceived in curves than in lines with sharp angles.
 Closure
• Incomplete shapes are perceived as complete. [left]
• Objects inside an area with crisp, clear boundaries will be perceived as
belonging to a group. [right]
 Common Fate
• Elements sharing a direction of movement are perceived as a unit.
 Perceptual Task Scale
“Graphical perception: theory,
experimentation, and application to
the development of graphical
methods”, the groundbreaking
research by William S. Cleveland
and Robert McGill in 1984,
proposes basic guidelines for
choosing the best graphic form to
encode data depending on the
function of the display.
 Perceptual Task Scale
“A graphical form that involves elementary perceptual tasks that lead to more
accurate judgments than another graphical form (with the same quantitative
information) will result in a better organization and increase the changes of a
correct perception of patterns and behavior.” – Cleveland and McGill
• The higher you move on Cleveland’s and McGill’s scale, the more accurate the
judgments your readers will be able to make based on your charts.
 Perceptual Task Scale
• A bar chart is always superior to a bubble chat or a heat map if the goal of the
graphic is to facilitate precise comparisons. (down)
• The human brain has difficulty comparing angles, directions, and curvatures. (right)
 Perceptual Task Scale
“While there is a place for rapidly understood graphics, it is too limiting to make
speed a requirement in science and technology, where the use of graphs ranges
from detailed in-depth data analysis to quick presentation (…). The important
criterion for a graph is not simply how fast we can see a result; rather it is
whether through the use of the graph we can see something that would have
been harder to see otherwise or that could not have been seen at all.”
– William Cleveland (from The Elements of Graphing Data)
 Depth
• Stereoscopic depth is information about distance provided by the slight
differences in images on the retinas of animals with two forward-looking eyes
(Ware, 2021).
• The image of the world your brain generates is a composite of he slightly different inputs it
receives from both eyes.

• The brain also receives tons of still images per second from each eye.  saccades
• The brain assumes that light comes from above.
• The relative sizes of objects in a scene and their interposition are also powerful
clues for depth perception.
 Depth
• Our mind extracts hints from our surroundings to build the illusion
of depth.
• The brain assumes that light comes from above. [left]
• The relative sizes of objects in a scene and their interposition are also
powerful clues for depth perception. [middle]
• Discriminating foreground from background also facilitates depth
perception. [right]
 Using Knowledge of Perception
There are ways to visually display data that are effective because they correspond
naturally to the workings of vision and cognition.
• Example 1: Lines work well for connecting values through time, but are
inappropriate for connecting categorical items.
 Using Knowledge of Perception
• Example 2: To rank and compare the sales performance of the 9 spices:
 Preattentive Attributes of Visual Perception
• We perceive several basic
attributes of visual images
pre-attentively (i.e., prior to
and without the need for
conscious perception)
• Pre-attentive attributes: form,
color, spatial position, and
motion.
 Preattentive Attributes of Visual Perception
• Hues are usually a little easier to interpret than shapes.
 Preattentive Attributes of Visual Perception
• Only two pre-attentive attributes are perceived quantitatively with a high degree
of precision: length and 2-D position.
• Almost all effective quantitative graphs are of the 2-D, X-Y axis type.
• Sometimes it is appropriate to encode quantities using one of the attributes that
we can’t perceive precisely, but we should usually do this only when neither length
nor 2-D position is an option.
• Heatmap: when color is used to encode quantitative values
 Preattentive Attributes of Visual Perception
• We can’t compare the varying sizes of these data points precisely, but if all we
need is a rough sense of how profits compare, this does the job.
 Preattentive Attributes of Visual Perception

We can’t compare
profits precisely when
they are encoded as
color intensity, but
sometimes these
approximate
indications are all we
need to make an
analytical judgment.
 Preattentive Attributes of Visual Perception
Treemap
• Originally developed by Ben Shneiderman
• Similar to heatmap
• Treemap uses both size and color to encode quantitative values
• Treemaps rely on pre-attentive attributes to encode values (area and color) that we can’t
compare precisely (we reserve such methods for circumstances when other more precise
visualizations cannot be used, or precision isn’t necessary)
 Preattentive Attributes of Visual Perception
• Most quantitative data analysis can be performed quite well with graphs that
encode values using only four types of objects:
 Preattentive Attributes of Visual Perception
• The immediacy of any pre-attentive cue
declines as the variety of alternative
patterns increases, even if all the
distracting patterns are individually distinct
from the target.
• Visual complexity is distracting  It should
never be employed to a degree that
exceeds the actual complexity in the data.
 High-Level Visual Perception
“As soon as the rays of light are converted into neural impulses at the back of your eye, it no longer
makes sense to think of the visual information as being an image.” – V.S. Ramachandran
 Object Recognition
During visual perception, information runs in two opposite and convergent
pathways.
1. Bottom-up processing: the pathway that brings impulses from the retina to the
brain.
2. Top-down processing: the pathway that retrieves contents from our memory and
brings them to the visual processing areas.
 Object Recognition
The brain identifies objects by comparing what you see with what you know and remember.
1. An external entity reflects light that reaches your retinas.
2. In iconic memory, the brain extracts the main features of what is in front of us,
beginning with its gross shape over the background, followed by some interesting inside
features.
3. The brain keeps loading information from long-term to working memory.
4. In working memory, the brain compares the patterns coming from the eyes with the
patterns loaded from long-term memory.
 Iconic Memory
• Iconic memory is a very short-term image store, holding what is on the retina until
it is replaced by something else or until several hundred milliseconds have passed
(Sperling, 1960).
• It functions as a temporary buffer, storing information from a single fixation.
• Iconic memory keeps a coherent picture of the world that can later be interpreted
by the brain.
• It is where preattentive features are first extracted and processed (albert in a
very rough manner).
 Visual Working Memory
• Visual working memory is a form of short-term storage with a quite limited
capacity.
• It holds the visual objects of immediate attention.
• The contents of working memory can be drawn from either long-term memory (in
the case of mental images) or input from the iconic store, but most of the time
information in working memory is a combination of external visual information
made meaningful through the experiences stored in long-term memory and mental
imagery.
 Visual Working Memory
• Glyph: a visual object that displays one or more
data variables.
• If multiple data attributes are integrated into a
single glyph, more information can be held in
visual working memory.

• Not advisable to use more than four or five

colors or pictograms o identify different
phenomena on maps and charts.
 Long-Term Memory
• Long-term memory is the information that we retain from everyday experience,
perhaps for a lifetime, but it should not be considered as separate from working
memory.
• The relationship between working memory and long-term memory can be
compared to the one that exists between RAM memory and a hard drive in a
computer.
• It is in the confluence between impulses that come from the eye (bottom-up
processing), and impulses that come from memory (top-down processing) that
object recognition occurs.
 Object Recognition
An object can be identified based on its main features, on its components, and on its
configuration.
1. Component-based object recognition
• It is likely that the brain memorizes structural descriptions of what is perceives.
 Object Recognition
2. Feature-based object recognition
• A nonaccidental property is a feature that usually belongs to a particular kind of
entity.
• Junctures and corners are an important component of feature-based recognition.
 Object Recognition
3. Configuration-based object recognition involves a more holistic
approach than the identification of nonaccidental features and
parts of an object.
• The brain pays attention to how the components of an object
are spatially arranged, and to how they relate to one another,
in order to identifying it.
• Example: facial recognition (illustrations by Ricardo Martinez)
 Design Implications
• To measure the speed at which the participants were able to identify the
components of the scene:

• As irrelevant or redundant information was removed from the illustration, its main
features became more pronounced, facilitating its identification, because the
brain had to work less to extract them.
The Power of Visual Perception
The Power of Visual Perception
 Overcoming the Limits of Memory
• We should avoid fragmenting information that
we’re examining by placing it on separate screens
or in locations that we can’t see without scrolling.
• Example: Four months of expenses for 15 separate
departments
• A powerful external aid to working memory
Visual Attention
 Selectivity of Attention
• We can hold three or four objects in visual working memory required intense
concentration on the part of the participants.
• Inattentional Blindness – Most of the time we simply do not register what is going
on in our environment unless we are looking for it and this reinforces the view that
attention is central to most perception.
• Example: Selective attention test
 Selectivity of Attention

The focus of attention largely

determines what we will see,
and this focus is set by the task
we are undertaking.
• Example: In Yarbus' study,
participants were asked to
examine the same image with
different questions in mind.
Ilya Repin, An Unexpected Visitor, 1884 ►
The patterns of eye
movements over the painting
varied with the instructions
given to the observer.
 Selectivity of Attention
Two ways of moving a subject’s attention from one part of a display to another:
• Pull cue: a new object appearing in the scene pulls attention toward it
• Push cue: a symbol in the display (e.g., an arrow) tells someone where a new
pattern is to appear.
Design Implication: Use pull cues (e.g., motion) preferentially over push cues to
redirect attention in an interactive display.
 Selectivity of Attention
• Stroop effect (Stroop, 1935)
demonstrates interference between words
(tied to verbal information) and visual
features, which represent very separate
channels of information.
• The words are processed automatically;
we cannot entirely ignore them even
when we want to.
 Scene Gist
• Gist refers to the properties that are pulled from long-term memory as the image
is recognized.
• Gist consists of both visual information about the typical structure of objects and
their environment, including predictions of the likely behavior of objects.
• Scene gist is important in data visualization because what we see depends
enormously on the context.
Design Implication: consistency of representation for common types of visualization.
 References
• Cairo, A. (2012). The Functional Art: An introduction to information graphics and
visualization.
• Cairo, A. (2016). The truthful art: Data, charts, and maps for communication.
• Few, S. (2009). Now you see it: simple visualization techniques for quantitative
analysis.
• Tufte, E. R. (2013). The visual display of quantitative information.
• Ware, C. (2019). Information visualization: perception for design.
• Yau, N. (2011). Visualize This: The FlowingData Guide to Design, Visualization,
and Statistics.