selected topics in visualization, perception, and design cse 3541 matt boggus
TRANSCRIPT
![Page 1: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/1.jpg)
Selected topics in Visualization, Perception, and Design
CSE 3541Matt Boggus
![Page 2: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/2.jpg)
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)
![Page 3: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/3.jpg)
Visualization overview and tips
![Page 4: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/4.jpg)
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
![Page 5: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/5.jpg)
Visualization vs. StatisticsAnscombe’s quartet
• Four datasets described by same linear model
![Page 6: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/6.jpg)
Visualization vs. StatisticsAnscombe’s quartet
![Page 7: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/7.jpg)
Visualizations depend on quality and size of the data
![Page 8: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/8.jpg)
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
![Page 9: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/9.jpg)
Don’t design to deceive
![Page 10: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/10.jpg)
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
![Page 11: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/11.jpg)
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
![Page 12: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/12.jpg)
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
![Page 13: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/13.jpg)
Understanding perception: color and visual attention
![Page 14: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/14.jpg)
The Electromagnetic Spectrum
![Page 15: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/15.jpg)
Identify the Fruit
![Page 16: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/16.jpg)
The physics of Color
Color is a consequence of the perceptual representation of wavelength composition of light reaching eyes.
source
Wavelength-selective reflectance
![Page 17: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/17.jpg)
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.
![Page 18: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/18.jpg)
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
![Page 19: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/19.jpg)
![Page 20: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/20.jpg)
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.
![Page 21: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/21.jpg)
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.
![Page 22: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/22.jpg)
Opponent Pairing-Afterimages
Fixate on the Black Dot for about 30 seconds.
![Page 23: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/23.jpg)
Opponent Pairing:“Opposing Afterimages”
Now, notice how colors change!
Note how the afterimages are the complimentary colors of the adapting stimuli.
![Page 24: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/24.jpg)
Opponent Process Theory
• White, Yellow and Red excite• Black, Green, and Blue inhibit
![Page 25: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/25.jpg)
Photoreceptors – rods and cones
• Rods
• Highly sensitive
• All wavelengths
• Night vision
• Distributed
• Cones
• Less sensitive
• Wavelength specific
• Color vision
• Denser in center
![Page 26: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/26.jpg)
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.
![Page 27: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/27.jpg)
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.
![Page 28: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/28.jpg)
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.
![Page 29: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/29.jpg)
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.
![Page 30: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/30.jpg)
Eye focus – saccades
• Eye can move faster than you perceive it
• Scanning – gathering information
• Reflexive – respond to new stimulus
• Predictive – following a moving object
![Page 31: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/31.jpg)
Receptive fields
![Page 32: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/32.jpg)
Color sampling
![Page 33: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/33.jpg)
Color comparison
![Page 34: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/34.jpg)
Cornsweet illusion
![Page 35: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/35.jpg)
Which pair is easiest to compare?
![Page 36: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/36.jpg)
Which bar has the most detail?
![Page 37: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/37.jpg)
Color Summary
• Use neutral background colors
• Try to avoid fully saturated colors
• Do not use red-green to differentiate data
![Page 38: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/38.jpg)
Visual attention
• How does the eye move when looking at an image?
• What cues is it drawn to?
• Examples in visual searches
![Page 39: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/39.jpg)
Visual search example – (red;2)
![Page 40: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/40.jpg)
Visual search example (horiz;vert)
![Page 41: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/41.jpg)
Visual search example (horiz;vert)
![Page 42: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/42.jpg)
Visual search example (crosses)
![Page 43: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/43.jpg)
Multiple cues – luminance and shape (black X)
![Page 44: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/44.jpg)
Multiple cues – orientation and color
![Page 45: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/45.jpg)
Multiple cues – orientation and color
![Page 46: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/46.jpg)
Multiple cues – orientation and color
![Page 47: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/47.jpg)
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)
![Page 48: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/48.jpg)
The Design of Everyday Things
By: Donald A. Norman
![Page 49: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/49.jpg)
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
![Page 50: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/50.jpg)
Knowledge in the world – doors
![Page 51: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/51.jpg)
Know by physics
![Page 52: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/52.jpg)
Or not…
![Page 53: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/53.jpg)
Know by design
![Page 54: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/54.jpg)
Affordances
• Actions an object is obviously suited for
• Examples– Handle – grabbing, pulling– Button – pushing– Switch – toggling on and off– Dial – turning
![Page 55: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/55.jpg)
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
![Page 56: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/56.jpg)
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
![Page 57: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/57.jpg)
Feedback
• Send information on the action done
• Lets the user know if the object is working properly
• “Visibility” update
![Page 58: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/58.jpg)
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
![Page 59: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/59.jpg)
Information in the world – pennies
http://www.indiana.edu/~p1013447/dictionary/pennytst.htm
![Page 60: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/60.jpg)
Requiring precise information
![Page 61: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/61.jpg)
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
![Page 62: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/62.jpg)
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
![Page 63: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/63.jpg)
MSPaint interface
http://www.fayette.k12.il.us/99/paint/paint.htm
![Page 64: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/64.jpg)
Photoshop interface
http://www.photoshopessentials.com/basics/photoshop-cs4/interface/
![Page 65: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/65.jpg)
To err is human
![Page 66: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/66.jpg)
Error types
• Slips– Unconscious error– Right goal, wrong action
• Mistakes– Result from conscious decision– Right action, wrong goal
![Page 67: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/67.jpg)
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
![Page 68: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/68.jpg)
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”
![Page 69: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/69.jpg)
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
![Page 70: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/70.jpg)
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
![Page 71: Selected topics in Visualization, Perception, and Design CSE 3541 Matt Boggus](https://reader036.vdocuments.site/reader036/viewer/2022062716/56649e015503460f94aeacc4/html5/thumbnails/71.jpg)
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