Color Choices &
Gestalt Principles
Stat/Engl 332
Graphical Elements
the basic building blocks of a chart
• Points
• Lines
• Text
• Polygons
• Icons/Images
sometimes also called geoms
Attributes / Aesthetics
Attributes depend on the type of a geometric object
• Points:
•
•
•
size, color, glyph, hue, saturation, ...
Lines:
width, color, angle, line type, ...
Areas:
colors, shading, ...
Text:
font, size, color, ...
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/
Hue as Colorwheel
• Similar colors close to each other
• contrasting colors on opposite sides
Picking Color Schemes
• Color schemes for maps:
http://colorbrewer2.org/
• Picking Schemes for designs:
http://colorschemedesigner.com/
Analogy and Contrast
Maureen Stone, 2006
• Contrast and analogy are the principles
that define color design: • Contrasting colors are different, analogous
colors are similar. • Contrast draws attention, analogy groups.
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 Suggestions
Non-data elements should
carry little visual weight:
Some Suggestions
data components should be
dominant and be seen easily :
Rules of Gestalt
Stat/Engl 332
Gestalt describes the ...
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”
The Dalmatian
Perception &
recognition of
an object as a
whole
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
Proximity
Similarity
Closure
Continuity
Visual Field is interpreted according to
Proximity
Similarity
Closure
Continuity
Connectedness
Visual Field is interpreted according to
Proximity
Similarity
Closure
Continuity
Connectedness
Symmetry
Human Perception
and misperceptions
Resources used:
•Christopher Healey: • Preattentive Processing, http://www.csc.ncsu.edu/faculty/healey/PP/index.html
!
!
•Michael Bach: • Optical Illusions,
• http://www.michaelbach.de/ot/
M.C. Escher
Waterfall, 1961
Rotating
Snake
The Human Eye
•Anatomy is well understood
•Big gaps in understanding functionality
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
Perception
perception 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
continuous re-structuring
of sensory input
Emerging Circles
Attention Selection
Two 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 moving
in time or space
!
!
Counting & Estimation:
approximation of #elements with unique visual
features
Target Detection
•Absence/Presence of Target
•Preattentive features: color, shape
Absent
Present
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 Blindness
Interruption (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 Blindness
Interruption (Blink, Eye Saccade, Blank Screen) makes
significant changes “invisible” - until attention is focused
directly on the object
http://cognitrn.psych.indiana.edu/CogsciSoftware/ChangeBlindness/