1 / 44

Interactive User Interfaces in Information Visualization

CS-533C Reading Presentation. Interactive User Interfaces in Information Visualization. Quanzhen Geng (Master of Software Systems Program) March 3, 2003. 1. Human-Computer Interaction -- The Triple Agent Model. 2. Robertson, Card, and Mackinlay (1989).

marthadavis
Télécharger la présentation

Interactive User Interfaces in Information Visualization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS-533C Reading Presentation Interactive User Interfacesin Information Visualization Quanzhen Geng (Master of Software Systems Program) March 3, 2003 1

  2. Human-Computer Interaction-- The Triple Agent Model 2 Robertson, Card, and Mackinlay (1989)

  3. Interactive User Interfaces Design for Information Visualization • Goal: • Lower the cost of finding and accessing information • Techniques: • Cognitive Coprocessor Architecture • Dynamic Queries; Tight coupling of dynamic queries with Starfield Display • etc. 3

  4. What is Cognitive Coprocessor ? The Cognitive Coprocessor Architecture for Interactive User Interfaces -- Robertson, Card, and Mackinlay (1989) Definition • The Cognitive Coprocessor is a user interface architecture that supports: -- the triple agent model -- the addition of intelligent agents -- smooth interactive animation • It includes management of multiple asynchronous agents that operate with different time constants and need to interrupt and redirect each other’s work. 4 Robertson, Card, and Mackinlay (1989)

  5. Cognitive Coprocessor Architecture http://www.ics.uci.edu/~kobsa/courses/ICS280/notes/presentations/ 5

  6. Why Cognitive Coprocessor ? 6

  7. Implementations of Cognitive Coprocessor Information Workspaces: • A virtual environment for finding information and accessing it. Creating Workspaces: • Rooms System • Extend the desktop to multiple workspaces. • User can switch among multiple workspaces. 7

  8. Information Workspaces • Improving Rooms System • Objective: • Decrease the costs for performing information-intensive tasks, or, alternatively, to increase the scope of information that can be utilized for the same cost. • Method: • Large Workspaces -- Make the immediate workspace virtually larger • Agents – Delegate part of the workload to semi-autonomous agents • Real-Time Interaction – Maximize the interaction rates • Visual Abstractions – Speed assimilation and pattern detection 8

  9. UI Architecture • Several Problems • Multiple Agent Problem: How can system manage the interaction of multiple asynchronous agents. • Animation Problem: How can system provide smooth interactive animation • Interaction Problem: How can 3D widgets be designed and coupled to appropriate application behavior. • Viewpoint Movement Problem: How can the user changed the point of view rapidly and simply • Object Movement Problem: How can objects be easily moved about in a 3D space • Small Screen Space Problem: How can the dynamic properties of the system be utilized to provide the user with an adequately large work space. 9

  10. UI Architecture 10

  11. How Cognitive Coprocessor Works ? • Cognitive Coprocessor has • An animation loop and a scheduler for agents • An impedance matcher between the cognitive and perceptual information processing requirements of the user and the properties of these agents • 3 sorts of time constants • Perceptual processing time constant (0.1sec) • Immediate response time constant (1sec) • Unit task time constant (5~30sec) 11

  12. How Cognitive Coprocessor Works ?(contd.) • Perceptual processing time constant • Governor: reduce the quality to keep the frame rate. • Immediate response time constant • Agents provide status feedback at intervals no longer than this time constant • Immediate response animation • Unit task time constant • Time to complete a task • User can start the next request as soon as sufficient information has developed from the last request or even in parallel with it 12

  13. Interactive Objects • Basic building block in the Information Visualizer • Generalization of Rooms Buttons • 2D/3D appearance • Allow mouse-based input (press, rubout, check, flick) 13

  14. 3D Navigation and Manipulation • Doors • Walking metaphor • Point of interest logarithmic flight • Object of interest logarithmic manipulation 14

  15. Visual Abstractions • Hierarchical Structure -> Cone Tree • Linear Structure -> Perspective Wall • Continuous Data -> Data Sculpture • Spatial Data -> Office Floor plan • …………. -> ………….. 15

  16. Cone Tree 16

  17. Cone Trees 17 research.microsoft.com/~ggr/gi97.ppt

  18. Perspective Wall 18 research.microsoft.com/~ggr/gi97.ppt

  19. Hyperbolic Browser 19 research.microsoft.com/~ggr/gi97.ppt

  20. Example: 3D-Room (The Exploratory) 20 Robertson, Card, and Mackinlay (1989)

  21. 3D Navigation Task (Hallway) research.microsoft.com/~ggr/gi97.ppt 21

  22. 3D GUI for Web Browsing 22

  23. 3D GUI for Web Browsing http://research.microsoft.com/ui/TaskGallery/index.htm 23

  24. Web Forager http://research.microsoft.com/ui/TaskGallery/index.htm 24

  25. WebBook research.microsoft.com/~ggr/gi97.ppt 25

  26. 3D GUI for Desktop http://research.microsoft.com/ui/TaskGallery/index.htm 26

  27. SummaryCognitive Coprocesser & Information Visualizer Analysis Goals UI Artifacts COST STRUCTURE OF INFORMATION INFORMATION WORKSPACE ANIMATED GUI Access Costs Larger Workspace Denser Workspace 3D/Rooms Interactive Objects Cognitive Coprocessor Interaction Costs Highly Interactive INFORMATION VISUALIZATIONS Assimilation Costs Information Visualization research.microsoft.com/~ggr/gi97.ppt 27

  28. Dynamic Queries Definition • Visual Alternative to SQL for Querying databases Implementation • The input controls for the search are decided depending on data types and the values, • Examples are Buttons, Ratio Buttons, Simple sliders and Range Sliders etc. 28

  29. Dynamic Queries: Advantages • Users can “fly through data” by adjusting sliders • Novice: formulating query at command line leads to errors in syntax and understanding • Experts: interpretation of results can be easier (air traffic controllers, demographers, statisticians) 29

  30. Example: Home Finder ( Text ) 30 www.sims.berkeley.edu/courses/is247/ s02/lectures/waterson.ppt

  31. Examples: Periodic Table of the Elements Periodic Table of the ElementsAdjust properties with sliders on the bottom to highlight matching elements. 31 www.sims.berkeley.edu/courses/is247/ s02/lectures/waterson.ppt

  32. Examples DynaMapCervical cancer rates from 1950-1970 - modify year, state, demographics Unix Directory Exploration 32 www.sims.berkeley.edu/courses/is247/ s02/lectures/waterson.ppt

  33. Visual Information Seeking:Tight coupling of dynamic query filters with starfield display Ahlberg and Shneiderman ( ) • Dynamic Queries Filter:query parameters rapidly adjusted with slider, buttons, checkboxes etc. • Starfield Display:result sets are continuously available and support viewing of hundreds or thousands of items. Usually a 2D scatter plot. • Tight Coupling:query components are interrelated in ways that preserve display invariants and support progressive refinement. 33

  34. Tight Coupling Advantages: • Tight coupling reveals the software state and constrains the user from making erroneous actions • For example: if a user wants films before 1935 then only certain actors and directors are further selectable. • Tight coupling aspect: every output of query is a candidate for input of a another query • Helps in reducing screen clutter 34

  35. Tight Coupling (Contd.) Advantages: • Progressive refinement of query • Details on demand : idea of hypermedia • Click on the data points to get further information 35

  36. Example: Home Finder ( Map ) 36 www.sims.berkeley.edu/courses/is247/ s02/lectures/waterson.ppt

  37. Response of 18 Subjects using HomeFinder www.ics.uci.edu/~kobsa/courses/ICS280/notes/ presentations/Ahlberg-Shneiderman.ppt 37

  38. Example: FilmFinder 38

  39. Example: FilmFinder 39

  40. FilmFinder • Existing tools did not provide users with overview of data • Bad progressive refinement of existing tools* compared with FilmFinder * Microsoft Cinemania, Leonard Maltin’s Movie & Video Guide 40

  41. Examples Information Visualization and Exploration Environment (IVEE) Job to Skills matching 41 www.sims.berkeley.edu/courses/is247/ s02/lectures/waterson.ppt

  42. Advantages: Quick, easy, safe, & playful Good for novices & experts Excellent for exploration of very large data sets Dynamic Queries: Pros & Cons • Disadvantages: • Database management systems can’t handle the queries • Application specific programming • Simple queries only • So many controls… 42

  43. Dynamic Queries:Contributions to Interactive User Interfaces • Direct Manipulation • Supports browsing of databases by -rapid filtering -progressive refinement -continuous reformulation of goals -visual scanning to identify results 43

  44. Conclusions • There are several architectures designed for Interactive User Interfaces of InfoVis. • Each has its own specific area of usage • Choose UI architectures (techniques) based on Application tasks 44

More Related