Color Choices & Gestalt Principles
Transcript of Color Choices & Gestalt Principles
![Page 1: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/1.jpg)
Color Choices & Gestalt Principles
Stat/Engl 332
![Page 2: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/2.jpg)
Graphical Elements
• Points
• Lines
• Text
• Polygons
• Icons/Images
sometimes also called geoms
the basic building blocks of a chart
![Page 3: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/3.jpg)
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
![Page 4: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/4.jpg)
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
![Page 5: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/5.jpg)
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
![Page 6: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/6.jpg)
Color Blindness
http://colororacle.cartography.ch/
![Page 7: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/7.jpg)
• Similar colors close to each other
• contrasting colors on opposite sides
Hue as Colorwheel
![Page 8: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/8.jpg)
Picking Color Schemes
• Color schemes for maps: http://colorbrewer2.org/
• Picking Schemes for designs: http://colorschemedesigner.com/
![Page 9: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/9.jpg)
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
![Page 10: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/10.jpg)
Analogy & Contrast
![Page 11: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/11.jpg)
Color is sensitive to the background
• Why?
• Conclusion?
![Page 12: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/12.jpg)
Small vs Large
• Small objects or thin lines need more contrast than larger areas
![Page 13: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/13.jpg)
![Page 14: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/14.jpg)
Some SuggestionsNon-data elements should carry little visual weight:
![Page 15: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/15.jpg)
Some Suggestions
data components should be dominant and be seen easily :
![Page 16: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/16.jpg)
Rules of GestaltStat/Engl 332
![Page 17: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/17.jpg)
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 ...
![Page 18: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/18.jpg)
Perception & recognition of an object as a whole
The Dalmatian
![Page 19: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/19.jpg)
Experienced percept contains more information than sensory stimulus
![Page 20: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/20.jpg)
Perceptual experience pops forth and back between alternative interpretations
![Page 21: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/21.jpg)
Geometrical objects are recognized independently of rotation, translation, elastic deformation, lighting, texture
![Page 22: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/22.jpg)
Visual Field is interpreted according to
Proximity
Similarity
![Page 23: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/23.jpg)
Visual Field is interpreted according to
Proximity
Similarity
Closure
![Page 24: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/24.jpg)
Visual Field is interpreted according to
Continuity
Proximity
Similarity
Closure
![Page 25: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/25.jpg)
Visual Field is interpreted according to
Proximity
Similarity
Closure
Continuity
Connectedness
![Page 26: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/26.jpg)
Visual Field is interpreted according to
Proximity
Similarity
Closure
Continuity
Connectedness
Symmetry
![Page 27: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/27.jpg)
Human Perceptionand misperceptions
![Page 28: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/28.jpg)
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
![Page 29: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/29.jpg)
M.C. Escher Waterfall, 1961
![Page 30: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/30.jpg)
Rotating Snake
![Page 31: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/31.jpg)
•Anatomy is well understood
•Big gaps in understanding functionality
The Human Eye
![Page 32: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/32.jpg)
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
![Page 33: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/33.jpg)
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
![Page 34: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/34.jpg)
Perception
Emerging Circles
continuous re-structuring of sensory input
![Page 35: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/35.jpg)
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”
![Page 36: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/36.jpg)
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”
![Page 37: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/37.jpg)
Pre-attentive Tasks
Target Detection presence/absence (and identification) of target with unique features Boundary Detection boundary between two groups with common visual property
![Page 38: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/38.jpg)
Region Tracking: group of elements with unique features movingin time or space !
!
Counting & Estimation: approximation of #elements with unique visual features
![Page 39: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/39.jpg)
•Absence/Presence of Target
•Preattentive features: color,
Target Detection
Absent Present
shape
http://www.csc.ncsu.edu/faculty/healey/PP/
![Page 40: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/40.jpg)
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
![Page 41: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/41.jpg)
Hierarchy of Features
Interference is asymmetric:
Random color interferes with shape boundary
Combination of features is not pre-attentive
![Page 42: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/42.jpg)
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/
![Page 43: Color Choices & Gestalt Principles](https://reader035.fdocuments.in/reader035/viewer/2022081723/586a152c1a28ab123a8b5b13/html5/thumbnails/43.jpg)
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/