I590 Interactive Visual Analytics Week 3 Perception and Cognition - - PowerPoint PPT Presentation

▶
i590 interactive visual analytics
SMART_READER_LITE
LIVE PREVIEW

I590 Interactive Visual Analytics Week 3 Perception and Cognition - - PowerPoint PPT Presentation

Jul 14, 2023 255 likes •1.3k views

I590 Interactive Visual Analytics Week 3 Perception and Cognition D3 selections Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI Last week Last week Principles of Visual Integrity Last week Principles of Visual

slide-1
SLIDE 1

Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI

Week 3 Perception and Cognition D3 selections

I590 Interactive Visual Analytics

slide-2
SLIDE 2

Last week

slide-3
SLIDE 3

Last week

Principles of Visual Integrity

slide-4
SLIDE 4

Last week

Principles of Visual Integrity Use detailed and clear labeling to defeat graphical distor5ons

slide-5
SLIDE 5

Last week

Principles of Visual Integrity Use detailed and clear labeling to defeat graphical distor5ons “The representa5on of numbers, as physically measured on the surface of the graphic itself, should be directly propor5onal to the numerical quan55es represented”

slide-6
SLIDE 6

Last week

Principles of Visual Integrity Use detailed and clear labeling to defeat graphical distor5ons “The representa5on of numbers, as physically measured on the surface of the graphic itself, should be directly propor5onal to the numerical quan55es represented” Maximize data-ink ra5o

slide-7
SLIDE 7

Last week

Principles of Visual Integrity Use detailed and clear labeling to defeat graphical distor5ons “The representa5on of numbers, as physically measured on the surface of the graphic itself, should be directly propor5onal to the numerical quan55es represented” Maximize data-ink ra5o Avoid chartjunk*

slide-8
SLIDE 8

Last week

Principles of Visual Integrity Use detailed and clear labeling to defeat graphical distor5ons “The representa5on of numbers, as physically measured on the surface of the graphic itself, should be directly propor5onal to the numerical quan55es represented” Maximize data-ink ra5o Avoid chartjunk*

* Visual embellishment can in some cases improve memorability and engagement with the visualization

slide-9
SLIDE 9

This week

slide-10
SLIDE 10

This week

Fundamentals of Percep5on and Cogni5on

slide-11
SLIDE 11

This week

Fundamentals of Percep5on and Cogni5on Project 1

slide-12
SLIDE 12

Perception vs. Cognition

Based on a slide by Alex Lex

slide-13
SLIDE 13

Percep8on

Perception vs. Cognition

Based on a slide by Alex Lex

slide-14
SLIDE 14

Percep8on Iden5fica5on and interpreta5on of physical sensory input

Perception vs. Cognition

Based on a slide by Alex Lex

slide-15
SLIDE 15

Percep8on Iden5fica5on and interpreta5on of physical sensory input Shaped by memory and expecta5ons

Perception vs. Cognition

Based on a slide by Alex Lex

slide-16
SLIDE 16

Percep8on Iden5fica5on and interpreta5on of physical sensory input Shaped by memory and expecta5ons Cogni8on

Perception vs. Cognition

Based on a slide by Alex Lex

slide-17
SLIDE 17

Percep8on Iden5fica5on and interpreta5on of physical sensory input Shaped by memory and expecta5ons Cogni8on The processing of informa5on and applying knowledge

Perception vs. Cognition

Based on a slide by Alex Lex

slide-18
SLIDE 18

Percep8on Iden5fica5on and interpreta5on of physical sensory input Shaped by memory and expecta5ons Cogni8on The processing of informa5on and applying knowledge Percep8on: Hearing someone speak

Perception vs. Cognition

Based on a slide by Alex Lex

slide-19
SLIDE 19

Percep8on Iden5fica5on and interpreta5on of physical sensory input Shaped by memory and expecta5ons Cogni8on The processing of informa5on and applying knowledge Percep8on: Hearing someone speak Cogni8on: Understanding words, remembering informa5on

Perception vs. Cognition

Based on a slide by Alex Lex

slide-20
SLIDE 20

Perception vs. Cognition

Perception Cognition

Based on a slide by Alex Lex

slide-21
SLIDE 21

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex

Perception Cognition

Based on a slide by Alex Lex

slide-22
SLIDE 22

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene

Perception Cognition

Based on a slide by Alex Lex

slide-23
SLIDE 23

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)

Perception Cognition

Based on a slide by Alex Lex

slide-24
SLIDE 24

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical

Perception Cognition

Based on a slide by Alex Lex

slide-25
SLIDE 25

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception Cognition

Based on a slide by Alex Lex

slide-26
SLIDE 26

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on

Cognition

Based on a slide by Alex Lex

slide-27
SLIDE 27

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects

Cognition

Based on a slide by Alex Lex

slide-28
SLIDE 28

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paYerns

Cognition

Based on a slide by Alex Lex

slide-29
SLIDE 29

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paYerns

  • Learning new shapes

Cognition

Based on a slide by Alex Lex

slide-30
SLIDE 30

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paYerns

  • Learning new shapes
  • Problem solving

Cognition

Based on a slide by Alex Lex

slide-31
SLIDE 31

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paYerns

  • Learning new shapes
  • Problem solving
  • Deliberate

Cognition

Based on a slide by Alex Lex

slide-32
SLIDE 32

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paYerns

  • Learning new shapes
  • Problem solving
  • Deliberate
  • Consumes working memory

Cognition

Based on a slide by Alex Lex

slide-33
SLIDE 33

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • First stage of processing the visual scene
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Hierarchical
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paYerns

  • Learning new shapes
  • Problem solving
  • Deliberate
  • Consumes working memory
  • Requires a;en8on

Cognition

Based on a slide by Alex Lex

slide-34
SLIDE 34
slide-35
SLIDE 35

Perceptual hysteresis

slide-36
SLIDE 36
slide-37
SLIDE 37

The boundary between perception and cognition is hard to delineate

slide-38
SLIDE 38

The boundary between perception and cognition is hard to delineate

Perception -> cognition Cognition -> perception

slide-39
SLIDE 39

Faces in Things

slide-40
SLIDE 40

Take home point

What we see is influenced by visual features

  • ur brain perceive (boYom-up) and by what

we know beforehand (top-down)

slide-41
SLIDE 41

The human visual system

Illustration from Wikipedia

slide-42
SLIDE 42

The human eye

http://www.fortworthastro.com/images/eye_xsection_01.jpg

slide-43
SLIDE 43

The human eye

http://www.fortworthastro.com/images/eye_xsection_01.jpg

light electricity

slide-44
SLIDE 44

“Structure of the Mammalian Retina”, Ramon y Cajal Based on a slide by Alex Lex

slide-45
SLIDE 45

rods

~120 million

highly-sensi5ve to light not sensi5ve to color good for low-light vision

“Structure of the Mammalian Retina”, Ramon y Cajal Based on a slide by Alex Lex

slide-46
SLIDE 46

rods

~120 million

highly-sensi5ve to light not sensi5ve to color good for low-light vision

cones

~5-6 million sensi5ve to color

sharp vision

require good ligh5ng

“Structure of the Mammalian Retina”, Ramon y Cajal Based on a slide by Alex Lex

slide-47
SLIDE 47

ganglion cells rods

~120 million

highly-sensi5ve to light not sensi5ve to color good for low-light vision

cones

~5-6 million sensi5ve to color

sharp vision

require good ligh5ng

“Structure of the Mammalian Retina”, Ramon y Cajal Based on a slide by Alex Lex

slide-48
SLIDE 48

Wandell, “Foundations of Vision”

Electron microscopy of photoreceptors

slide-49
SLIDE 49

Cones types

HyperPhysics, Georgia State University

slide-50
SLIDE 50

Wikipedia

Cone distribution by pigment

slide-51
SLIDE 51

Wikipedia

Cone distribution by pigment

normal vision color blindness (red deficiency)

slide-52
SLIDE 52

Density of rods/cones

  • E. Goldstein, “Sensation and Perception”

Adapted from Lindsay & Norman, 1977 Via Miriah Meyer

slide-53
SLIDE 53
  • C. Ware

Visual Thinking for Design

slide-54
SLIDE 54
slide-55
SLIDE 55

Vision

Human vision does not work like a camera The eye makes a series of fixa8ons and saccades fixa8on: maintaining gaze over a single loca5on (200-600ms) saccade: movement between loca5ons 20-100ms

Based on a slide by Alex Lex

slide-56
SLIDE 56

Eye tracking

Michelle Borkin Via Alex Lex

slide-57
SLIDE 57

Retinal Ganglion Cells

Bear, Connors, Paradiso, “Neuroscience” Via Miriah Meyer

slide-58
SLIDE 58

Retinal Ganglion Cells

Wikipedia Via Miriah Meyer

slide-59
SLIDE 59

Miriah Meyer

slide-60
SLIDE 60

low activity from center and surround

Miriah Meyer

slide-61
SLIDE 61

low activity from center and surround activity increased (or decreased) at edge

Miriah Meyer

slide-62
SLIDE 62
slide-63
SLIDE 63

Annie Prud’homme-Généreux Via Miriah Meyer

slide-64
SLIDE 64
slide-65
SLIDE 65
slide-66
SLIDE 66

Cornsweet illusion

slide-67
SLIDE 67
slide-68
SLIDE 68

Via Miriah Meyer

slide-69
SLIDE 69

Via Miriah Meyer

slide-70
SLIDE 70

Visual perception is relative

slide-71
SLIDE 71

Visual perception is relative

Differences in color are rela5ve

slide-72
SLIDE 72

Visual perception is relative

Color interac5on

Wong 2010 Via Miriah Meyer

slide-73
SLIDE 73

Visual perception is relative

Differences in contrast is rela5ve

slide-74
SLIDE 74

Visual perception is relative

Differences in contrast is rela5ve

slide-75
SLIDE 75

Visual perception is relative

Sizes are rela5ve (Ames room)

slide-76
SLIDE 76

Take home point

Our visual system see differences, not absolute values, and is aYracted to edges.

Based on a slide by Miriah Meyer

slide-77
SLIDE 77

POPOUT

slide-78
SLIDE 78

POPOUT

slide-79
SLIDE 79

POPOUT

slide-80
SLIDE 80

POPOUT

slide-81
SLIDE 81

POPOUT

slide-82
SLIDE 82

Based on a slide by T. Munzner

slide-83
SLIDE 83

which side has the outlier?

slide-84
SLIDE 84

which side has the outlier?

  • C. Healey, 2007
slide-85
SLIDE 85

which side has the outlier?

  • C. Healey, 2007
slide-86
SLIDE 86

which side has the outlier?

  • C. Healey, 2007
slide-87
SLIDE 87

which side has the outlier?

  • C. Healey, 2007
slide-88
SLIDE 88

which side has the outlier?

  • C. Healey, 2007

conjunctions do not pop out;

use a single popout channel at a time to draw attention

slide-89
SLIDE 89

Popout / pre-attentive processing

  • Requires aYen5on, despite the name
  • Very fast at grabbing aYen5on (less than 200 milli

seconds)

  • Parallel processing, independent of the number of

distractors (compared to serial search)

  • Popout elements have to be salient compared to

surrounding

  • Elements that are a conjunc8on of mul5ple channels
  • fen do not pop out
slide-90
SLIDE 90

Popout channels

  • C. Ware

“Information Visualization”

slide-91
SLIDE 91

Popout channels

no popout

  • C. Ware

“Information Visualization”

slide-92
SLIDE 92

Conjunction popout? It depends…

slide-93
SLIDE 93
  • C. Ware

“Information Visualization”

slide-94
SLIDE 94

Semantic Depth of Field

  • C. Ware

“Information Visualization”

slide-95
SLIDE 95
  • R. Kosara

Semantic Depth of Field

slide-96
SLIDE 96

How does pre-a;en8ve processing work?

We don’t know for sure, but there are some theories:

https://www.csc.ncsu.edu/faculty/healey/PP/ index.html#Preattentive_Theory

slide-97
SLIDE 97

How does pre-a;en8ve processing work?

We don’t know for sure, but there are some theories:

https://www.csc.ncsu.edu/faculty/healey/PP/ index.html#Preattentive_Theory

slide-98
SLIDE 98

Take home point

We can easily see objects that are different in color and shape, or that are in mo5on

Based on slides by Miriah Meyer & Alex Lex

Visual features must be carefully designed. Conjunc5ons must be avoided, if popout is desired

slide-99
SLIDE 99

Take home point

We can easily see objects that are different in color and shape, or that are in mo5on

Based on slides by Miriah Meyer & Alex Lex

Use color and shape sparingly to make the important informa5on pop out Visual features must be carefully designed. Conjunc5ons must be avoided, if popout is desired

slide-100
SLIDE 100

Design critique

http://tinyurl.com/6mu8h63

slide-101
SLIDE 101

Design critique

http://tinyurl.com/6mu8h63

  • What is the visualiza5on

about?

  • What data is represented in

the visualiza5on? And how?

  • What are the interac5ons

used?

  • What ques5ons can we

answer with the visualiza5on?

  • Do you like the visualiza5on?
  • Are there any improvements

that can be made to the design?

slide-102
SLIDE 102

next class color perception gestalt principles

slide-103
SLIDE 103

Required reading

in Canvas: files/Visual thinking for design