INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Information Visualization SMD157 Human-Computer Interaction Fall 2003 Dec-1-03 SMD157, Information Visualization 1 L Overview What is information visualization? What do we need to do? Guidelines for design of information seeking applications The human visual system Perception plus the Gestalt principles Coding of data Dec-1-03 SMD157, Information Visualization 2 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET What is Information Visualization? Dec-1-03 SMD157, Information Visualization 3 L 1
Information versus Scientific Visualization Dec-1-03 SMD157, Information Visualization 4 L 5 L Why Information Visualization? Comprehension Context Interaction Patterns Dec-1-03 SMD157, Information Visualization INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET What Do We Need to Do Shneiderman s Abstract Tasks Dec-1-03 SMD157, Information Visualization 6 L 2
What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Graphical Fisheyes Dec-1-03 SMD157, Information Visualization 7 L What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Dec-1-03 SMD157, Information Visualization 8 L What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Dec-1-03 SMD157, Information Visualization 9 L 3
What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Dec-1-03 SMD157, Information Visualization 10 L What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Dec-1-03 SMD157, Information Visualization 11 L What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Dec-1-03 SMD157, Information Visualization 12 L 4
What do we need to do? Overview Zoom Filter Details-ondemand Relate History Extract Visage Dec-1-03 SMD157, Information Visualization 13 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Guidelines for Designing Information Seeking Applications Dec-1-03 SMD157, Information Visualization 14 L Guidelines Visualization is not always the best solution. User tasks must be supported. Three dimensions are not necessarily better than two. Navigation and zooming do not replace filtering. The graphic method should depend on the data. Multiple views should be coordinated. Test your designs with users. Dec-1-03 SMD157, Information Visualization 15 L 5
Visualization Is Not Always the Best Solution Dedicated procedures are: - Faster - Less error prone Use visualization when: - User goals are less well-defined. - Good algorithms are lacking - The user needs to explore the data Dec-1-03 SMD157, Information Visualization 16 L User Tasks Must Be Supported Specific support is better than general tools. Example, comparing two directories Dec-1-03 SMD157, Information Visualization 17 L Three Dimensions Are Not Necessarily Better Than Two Pros: - Extra continuous data dimension - Easier to separate coincident points Cons: - Increased navigation time - Occlusion - Judging size difficult Dec-1-03 SMD157, Information Visualization 18 L 6
Two Studies Using Three Dimensions Network Visualization, Ware and Franck Hierarchical Visualization, Wiss and Carr Dec-1-03 SMD157, Information Visualization 19 L Networks and 3D Compared four conditions - Static 2D view - 3D view, stereo perspective, static - 3D view, mono, head-coupled perspective - 3D view, stereo, head-coupled perspective Test to compare error rates in determining node connectivity Random networks, random pairs Dec-1-03 SMD157, Information Visualization 20 L Sample Task Are the two red nodes connected? Dec-1-03 SMD157, Information Visualization 21 L 7
Experiment Results Static, 2D Stereo 3D Head-coupled, mono 3D Head-coupled, stereo 3D Dec-1-03 SMD157, Information Visualization 22 L 3D Networks, Analysis The networks were random; this may not transfer to real networks. The 2D view was static; zooming, filtering, and selective highlighting may have given different results. Navigation was head-coupled, manipulating controls may affect the results. Still, it seems that head-coupled, stereo viewing helps people cope with visual complexity. Dec-1-03 SMD157, Information Visualization 23 L Hierarchies and 3D Three 3D hierarchical visualizations: - Information Landscape - Cam Tree - Information Cube Three task types: - Search (Zoom task based) - Count (Relate task based, parent-child) - Compare (Overview task based) Dec-1-03 SMD157, Information Visualization 24 L 8
Hierarchies and 3D, Results 250 Time to Complete 50 Successful Tasks 200 40 150 30 100 20 50 10 0 0 Search Count Compare Search Count Compare Info Land Cam Tree Info Land Cam Tree Info Cube Info Cube Dec-1-03 SMD157, Information Visualization 25 L Hierarchies and 3D, Analysis Navigation time overriding factor - Task-based navigation support vital Occlusion contributes to errors and disorientation - Overview very important Study too short to comment on learning - Participants were still learning during the study. A good 2D visualization would have allowed doing the tasks by inspection. Dec-1-03 SMD157, Information Visualization 26 L Navigation and Zooming Do Not Replace Filtering Filtering - Reduces data to be considered - Helps for studying items that are not adjacent - Supports logical identification of records Navigation and Zooming do not support: - Reduction on non-adjacent data - Logical identification Dec-1-03 SMD157, Information Visualization 27 L 9
The Graphic Method Should Depend on the Data 1-Dimensional - program source code - wrapped lines 2- Dimensional - geographic data, floor plans - maps,... 3-Dimensional - volume data in the real world - needs slicing, transparency, and multiple views Multi-dimensional - most data bases - dynamic queries with a 2D or 3D representation Temporal - animation (transitory) - Users need control for: + Speed + Step-by-step + Start and end points - time lines Hierarchical - budgets - trees Networks - communications networks - node-link diagrams Dec-1-03 SMD157, Information Visualization 28 L 1D, Source Code, SeeSoft SeeSoft Dec-1-03 SMD157, Information Visualization 29 L 2-Dimensional Dec-1-03 SMD157, Information Visualization 30 L 10
3-Dimensional Special color coding Slicing Dec-1-03 SMD157, Information Visualization Visible Human 31 L 32 L 33 L Temporal Data - LifeLines Dec-1-03 SMD157, Information Visualization Multi-Dimensional Dec-1-03 SMD157, Information Visualization 11
Hierarchical Directory Browsers Dec-1-03 SMD157, Information Visualization 34 L Networks, SeeNet3D Dec-1-03 SMD157, Information Visualization 35 L Multiple Views Should Be Coordinated Users need context to be maintained Should be based on the data and not graphics Snap Together Viz Dec-1-03 SMD157, Information Visualization 36 L 12
Test Your Designs with Users There is little hard design knowledge about visualization. The existing knowledge is primarily from: - Laboratory settings - Novice use Best results are obtained with something tailored to your users and their tasks. Dec-1-03 SMD157, Information Visualization 37 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET The Human Visual System Dec-1-03 SMD157, Information Visualization 38 L Components of the System Three stage processing - The eye - 1 st stage mental processing - 2 nd stage mental processing Early Processing for contour, color, texture, and spatial cues. Perception for: action spatial layout Motor output, long-term motor memory Long-term object memory Object identification Natural language Visual working subsystem memory Dec-1-03 SMD157, Information Visualization 39 L 13
Characteristics of the Eye Two areas of vision - Central (fovea) + narrow field (.5-2 ), sharp, adapted for detail - Edges + wide field (perhaps 200 ), fuzzy, adapted for motion Central focus always in motion (move-fixate-move) Uses differential processing - Method to adapt to a wide variety of light, color,... Dec-1-03 SMD157, Information Visualization 40 L Characteristics of Processing Centers 1 st Stage - Operates in parallel - Extract environmental features such as: + Color + texture + contour + 2 nd Stage - Largely sequential - 2 parallel subsystems + Motor control + Language Dec-1-03 SMD157, Information Visualization 41 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Perception, plus the Gestalt Principles We see with our minds, not our eyes! Dec-1-03 SMD157, Information Visualization 42 L 14
Pre-Attentive Processing Information that pops out must: - Use pre-attentive processing - Otherwise, one must think about it and this takes time Attributes must be processed early - Form, color, motion, position Time to process is independent of number of irrelevant objects (distracters). Dec-1-03 SMD157, Information Visualization 43 L Pre-Attentive Processing, Example Search for the 3 s 8658972698469726897643589226598655453124685397 8658972698469726897643589226598655453124685397 Dec-1-03 SMD157, Information Visualization 44 L Pre-Attentive Attributes, Details Form - Line orientation - Line length - Line width - Deviation from collinear lines - Size - Curvature - Spatial grouping - Added marks - Number of group symbols Color - Hue - Intensity Motion - Flicker - Direction Spatial Position - 2D position - Stereoscopic depth - Convex/concave shape from shading Dec-1-03 SMD157, Information Visualization 45 L 15
Gestalt Principles Pragnanz: - Structure is seen as simply as possible. Proximity: - Nearby objects tend to be grouped. Similarity: - Similar items tend to be grouped. Closure: - Nearby contours tend to be united. Continuation: - Grouping tends to occur along simple curves. Common fate: - Elements that move together tend to be grouped. Familiarity: - The familiar or meaningful tends to be grouped. Dec-1-03 SMD157, Information Visualization 46 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Coding of Data Dec-1-03 SMD157, Information Visualization 47 L Three Types of Data Nominal (= or, e.g., apples, oranges, pears) Ordinal (< relation, e.g., 1st, 2nd,...) - Ordinal Time Quantitative (can do arithmetic) - Spatial - Geographical - Time Dec-1-03 SMD157, Information Visualization 48 L 16
Visual Structures for Data Presentation Spatial substrate - Up to three dimensions Position encoding techniques - Composition (orthogonal placement, the scatter plot) - Alignment - Folding (SeeSoft) - Recursion (e.g., the desktop metaphor) - Overloading (multiple plots in the same space, tiling) Dec-1-03 SMD157, Information Visualization 49 L Composition Dec-1-03 SMD157, Information Visualization 50 L Alignment Dec-1-03 SMD157, Information Visualization 51 L 17
Folding in SeeSoft Dec-1-03 SMD157, Information Visualization 52 L Recursion Dec-1-03 SMD157, Information Visualization 53 L Overloading Dec-1-03 SMD157, Information Visualization 54 L 18
Visual Structures Marks - Points, lines, areas, volumes Graphical attributes of the marks - Position (spatial) Extent - Size - Gray Scale Limited Extent,Differential - Orientation - Color Differential - Texture - Shape Dec-1-03 SMD157, Information Visualization 55 L Effectiveness of Graphical Attributes Attribute Quantitative Ordinal Nominal Position + + + Size + + + Gray scale o + - Orientation o o + Color o o + Texture o o + Shape - - + Dec-1-03 SMD157, Information Visualization 56 L Attribute Qualities Position - X, Y are strongest - Z interacts with size Size - Reasonable differences limit number of categories - Small differences can be perceived if adjacent and the same shape. Dec-1-03 SMD157, Information Visualization 57 L 19
Attribute Qualities Gray scale - Hard to perceive many discrete steps (about 4 max.) - Interactions with background make absolute value perception difficult - Small differences are however relatively easy to detect Dec-1-03 SMD157, Information Visualization 58 L Attribute Qualities, Color Subject to interference - Blue X and box are the same color - Blue+red causes focus problems People can recognize about 12 distinct colors These colors are culturally independent Summary - Especially good for categories white black red green yellow yellow green X X blue brown pink purple orange gray Dec-1-03 SMD157, Information Visualization 59 L Attribute Qualities Orientation - Rotation can express values - Perception of absolute difference limited to about 45 + higher for adjacent symbols - Perception tends to blend areas of nearly identical adjacent symbols Texture - Best adapted to comparisons - Contrast/Intensity can give some absolute values - Similar adjacent areas blend Shape - No nature mapping to value - Useful for nominal data with many values Dec-1-03 SMD157, Information Visualization 60 L 20
Questions? Dec-1-03 SMD157, Information Visualization 61 L References Card, S., Mackinlay, J., and Shneiderman, B. eds. Readings in Information Visualization Using Vision to Think, Morgan Kaufmann, 1999, ISBN 1-55860- 533-9. Wiss, U. & Carr, D. An empirical study of task support in 3D information visualizations, Proceedings IEEE Conference on Information Visualization (IV 99), 392-399. (http://www.ida.liu.se/~davca/postscript/3visstudy.pdf) Carr, D., "Guidelines for Designing Information Visualization Applications", Proceedings of ECUE'99, Stockholm, Sweden, December 1-3, 1999. (http://www.ida.liu.se/~davca/postscript/vizguidelines.pdf) Ware & Franck, Evaluating stereo and motion cues for visualizing information nets in three dimensions; ACM Trans. Graph. 15, 2, Apr. 1996), 121-140. Ware, Information Visualization: Perception for Design; Morgan Kaufmann, 2000, ISBN 1-55860-511-8. Dec-1-03 SMD157, Information Visualization 62 L 21