Interaction in InfovisAn Overview

Prepared bySoha Makady

1

Toward a Deeper Understanding of the Role of Interaction in Information Visualization

Ji Soo Yi et al.

IEEE Transactions on Visualization and Computer Graphics, November/December 2007

2

Why is interaction Important?

• Without interaction, an infovis technique becomes a static image

• As the data set grows, static images become hard to read

3

Objective?

• Survey current interaction techniques

• Connect user objectives with the interaction techniques that accomplish them

• If the user wants to achieve some goal, he would know which interaction technique to use

4

Identified Categories

An interaction can help the user …

• Select

• Explore

• Reconfigure

• Encode

• Abstract/Elaborate

• Filter

• Connect

5

1. Select

• To: Mark something as interesting

• Helps with– Too many data items

– Representation changes

6

1. Select - Example

7

Placemarks for UofC

2. Explore

• To: Show me something else• Examples

– Panning: Moves the camera across a scene• Demo: Google maps

– Address: 2500 University Dr NW University of Calgary

– Direct Walk: Moves from one position to another by interaction

• Demo: //www.visualthesaurus.com/– Get– Take

8

3. Reconfigure

• To: Show me a different arrangement• Examples:

– Baseline adjustment

9

3. Reconfigure• Examples:

– Spatial Shift operation*

10

Hidden bars

* http://www.cs.cmu.edu/~sage/sdmwalk1.html

3. Reconfigure• Jitter: Displacing overlapping records

11

Points represent 150 values

4. Encode

• To: Show me a different arrangement• Can be done through color, orientation, size

encoding (and other techniques)• Example*: Color encoding

12* http://www.macrofocus.com/public/products/infoscope/tutorial/parallel/

Different attributes

Attributes for a certain object

4. Encode• Example: Size Encoding

13

Sales of coffee

5. Abstract/Elaborate

• To: Show me more/less detail• Example: Details on demand technique

14* Focus+context display and navigation techniques for enhancing radial, space-filling hierarchy visualizations. Stasko, J.; Zhang, E.. InfoVis 2000

6. Filter• To: Show me something conditionally• Example*: Items not matching a condition are

hidden

15* M. Wattenberg and J. Kriss, "Designing for Social Data Analysis"IEEE Transactions on Visualization and Computer Graphics, 2006

Years

Number of names

6. Filter• Example*: Items not matching a condition are

shown differently

16* R. Spence and L. Tweedie, "The Attribute Explorer: information synthesis via exploration," Interacting with Computers 1998.

7. Connect• To: Show me related items• Examples:

– Visual Thesaurus (previously categorized as Explore)– Brushing*

17

Discussion - 1

• Do we have rigid categories for interactions?

• Are undo/redo interaction techniques (to explore), Or usability requirements?

18

A framework of Interaction Costs in Information Visualization

Heidi Lam

IEEE Transactions on Visualization and Computer Graphics, November/December 2008

19

Background

• The Gulf of Execution– Describes the gap between a user's goal for

action and the means to execute that goal

• The Gulf of Evaluation– Describes the degree to which the

system/artifact provide representations that can be directly perceived and interpreted by the user

20

Execution – Evaluation Cycle*

21

UserGoalsPhysical

System

Gulfof

Execution

Gulfof

Evaluation

Norman’s Seven Stages of ActionGoals

What wewant to happen

Evaluation of the interpretationswith what we expected to happen

Interpreting the perception accordingto our expectations

Perceiving the stateof the world

An intention to actso as to achieve the goal

The actual sequence of actionsthat we plan to do

The physical execution of that action sequence

Physical System

Proposed Framework: Objectives?

23

1. Narrow the Gulf of Execution

2. Narrow the Gulf of Evaluation

Highlight Design Considerations that would:3. Add a goal?

Form Goal: Decision Costs• Decision 1: Choosing a data subset

24

The study* reports: “[Users] had no idea where they should start to look for interesting features”

* Abello et al. ASK-Graph View: A Large Scale Graph Visualization System. In IEEE InfoVis 2006.

Low level view of a graph defined on health related terms with86,000 nodes and 2,000,000 edges

(1)Form Goal: Decision Costs• Decision 2: Choosing amongst interface options• Study*: Evaluating SBizPort (a Spanish business

web portal) versus YahooES– For SBizPort:

• “ … not having too much options is helpful to the user because it makes it easy to look for the information.”

– For YahooES: • Ten subjects said that YahooES had too many options to

choose from and hence distracted them from finding relevant information.

• ‘‘it is very hard to search for specific information. It has lots of worthless menus’’

25* Chung. Studying Information Seeking on the Non-English Web: An Experiment on a Spanish Business Web Portal. IJHCS 2006

(2) Form System Operations: System Power Costs

• What system operations need to be done to achieve my goal?

• E.g. Spotfire* has many representations:– “It took users considerable time to decide on

the right representation and to correctly set the coordinates and the parameters”

– “When users selected the wrong visualization at the beginning, it was difficult for them to backtrack”

26*Kobsa. An Empirical Comparison of Three Commercial Information Visualization Systems. In Proc IEEE InfoVis, 2001.

(3)Multiple Input Mode Costs

• Having several views within a tool may lead to errors

• Can be– Inconsistent Mode Use on Multiple Views– Imperceptible Mode Changes– Overloaded Controls

27

(3a)Inconsistent Mode Use on Multiple Views

28

Overview windowDetail

window

* Hornbæk et al. Navigation Patterns and Usability of Zoomable User Interfaces with and without an Overview. ACM TOCHI 9(4):362–389, 2002.

“Some subjects tried to zoom in and out while they had the mouse over the overview window”

(3b)Imperceptible Mode Changes

• Mode change may not be noticed by the user

• “when in focus-lock mode and accidentally crossing the center of the menu, participants expressed confusion when the focus area was dynamically recentered to the mouse position”

29

Focus region is lockedLock is

released

(3c) Overloaded Controls

• In a study* on Zoomable User Interfaces:– “some subjects accidentally triggered a zoom

operation when actually trying to slide”

30*Buering et al. User Interaction With Scatterplots on Small Screens—A Comparative Evaluation of Geometric-Semantic Zoom and Fisheye Distortion. IEEE InfoVis, 2006.

(4) Physical Motion Costs

• Dissatisfaction can result from– Costs in mouse position– Costs in mouse drag– Costs in accumulated motions

31

Example: Mouse Position Costs

• DQ sliders: user filter unnecessary data by moving the slider

• Brushing histograms: Users highlight states of interest

32

DQ Sliders

Brushing histogram

• In a study*: “The targets [in the brushing histograms] for clicking were narrower and smaller compared with DQ sliders”* Li and North. Empirical Comparison of Dynamic Query Sliders And Brushing Histograms. In Proc IEEE InfoVis, 2003.

(5) Visual Cluttering Costs

Mouse hovering provides tool-tip guidance, but it can cause occlusion and distraction

33

Tool-tip may hide a node

http://domino.research.ibm.com/comm/research_teams.nsf/pages/iva.publications.html/$FILE/hybrid-infovis-poster.pdf

(6) View Change Costs

• As the user moves from one view to another, associate objects from the old view to the new view

• By brushing-and-linking

34

(7) State Change costs

• User needs to explore data in order to evaluate whether the visualization achieved his goals Re-finding– “The overview pane supports jumping directly

to targets; it helps returning to previously visited parts of the document”

35

How to Narrow …

• The Gulf of Execution– Less is more– Designers should

• aim for small set of simple and predictable interactions

• replace sequences of actions by a simple action to simplify interaction

36

How to Narrow …

• The Gulf of Evaluation– Give users more training on object

association techniques (among different views)

– Support refinding (i.e. allow the user to explore and save a visualization state)

37

Can We Narrow ..

• The Gulf of Goal Formation?– A visualization cannot tell the user what

questions need to be answered, but …– Could have easy-to-use interactions that help

the user explore the data

38

Discussion

• Is it a matter of usability or interaction?

• I think that …– Narrowing the gulf of execution is a usability

aspect– Narrowing the gulf of evaluation is an infovis

aspect

39

My Project

• What kind of interactions would I need?– Zooming– Filtering

40

Using Nested Treemaps

m1

m2

m3

m4

m5

m6

m7

ma

mb

mc

md me

m1

m4

m5

m6

m7

m4

m5

m5

m5

m5

ma

mb

md me

m1

m4

m5

m6

m7

m1

m2

m3

m1

m2

m3

mb

mc

ma

mb

md

m1

m4

m5

m6

m7

mb

mc

md me

md me

Package 1

Package 2Package 3

Package 4

Package 5

class1

class2

class3

class5

class6

class7

class8

class9class10

class8class7

class5class14

Click on a method to find affected methodsm1

m2

m3

m4

m5

m6

m7

ma

mb

mc

md me

m1

m4

m5

m6

m7

m4

m5

m5

m5

m5

ma

mb

md me

m1

m4

m5

m6

m7

m1

m2

m3

m1

m2

m3

mb

mc

ma

mb

md

m1

m4

m5

m6

m7

mb

mc

md me

md me

Package 1

Package 3

Package 4

Package 5

class1

class2

class3 class5

class6

class7

class8

class9class10

class8class7

class5class14

Legend

Direct

Level 2 to 4

Lowerthan 4

Package 2

Visual Thesaurus Demo

43

Click

44

Visual Thesaurus Demo

• To Do:– Maps.google.com– //www.visualthesaurus.com/

• Get• Take

45