CS376 Introduction

30 October 2008Information DesignScott Klemmerstanford hci group / cs147http://cs147.stanford.eduOverviewPerception and InformationVisualizationCollaborationColor: Edward TufteIMAGE REMOVED

3While it is certainly true that hues have a physical order via their wavelength, and that every kindergardner knows the rainbow ordering, our visual system has a very difficult time treating hue in an ordered way. As we see in this image, it is clear that each area is *different*, but none of the areas have an intuitive relationship between each other. Where is above ground? Where is below? Whats the highest point? These questions are hard to answer. (Saturation as a cue is nearly impossible to handle.)

This is how most computer scientist would design a map.

This is supposed to convey height above sea level.Color: Edward TufteIMAGE REMOVED

4Color sets that vary primarily by luminance are much easier for us to order. This image uses two color sets: browns for above ground, blues for below. The questions I mentioned before are now much easier to answer. The much more muted colors also much easier to read the information.

Cartographers have been doing this for 2000 years.

The key is to know: under water or not under water? Then, how far for each case? I perception system cant use hue for how much! But, we can use intensity. As I go deeper, the color gets darker. Intensity is a great axis for presenting quantitative information.Color (Java L&F)

Six color semantic schemeClean, consistent lookEasy on eyes (mostly gray)5Same Java look & feel guidelines book

Everything in Java is from 6 colors

Primary colors are all purple and secondary colors are all gray.

When highlighted they have color when not highlighted they have gray.

6Set of Axis.

Chronicle film schema is cute, but can never remember how good this is. If you have the entire scale and they are ordered it makes sense.

E-bays is even worse. Depending on how many items you have sold you get a different star. Can anybody tell me why the ordering? Totally random.

A more effective way is to have the entire scale with it partly filled in (3 stars filled in, 2 stars emptied). Stars superior to numbers since I can see this pre-attentively very quickly without having to read & think. If you gave me 1000 movie backgrounds, you could quickly see which ones were good.How to get color rightDesign in grayscale firstKeep luminance values from grayscale when moving to color

7Proportion and Scale

Kevin Mullet and Darrell Sano, Designing Visual Interfaces8Note that while size and other cues provide for quantitative comparison, color (even luminance) only provides for ordering.If the goal is contrast along any of these axes, make it distinct!

Forms of visual coding. What can we notice very quickly:size, intensity, orientation, texture, shape, position in space.

Take advantage of these variables to present information.Pridefully Obvious Presentation

9I just wanted to figure out what sunglasses you sell!

Marks of Typographic Style

http://www.adobe.com/type/topics/info5.html

LigaturesUpper and lower case numbers10Tips & tricks to make type look good:

Capitals only appropriate for the beginning of sentences. Use small capitals if you want it to read smoothly. Can still read it and see there is something different. (HTML small tag lets you do this) see fs crashing into each other. Good type faces (in print & books) have letters properly designed to go together (fi, fl, ff) numbers come in upper & lower case. Upper cases numbers are like all CAPS. Hard to read. More variation in lower case (some acenders & decenders). Lower case numbers also called old style

Proper QuotesDistinguishing open from close makes reading easierTags in HTML have open and close, e.g., as opposed to |html|Spanish has open and close exclamation, question mark, e.g., hay caramba!, que pasa?Quotes have open and close too

Quotes in HTMLLeft Double Quotation Right Double Quotation Left Single Quotation Right Single Quotation 11Two vertical bars are NOT quotes. They are inch marks!

Key is that quotes have open & close. You get the hint it is the beginning or end.

12Scan of a well typeset book. Umberto Ecos ?

Plenty of line space, but not double space.

Good use of roman and italic version of the face. Character talking to himself is in italics.

Beginning of chapter has the first few words in small caps. Common in good typeset magazines & books.

Lower case numbers.

Lots of white space around the edge. Easier to read (less distracted by what is behind the book). Also dont curve things near the spine.

Tend to be 75-80 characters a line in well typeset books (printing in IE might give you 150 characters / line you have to move your head to read it).Some Starting PointsGather materials you find successfulCould be from a very different domainGood artists borrow, great artists steal - PicassoInclude visual design professionals in the iterative design cycle13Much of picassos paintings came from stealing the design of African masks.14

1415Challenger Disaster

1 of 13 pages of material faxed to NASA by Morton Thiokol15Breaks up the damage into many types, doesnt include temperature.16Challenger Disaster

1 of 13 pages of material faxed to NASA by Morton Thiokol16Shows only two of the launches (SRM 15 and SRM 22) where there were problems with blow-by..In both cases there were problems, but the problems were worse in SRM 15 Conclusion shouldnt launch at low temps (faulty what about the rest of the data? What about things besides blow-by?)Point should always be careful to include evidence of failures *and* successes... The differences are the important part!

17Challenger DisasterE. Tufte, pp. 46-47 , Visual Explanations

17Problems: chartjunkOrder the o-ring problems by temperatureShow both problems and non-problemsExtend the scale to make the point that the launch was much colder than all the previous launches18Challenger Disaster

Redrawn by E. Tufte, p. 49 , Visual Explanations1819Functions of visualizationsCommunicate information to othersMake a pointTell a storyMake decisions Support analysis and reasoningAnswer a questionOne image = One diagnosis To explore and discover; encourage creativityLook at things in a new wayThe purpose of computing is insight, not numbers [R. Hamming]Inspire

19John Tukey, EDA, p. viforce us to notice what we never expected to see

20The Purpose of Data Visualization is to Help People Think and Communicate20Basics of info. viz.Overview firstZoom and filterDetails on command

(Shneiderman)22Gulfs of Execution & EvaluationReal world(Interactions)Conceptual model(Goals)Evaluation ExecutionGulfsNorman 198622As simple as moving as pointing your finger to a target.Example execution:Manipulating a robot through a textual commandsManipulating a robot through a telemanipulator

Example of evaluationa set of data point shown as a table with 2 column?: are they correlated?a graph showing the same data points are they correlated?

But also can lead to error:Reading bearing on a non mercator projection,False alignment,

23Gulf of EvaluationReal world:

Conceptual model:x,y correlated?EvaluationGulf

2324Gulf of EvaluationReal world:

Conceptual model:x,y correlated?EvaluationGulf

2425Gulf of EvaluationReal world:

Conceptual model:x,y correlated?EvaluationGulfr = -.292526Gulf of ExecutionReal world

Conceptual model:Draw a rectangle

ExecutionGulfMove 90 30Rotate 35Pen down2627Gulf of ExecutionReal world

ExecutionGulf

Conceptual model:Draw a rectangle

2728DataConceptualmodelEvaluation ExecutionVisualizationRepresentationManipulationVisualization userVisualization designerVisualization: A Double Gulf?28Not in control of the Evaluation and Execution, but the correct pick for the representation and Manipulation can reduce the both gulf of Evaluation and Execution.Previous lecture on the evaluationEfficientAccurateWhat about the executiongrasp better understandingQuery the modelComputeSearch answer

29DataEvaluationRepresentation

x,ycorrelated?Visualization userVisualization designerBad visualization?2930DataEvaluationRepresentation

r = -.29x,ycorrelated?Visualization userVisualization designerBetter Visualization?3031Route Maps

Overlaid RouteSketched RouteAgrawala and Stolte, Rendering Effective Route Maps, SIGGRAPH 2001Find cognitive and perceptual principles Optimize the visualization according to these principles3132Matthew Ericson, NY Times

2004 presidential election3233

Matthew Ericson, NY Times2004 presidential election3334

2004 presidential electionhttp://www-personal.umich.edu/~mejn/election/3435From Cartography, Dent

3536From Cartography, Dent

36Map scaled to airline fares37

3738

Phan et al. 20053839

Minard (1861)39Describes Napoleons March to Moscow in The War of 1812Drawn in 1861 by Charles Joseph Minard.

Combination of a map and a time series. Five variables are plotted: location, time, sizeand temperature (Tufte includes direction).

Beginning at the left of the map is Polish-Russian border near the Neiman River. TheThick band shows the number of soldiers in the army.

Napolean started with 422,000 men in June of 1812; 100,000 reached Moscow in September 1812;

Temperature vs. time is shown in the graph on the bottom. The highest temperature is0 and it goes to -30. The time runs from October on the right to December on the left.

The crossing of the Berezina River was a particular disaster.

Image from http://www.edwardtufte.com/tufte/minardText paraphrased from Tufte, VDQI, p 40.

40Dynamic Queries

TimeSearcher: Hochheiser and Shneiderman 200140The Future: CollaborationMany Eyes17 visualization typesAnyone can upload a data setAnyone can create visualization

Chart10.79271406450.62830479450.71636462460.85139039180.42690561690.08962586080.03104350870.54463086410.37728676350.32727481520.4553625851

XY

Sheet1XY0.400.820.210.020.390.240.710.710.400.050.550.620.570.910.030.850.930.080.640.590.410.44

Sheet10.79271406450.62830479450.71636462460.85139039180.42690561690.08962586080.03104350870.54463086410.37728676350.32727481520.4553625851

XY

Sheet2

Sheet3

Chart10.79271406450.62830479450.71636462460.85139039180.42690561690.08962586080.03104350870.54463086410.37728676350.32727481520.4553625851

XY

Sheet1XY0.400.820.210.020.390.240.710.710.400.050.550.620.570.910.030.850.930.080.640.590.410.44

Sheet10.79271406450.62830479450.71636462460.85139039180.42690561690.08962586080.03104350870.54463086410.37728676350.32727481520.4553625851

XY

Sheet2

Sheet3