Interactive User Interfaces in Information Visualization

1
Interactive User Interfacesin Information
Visualization
CS-533C Reading Presentation

• 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 others
  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 (530sec)

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 -gt Cone Tree
• Linear Structure -gt Perspective Wall
• Continuous Data -gt Data Sculpture
• Spatial Data -gt Office Floor
  plan
• . -gt ..

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
Summary Cognitive 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
Unix Directory Exploration

• DynaMapCervical cancer rates from 1950-1970 -
  modify year, state, demographics

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 Maltins 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
Dynamic Queries Pros Cons

• Advantages
• Quick, easy, safe, playful
• Good for novices experts
• Excellent for exploration of very large data sets

• Disadvantages
• Database management systems cant 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