![Page 1: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/1.jpg)
Vision, Perception and Cognition
ID 413: Information Graphics and Data VisualizationSpring 2016
Venkatesh Rajamanickam (@venkatrajam)
http://info-design-lab.github.io/ID413-DataViz/
![Page 2: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/2.jpg)
The Eye
o 70% of body's sense receptors reside in our eyes
o The eye and the visual cortex of the brain form a
massively parallel processor that provides the highest-
bandwidth channel into human cognitive centers.“
— Colin Ware, Information Visualization, 2004
o Important to understand how visual perception works
in order to effectively design visualizations
![Page 3: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/3.jpg)
The Eye
o The eye is not a camera!
o Better metaphor for vision: “dynamic and ongoing
construction project" — Healey, 1995
o Attention is selective (Filtering)
![Page 4: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/4.jpg)
The Eye
o Cameras
— Good optics
— Single focus, white balance, exposure
— “Full image capture“
o Eyes
— Relatively poor optics
— Constantly scanning (saccades)
— Constantly adjusting focus
— Constantly adapting
— Mental reconstruction of image
![Page 5: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/5.jpg)
The Eye – Edge detection
![Page 6: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/6.jpg)
The Eye – Edge detection
Activity decreasedActivity increased
![Page 7: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/7.jpg)
![Page 8: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/8.jpg)
![Page 9: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/9.jpg)
![Page 10: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/10.jpg)
![Page 11: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/11.jpg)
![Page 12: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/12.jpg)
![Page 13: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/13.jpg)
![Page 14: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/14.jpg)
![Page 15: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/15.jpg)
![Page 16: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/16.jpg)
![Page 17: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/17.jpg)
![Page 18: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/18.jpg)
The Eye – Edge detection
o Our visual system sees differences, not absolute values,
and is attracted to edges.
o Maximize the contrast with the background if the
outlines of shapes are important.
o Our visual system constructs surface colour based
largely on edge contrast information.
o We have higher contrast sensitivity in the luminance
than in the chrominance channel.
![Page 19: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/19.jpg)
The Eye – Relativity of perception
Weber’s Law: We judge based on relative, not absolute,
differences
![Page 20: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/20.jpg)
![Page 21: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/21.jpg)
![Page 22: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/22.jpg)
![Page 23: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/23.jpg)
![Page 24: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/24.jpg)
![Page 25: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/25.jpg)
![Page 26: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/26.jpg)
![Page 27: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/27.jpg)
Semantically Resonant Colour Assignments
Semantically-resonant colours improve speed on chart reading tasks compared to
a standard palette
![Page 28: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/28.jpg)
Stroop Effect
Stroop Effect: interference in the reaction time of a task
Green Red Blue Purple Blue Purple
![Page 29: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/29.jpg)
Stroop Effect
Stroop Effect: interference in the reaction time of a task
Green Red Blue Purple Blue Purple
Blue Purple Red Green Purple Green
![Page 30: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/30.jpg)
Stroop Effect
o brain's ability to recognize the colour of the word since
the brain reads words faster than it recognizes colours
o colour recognition as opposed to reading a word,
requires more attention
o recognizing colours is not an “automatic process" there
is hesitancy to respond; whereas, the brain
automatically understands the meaning of words as a
result of habitual reading
![Page 31: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/31.jpg)
Popout
![Page 32: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/32.jpg)
Popout
![Page 33: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/33.jpg)
Popout
o We can easily see objects that are different in colour
and shape, or that are in motion
o Use colour and shape sparingly to make the important
information pop out
![Page 34: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/34.jpg)
![Page 35: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/35.jpg)
![Page 36: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/36.jpg)
![Page 37: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/37.jpg)
![Page 38: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/38.jpg)
![Page 39: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/39.jpg)
![Page 40: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/40.jpg)
![Page 41: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/41.jpg)
![Page 42: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/42.jpg)
ä
![Page 43: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/43.jpg)
![Page 44: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/44.jpg)
![Page 45: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/45.jpg)
![Page 46: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/46.jpg)
![Page 47: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/47.jpg)
![Page 48: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/48.jpg)
![Page 49: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/49.jpg)
![Page 50: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/50.jpg)
![Page 51: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/51.jpg)
![Page 52: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/52.jpg)
![Page 53: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/53.jpg)
![Page 54: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/54.jpg)
![Page 55: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/55.jpg)
![Page 56: Vision, Perception and Cognition - GitHub Pages · o Important to understand how visual perception works in order to effectively design visualizations. The Eye o The eye is not a](https://reader033.vdocuments.us/reader033/viewer/2022060521/60504ac691b79b71394549a8/html5/thumbnails/56.jpg)