64
What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design - Nominal Glyph design – representing quantity

Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Embed Size (px)

Citation preview

Page 1: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Visual Distinctness What is easy to find How to represent quantitity

Lessons from low-level vision Applications in Highlighting Icon (symbol) design - Nominal Glyph design – representing quantity

Page 2: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Spotfire product

Page 3: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Visual symbols

Page 4: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Architecture for visual thinking

Page 5: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Primitives of Perception (the graphemes).

The whole visual field is processed in parallel

This machinery tells us what kinds of information are easily distinguished

Popout effects (general attention) Segmentation effects (dividing up the

visual field)

Page 6: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 7: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Channel theory

Page 8: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Segmentation by Primitive Features

Page 9: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Orientation and Size(Gabor primitives)

Page 10: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Image segmentation based on texture

ResultingSegmentation

Vertical fat Gaborfilters respond moststrongly

Horizontal skinnyGabor filters respondmost strongly

Page 11: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Texturesfor Maps

Page 12: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

What is easy to find?

A priori salience Top down salience Knowledge

Page 13: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Pre-Attentive Processing

a

89739057092794057962976509829408028085080830802809850-802808567847298872ty458202094757720021789843890r455790456099272188897594797902855892594573979209

Page 14: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Color is Pre-Attentive (Pops out)

aa

897 90570927940579629765098294080280850808 0802809850-802808567847298872ty45820209475772002178984 890r45579045609927218889759479790285589259457 979209

33

33

Page 15: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Generic Pre-Attentive Experiment

a

3 6 12

Number of distractors

500

700

900 Number of irrelevant items varies

Pre-attentive 10 msec per item or better.

Triesman, A., and Gormican, S. Feature analysis in early vision: Evidence from search asymmetries. Psychological Review, 95(1) 15-48.

Page 16: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Color

Page 17: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 18: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Orientation

Page 19: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 20: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Motion

Page 21: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 22: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Size

Page 23: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 24: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Simple shading

Page 25: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 26: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Conjunction (does not pop out)

Page 27: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Semantic Depth of Field

Page 28: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 29: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Compound features (do not pop out)

Page 30: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 31: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Surrounded colors do not pop out

Page 32: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 33: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 34: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Laws of pre attentive display

Must stand out on some simple dimension color, simple shape = orientation, size motion, depth

Lessons for highlighting – one of each

Page 35: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Asymmetries

Page 36: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Blinking momentarily attracts attention

Lessons: Highlighting how to make information available to attention

A flying box leads attention

Using colorUsing underlining

Blinking momentarily attracts attention

Motion elicits an orienting response

Page 37: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

More on Conjunction (no pop)

Page 38: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Redundant coding

Page 39: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Pre-attentive conjunction

Page 40: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Conjunctions of motion and shape do pop out. (color also?)

McLeod, P., Driver, J. and Crisp, J. (1988) Visual search for a conjunction of movement and form is parallel. Nature 332, 154-155.

Driver, J., MacLeod, P. and Dienes, Z. (1992) Motion coherence and conjunction search: Implications for guided search theory. Perception and Psychophysics. 51, 1, 79-85.

Page 41: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 42: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

MEGraph: Experimental system

Allows for various topological range highlighting methods

Goal from 30 to 2000 nodes

MEGraph

Page 43: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Pre-Attentive Channels

Form (orientation/size) Color Simple motion/blinking Addition/numerosity (up to 3) Spatial, stereo depth, shading, position

Page 44: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Pre-Attentive Conjunctions

Stereo and color Color and motion Color and position Shape and position

In general: spatial location and some aspect of form

Page 45: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Pre-Attentive Lessons

Rapid visual search (10 msec/item) Easy to attend to Makes symbols distinct Based on simple visual attributes Faces, etc are not pre-attentive

Page 46: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Designing symbols

Page 47: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Perceptual Channels

Color (3) Shape (size, orient) Motion (2?) Texture (2++) Position (x,y)

Page 48: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Spatial Channels

Like interferes with like

Page 49: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Distortions: Size contrast effect

Page 50: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Orient contrast

Page 51: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Size contrast effects can cause errors in information display

Page 52: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Chris Weigle: orientation channels for info display

Page 53: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Mapping data to display variablesData glyphs

Position (2) Orientation (1) Size (spatial frequency) Motion (2)++ Blinking? Color (3)

Note we have the problem of heterogeneity – There is no good solution

Star glyphMethod

Page 54: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Starplot glyph

Page 55: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Spotfire product

Page 56: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 57: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 58: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Integral and Separable dimension (Garner)

Can we read display attributes Independently Holistically

Speeded classification task. Sort into two piles on one dimension or another

Page 59: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Separable

Integral

Motion Color

red-green yellow-blue

black-white red-green

x-size y-size

Color orientation

Page 60: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Lessons for Information Display

Orthogonality - use a different channel for a different type of information

If you need this use separable challenge

If you need to highlight by two properties use separable dimensions.

Page 61: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -
Page 62: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

The programmable filter

We can only look for patterns of simple features Conjunctions of shape, color cannot be

programmed for parallel search of field Conjunctions of depth/motion and color/shape can

be

Integral dimensions tend to be seen holistically cannot be separated

Separable dimensions tend to be seen separately

Page 63: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Searchlight Model of Attention

a

VisualSearch orMonitoringStrategy

EyeMovementControl

Useful VisualField of View

Page 64: Visual Distinctness What is easy to find How to represent quantitity Lessons from low-level vision Applications in Highlighting Icon (symbol) design -

Searchlight Properties

Size varies with data density Size varies with stress level Attention operators work within the

searchlight beam Attention is a tunable filter

Eye movements 3/sec – A series of saccades