Visual Perception and Cognition. One Simple Model of Perceptual Processing Three stage process ▫ Parallel extraction of low-level properties of scene.

Visual Perception and Cognition

UNCOne Simple Model of PerceptualProcessing

• Three stage process▫Parallel extraction of low-level properties of scene▫Pattern perception▫Sequential goal-directed processing

Stage 1

Stage 2

Stage 3 Early, parallel

detection of color, texture, shape, spatial attributes

Dividing visual field into regionsand simplepatterns

Holding objects in working memory bydemands of active attention

UNC

How many 3’s

Watch this space and tell me how many 3’s you see…

(1 second)

UNC

How many 3’s1281768756138976546984506985604982826762980985845822450985645894509845098094358590910302099059595957725646750506789045678845789809821677654876364908560912949686

UNC

How many 3’sAnswer?

Ready to try again?

UNC

How many 3’s1281768756138976546984506985604982826762980985845822450985645894509845098094358590910302099059595957725646750506789045678845789809821677654876364908560912949686

UNC

How many 3’sWhat 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?

UNC

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.

UNC

UNC

UNC

• Ready for next one?

UNC

UNC

• 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.

UNC

UNC

UNC

UNC

UNC

UNC

UNC

• 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).

UNCControlled Study: Position vs Area/Angle

Figure 3. Graphs from position-angle experiment.

UNC

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

UNC

Design criteria: Effectiveness

• Faster to interpret• More distinctions• Fewer errors

0 1 2 3 4 5 6 7

This?

Or this?

UNC

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

UNC

Which Properties are Appropriate for Which Information Types?

Final Take Aways

UNCRankings: Encoding quantitative data

Cleveland & McGill 1984, adapted from Spence 2006

UNC

Human Perception of Color

UNCCIE updated:

CIELAB (print)CIELUV (display)

UNC

Contrast

• Important for fg-bg colors to differ in brightness

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

UNC

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.

UNC

Color is Critical…

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

UNC

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.

UNC

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), 827-834. doi:10.2224/sbp.2007.35.6.827).

UNC

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

UNCOrdinal 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

UNC

Color for Sequences (continuous)

Can you order these (low->hi)

UNC

Possible Color Sequences

Gray scale Single sequencepart spectral scale

Full spectral scale Single sequencesingle hue scale

Double-endedmultiple hue scale

UNCColor as Scale + Luminance• Isoluminance Color

Display (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)

UNC

• Here’s VisCheck on my Isolum image

UNC

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.

• 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).

UNC

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

UNC

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▫Colorblind folks ▫print on different devices▫photocopying

UNC

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▫Mono▫Complement▫Triad▫Analogic▫Accented analogic

UNC

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. ▫Saves to your personal library (mykuler)▫Explores/searches yours/worlds themes▫Create theme from colormap or from your

image

UNC

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

UNC

UNC

UNC

• 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?

UNC

UNC

• 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?