Selected topics in Visualization, Perception, and Design

CSE 3541Matt Boggus

Topics

• Visualization– Visual display of information

• Perception– Interpretation of sensory information in order to

represent and understand the environment• Design– Industrial design (ergonomics + use)– Graphic design (appearance)

Visualization overview and tips

Tufte’s principles of graphical excellence

• Show the data• Induce the viewer to think about the substance of the data,

not the design• Avoid distorting the data• Present many numbers in a small space• Encourage the eye to compare different pieces of data• Reveal the data at several levels of detail, from a broad

overview to fine structure• Serve a purpose: description, exploration, tabulation, or

decoration• Be closely integrated with the statistical and verbal

description of a data set

Visualization vs. StatisticsAnscombe’s quartet

• Four datasets described by same linear model

Visualization vs. StatisticsAnscombe’s quartet

Visualizations depend on quality and size of the data

When to visualize data

• Uncertain of what the patterns in the data are

• Dataset is complex– Data maps– Time-series– Space-time narratives– Relational graphics

Don’t design to deceive

Magic and disinformation

• Magic (illusion-making) – Secrecy, deception, misdirection – Penn and Teller Explain Sleight of Hand

• Comedy – Unexpected information – Penn and Teller Explain the Saw Trick

• Visualization (truth-telling) – Insight from the opposite of illusion-making

Presentation advice

Magician tips• Never tell the audience

beforehand what you are going to do

• Never perform the same trick twice on the same evening

• Never give video to examine after the performance

Presenter tips• In the introduction, state

– What is the problem? – Why is it important? – How is the problem

addressed?

• To explain complex ideas or data, use the PGP method – Particular General Particular

• Give the audience handouts with material related to the presentation

Tips for magicians and presenters

• Analyze the details of your performance – Practice, practice, practice – Not so much to lose all spontaneity

• Show up early – Anticipate problems

• Finish early – Time for questions – Leave the audience wanting more

Understanding perception: color and visual attention

The Electromagnetic Spectrum

Identify the Fruit

The physics of Color

Color is a consequence of the perceptual representation of wavelength composition of light reaching eyes.

source

Wavelength-selective reflectance

Surface Reflectance

• Pigments: Substances that absorb light at some wave lengths and reflect light at others.

• Reflectance Curve: Proportion of light at different wavelengths that is reflected from a pigment.

Why Do We See Color the Way We Do?

• Historically, 2 competing theories:– Trichromatic Theory– Opponent Process Theory

• Both captured one aspect of the visual system

A false colored photograph of the foveae of 12 people with normal color vision that shows the relative distributions of short, middle and long wavelength cones. Note the large individual differences.

The Color Circle

For every wavelength, there is a complimentary wavelength that when mixed together produces the perception of white or gray. These can be represented at opposite positions on a color wheel.

Opponent Pairing-Afterimages

Fixate on the Black Dot for about 30 seconds.

Opponent Pairing:“Opposing Afterimages”

Now, notice how colors change!

Note how the afterimages are the complimentary colors of the adapting stimuli.

Opponent Process Theory

• White, Yellow and Red excite• Black, Green, and Blue inhibit

Photoreceptors – rods and cones

• Rods

• Highly sensitive

• All wavelengths

• Night vision

• Distributed

• Cones

• Less sensitive

• Wavelength specific

• Color vision

• Denser in center

Color Deficiency

The most common type of color blindness makes it difficult to distinguish red from green, though there is another rarer type that makes it difficult to distinguish blue from yellow.

Anomalous Trichromacy

Protanomaly: Spectrum of L-cones is shifted downward. Occurs in 1.3% of males and 0.02% of females.

Deuteranomaly: Spectrum of M-cones is shifted upward. Occurs in 5.0% of males and 0.35% of females.

Protanopia: L-cones are absent. Occurs in 1.3% of males and 0.02% of females.

Dichromacy

Deuteranopia: M-cones are absent. Occurs in 1.2% of males and 0.01% of females.

Tritanopia: S-cones are absent. Occurs in 0.001% of males and 0.03% of females.

For dichromats, there is a neutral point within the visible spectrum that is perceived as gray. The wavelength of this neutral point depends on the particular cone type that is absent.

Eye focus – saccades

• Eye can move faster than you perceive it

• Scanning – gathering information

• Reflexive – respond to new stimulus

• Predictive – following a moving object

Receptive fields

Color sampling

Color comparison

Cornsweet illusion

Which pair is easiest to compare?

Which bar has the most detail?

Color Summary

• Use neutral background colors

• Try to avoid fully saturated colors

• Do not use red-green to differentiate data

Visual attention

• How does the eye move when looking at an image?

• What cues is it drawn to?

• Examples in visual searches

Visual search example – (red;2)

Visual search example (horiz;vert)

Visual search example (horiz;vert)

Visual search example (crosses)

Multiple cues – luminance and shape (black X)

Multiple cues – orientation and color

Multiple cues – orientation and color

Multiple cues – orientation and color

Visual attention summary

• Selective attention test

• Want something to stand out?

• Then have it differ from its surroundings– Color (or brightness)– Size– Motion– Orientation– Shape (to a lesser degree)

The Design of Everyday Things

By: Donald A. Norman

Seven principles for design

• Use knowledge in the world and knowledge in the head

• Make things visible• Get the mappings right• Simplify the structure of tasks• Exploit the power of constraints• Design for error• When all else fails, standardize

Knowledge in the world – doors

Know by physics

Or not…

Know by design

Affordances

• Actions an object is obviously suited for

• Examples– Handle – grabbing, pulling– Button – pushing– Switch – toggling on and off– Dial – turning

Visibility

• http://www.youtube.com/watch?v=4faYWMi2oPk&t=5m12s

• By looking the user should know– Current state– Possible actions and result

• Design for function and usability before aesthetics

Mapping

• The relationship between two things– Controls and behavior

• Natural mappings can be– Physical analogy• Steering wheel• Recycle bin

– Cultural standard• Red to stop, green to go

Feedback

• Send information on the action done

• Lets the user know if the object is working properly

• “Visibility” update

Knowledge in the head vs. in the world

• How much information does the user need to memorize to use the object

• Good behavior despite full understanding– Information is in the world– Precision is not required– Natural constraints are present– Cultural constraints are present

Information in the world – pennies

http://www.indiana.edu/~p1013447/dictionary/pennytst.htm

Requiring precise information

Constraints

• Limit the ways in which something can be used

• Three words:– A mythical being, a name of a building material,

and a unit of time

– Rhymes with: “post”, “eel”, and “ear”

– Both conditions

Types of constraints

• Physical– Windshield only fits in one

place

• Semantic (situational meaning)– Rider sits facing forward,

protected by windshield

• Cultural– Light colors– Label readability

• Logical– All pieces used

MSPaint interface

http://www.fayette.k12.il.us/99/paint/paint.htm

Photoshop interface

http://www.photoshopessentials.com/basics/photoshop-cs4/interface/

To err is human

Error types

• Slips– Unconscious error– Right goal, wrong action

• Mistakes– Result from conscious decision– Right action, wrong goal

Slips

• Capture error– Frequently done activity replaces (captures) the

intended one– Counting – 8, 9, 10, Jack, Queen, King, …

• Description error– Intended action is similar to another– Laundry – thrown in the trash instead of the

basket

More slips

• Data-driven– External data replaces internal one– Phones – dial a hotel room number instead of the intended

phone number

• Associative action error– Freudian slip– Similar idea replaces another– Dining service – “Enjoy your meal”, respond kindly with “You

too”

Even more slips

• Loss-of-activation errors– Forgetting

• Mode errors– Same action, different result based on device’s

mode or state– Computers – Caps lock, vi

Dealing with errors

• Understand common causes and minimize them

• Allow reverse/undo actions

• Make it easy to detect errors

• Do not punish, but also do not ignore

Seven principles for design

• Use knowledge in the world and knowledge in the head

• Make things visible• Get the mappings right• Simplify the structure of tasks• Exploit the power of constraints• Design for error• When all else fails, standardize