1. CS 235: User Interface Design December 3 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 3 CS 235: User Interface Design © R. Mak Developing an Effective Dashboard  Understand the application domain.  Clearly define the dashboard’s purpose. What are its objectives?  Get inside the heads of the dashboard viewers.  Focus on the objectives, not the means.  Most dashboard creation tools over-emphasize fancy artwork and cute skeuomorphs. 2

3. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Matching a Dashboard to its Viewers  A dashboard should represent information that’s needed to update a viewer’s mental model …  … in a way that closely matches that mental model. What information is displayed. How it’s displayed. The arrangement. 3

4. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Dashboard Requirements  Understand the viewers’ mental models.  Elicit requirements from potential viewers. How does this piece of information relate to that? If a problem occurs here, what does it affect and how?  Novices to an application domain may not have formed clear mental models.  Experts may not be able to describe their mental models. 4

5. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Information Complexity  Assess the degree of information complexity that viewers can easily process.  People benefit most from dashboards that are well-matched to their abilities.  Viewers may have different levels of abilities. 5

6. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Questions the Dashboard Designer Should Ask  How frequently to update the information?  Who will use the dashboard? One person? One group? Different departments?  What will the dashboard monitor?  What objectives will it support? 6

7. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Questions to Ask, cont’d  What questions should the dashboard answer?  What actions will be taken in response?  What items should the dashboard display? What does each item tell you? Why is it important? 7

8. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Questions to Ask, cont’d  At what level of summary or detail should information be displayed for a quick overview?  Which information items are most important to achieve the dashboard’s objectives?  What are logical groupings of information? To which group does each item belong?  What are useful comparisons to provide meaningful context? Are there historical data or targets? 8

9. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Include Only Useful Information  A dashboard should only include information that actually affects performance.  Questions to ask future viewers: Can you describe a situation when this information would lead you to do something? What is an example of the actual data that would appear and what action would you take in response? 9

10. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Purpose of a Dashboard  Not just for keeping viewers up to date.  Also to maintain situational awareness: Prevent problems. Take advantage of opportunities. Take steps to maintain or improve performance. 10

11. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak The Need for Context  Data values by themselves are useless. Compared to what?  Data only comes alive when compared to related values: targets standards the norm the past 11

12. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Fundamental Considerations  Update frequency  User expertise  Audience size  Technology platform  Screen type  Data type 12

13. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Update Frequency  Daily? Hourly? Real time? Include a timestamp if updated more than daily.  If updated less often than daily, then it’s not a dashboard. Not situation awareness at a glance.  If updated in real time, then the dashboard should be simpler and contain less information. Increased need for speed. There is a limit to the amount of information a viewer can take in at a glance. 13

14. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak User Experience  A viewer with a high level of expertise in the application domain can handle a high degree of complexity in the information display.  A novice can handle relatively little complexity. Provide a simpler dashboard display. Increase complexity as the viewer gains experience. 14

15. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Audience Size  One person  Multiple people with similar requirements  Multiple people who need to monitor different subsets of information  Designing a dashboard for a group of people is more challenging. One-size-fits all may be a poor compromise. Instead, show different levels of information based on the identity of the logged-in viewer. 15

16. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Technology Platform  Desktop or laptop  Web browser and server  Mobile device  Web constraints Less functionality Less elegant interface  Mobile devices add touch and gesture input. 16

17. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Screen Type  Screen characteristics size viewing distance aspect ratio resolution  We can only see clearly within a small angle. A large screen doesn’t mean we can show more information in the dashboard.  Designers may have to accommodate multiple screen sizes, aspect ratios, and resolutions. 17

18. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data Type  Quantitative data numerical values measures  Non-quantitative data top 10 customers issues to be resolved people to contact etc. 18

19. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Quantitative Data: Timing Variations  Time frames This year to date This quarter to date This month to date This week to date Today so far  The appropriate time frame is determined by the nature of the dashboard’s objectives. 19

20. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Quantitative Data: Comparisons  Understand data measures in context.  Context is often provided by comparisons: same day last year end of last year budgeted amount percentage of the budget percentage of the forecast average, typical range, benchmark projection into the future competitor’s measure 20

21. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Quantitative Data: Comparisons, cont’d  Multiple instances of a measure Each represents a subdivision of a whole Examples: regions, departments, subranges  Temporal instances of a measure Time series  Questions to ask a viewer: Can you tell how well what you’re monitoring is performing? Can you tell when something is abnormal? 21

22. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Quantitative Data: Predictions  Develop good predictive models based on: historical data an understanding of probability and statistics  If possible, incorporate predictions into a dashboard. The dashboard can help shape the future. 22

23. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak A Well-Designed Dashboard  “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” -- Antoine de Saint-Exupery  Exceptionally well organized.  Condensed primarily in the form of summaries.  Specific to the task at hand.  Customized clearly to the viewers.  Uses concise media that communicate in the clearest and most direct way possible. 23

24. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak What is Wrong with this “Dashboard”?  Display a single traffic signal. Light is green: All is well. Light is red: Drill down for more details.  Viewers rely on a predetermined threshold of what is or is not well. 24

25. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio  Maximize the data-ink ratio (within reason). Every bit of ink on a graphic requires a reason. Nearly always, the reason should be that the ink presents new information.  Keep it simple!  Eliminate chart junk! 25

26. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Dashboard Design: Goals and Steps  Reduce the non-data pixels. Eliminate all unnecessary non-data pixels. De-emphasize and regularize the non-data pixels that remain.  Enhance the data pixels. Eliminate all unnecessary data pixels. Highlight the most important data pixels that remain. 26

27. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Can you separate the data ink from the non-data ink? 27 The non-data ink is highlighted in red. Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

28. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Too high percentage of non-data pixels: 28 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

29. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Colors that don’t encode any meaning: 29 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

30. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Unnecessary borders fragment the display. 30 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

31. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Unnecessary and distracting fill colors. 31 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

32. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Distracting use of color gradients. 32 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

33. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Unnecessary grid lines in graphs. 33 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

34. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Unnecessary grid lines in tables. 34 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

35. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Complete borders instead of x- and y-axes. 35 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

36. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Avoid 3-D 36 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

37. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Make separator lines lighter. 37 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

38. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Make separator lines lighter, cont’d. 38 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

39. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Make grid lines lighter. 39 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

40. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Make grid lines lighter, cont’d. 40 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

41. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Mute the shading used to delineate table rows. 41 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

42. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Dashboards should not need instructions. 42 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

43. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Chart junk! 43 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

44. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Overuse of color. 44 Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013

45. Computer Science Dept. Fall 2014: December 3 CS 235: User Interface Design © R. Mak Data-Ink Ratio, cont’d  Overuse of color, cont’d. 45 Now the important items stand out. Information Dashboard Design, 2 nd ed. by Stephen Few Analytics Press, 2013