Information Design and Visualization Chris North CS 3724: HCI.

Information Design and Visualization

Chris North

CS 3724: HCI

To do

• Hall of Fame/Shame Presentations

• Project: Requirements Analysis

Problem scenarios

summativeevaluation

Information scenarios

claims about current practice

analysis ofstakeholders,field studies

Usability specifications

Activityscenarios

Interaction scenarios

iterativeanalysis ofusability claims andre-design

metaphors,informationtechnology,HCI theory,guidelines

formativeevaluation

DESIGN

ANALYZE

PROTOTYPE & EVALUATE

Functionality

Look and feel

The Problem

Data

Human

Goal: Insight How?

Data Transfer

Human Vision

• Highest bandwidth sense

• Fast, parallel

• Pattern recognition

• Pre-attentive

• Extends memory and cognitive capacity• (Multiplication test)

• People think visually

Impressive. Lets use it!

Find the Red Square:

• Which state has highest Income?• Relationship between Income and Education?• Outliers?

Per Capita Income

Col

lege

Deg

ree

%

Scenarios = Data + Tasks

• Data categories:– Spatial (1,2,3D)– Tabular (Multi-dimensional) – Network, Tree– Text, documents

• Combinations of categories

User Tasks

• Easy stuff: (1 or few items)

• Min, max, average, %

• Exact queries, known item search

• Hard stuff:• Patterns, trends, distributions, changes over time,

• outliers, exceptions,

• relationships, correlations, multi-way,

• combined min/max, tradeoffs,

• clusters, groups, comparisons, context,

• anomalies, data errors,

• Paths, …

Excel can do this

Visualization can do this!

Examples of Tabular data visualization

• DataMaps

• Spotfire

• TableLens

DataMaps

• demo

Spotfire

• Mapping data to graphics (x, y, size, color, shape…)

• Multiple views: brushing and linking

• Dynamic Queries

• Details window

Cars data

Visual Mapping: Step 1

1. Map: data items visual marks

Visual marks:• Points

• Lines

• Areas

• Volumes

• Glyphs

Visual Mapping: Step 2

1. Map: data items visual marks

2. Map: data attributes visual properties of marks

Visual properties of marks:• Position, x, y, z

• Size, length, area, volume

• Orientation, angle, slope

• Color, gray scale, texture

• Shape

• Animation, time, blink, motion

Mapping Example in Spotfire

• Film database

• Film dot

• Year x

• Length y

• Popularity size

• Subject color

• Award? shape

TableLens (Eureka by Inxight)

• Visual encoding of cell values

• Details expand within context (fisheye)

• Sorting

Cars data

Examples of Tree data visualization

• Windows Explorer

• Star Tree

• TreeMaps

Star Tree (Hyperbolic Tree)

• Focus+Context

• Radial; shrink with distance to center

• Drag to navigate

• Scalability?

• Xerox PARC, Inxight• http://startree.inxight.com/

Treemaps• Parent/child containment

• Size & color encoding

• Map of the Market: http://www.smartmoney.com/marketmap/

• People Map: http://www.truepeers.com/

• Coffee Map: http://www.peets.com/tast/11/coffee_selector.asp

• U. Maryland

• “Squarified” TreeMap• http://www.research.microsoft.com/~masmith/all_map.jpg

SequoiaView• http://www.win.tue.nl/sequoiaview/

•

Context is Important!

Information Visualization Mantra• Overview first, zoom and filter, then details on demand• Overview first, zoom and filter, then details on demand• Overview first, zoom and filter, then details on demand• Overview first, zoom and filter, then details on demand• Overview first, zoom and filter, then details on demand• Overview first, zoom and filter, then details on demand

- Ben Shneiderman

What is Information Visualization?

The use of computer-supported,

interactive, visual representations

of abstract data to amplify cognition

Keys points

• Power of visual system

• scenario = data + tasks

• Mapping data to graphics & visual properties• 2 steps

• Interaction for what doesn’t fit in visual rep.• Dynamic queries, brushing, …

• Examples: tabular data, trees

• Mantra: Overview first…

• Choice of visual representation matters

What’s the Big Deal?

Presentation is everything!

- Edward Tufte

Project Step 3 – Design

• Due 3 weeks: get started early!

• Design space• Dimensions of the design space

• Alternative designs

• Claims analysis

• Formative evaluation• Wizard of Oz

• Refinements

• Final design:• Scenarios

• Representations