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 ?
System Goal Techniques
Large workspace to reduce access cost More screen space -gt Rooms Denser screen space -gt Animation, 3D
Offload work to agents Search -gt search agents Organizing -gt clustering agents Interacting -gt Interactive Objects
Maximize real-time interaction rates Rapid interaction, Tune to human constants -gt Cognitive Coprocessor scheduler and Governor
Visual abstraction to speed pattern detection Information Visualizations Hierarchical structure -gt Cone Tree Linear structure -gt Perspective Wall Continuous data -gt Data Sculpture Spatial data -gt Office Floor Plan
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
Problem Solution
Multiple Agent Problem Cognitive coprocessor scheduler
Animation Problem Cognitive coprocessor scheduler and Governor
Interaction Problem Interactive objects
Viewpoint Movement Problem Point of interest logarithmic flier
Object Movement Problem Object of Interest logarithmic manipulator
Small Screen Problem 3D/Rooms and 3D visualization
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