Basic Tasks with Interactive Example:

1

• IAT 355
• Basic Tasks with Interactive Example
• EZChooser, Chapter 2 of Spence

__________________________________________________
____________________________________
SCHOOL
OF INTERACTIVE ARTS TECHNOLOGY SIAT
WWW.SIAT.SFU.CA
2
Problem

• Gaining insight about cars in marketplace
• Balancing criteria
• Problem is formulated as it is being solved
• Schon, 1983
• Tasks
• Buying a car
• Selling own car of an earlier model year
• Analyzing competitions cars
• Analyzing market trends

3
Car Table

• One Case per row
• Categorical Make
• Ordinal Rating
• Numerical Price, MPG, Age

4
Basic Tasks

• Show distribution
• Next slide shows distribution with bargram

5
Bargrams

• Represent range of items in the dataset
• Similar to histogram, except items are stacked
  horizontally
• Width of bar indicates number of items
• Label in bar indicates range

Price
10-12
12-14
16-18
6
Bargram vs Histogram

• Note that the Bargram hides the fact that there
  are no cars in the 14-16K range

Price
10-12
12-14
16-18
7
Unpopulated subrange

• If you are buying a car, you have to buy what is
  available
• The fact that there are no cars in the 14-16K
  range is not really important
• If you are selling cars, empty price ranges may
  be important
• You may want to fill that niche with a new
  product!

8
Basic Tasks

• Show individual data value
• Car images in next slide

9
Unquantifiable Attributes

• Car appearance
• Not really a data attribute
• Show a picture of each car in dataset
• Could report survey of terms like
• attractiveness sporty luxurious

10
Basic Tasks

• Retrieve value for more than one case
• Next slide shows each data case on the Bargram

11
Icons

• Little icons above Bargram represent individual
  items (Cars)

Price
10-12
12-14
16-18
12
Brushing

• Select a car picture, and highlight its
  corresponding Icon

Price
10-12
12-14
16-18
13
Brushing

• Indicate selected car on all Bargrams by color

Price
10-12
12-14
16-18
14
Brushing

• Tag a selected car with a red highlight

Price
10-12
12-14
16-18
15
Basic Tasks

• Filter out cases that you are not interested in
• Conversely, select the interesting items
• The next slide shows filtering on 1 attribute

16
Brushing

• Highlighting the 12-14K Bargram segment
  highlights the corresponding icons pictures

MPG
30
35
40
Price
10-12
12-14
16-18
17
Basic Tasks

• Compound Filtering
• The next slide shows filtering on two attribute
  ranges

18
Brushing

• Selecting the 30 MPG bar highlights only those
  cars that satisfy both requirements

MPG
30
35
40
Price
10-12
12-14
16-18
19
Basic Tasks

• The next slide shows the filtered data
• All ranges are shown

20
Make Room for More!
Horsepower
Age
Condition
MPG
30
35
40
Price
10-12
12-14
16-18
Make
Color
21
Icons

• Putting an icon for every item on every row adds
  visual clutter
• Turn on all icons when starting to visualize
• Give user sense of number of data items
• Filter Out those that do not satisfy
• Compare the next two slides

22
Clutter
Horsepower
Age
Condition
MPG
30
35
40
Price
10-12
12-14
16-18
Make
Color
23
Clutter Less
Horsepower
Age
Condition
MPG
30
35
40
Price
10-12
12-14
16-18
Make
Color
24
Basic Tasks

• The preceding 2 slides compared clutter
• If the overall task is to select a few good
  alternatives from many, reducing clutter is good
• If the overall task is to make correlations
• You may possibly want more clutter

25
Basic Task

• Identifying a car to buy is a Search task
• Sometimes you need to browse first!
• Learn the market
• Learn the trade-offs
• Filtering on the previous slides was
  all-or-nothing
• May want indicator for pretty close

26
Show Close items

• Use hollow icon to indicate close items
• The hollow items are OK on all other attributes
  but not MPG
• Selecting 35 MPG will accept 2 other cars

MPG
30
35
40
27
EZ Chooser

• Sensitivity Information is shown as hollow icons

28
EZChooser demo

• http//brisa.merl.com8080/myezchooser/mydatasets.
  jsp
• UserID shaw
• No password