Visual Perception and Cognition

One Simple Model of Perceptual Processing Three stage process ▫ Parallel extraction of low-level properties of scene ▫ Pattern perception ▫ Sequential goal-directed processing Stage 1Stage 2Stage 3 Early, parallel detection of color, texture, shape, spatial attributes Dividing visual field into regions and simple patterns Holding objects in working memory by demands of active attention

How many 3’s Watch this space and tell me how many 3’s you see… (1 second)

How many 3’s

How many 3’s Answer? Ready to try again?

How many 3’s

How many 3’s What about now? Do you have the correct answer? So, pop-outs (pre-attentive selection) helps us with this task. What else could help us with this task? Can you think of other types of tasks that pre-attentive recognition could help us with?

Differing Amounts of “pop-out” Task: for the next two slides, you will see two squares. Your job is to see how quickly you can pick out the square containing the red circle.

Ready for next one?

Good Job. For the next slides your job is to pick out the two groupings. Each square contains two groups (which have common features). The two groups can be separated by a line splitting the square into two rectangles. Raise your hand when you believe you know the answer.

So, you were likely best at this task when groups differed by both color and shape. Still not bad when differed by just one attribute (color or shape—which was easier because it a better pre-attentive cue?). Not so good when difference was mixture of color and shape (i.e. red squares and blue circles versus blue squares and red circles).

Controlled Study: Position vs Area/Angle Figure 3. Graphs from position-angle experiment.

How can we make use of this? Using this information we can propose some basic guidelines…. For instance the best way is position or adjacent bar chart Best practices with bar charts

Design criteria: Effectiveness Faster to interpret More distinctions Fewer errors This? Or this?

Sensory vs. Arbitrary Symbols Sensory: ▫ Understanding without training ▫ Resistance to instructional bias ▫ Sensory immediacy  Hard-wired and fast ▫ Cross-cultural Validity Arbitrary ▫ Hard to learn ▫ Easy to forget ▫ Embedded in culture and applications

Which Properties are Appropriate for Which Information Types? Final Take Aways

Rankings: Encoding quantitative data Cleveland & McGill 1984, adapted from Spence 2006

Human Perception of Color

CIE updated: CIELAB (print) CIELUV (display)

Contrast Important for fg-bg colors to differ in brightness Hello, here is some text. Can you read what it says?

Chromatic Color is Irrelevant… To perceiving object shapes To perceiving layout of objects in space To perceiving how objects are moving Therefore, to much of modern life Many people go much of their life without realizing they are color blind.

Color is Critical… To help us break camouflage To judge the condition of objects (food) To determine material types Extremely useful for coding information

Implications Color perception is relative We are sensitive to small differences- hence need sixteen million colors when driving computer displays Not sensitive to absolute values- hence we can only use less than 10 or 12 colors for coding Brad’s view ▫ Can use successfully for labeling small number of categorical data (12 or less). ▫ Can in certain constrained cases be utilized as continuous scale (isoluminance example). But must be careful here; often not used properly in this case.

Gender Differences for Color? Number of colors men perceive vs women? ▫ No difference (millions) Number of colors used in describing objects? How fast one call recall name (label) of color? ▫ Women are superior (more, faster) than men (Arthur, H., Johnson, G., & Young, A. (2007). Gender differences and color: Content and emotion of written descriptions. Social Behavior and Personality, 35(6), doi: /sbp ).Arthur, H., Johnson, G., & Young, A. (2007). Gender differences and color: Content and emotion of written descriptions. Social Behavior and Personality, 35(6), doi: /sbp ).

Color for Categories Can different colors be used for categories of nominal variables? ▫ Yes ▫ Ware’s suggestion: 12 colors  red, green, yellow, blue, black, white, pink, cyan, gray, orange, brown, purple

Ordinal data Principles ▫Order: ordered values should be represented by perceptually-ordered colors ▫Separation: significantly different levels should be represented by distinguishable colors ▫Many good choices can be derived from “strips” through perceptually uniform color spaces (grey scale, heated object scale, etc). ▫Luminance: good for showing form ▫Many hues: useful for showing readable values

Color for Sequences (continuous) Can you order these (low->hi)

Possible Color Sequences Gray scaleSingle sequence part spectral scale Full spectral scaleSingle sequence single hue scale Double-ended multiple hue scale

Color as Scale + Luminance Isoluminance Color Display (Hemminger).Hemminger Studies use of color vs luminance for showing two dimensions of finding (anatomical structure versus cancer signal) on map. What’s obvious shortcoming with this visualization? (story)

Here’s VisCheck on my Isolum image

Colorblind and Color Scales Vischeck by Bob Dougherty and Alex Wade. Allows you to simulate what a colorblind person would see when viewing your image or website. Vischeck Daltonize (part of vischeck) will correct (suggest) alternative color scheme so colorblind person can appreciate detail in image (switch Red/Green use to other hues). Daltonize

Choosing Color Scales for Interfaces Types of color scales ▫ Continuous/Interval Data use continuous color scale (mono/divergent) ▫ Categorical Data use labeling/qualitative color scale

Color Scales Color Brewer Tool developed by Cynthia Brewer for GIS maps, is very helpful for picking safe continuous/discrete scales, and the number of colors in scales. She avoids uses saturated colors, and developed diverging color scales. Safe means OK for Color Brewer Tool ▫ Colorblind folks ▫ print on different devices ▫ photocopying

Color Schemes Color Scheme Designer by Petr Stanicek. Allows you to easily visualize and modify/compare color scheme choices for several common (designer recommended) color palettes for interfaces Color Scheme Designer ▫ Mono ▫ Complement ▫ Triad ▫ Analogic ▫ Accented analogic

Color Themes Adobe’s Kuler tool. Social media tool allowing you to save and share your color theme schemes, and to search and see others as well.Kuler ▫ Saves to your personal library (mykuler) ▫ Explores/searches yours/worlds themes ▫ Create theme from colormap or from your image

Color Scheme Takeaways Consider CUT-DDV framework when choosing color scheme. Make conscious choice of type, number of levels, color, transparency, etc. Use freely available tools to help design and test colors for your visualization; try several alternatives schemes Check it for safe use

Absolute number of disability, does this inform? If number is proportional to population is it interesting? How well does the separate symbol (wheelchair) which varies in size to show quantity, work? How well does the combination of this symbol (wheelchair) work in conjunction with quantitative variable for number of people with disability?

How effective is the color for showing distance to the Mississippi river? Could we leave it out? Show river with more emphasis and depend on map information to visually show correlation to location of river?