CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose...
-
Upload
karen-curtis -
Category
Documents
-
view
213 -
download
0
Transcript of CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose...
![Page 1: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/1.jpg)
CS 235: User Interface DesignNovember 12 Class Meeting
Department of Computer ScienceSan Jose State University
Fall 2014Instructor: Ron Mak
www.cs.sjsu.edu/~mak
![Page 2: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/2.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
2
Overcoming the Limits of Memory
Long term memory ≈ computer’s hard drive
Working memory ≈ RAM
Different memory storage for different types of information
Verbal, visual, etc.
Visual memory can handle only about three chunks (units of information) at a time.
![Page 3: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/3.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
3
Overcoming the Limits of Memory, cont’d Consider the following table.
Perhaps you can remember three of the numbers.
The following line graph stores all of the numbers in a single chunk.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 4: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/4.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
4
Overcoming the Limits of Memory, cont’d
The problem we had with these photos …
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 5: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/5.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
5
Overcoming the Limits of Memory, cont’d
… is that they were split over two screens.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 6: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/6.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
6
Overcoming the Limits of Memory, cont’d
Create a dashboard that puts all the important information on a single screen.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 7: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/7.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
7
Building Blocks of Information Visualization
Visual perception Visual properties Visual objects
Quantitative reasoning Quantitative relationships Quantitative comparisons
Information visualization Visual patterns, trends, and exceptions Understanding good decisions
![Page 8: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/8.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
8
Analytical Interactions with data
Comparing Sorting Adding variables Filtering Highlighting Aggregating Re-expressing Re-visualizing
Zooming and panning Re-scaling Accessing details on
demand Annotating Bookmarking
![Page 9: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/9.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
9
Comparing
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 10: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/10.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
10
Typical Magnitude Comparisons
Nominal Values that have no particular order.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 11: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/11.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
11
Typical Magnitude Comparisons, cont’d
Ranking Compare values that are arranged by magnitude.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 12: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/12.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
12
Typical Magnitude Comparisons, cont’d
Part-to-whole Compare values that are parts of a whole.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 13: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/13.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
13
Typical Magnitude Comparisons, cont’d
Deviation Compare differences between two sets of values.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 14: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/14.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
14
Typical Magnitude Comparisons, cont’d
Time series Show how values changed over time.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 15: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/15.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
15
Typical Magnitude Comparisons, cont’d
Time series, cont’d
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 16: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/16.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
16
Typical Magnitude Comparisons, cont’d
Scatter plot vs. bar chart
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 17: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/17.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
17
Avoid 3-D Graphs!
Now You See Itby Stephen FewAnalytics Press, 2009
Some bars obscure others.
![Page 18: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/18.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
18
Avoid 3-D Graphs! cont’d
Which line represents the East region?
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 19: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/19.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
19
Avoid 3-D Graphs! cont’d
Which is easiest to read?
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 20: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/20.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
20
Avoid 3-D Graphs! cont’d
What are we hiding?
Expenses rose from$100,000 to $121,000.
Show Me the Numbersby Stephen FewAnalytics Press, 2012
![Page 21: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/21.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
21
Avoid 3-D Graphs! cont’d
Show Me the Numbersby Stephen FewAnalytics Press, 2012
![Page 22: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/22.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
22
Relative Heights in Bar Charts
Are the “Yes” responses 4X the “No” responses?
Bar chartsshould alwaysinclude 0.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 23: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/23.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
23
Sorting
Sorted graphs provide more information.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 24: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/24.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
24
Sorting, cont’d
Sorting + correlation
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 25: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/25.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
25
Adding Variables
We may not always know in advance which variables we should analyze.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 26: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/26.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
26
Filtering
Reduce the data that we’re analyzing to a subset.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 27: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/27.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
27
Highlighting
Instead of filtering, make certain data stand out.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 28: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/28.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
28
Highlighting, cont’d
Brushing highlights the same subset of data across multiple graphs.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 29: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/29.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
29
Aggregating
With hierarchical data, we can aggregate at multiple levels.
Examples: Aggregate daily data weekly totals Aggregate store data regional totals
Aggregating / de-aggregating are associated with drill up / drill down operations with the data.
![Page 30: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/30.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
30
Re-Expressing
Change the graph parameters in order to gain new insights.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 31: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/31.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
31
Re-Expressing, cont’d
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 32: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/32.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
32
Re-Visualizing
Change the type of graph in order to gain new insights.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 33: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/33.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
33
Zooming and Panning
Zoom in on an area of interest in a graph.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 34: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/34.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
34
Re-Scaling
Are hardware sales or software sales increasing at a faster rate?
Both areincreasingat the same10% rate.
How can this be made clearer?
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 35: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/35.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
35
Re-Scaling, cont’d
Use a logarithmic scale.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 36: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/36.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
36
Accessing Details on Demand
Details pop up when the mouse hovers.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 37: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/37.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
37
Annotating
Helpful notes are displayed on a graph.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 38: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/38.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
38
Bookmarking
Be able to return to a previous view of the data. Save a snapshot of a view. “Back” and “undo” capabilities.
![Page 39: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/39.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
39
Shneiderman’s Mantra
“Overview first, zoom and filter, then details-on-demand.”
Get an overview of an entire scene and then home in on whatever appears abnormal.
![Page 40: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/40.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
40
Shneiderman’s Mantra, cont’d
First, the overview:
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 41: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/41.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
41
Shneiderman’s Mantra, cont’d
Zoom in on a particular point of interest.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 42: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/42.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
42
Shneiderman’s Mantra, cont’d
Examine it more closely and in greater detail.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 43: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/43.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
43
Shneiderman’s Mantra, cont’d
Filter out what’s extraneous to our investigation.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 44: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/44.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
44
Shneiderman’s Mantra, cont’d
Home in to get greater detail.
Now You See Itby Stephen FewAnalytics Press, 2009
![Page 45: CS 235: User Interface Design November 12 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak.](https://reader031.fdocument.pub/reader031/viewer/2022032705/56649dd55503460f94acd5b9/html5/thumbnails/45.jpg)
Computer Science Dept.Fall 2014: November 12
CS 235: User Interface Design© R. Mak
45
Tree Maps for Hierarchical Data
Nested rectangles show containment.
https://docs.oracle.com/middleware/1212/adf/ADFUI/img/dvt_intro_treemap.png