Visual Perception
Ware, C. “Information VIsualisation, Perception for Design”, Elsevier, 2021 Archambault, D. “Visual Analytics: an Introduction”, Swansea University, 2020
Kerren, A. “Information Visualisation: Perception”, Linnaeus Univerty, 2020
Copyright By PowCoder代写 加微信 powcoder
Visual perception
How the eye and mind work together so that we can perceive and interpret what we see, before we act on it
Perceptual model
Three levels to preceiving a scene:
Level 1: processing low-level properties (parallel) Level 2: pattern recognition (sequential)
Level 3: target-oriented search (sequential)
identification of objects (with the help of memory)
parallel processing: colour, texture, movement etc.
recognition of patterns, contours, regions
adapted from Ware (2021), p20
– rapid, parallel extraction of features
– e.g. edges, orientation, colour, texture, movement – bottom-up, data-driven
– pre-attentive, held very briefly
– slow, serial detection of patterns
– e.g. contours, regions
– combination of bottom-up and top-down
– needs attention, uses memory (working and long-term)
• Level 3:
– slow, serial identification of objects
– e.g. a handle to turn, a data point to focus on – related to action, purpose, concentration
– uses memory
Ware (2021), pg 21ff
Topics in Visual Perception
• Level 1 (bottom-up) – pre-attention
• Level 2 (bottom-up & top-down) – pattern identification
– Gestalt laws
• Level 3 (top-down) – object identification
• Interference between levels
Level 1: Pre-attention
Find the red circle
https://www.csc2.ncsu.edu/faculty/healey/PP/ Healy & Enns (2012), Attention and Visual Memory in Visualization and Computer Graphics, TVCG, 18(7)
Pre-attention experiments
• Stimulis:
– one unique target amongst several identical distractors
– the target represents a feature (or features) that is absent in the distractors
• Task:identifythetarget
• Data collected: response time
If the response time does not depend on the number of distractors, the feature is pre-attentive
Kerren, A. “Information Visualisation: Perception”, Linnaeus Univerty, 2020 (inspired by Hauser, 2005)
Identifying a single target amongst a set of distractors
Kerren, A. “Information Visualisation: Perception”, Linnaeus Univerty, 2020 (inspired by Hauser, 2005)
distractor
distractor
Healy & Enns (2012), Attention and Visual Memory in Visualization and Computer Graphics, TVCG, 18(7)
Level 1: Colour • Objectivemeasures
• the colour itself
– Saturation
• intensity of the colour • intense vs dull
– Lightness/Value • light vs dark
• varying amounts of black or white in the colour • Subjectiveassessment
– Brightness (Luminence?)
VALUE SATURATION
Human perception of ‘just noticeable difference’ implies a finite number of values
Archambault, D. “Visual Analytics: an Introduction”, Swansea Univerty, 2020
(a) same hue, different saturation
(b) same hue, different saturation, different value (c) cool hues and warm hues
Ware (2021), p127
Ware (2021), p111, adapted from D.Post, F.Greene, Color naming as a function of stimulus luminance (1985)
“Name the colour” experiment
Darkened room, computer monitor
210 different colours computationally generated, on black background
12 participants, daily for 10 days
Free-form text answers
Outlined regions show the colors given the same name with better than 75% probability.
Observations
• Only eight colours, plus white, consistently named
– green, yellow, orange, red, aqua, pink, purple, blue, white
• The pure monitor ‘red’ was named orange most of the time
• Data obtained with a black background; different results expected with white background
Ware (2021), p111, adapted from D.Post, F.Greene, Color naming as a function of stimulus luminance (1985)
Colour hues for encoding nominal data
Set 1 (left): red, green, yellow, blue, black, white
(the unique colors that mark the ends of the opponent color axes)
Set 2 (right): pink, cyan, gray, orange, brown, purple
Most common colour names in cross-cultural study (+cyan)
[Berlin&Kay, 1969]
Use all the colours in Set 1 before choosing any in Set 2
Ware (2021), p126
Ordered vs Categorical
Archambault, D. “Visual Analytics: an Introduction”, Swansea Univerty, 2020
• Less is more!
Some rules on colour
• Don’t use blue for thin lines, rather use it for large areas
• Use red and green in the center of the field of view
• Use black, white, yellow in the periphery
• For large regions, don’t use highly saturated colours
• Don’t use adjacent colours that vary in the amount of blue
• Use colour for grouping and to asssist search
• Use a neutral tone to encode the number 0
• Positive and negative numbers should be encoded with the saturation of contrary colours (e.g. red/green; purple/yellow; blue/orange)
• Errors in contrast can be avoided by drawing boundaries around selected areas
• Also: see ColorBrewer.org
Kerren, A. “Information Visualisation: Perception”, Linnaeus Univerty, 2020, inspired by J.Stasko
It is tempting to use the ‘Rainbow Colour Map’ for ordered data – forgetting that hue is not appropriate for representing order
R.Kosara, How The Rainbow Color Map Misleads, eagereyes, 2013
Better to use saturation of the same hue
Russell et. al (2016), Royal Society Open Science 3(2)
Beware of contrast!
Level 2: Pattern identification Level 2: ‘interim’ level using bottom-up and top-down processing
– bottom-up: uses the actual features that are physically perceived
– top-down: uses other contextual information – e.g. from the environment, from memory
Level 2: Gestalt laws
Rules describing how we see patterns in a visual display
In particular, how we see how visual objects form groups – proximity
– similarity
– connectedness
– continuity
– symmetry
– figure and ground – common fate
• Ware (2021) provides example design principles for each
Elements that are physically close together are perceptually grouped together
So: symbols representing related information should be placed together
Ware (2021), p186
Similarity
Similar elements tend be to be grouped together
So: use different colours to encode rows/columns in a grid data set
Ware (2021), p187
Connectedness
Elements connected by lines form groups
So: use lines to show relationships between objects
Ware (2021), p187
Continuity
We perceive elements as smooth and continuous (rather than with abrupt change in direction)
Consider continuity when showing overlapping objects
Ware (2021), p188
Symmetric elements tend to be grouped together
So: use symmetry to make pattern comparisons easier
Ware (2021), p189, 191
Contours with gaps tend to be perceptually ‘closed’
So: put related informaion in a closed contour – defined by line, colour or texture
Ware (2021), p191
Figure and Ground
Small areas tend to be seen as ‘figure’ Context may affect figure/ground interpretation
So: Use closure, symmetry, layout etc. to ensure objects will be perceived as figures, not ground.
Ware (2021), p195
Common Fate
Things that move together are grouped together
Common Fate
Things that move together are grouped together
Don’t use concurrent animation on unrelated objects
Level 3: Object identification
Top-down identification of objects Often led by a query, task or intention Supported by memory and context
Crossing the road
Which dog should I buy?
Candless, Information is Beautiful https://www.informationisbeautiful.net/visualizations/best-in-show-whats-the-top-data-dog/
Interaction between bottom-up and top-down processing
Interaction between bottom-up and top-down processing
Say out loud the font colour of the following words
The Stroop Effect
• The top-down processing (reading the words) interferes with the bottom-up processing (identifying the colours)
• Effect found to be reduced in young children learning to read, but increased in older children with dyslexia
• Level 1 (bottom-up) – pre-attention
• Level 2 (bottom-up & top-down) – pattern identification
– Gestalt laws
• Level 3 (top-down) – object identification
• Interference between levels
Visual Perception
Ware, C. “Information VIsualisation: Perception for Design”, Elsevier, 2021 Archambault, D. “Visual Analytics: an Introduction”, Swansea Univerty, 2020 Kerren, A. “Information Visualisation: Perception”, Linnaeus Univerty, 2020
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com