1. © Anselm Spoerri Lecture 6 Housekeeping –Final Project: Proposals due two weeks Human Computer Interaction – Recap –Heuristic Evaluation Assignment  Due Week 7 “User Interfaces and Visualization” – Review Information Visualization – Toolbox PerspectiveWall ConeTree

2. © Anselm Spoerri Human-Computer Interaction (HCI) - Recap Define Target User Community –Identify Usage Profiles Perform Task Analysis to ensure proper functionality –Define tasks and subtasks –Establish task frequencies of use –Matrix of users and tasks helpful Select Interaction Styles –Direct manipulation –Menu selection –Form fillin –Command language –Natural language  Blending of interaction styles need for diverse tasks and diverse users Select Evaluation Measures –Time to learn –Speed of performance for key benchmarks –Rate and nature of common user errors –Retention over time –Subjective satisfaction: free-form comments and feedback Create & Test Design Alternatives –Use a wide range of mock-ups

3. © Anselm Spoerri Prototyping - Recap

4. © Anselm Spoerri Recognize Diversity – Summary Usage Profiles Novice or First-Time Users –Use familiar vocabulary and offer few choices Knowledgeable Intermittent Users –Emphasize recognition instead of recall Expert Frequent Users –Seek to get work done quickly  Macros Interaction Styles Direct Manipulation  Novices Users Menu Selection  Novices and Intermittent Users Form Fillin  Intermittent and Expert Users Command Language  Expert Users Natural Language  Novices and Intermittent Users

5. © Anselm Spoerri Nielsen's Ten Usability Heuristics - Summary 1.Visibility of System Status 2.System Matches Real World 3.User Control and Freedom 4.Consistency and Standards 5.Error Prevention 6.Recognition rather than Recall 7.Flexibility and Efficiency of Use 8.Aesthetic and Minimalist Design 9.Help users Recognize, Diagnose, and Recover from Errors 10.Help and Documentation

6. © Anselm Spoerri Review: User-Centered Product Design High Concept Ethnographic Observation Prototype Anticipated Usage Profiles Use different Interaction Styles Scenario Development Participatory Design Software Development Expert Reviews Heuristic Evaluation Guidelines Review Consistency Inspection Cognitive Walkthrough Formal Usability Inspection Usability Testing Acceptance Testing Product Release Surveys Field Testing

7. © Anselm Spoerri Eight Golden Rules of Interface Design - Recap 1.Strive for Consistency 2.Enable frequent users to use Shortcuts 3.Informative Feedback 4.Design Dialogs to Yield Closure 5.Offer Error Prevention & Simple Error Handling 6.Permit Easy Reversal of Actions 7.Support Internal Locus of Control 8.Reduce Short-term Memory Load

8. © Anselm Spoerri User-Centered Design Methods Heuristic Evaluation –Quick and cheap –Suitable for early use in usability engineering lifecycle –Evaluate compliance with recognized usability principles (the "heuristics"). –Three to five evaluators: more  diminishing returns Nielsen's Ten Usability Heuristics 1.Visibility of system status 2.System matches the real world 3.User control and freedom 4.Consistency and standards 5.Error prevention 6.Recognition rather than recall 7.Flexibility and efficiency of use 8.Aesthetic and minimalist design 9.Help users recognize, diagnose, and recover from errors 10.Help and documentation  Find Flaws & Suggest Improvements

9. © Anselm Spoerri How to conduct Heuristic Evaluation Evaluator goes through the interface several times and inspects it Interface = List of Heuristics? Single individual will never be able to find all the usability problems. Different people find different usability problems Evaluation results  Written Report

10. © Anselm Spoerri Heuristic Evaluation Assignment Conduct Heuristic Evaluation Use Nielsen's 10 Heuristics and provided templatetemplate Write short report (4-5 pages) Due Week 7 Publish Report online and send me URL

11. © Anselm Spoerri User Interfaces and Visualization - by Marti Hearst Users have Fuzzy Understanding of their Information Need Information Access = Iterative Process User Interface should help users Formulate Queries Select Information Sources Understand Search Results Track Progress of Search

12. © Anselm Spoerri Shneiderman’s User Interface Principles Offer Informative Feedback –Show relationship between query and documents retrieved –Show relationships among retrieved documents –Show relationships between retrieved documents and metadata Reduce Working Memory Load –Browsable Information for –Search starting points (sources or topic lists) –Suggestions of related terms or metadata –Visual Search History: return to previous search strategies Provide Interfaces for Novices & Experts –Good user interface design provides intuitive bridges between the simple and the advanced interfaces.

13. © Anselm Spoerri Information Access Process - Starting Points Which collection / terms to choose? Vocabulary Problem  Search interfaces must provide good ways to get started “Testing Water” –Users start out with very short queries, inspect results, and then modify queries incrementally Starting points –Lists –Overviews –Automated source selection

14. © Anselm Spoerri Vector Space Retrieval Document = Set of Words Each Word = Dimension in Vector –After removing very common and rare words –Stemming  (retriev*, inform*, visual*, interact*) = 4D vector Each Word / Dimension Weighted based on Frequency “Inverse” = 1 / Frequency  The less frequent, the greater the weight Similarity of Documents = Angle between Vectors Two text passages similar if their vectors point in a similar direction

15. © Anselm Spoerri List of Retrieved Documents

16. © Anselm Spoerri Scatter/Gather - Automatically Derived Collection Overviews Topic 87: Criminal Actions Against Officers of Failed Financial Institutions

17. © Anselm Spoerri Document Visualization - Clustering

18. © Anselm Spoerri Document Visualization – Kohonen Maps

19. © Anselm Spoerri Document Visualization - ThemeView

20. © Anselm Spoerri Query Specification Shneiderman Interaction Styles: Command language, Form fillin, Menu selection, Direct manipulation, and Natural language. Query Formulation –Fields –Phrases –Proximity –Stemming

21. © Anselm Spoerri Boolean Queries OR AND Coordination Problem: which operator to choose? Most people find the basic Boolean syntax counter-intuitive. AND “implies” broadening (opposite true). OR “implies” narrowing (opposite true).

22. © Anselm Spoerri Boolean Queries – VQuery using Venn Diagrams

23. © Anselm Spoerri Boolean Queries – InfoCrystal - Interested in articles that mention “Visual” and “Information Retrieval.” Further, “Query Language” or “Human Factors” need to be mentioned. Boolean Query ?

24. © Anselm Spoerri InfoCrystal  Across Document Matching Interested in articles that mention “Human Factors” or “Visual.” Further, they should mention “Query Language” or “Information Retrieval.” How would you narrow this query?

25. © Anselm Spoerri TileBars – Within Document Matching

26. © Anselm Spoerri TileBars - What research is ongoing to prevent osteoporosis?

27. © Anselm Spoerri TileBars – Within Context Highlighting

28. © Anselm Spoerri Integrating Scanning, Selection, and Querying Cat-a-Cone −Better Representation of Category Space −Compact Representation of Retrieved Documents Cat-a-Cone = Cone Tree + WebBooks –Book Cover = Query responsible for producing retrieval results. –Book closed and selected, ConeTree shows categories within book pages. –User opens book, ConeTree shows categories on current page.

29. © Anselm Spoerri WebBook and WebForager Why “Book”? Familiar Metaphor?  Structure of Data: next, prev, cluster, small

30. © Anselm Spoerri Cat-a-Cone – Starting Search  Discovering Categories Contents of Entire Hierarchy can be overwhelming

31. © Anselm Spoerri Cat-a-Cone – Expand Category

32. © Anselm Spoerri Cat-a-Cone – Parts of hierarchy that (partially) match term

33. © Anselm Spoerri Cat-a-Cone – Viewing Retrieved Documents

34. © Anselm Spoerri Toward a InfoVis Toolbox – Problem Statement & Goal Scientific Visualization –Show abstractions, but based on physical space Information Visualization –Information does not have any obvious spatial mapping Fundamental Problem How to map non–spatial abstractions into effective visual form? Goal Use of computer-supported, interactive, visual representations of abstract data to amplify cognition

35. © Anselm Spoerri Data Types, Data Sets and Marks Date Types Quantitative (can perform arithmetics) Ordinal (obeys ordering relations) Nominal (equal or not equal to other values) Marks –Points (position, color, size) –Lines (location, length, width, color) –Areas (uniform / smoothed shading) –Volumes (resolution, translucency) Abstract Data Sets − Symbolic − Tabular − Networked − Hierarchical − Textual information

36. © Anselm Spoerri Human Visual System – Recap Visual System Detects CHANGES + PATTERNS Luminance Channel More Important than Color Stages of Visual Processing 1 Rapid Parallel Processing 2Slow Serial Goal-Directed Processing Pre-Attentive Features – Position – Color – Simple Shape = orientation, size – Motion – Depth Proximity Similarity Continuity SymmetryClosureFigure + Ground Gestalt Law Depth Cues − Occlusion − Relative Size − Motion Parallax − Binocular Disparity − Shape from Shading / Contour

37. © Anselm Spoerri Ranking of Visual Properties for Different Data Types QUANTITATIVE Position Length Angle Slope Area Volume Density Color Saturation Color Hue ORDINAL Position Density Color Saturation Color Hue Texture Connection Containment Length Angle NOMINAL Position Color Hue Texture Connection Containment Density Color Saturation Shape Length

38. © Anselm Spoerri Information Visualization – “Toolbox” Position Size Orientation Texture Shape Color Shading Depth Cues Surface Motion Stereo Proximity Similarity Continuity Connectedness Closure Containment Direct Manipulation Immediate Feedback Linked Displays Animate Shift of Focus Dynamic Sliders Semantic Zoom Focus+Context Details-on-Demand Output  Input Maximize Data-Ink Ratio Maximize Data Density Minimize Lie factor Perceptual Coding Interaction Information Density

39. © Anselm Spoerri Information Visualization – Design & Interaction

40. © Anselm Spoerri Interaction – Mappings + Timings Mapping Data to Visual Form 1.Variables Mapped to “Visual Display” 2.Variables Mapped to “Controls”  “Visual Display” and “Controls” Linked Interaction Responsiveness “0.1” second  Perception of Motion  Perception of Cause & Effect “1.0” second  Status Feedback “10” seconds  Point & click, parallel requests

41. © Anselm Spoerri Information Visualization – Design & Interaction

42. © Anselm Spoerri Perspective Wall Fisheye Distortion to Increase Information Density Download VideoDownload Video (30MB+ … will take a while) or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ and right click on “PerspectiveWall.avi” and save

43. © Anselm Spoerri PerspectiveWall PositionYes SizeYes Orientation Texture ShapeYes ColorYes Shading Depth CuesYes Surface Yes MotionYes Stereo ProximityYes SimilarityYes Continuity Connectedness Closure Containment Yes Direct ManipulationYes Immediate FeedbackYes Linked Displays Yes Logarithmic Shift of FocusYes Dynamic SlidersYes Semantic Zoom Focus+ContextYes Details-on-Demand Output  Input Perceptual Coding Interaction Data = Temporal / Linear

44. © Anselm Spoerri ConeTree – Hierarchy Visualization

45. © Anselm Spoerri ConeTree (cont.) Download VideoDownload Video (30MB+ … will take a while) or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ and right click on “ConeTree.avi” and save

46. © Anselm Spoerri ConeTree (cont.)

47. © Anselm Spoerri Hierarchy – Exponential Growth of Nodes Levels Base Width = B L - 1 Branching = 3

48. © Anselm Spoerri ConeTree (cont.) How to manage exponential growth of nodes?  Use 3D to “linearize” problem – width fixed  Use “logarithmic” animation of object or point of interest to create “Object Constancy” Time Location linear Logarithmic IN / OUT

49. © Anselm Spoerri ConeTree PositionYes SizeYes Orientation TextureYes Shape Yes ColorYes ShadingYes Depth CuesYes Surface MotionYes Stereo ProximityYes SimilarityYes Continuity ConnectednessYes Closure Containment Direct ManipulationYes Immediate FeedbackYes Linked Displays Yes Logarithmic Shift of FocusYes Dynamic Sliders Semantic ZoomYes Focus+ContextYes Details-on-DemandYes Output  Input Perceptual Coding Interaction Data = Hierarchy