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

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

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

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

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

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

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

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

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

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

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

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

Brushing Indicate selected car on all Bargrams by color MPG Price 30 35 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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