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/