data & content design
Frieda Brioschi - frieda.brioschi@gmail.com
Emma Tracanella - emma.tracanella@gmail.com
HOW WE PERCEIVE INFORMATION
LESSON 7 - 20120
WITH YOUR DATA PROJECT
LET’S START
data & content design
LESSON 6
3
UPDATES ON YOUR PROJECT
Photo by William Iven on Unsplash
PAST
A LESSON FROM THE
data & content design
LESSON 7
BULLET HOLES ON PLANES
During World War II, researchers from the
Center for Naval Analyses had conducted
a study of the damage done to aircraft that
had returned from missions, and had
recommended that armor be added to the
areas that showed the most damage (red
dots).
5
data & content design
LESSON 7
A DIFFERENT PERSPECTIVE
But Abraham Wald, a mathematician, came to
a different conclusion: the red dots only
represented the damage on planes that came
home.
The holes in the returning aircraft, then,
represented areas where a bomber could take
damage and still return home safely.
6
Wald proposed that the Navy reinforce areas where the returning
aircraft were unscathed, since those were the areas that, if hit, would
cause the plane to be lost.
data & content design
LESSON 7
THE SURVIVORSHIP BIAS
It's the logical error of concentrating on the people or things that made it past
some selection process and overlooking those that did not, typically because of
their lack of visibility. This can lead to false conclusions in several different ways.
(Wikipedia)
In our story, it’s when everyone considered what survived instead of focusing on
the ones that didn’t.
7
INFORMATION
PERCEIVING AND PROCESSING
data & content design
THE MENTAL ACTION OR PROCESS OF ACQUIRING
KNOWLEDGE AND UNDERSTANDING THROUGH
THOUGHT, EXPERIENCE, AND THE SENSES.
- lexico.com
LESSON 7
9
data & content design
LESSON 7
COGNITION
It encompasses many aspects of intellectual functions and processes such as
attention, the formation of knowledge, memory and working memory, judgment
and evaluation, reasoning and "computation", problem solving and decision
making, comprehension and production of language.
Cognitive processes use existing knowledge and generate new knowledge.
(Wikipedia)
10
data & content design
LESSON 7
COGNITIVE SCIENCE
According to George Miller, fields that
contributed to the birth of cognitive
science, includ linguistics, neuroscience,
artificial intelligence, philosophy,
anthropology, and psychology.
▸ Img by Charles Lowe, CC-BY-SA
11
data & content design
LESSON 7
HOW WE LEARN
How we process information and experiences (what we do with new information and
experiences) varies along a continuum from “reflective observation” to “active
experimentation.” We process our experiences by reflecting about them, filtering new
learning through our experiences. Then we process new learning by acting on it, by trying
things out.
The combination of how we perceive and process information and experiences forms our
unique learning style.
▸ https://fyi.extension.wisc.edu/wateroutreach/water-outreach-education/what-are-beps/knowledge-
area-beps-2/learning-styles-introduction/learning-styles-perceiving-and-processing-information/
12
data & content design
LESSON 7
LEARNING STYLES
We perceive and process information and experiences in different ways. 
We perceive something new through our senses (direct experience), and then we
use our cognitive abilities to identify the new thing (abstract conceptualization).
This movement along the “perceiving” dimension is related to the “processing”
dimension.
People are equipped with senses that help us to take in the world around us. Our
senses have the ability to convert real-world information into electrical information
that can be processed by the brain. The way we interpret this information is what
leads to our experiences of the world.
13
data & content design
LESSON 7
SENSATION AND PERCEPTION
The physical process during which our sensory organs—those involved with
hearing and taste, for example—respond to external stimuli is called sensation.
After our brain receives the electrical signals, we make sense of all this
stimulation and begin to appreciate the complex world around us. This
psychological process—making sense of the stimuli—is called perception.
▸ https://nobaproject.com/modules/sensation-and-perception
14
data & content design
LESSON 7
EXPERIENCE MATTERS
It is clear that our experience influences how our brain processes things.
Your past experience has changed the way you perceive the writing in the triangle!
15
data & content design
LESSON 7
ELLEMME FOR IGPDECAUX @PORTA GARIBALDI
16
data & content design
LESSON 7
HUMAN FIELD OF VISION
17Img by Zyxwv99, CC-BY-SA
data & content design
LESSON 7
VISUAL PERCEPTION
18
Visual perception is important because most information that we receive is
conveyed visually.
How do we read or pick up information from complex visual stimuli?
We do it by jumping our eye around to pick up different parts of the image that
we're looking at, because we can only really get detailed information from the
central part of the field of view.
So in order to see all the different parts we have to jump around, through
multiple eye fixations to pick up the information.
data & content design
LESSON 7
..AND YOU?
19
data & content design
LESSON 7
GOLDEN RULES
20
▸ Make important information visible ("Did users actually see the information
that I was trying to present to them or did they miss it entirely?”)
▸ Information that is not immediately visible and perceivable by readers, is
less likely to be noticed ("Did people ever actually see the information that
you are trying to present to them?”)
▸ https://www.coursera.org/lecture/introtoux-principles-and-processes/visual-perception-part-1-v7dlk
data & content design
LESSON 7
KOLB'S EXPERIENTIAL LEARNING
21https://en.wikipedia.org/wiki/Kolb's_experiential_learning
VISUALIZATION
TOWARDS DATA
Photo by ev on Unsplash
data & content design
LESSON 7
BASICS
▸ Visual perception is selective. We selectively pay attention to
things that catch our attention.
▸ Our eyes are drawn to familiar patterns. Visualization must take
into account what people know and expect.
▸ Our working memory is very limited.
▸ daydreamingnumbers.com/blog/visual-perception-data-visualization/
23
data & content design
Visual memory is a form of memory which preserves some characteristics of our
senses pertaining to visual experience.
The iconic and working memories are the ones that interact with visualizations
LESSON 7
VISUAL MEMORY
24
data & content design
LESSON 7
ICONIC AND WORKING
▸ Iconic: when we see the information remains in the iconic memory for a tiny
period of time; during it we process and store information automatically. This
process is called preattentive processing and it happens automatically, even
before we pay attention to the information. The preattentive process detects
several visual attributes.
▸ Working: The sensory information that is of interest to us is processed in the
working memory. The capacity of our working memory is between 5 to 9 similar
items (Miller’s Law: seven, plus or minus two). This capacity can be increased
by chunking, that is grouping similar items together.
25
data & content design
LESSON 7
CHUNKING
Data visualizations take advantage of chunking. When information is displayed in
the form of visuals that show meaningful patterns, more information can be chunked
together. Hence, when we look at a visual, we can process a great deal more
information than what we can when looking at the data in the form of a table.
For a visualization to be effective, we need to pay attention to not providing more
data than what our brains can process. It is also important to display the visual on a
screen or a single location, such that we can see it without having to scroll or
bounce back and forth between multiple locations.
26
data & content design
LESSON 7
GESTALT PRINCIPLES
Gestalt theory is based on the idea that the human brain will attempt to simplify and
organize complex images or designs that consist of many elements, by
subconsciously arranging the parts into an organized system that creates a whole,
rather than just a series of disparate elements.
There are six individual principles commonly associated with gestalt theory:
similarity, continuation, closure, proximity, figure/ground, and symmetry & order.
▸ https://www.toptal.com/designers/ui/gestalt-principles-of-design
27
data & content design
LESSON 7
SIMILARITY
Objects that share similar attributes (e.g., color or shape) are perceived as a group.
28
The squares here are all
equally spaced and the same
size, but we automatically
group them by color, even
though there's no rhyme or
reason to their placement.
data & content design
LESSON 7
PROXIMITY
29
Objects that are close together are perceived as a group.
data & content design
LESSON 7
CLOSURE
Open structures are perceived as closed, complete, and regular whenever there is a
way that they can be reasonably interpreted as such.
30
The brain completes the
white shapes, even
though they're not well
defined.
data & content design
LESSON 7
CONTINUITY
Objects that are aligned together or appear to be a continuation of one another are
perceived as a group.
31
The eye tends to want to
follow the straight line from
one end of this figure to the
other, and the curved line
from the top to the bottom,
even when the lines change
color midway through.
data & content design
LESSON 7
ENCLOSURE
Objects that appear to have a boundary around them (e.g., formed by a line or area
of common color) are perceived as a group.
32
Faces or a vase?
data & content design
LESSON 7
CONNECTION
Objects that are connected (e.g., by a line) are perceived as a group.
33
data & content design
LESSON 7
TEMPERATURE ANOMALIES BY COUNTRY
34
https://www.youtube.com/watch?v=PhbdyNnUliM
PERCEPTION
VISUAL
data & content design
THE DEGREE TO WHICH YOUR DATA
PRESENTATION EFFECTIVELY AND EFFICIENTLY
COMMUNICATES DEPENDS ON HOW WELL YOU
TAP INTO THE POWER OF VISUAL PERCEPTION
- Stephen Few
LESSON 7
36
data & content design
LESSON 7
VISUAL SYSTEM
The visual system has its own rules. We can easily see patterns
presented in certain ways, but if they are presented in other ways,
they become invisible. [..]
If we can understand how perception works, our knowledge can be
translated into rules for displaying information. Following perception-
based rules, we can present our data in such a way that the important
and informative patterns stand out. If we disobey these rules, our data
will be incomprehensible or misleading.
▸ https://books.google.it/books/about/Information_Visualization.html?id=qFmS95vf6H8C&redir_esc=y
37
data & content design
LESSON 7
LIMITS OF SHORT-TERM MEMORY
38
▸ http://www.perceptualedge.com/articles/ie/visual_perception.pdf
data & content design
LESSON 7
COUNT HOW MANY TIMES THE NUMBER "5" APPEARS
(Attentive processing -> serial)
39
data & content design
LESSON 7
COUNT HOW MANY TIMES THE NUMBER "5" APPEARS
(Preattentive perception -> parallel)
40
data & content design
LESSON 7
PREATTENTIVE ATTRIBUTES: FORM
41
data & content design
LESSON 7
PREATTENTIVE ATTRIBUTES: COLOR & POSITION
42
data & content design
LESSON 7
HOW TO USE THEM
Best visualizations allow users to see what designer want them to see
before they know that they have seen it.
Orientation Vs Hue
43
PERCEPTION
REPRESENTATION AND
Photo by ev on Unsplash
data & content design
LESSON 7
YOUR BIRTHDAY DATA
45
7/24/1997
4/25/1998
7/5/1996
7/17/1999
2/14/1998
7/20/1998
6/10/1998
5/13/1997
4/15/2019
5/8/1996
5/27/1994
2/10/1999
1/9/1997
9/5/1995
1/23/1998
3/24/1998
2/22/2019
3/28/1998
9/7/1999
11/6/1996
7/7/1998
5/8/1996
data & content design
LESSON 6
YOUR BIRTHDAY DATA - YEAR
46
data & content design
LESSON 7
YOUR BIRTHDAY DATA - DAY & MONTH
47

How we perceive information (v. 2020 ITA)

  • 1.
    data & contentdesign Frieda Brioschi - frieda.brioschi@gmail.com Emma Tracanella - emma.tracanella@gmail.com HOW WE PERCEIVE INFORMATION LESSON 7 - 20120
  • 2.
    WITH YOUR DATAPROJECT LET’S START
  • 3.
    data & contentdesign LESSON 6 3 UPDATES ON YOUR PROJECT Photo by William Iven on Unsplash
  • 4.
  • 5.
    data & contentdesign LESSON 7 BULLET HOLES ON PLANES During World War II, researchers from the Center for Naval Analyses had conducted a study of the damage done to aircraft that had returned from missions, and had recommended that armor be added to the areas that showed the most damage (red dots). 5
  • 6.
    data & contentdesign LESSON 7 A DIFFERENT PERSPECTIVE But Abraham Wald, a mathematician, came to a different conclusion: the red dots only represented the damage on planes that came home. The holes in the returning aircraft, then, represented areas where a bomber could take damage and still return home safely. 6 Wald proposed that the Navy reinforce areas where the returning aircraft were unscathed, since those were the areas that, if hit, would cause the plane to be lost.
  • 7.
    data & contentdesign LESSON 7 THE SURVIVORSHIP BIAS It's the logical error of concentrating on the people or things that made it past some selection process and overlooking those that did not, typically because of their lack of visibility. This can lead to false conclusions in several different ways. (Wikipedia) In our story, it’s when everyone considered what survived instead of focusing on the ones that didn’t. 7
  • 8.
  • 9.
    data & contentdesign THE MENTAL ACTION OR PROCESS OF ACQUIRING KNOWLEDGE AND UNDERSTANDING THROUGH THOUGHT, EXPERIENCE, AND THE SENSES. - lexico.com LESSON 7 9
  • 10.
    data & contentdesign LESSON 7 COGNITION It encompasses many aspects of intellectual functions and processes such as attention, the formation of knowledge, memory and working memory, judgment and evaluation, reasoning and "computation", problem solving and decision making, comprehension and production of language. Cognitive processes use existing knowledge and generate new knowledge. (Wikipedia) 10
  • 11.
    data & contentdesign LESSON 7 COGNITIVE SCIENCE According to George Miller, fields that contributed to the birth of cognitive science, includ linguistics, neuroscience, artificial intelligence, philosophy, anthropology, and psychology. ▸ Img by Charles Lowe, CC-BY-SA 11
  • 12.
    data & contentdesign LESSON 7 HOW WE LEARN How we process information and experiences (what we do with new information and experiences) varies along a continuum from “reflective observation” to “active experimentation.” We process our experiences by reflecting about them, filtering new learning through our experiences. Then we process new learning by acting on it, by trying things out. The combination of how we perceive and process information and experiences forms our unique learning style. ▸ https://fyi.extension.wisc.edu/wateroutreach/water-outreach-education/what-are-beps/knowledge- area-beps-2/learning-styles-introduction/learning-styles-perceiving-and-processing-information/ 12
  • 13.
    data & contentdesign LESSON 7 LEARNING STYLES We perceive and process information and experiences in different ways.  We perceive something new through our senses (direct experience), and then we use our cognitive abilities to identify the new thing (abstract conceptualization). This movement along the “perceiving” dimension is related to the “processing” dimension. People are equipped with senses that help us to take in the world around us. Our senses have the ability to convert real-world information into electrical information that can be processed by the brain. The way we interpret this information is what leads to our experiences of the world. 13
  • 14.
    data & contentdesign LESSON 7 SENSATION AND PERCEPTION The physical process during which our sensory organs—those involved with hearing and taste, for example—respond to external stimuli is called sensation. After our brain receives the electrical signals, we make sense of all this stimulation and begin to appreciate the complex world around us. This psychological process—making sense of the stimuli—is called perception. ▸ https://nobaproject.com/modules/sensation-and-perception 14
  • 15.
    data & contentdesign LESSON 7 EXPERIENCE MATTERS It is clear that our experience influences how our brain processes things. Your past experience has changed the way you perceive the writing in the triangle! 15
  • 16.
    data & contentdesign LESSON 7 ELLEMME FOR IGPDECAUX @PORTA GARIBALDI 16
  • 17.
    data & contentdesign LESSON 7 HUMAN FIELD OF VISION 17Img by Zyxwv99, CC-BY-SA
  • 18.
    data & contentdesign LESSON 7 VISUAL PERCEPTION 18 Visual perception is important because most information that we receive is conveyed visually. How do we read or pick up information from complex visual stimuli? We do it by jumping our eye around to pick up different parts of the image that we're looking at, because we can only really get detailed information from the central part of the field of view. So in order to see all the different parts we have to jump around, through multiple eye fixations to pick up the information.
  • 19.
    data & contentdesign LESSON 7 ..AND YOU? 19
  • 20.
    data & contentdesign LESSON 7 GOLDEN RULES 20 ▸ Make important information visible ("Did users actually see the information that I was trying to present to them or did they miss it entirely?”) ▸ Information that is not immediately visible and perceivable by readers, is less likely to be noticed ("Did people ever actually see the information that you are trying to present to them?”) ▸ https://www.coursera.org/lecture/introtoux-principles-and-processes/visual-perception-part-1-v7dlk
  • 21.
    data & contentdesign LESSON 7 KOLB'S EXPERIENTIAL LEARNING 21https://en.wikipedia.org/wiki/Kolb's_experiential_learning
  • 22.
  • 23.
    data & contentdesign LESSON 7 BASICS ▸ Visual perception is selective. We selectively pay attention to things that catch our attention. ▸ Our eyes are drawn to familiar patterns. Visualization must take into account what people know and expect. ▸ Our working memory is very limited. ▸ daydreamingnumbers.com/blog/visual-perception-data-visualization/ 23
  • 24.
    data & contentdesign Visual memory is a form of memory which preserves some characteristics of our senses pertaining to visual experience. The iconic and working memories are the ones that interact with visualizations LESSON 7 VISUAL MEMORY 24
  • 25.
    data & contentdesign LESSON 7 ICONIC AND WORKING ▸ Iconic: when we see the information remains in the iconic memory for a tiny period of time; during it we process and store information automatically. This process is called preattentive processing and it happens automatically, even before we pay attention to the information. The preattentive process detects several visual attributes. ▸ Working: The sensory information that is of interest to us is processed in the working memory. The capacity of our working memory is between 5 to 9 similar items (Miller’s Law: seven, plus or minus two). This capacity can be increased by chunking, that is grouping similar items together. 25
  • 26.
    data & contentdesign LESSON 7 CHUNKING Data visualizations take advantage of chunking. When information is displayed in the form of visuals that show meaningful patterns, more information can be chunked together. Hence, when we look at a visual, we can process a great deal more information than what we can when looking at the data in the form of a table. For a visualization to be effective, we need to pay attention to not providing more data than what our brains can process. It is also important to display the visual on a screen or a single location, such that we can see it without having to scroll or bounce back and forth between multiple locations. 26
  • 27.
    data & contentdesign LESSON 7 GESTALT PRINCIPLES Gestalt theory is based on the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. There are six individual principles commonly associated with gestalt theory: similarity, continuation, closure, proximity, figure/ground, and symmetry & order. ▸ https://www.toptal.com/designers/ui/gestalt-principles-of-design 27
  • 28.
    data & contentdesign LESSON 7 SIMILARITY Objects that share similar attributes (e.g., color or shape) are perceived as a group. 28 The squares here are all equally spaced and the same size, but we automatically group them by color, even though there's no rhyme or reason to their placement.
  • 29.
    data & contentdesign LESSON 7 PROXIMITY 29 Objects that are close together are perceived as a group.
  • 30.
    data & contentdesign LESSON 7 CLOSURE Open structures are perceived as closed, complete, and regular whenever there is a way that they can be reasonably interpreted as such. 30 The brain completes the white shapes, even though they're not well defined.
  • 31.
    data & contentdesign LESSON 7 CONTINUITY Objects that are aligned together or appear to be a continuation of one another are perceived as a group. 31 The eye tends to want to follow the straight line from one end of this figure to the other, and the curved line from the top to the bottom, even when the lines change color midway through.
  • 32.
    data & contentdesign LESSON 7 ENCLOSURE Objects that appear to have a boundary around them (e.g., formed by a line or area of common color) are perceived as a group. 32 Faces or a vase?
  • 33.
    data & contentdesign LESSON 7 CONNECTION Objects that are connected (e.g., by a line) are perceived as a group. 33
  • 34.
    data & contentdesign LESSON 7 TEMPERATURE ANOMALIES BY COUNTRY 34 https://www.youtube.com/watch?v=PhbdyNnUliM
  • 35.
  • 36.
    data & contentdesign THE DEGREE TO WHICH YOUR DATA PRESENTATION EFFECTIVELY AND EFFICIENTLY COMMUNICATES DEPENDS ON HOW WELL YOU TAP INTO THE POWER OF VISUAL PERCEPTION - Stephen Few LESSON 7 36
  • 37.
    data & contentdesign LESSON 7 VISUAL SYSTEM The visual system has its own rules. We can easily see patterns presented in certain ways, but if they are presented in other ways, they become invisible. [..] If we can understand how perception works, our knowledge can be translated into rules for displaying information. Following perception- based rules, we can present our data in such a way that the important and informative patterns stand out. If we disobey these rules, our data will be incomprehensible or misleading. ▸ https://books.google.it/books/about/Information_Visualization.html?id=qFmS95vf6H8C&redir_esc=y 37
  • 38.
    data & contentdesign LESSON 7 LIMITS OF SHORT-TERM MEMORY 38 ▸ http://www.perceptualedge.com/articles/ie/visual_perception.pdf
  • 39.
    data & contentdesign LESSON 7 COUNT HOW MANY TIMES THE NUMBER "5" APPEARS (Attentive processing -> serial) 39
  • 40.
    data & contentdesign LESSON 7 COUNT HOW MANY TIMES THE NUMBER "5" APPEARS (Preattentive perception -> parallel) 40
  • 41.
    data & contentdesign LESSON 7 PREATTENTIVE ATTRIBUTES: FORM 41
  • 42.
    data & contentdesign LESSON 7 PREATTENTIVE ATTRIBUTES: COLOR & POSITION 42
  • 43.
    data & contentdesign LESSON 7 HOW TO USE THEM Best visualizations allow users to see what designer want them to see before they know that they have seen it. Orientation Vs Hue 43
  • 44.
  • 45.
    data & contentdesign LESSON 7 YOUR BIRTHDAY DATA 45 7/24/1997 4/25/1998 7/5/1996 7/17/1999 2/14/1998 7/20/1998 6/10/1998 5/13/1997 4/15/2019 5/8/1996 5/27/1994 2/10/1999 1/9/1997 9/5/1995 1/23/1998 3/24/1998 2/22/2019 3/28/1998 9/7/1999 11/6/1996 7/7/1998 5/8/1996
  • 46.
    data & contentdesign LESSON 6 YOUR BIRTHDAY DATA - YEAR 46
  • 47.
    data & contentdesign LESSON 7 YOUR BIRTHDAY DATA - DAY & MONTH 47