Upload
trantruc
View
248
Download
0
Embed Size (px)
Citation preview
Color Choices & Gestalt Principles
Stat/Engl 332
Graphical Elements
• Points
• Lines
• Text
• Polygons
• Icons/Images
sometimes also called geoms
the basic building blocks of a chart
Attributes / Aesthetics
• Points: size, color, glyph, hue, saturation, ...
• Lines: width, color, angle, line type, ...
• Areas: colors, shading, ...
• Text: font, size, color, ...
Attributes depend on the type of a geometric object
Color Choices
“...avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm.” Envisioning Information, Edward Tufte, Graphics Press, 1990
Color Choices
“...avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm.” Envisioning Information, Edward Tufte, Graphics Press, 1990
Color Blindness
http://colororacle.cartography.ch/
• Similar colors close to each other
• contrasting colors on opposite sides
Hue as Colorwheel
Picking Color Schemes
• Color schemes for maps: http://colorbrewer2.org/
• Picking Schemes for designs: http://colorschemedesigner.com/
Analogy and Contrast
• Contrast and analogy are the principles that define color design:
• Contrasting colors are different, analogous colors are similar.
• Contrast draws attention, analogy groups.
Maureen Stone, 2006
Analogy & Contrast
Color is sensitive to the background
• Why?
• Conclusion?
Small vs Large
• Small objects or thin lines need more contrast than larger areas
Some SuggestionsNon-data elements should carry little visual weight:
Some Suggestions
data components should be dominant and be seen easily :
Rules of GestaltStat/Engl 332
Form-forming capability of our senses: visual recognition of figures and whole forms instead of collection of simple objects:
“The whole is more than the sum of its parts”
Gestalt describes the ...
Perception & recognition of an object as a whole
The Dalmatian
Experienced percept contains more information than sensory stimulus
Perceptual experience pops forth and back between alternative interpretations
Geometrical objects are recognized independently of rotation, translation, elastic deformation, lighting, texture
Visual Field is interpreted according to
Proximity
Similarity
Visual Field is interpreted according to
Proximity
Similarity
Closure
Visual Field is interpreted according to
Continuity
Proximity
Similarity
Closure
Visual Field is interpreted according to
Proximity
Similarity
Closure
Continuity
Connectedness
Visual Field is interpreted according to
Proximity
Similarity
Closure
Continuity
Connectedness
Symmetry
Human Perceptionand misperceptions
Resources used:•Christopher Healey:
• Preattentive Processing,
!
!
•Michael Bach:
• Optical Illusions,
• http://www.michaelbach.de/ot/
http://www.csc.ncsu.edu/faculty/healey/PP/index.html
M.C. Escher Waterfall, 1961
Rotating Snake
•Anatomy is well understood
•Big gaps in understanding functionality
The Human Eye
Light-sensitive Cells
Cones (7 million): color-sensitive, concentrated in Fovea (high acuity area, cover area of thumbnail at arm’s length distance) !
Rods (127 million): highly sensitive, cover back area of retina, detect sudden flashes and movements
Perceptionperception of a complex scene involves (unconscious) pattern of:
fixations, eye is held (fairly) still (250-500 msec),
saccades, eye moves fovea to a new part of the scene (30-40 msec) initiation of eye movement needs approx 200 msec
Perception
Emerging Circles
continuous re-structuring of sensory input
Attention SelectionTwo Stages: pre-attentive
unlimited capacity, across entire visual field attentive
limited capacity, deals with few items at a time !
items passing from first to second stage are “selected”
Pre-attentive Processes
• limited set of visual properties
• detected rapidly (< 200-250 ms) and accurately
• use of low-level visual system
• recognition precedes focused attention: “pre-attentive”
Pre-attentive Tasks
Target Detection presence/absence (and identification) of target with unique features Boundary Detection boundary between two groups with common visual property
Region Tracking: group of elements with unique features movingin time or space !
!
Counting & Estimation: approximation of #elements with unique visual features
•Absence/Presence of Target
•Preattentive features: color,
Target Detection
Absent Present
shape
http://www.csc.ncsu.edu/faculty/healey/PP/
Preattentive Features
line orientation, length, width, size, curvature, number, intersection, closure, colour (hue), intensity, flicker, direction of motion, stereoscopic depth, 3D depth cues, 3D orientation, lighting direction, texture properties,... combination of pre-attentive features is usually not pre-attentively detectable !
features have hierarchy, e.g. color > shape
Hierarchy of Features
Interference is asymmetric:
Random color interferes with shape boundary
Combination of features is not pre-attentive
Change BlindnessInterruption (Blink, Eye Saccade, Blank Screen) makes significant changes “invisible” - until attention is focused directly on the object http://cognitrn.psych.indiana.edu/CogsciSoftware/ChangeBlindness/
Change BlindnessInterruption (Blink, Eye Saccade, Blank Screen) makes significant changes “invisible” - until attention is focused directly on the object http://cognitrn.psych.indiana.edu/CogsciSoftware/ChangeBlindness/