1. IAT 355 Basic Tasks with Interactive Example
______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] |

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 competition’s cars
Analyzing market trends
Jan 20, 2017
IAT 355

3. 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
Jan 20, 2017
IAT 355

4. Basic Tasks Show distribution
Next slide shows distribution with bargram
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

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!
Jan 20, 2017
IAT 355

8. Basic Tasks Show individual data value Car images in next slide
Jan 20, 2017
IAT 355

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”
Sometimes, the user is interested in information that cannot be objectively measured.
One could subjectively survey what people generally think is “sporty”, and report that average
“sportiness” value. In this example, we show a picture.
Jan 20, 2017
IAT 355

10. Basic Tasks Retrieve value for more than one case:
Next slide shows each data case on the Bargram
Jan 20, 2017
IAT 355

11. Icons Little icons above Bargram represent individual items (Cars)
Price
Each dot represents a data case (an individual car)
10-12
12-14
16-18
Jan 20, 2017
IAT 355

12. Brushing Select a car picture, and highlight its corresponding Icon
Price
An individual item (car) is highlighted. Distinct color indicates linked item
10-12
12-14
16-18
Jan 20, 2017
IAT 355

13. Brushing Indicate selected car on all Bargrams by color MPG Price 3035 40
Price
Retrieve more than one numerical value per item.
Dot icons are evenly spaced in these graphics because
there is not a consistent scale.
10-12
12-14
16-18
Jan 20, 2017
IAT 355

14. Brushing Tag a selected car with a red highlight MPG Price 30 35 40
10-12
12-14
16-18
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

16. Brushing
Highlighting the 12-14K Bargram segment highlights the corresponding icons + pictures
MPG 30 35 40
Price
Orange dots correspond to selected cars. 4 cars on the MPG row, the Price row, and the Picture row.
10-12
12-14
16-18
Jan 20, 2017
IAT 355

17. Basic Tasks Compound Filtering
The next slide shows filtering on two attribute ranges
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

19. Basic Tasks The next slide shows the filtered data
All ranges are shown
Jan 20, 2017
IAT 355

20. Make Room for More! MPG Price 30 35 40 10-12 12-14 16-18 Jan 20, 2017
Horsepower
Age
Condition
MPG 30 35 40
Price
10-12
12-14
16-18
Make
Color
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

22. Clutter MPG Price 30 35 40 10-12 12-14 16-18 Jan 20, 2017 IAT 355
Horsepower
Age
Condition
MPG 30 35 40
Price
10-12
12-14
16-18
Make
Color
Jan 20, 2017
IAT 355

23. Clutter Less MPG Price 30 35 40 10-12 12-14 16-18 Jan 20, 2017 IAT 355
Horsepower
Age
Condition
MPG 30 35 40
Price
10-12
12-14
16-18
Make
Color
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

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”
Jan 20, 2017
IAT 355

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
Jan 20, 2017
IAT 355

27. EZ Chooser Sensitivity Information is shown as hollow icons
The purple dotted arrows show hollow car icons.
Hollow icons are only shown when 2 or more filter attributes are selected
Jan 20, 2017
IAT 355