IAT 355

Basic Tasks with Interactive Example:EZChooser, Chapter 2 of Spence

______________________________________________________________________________________

SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

IAT 355 2May 28, 2014

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 competition’s cars– Analyzing market trends

IAT 355 3May 28, 2014

Car Table• One Case per row

– Categorical: Make– Ordinal: Rating– Numerical: Price, MPG, Age

Make Price (£) MPG Rating

Ford

Chevy

15,450

12,450

31

27

Age (yrs)

*****

***

3

4

IAT 355 4May 28, 2014

Basic Tasks

• Show distribution– Next slide shows distribution with bargram

IAT 355 5May 28, 2014

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

IAT 355 6May 28, 2014

Bargram vs Histogram• Note that the Bargram

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

0

2

4

6

8

10

12

14

10-12 12-14 14-16 16-18

Price

Price 10-12 12-14 16-18

IAT 355 7May 28, 2014

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!

IAT 355 8May 28, 2014

Basic Tasks

• Show individual data value– Car images in next slide

IAT 355 9May 28, 2014

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”

IAT 355 10May 28, 2014

Basic Tasks

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

Bargram

IAT 355 11May 28, 2014

Icons

• Little icons above Bargram represent individual items (Cars)

Price 10-12 12-14 16-18

IAT 355 12May 28, 2014

Brushing

• Select a car picture, and highlight its corresponding Icon

Price 10-12 12-14 16-18

IAT 355 13May 28, 2014

Brushing• Indicate selected car on all Bargrams by

color

MPG 30 35 40

Price 10-12 12-14 16-18

IAT 355 14May 28, 2014

Brushing• Tag a selected car with a red highlight

MPG 30 35 40

Price 10-12 12-14 16-18

IAT 355 15May 28, 2014

Basic Tasks

• Filter out cases that you are not interested in

• Conversely, select the interesting items• The next slide shows filtering on 1

attribute

IAT 355 16May 28, 2014

Brushing• Highlighting the 12-14K Bargram

segment highlights the corresponding icons + pictures

MPG 30 35 40

Price 10-12 12-14 16-18

IAT 355 17May 28, 2014

Basic Tasks

• Compound Filtering• The next slide shows filtering on two

attribute ranges

IAT 355 18May 28, 2014

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

IAT 355 19May 28, 2014

Basic Tasks

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

IAT 355 20May 28, 2014

Make Room for More!

MPG 30 35 40

Price 10-12 12-14 16-18

Make

Color

Horsepower

Age

Condition

IAT 355 21May 28, 2014

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

IAT 355 22May 28, 2014

Clutter

MPG 30 35 40

Price 10-12 12-14 16-18

Make

Color

Horsepower

Age

Condition

IAT 355 23May 28, 2014

Clutter Less

MPG 30 35 40

Price 10-12 12-14 16-18

Make

Color

Horsepower

Age

Condition

IAT 355 24May 28, 2014

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

IAT 355 25May 28, 2014

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”

IAT 355 26May 28, 2014

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

IAT 355 27May 28, 2014

EZ Chooser• Sensitivity Information is shown as

hollow icons