1. CS 235: User Interface Design December 8 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak How to Display a Data Value  Consider a single simple display:  We can add more information: We need to pay attention to this value!  Show the reason to pay attention: the target. 2 YTD Expenses $487,321 ActualTarget YTD Expenses$487,321$450,000

3. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak How to Display a Data Value, cont’d  Show more information: the variance. 3 ActualTargetVariance YTD Expenses $487,321$450,000+$37,321 ActualTargetVariance % YTD Expenses $487,321$450,000+8%

4. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Table vs. Graph  Tables are good for looking up information: 4 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

5. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Table vs. Graph, cont’d  Graphs are good for revealing the shape of the data: 5 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

6. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Table Format  Beware the fancy table format that obscures information! 6 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

7. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Table Format, cont’d  A simpler format can be easier to read: 7 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

8. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Fancy Gauges and Meters  Beware of fancy gauges and meters provided by dashboard creation tools. 8 Examples of poor quality gauges from Microsoft Visual Studio that are hard to read. Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

9. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Fancy Gauges and Meters, cont’d  More fancy dashboard gauges to avoid. 9 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

10. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Pie Charts vs. Bar Graphs  Bar graphs are generally better then pie charts at representing part-to-whole. 10 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

11. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Nominal, Ordinal, Interval Scales  Nominal Items don’t relate to each other. No particular order. Don’t represent quantitative values. Example: Sales, Marketing, Engineering, HR, etc.  Ordinal Have an intrinsic order. Don’t represent quantitative values. Example: poor, below average, average, excellent 11

12. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Nominal, Ordinal, Interval Scales, cont’d  Interval Have an intrinsic order. Represent quantitative values. Subdivide a range of values into sequential subranges of values. Each subrange the same size. Example: 0-99, 100-199, 200-299, 300-399 Example: January, February, March (subranges of time) 12

13. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Nominal, Ordinal, Interval Scales, cont’d  Use line graphs only with interval scales. 13 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

14. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Time Series: Bar vs. Line Graph  Line graphs are better than bar graphs at showing the shape of time series data. 14 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

15. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Bubble Plots  Show how items relate to one another in terms of common variables that fall into categories. 15 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

16. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Geographic Maps  Don’t use geographic maps unnecessarily: 16 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

17. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Geographic Maps, cont’d  A geographic map is useful if location is an important part of data being tracked. 17 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

18. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Stacked Bar Graphs  A stacked bar graph is not much of an improvement over a pie chart. 18 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

19. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Stacked Bar Graphs, cont’d  A stacked bar graph is useful only if the whole is more important to see than the parts. 19 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

20. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Stacked Bar Graphs, cont’d  These bar graphs are better at showing the proportions of the four sales channels. 20 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

21. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Multiple Area Graphs  What is the problem here? Occlusion 21 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

22. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Stacked Area Graphs  Misleading: 22 How well is the West region doing? East Central West South Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

23. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Stacked Area Graphs, cont’d  An area of a single region is more revealing: 23 West Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

24. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Stacked Area Graphs, cont’d  Line graphs can be even better: 24 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

25. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Radar Graphs vs. Bar Graphs  Radar graphs can be more difficult to read and to compare values than a bar graph: 25 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

26. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Funnel Charts  Funnel charts are often absurd:  Use a bar graph instead! 26 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

27. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Bullet Graphs  A bullet graph shows three items at a glance: a primary measure a target value qualitative ranges of performance (poor, good, etc.) 27 0102030405060708090100 primary measuretarget value range 1 range 2 range 3range 4 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

28. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Bullet Graphs are Space Efficient 28

29. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Multiple Bullet Graphs in a Series 29 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

30. Computer Science Dept. Fall 2014: December 8 CS 235: User Interface Design © R. Mak Bullet Graphs: Alternatives to Bars 30 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013