Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Great Dashboards for SaaS and Enterprise Applications

4,025 views

Published on

Presentation by Lisa Battle at the UXPA2016 conference in Seattle, WA, on June 3, 2016.

Many SaaS and enterprise applications today provide dashboards giving users an overview of how their business is performing and summarizing the work that needs to be done. Dashboards present a great opportunity to improve user experience by providing quick answers to users’ common questions, but they are also full of potential pitfalls for design. As UX design consultants, we are frequently asked to design (or redesign) dashboards for applications, and through that experience we have established best practices for dashboard design. We will discuss our approach to ensuring a good user experience for dashboards, focusing on 8 principles of UX design that are particularly relevant and illustrating them with real project examples.

Published in: Design

Designing Great Dashboards for SaaS and Enterprise Applications

  1. 1. Lisa Battle President and Principal Consultant lisa@designforcontext.com @design4context Designing Great Dashboards for SaaS and Enterprise Applications UXPA 2016 Conference • 3 June 2016
  2. 2. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Dashboards
  3. 3. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
  4. 4. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
  5. 5. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 What is a dashboard? (in modern enterprise and SaaS applications)
  6. 6. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 6 A starting point for important tasks My “To Do” list Problems I need to know about How am I doing? What’s going on? Trends in my business Recent activity
  7. 7. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 What is NOT a dashboard?
  8. 8. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Is this a dashboard? 8
  9. 9. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Is this a dashboard? 9
  10. 10. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Is this a dashboard? 10
  11. 11. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Is this a dashboard? 11
  12. 12. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Does my application need a dashboard?
  13. 13. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 An application with only one task 13
  14. 14. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 An application to create things for my own use 14
  15. 15. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Membership management system 15 Primary Navigation Tabs Secondary Navigation Ribbon Tertiary (and beyond) Navigation: Actions Search Recent Favorites Blank when the user first logs in
  16. 16. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Multi-user order entry & workflow system 16 Logo  
  17. 17. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Dashboard patterns
  18. 18. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts
  19. 19. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts
  20. 20. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts
  21. 21. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts Highest priority alerts Second priority alerts Other alerts in context
  22. 22. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts
  23. 23. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts 23
  24. 24. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts “To Do” Items
  25. 25. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 “To Do” Items
  26. 26. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 “To Do” Items
  27. 27. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 “To Do” Items
  28. 28. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Alerts “To Do” Items Performance Statistics
  29. 29. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Performance Statistics
  30. 30. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Performance Statistics 30
  31. 31. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Performance Statistics
  32. 32. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Performance Statistics 32 Type  A   Type  B  
  33. 33. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Performance Statistics Alerts “To Do” Items Current Status Amount 2512%
  34. 34. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Balances 34
  35. 35. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Stats 35
  36. 36. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Visual Indicators of Status 36
  37. 37. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Visual Indicators of Status 37
  38. 38. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Visual Indicators of Status 38
  39. 39. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Current Status Amount 2512% Performance Statistics Alerts “To Do” Items Search
  40. 40. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Search
  41. 41. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Search
  42. 42. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 SearchCurrent Status Amount 2512% Performance Statistics Alerts “To Do” Items Task Starting Points Action
  43. 43. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Task Starting Points
  44. 44. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Task Starting Points
  45. 45. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Task Starting Points
  46. 46. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Task Starting Points Action SearchCurrent Status Amount 2512% Performance Statistics Alerts “To Do” Items Social Components
  47. 47. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Social Components
  48. 48. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Social Components
  49. 49. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Social Components My Team’s Progress Leader Board
  50. 50. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Social Components Task Starting Points Action SearchCurrent Status Amount 2512% Performance Statistics Alerts “To Do” Items Recent Activity
  51. 51. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Recent Activity
  52. 52. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Recent Activity
  53. 53. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Recent Activity
  54. 54. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Recent Activity 54
  55. 55. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Recent ActivitySocial Components Task Starting Points Action SearchCurrent Status Amount 2512% Performance Statistics Alerts “To Do” Items News, Events, Announcements
  56. 56. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 News, Events, Announcements
  57. 57. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 News, Events, Announcements
  58. 58. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 News, Events, Announcements Recent ActivitySocial Components Task Starting Points Action SearchCurrent Status Amount 2512% Performance Statistics Alerts “To Do” Items Push Content Headline
  59. 59. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 “Push” Content
  60. 60. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 “Push” Content
  61. 61. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 “Push” Content
  62. 62. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 SearchAlerts Task Starting Points Action Social Components Recent Activity News, Events, Announcements Push Content Headline “To Do” Items Performance Statistics Current Status Amount 2512%
  63. 63. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 How do we ensure a good user experience for dashboards?
  64. 64. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Answer meaningful questions1
  65. 65. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 65 Who is the user? What are they responsible for? What is most important for them to know? What do they need to take action on? What will cause a problem for them if it does not go well?
  66. 66. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 User Research 66
  67. 67. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Organizational Values 67
  68. 68. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Exceptions 68
  69. 69. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 69
  70. 70. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Provide relevant role-based views2
  71. 71. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 71 Learner   Instructor  
  72. 72. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Instructor 72
  73. 73. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Learner 73
  74. 74. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Use visualization metaphors that fit the type of data 3
  75. 75. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Metaphors 75 Place  in  Space,  AKA  How  to  Create  a  Conceptual  Model   Stephen  Anderson,  IA  Summit  2016  presenta=on   h>p://www.slideshare.net/stephenpa/place-­‐in-­‐space-­‐aka-­‐how-­‐to-­‐design-­‐a-­‐concept-­‐model  
  76. 76. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Comparison of Quantity 76
  77. 77. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Relative Proportions of Things 77
  78. 78. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Progress Towards a Goal 78 39%  
  79. 79. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Trends Over Time 79
  80. 80. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Activity Over Time 80
  81. 81. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Percentages 81
  82. 82. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Tables vs Graphs 82
  83. 83. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Familiar Metaphors 83
  84. 84. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Fads 84
  85. 85. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Sensitive Information 85
  86. 86. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Balance rollups vs instance level data4
  87. 87. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Instance-level data 87 12   Instance-level data Rollup 12  
  88. 88. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Instance-level data Logo   Logo  
  89. 89. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Instance-level data 89
  90. 90. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Rollups 90
  91. 91. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Rollups 91
  92. 92. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Prioritize and eliminate unnecessary details 5
  93. 93. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Prioritize 93
  94. 94. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Hover or Expand 94
  95. 95. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Asking “Why?” 95
  96. 96. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Give users/clients (some) control over the display 6
  97. 97. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 User Configuration 97
  98. 98. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 User Configuration 98 Can  I  turn  off  the     Invoice  Summary?  
  99. 99. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 User Configuration 99
  100. 100. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 User Configuration 100 Easy to create new dashboards and widgets
  101. 101. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Client Configuration 101
  102. 102. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Accessible and responsive7
  103. 103. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Accessibility 103 Readability •  Font size •  Redundant cues – don’t rely on color alone •  Contrast Add text equivalents •  For all that isn’t text •  Don’t rely on images or styles alone Support all input methods •  Keyboard, touch, speech •  Make content order logical Use proper semantic structure •  Makes navigating easier •  Communicates what each item is, and its state From:  Red  Alert!  Communica=ng  status  through  great  UX,  graphics  and  accessibility.  Ba>le,  Bergel,  Chaffee,  UXPA  2014     Give users control Don’t: •  Override pinch-zoom •  Hard code fonts •  Require timed responses that users can’t extend
  104. 104. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Responsive 104 What will people really be doing on mobile? Understand the user Keep it simple, relevant and timely.
  105. 105. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Responsive 105
  106. 106. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Mobile 106 Quick access to timely, high level information and alerts
  107. 107. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Plan for scalability and full lifecycle8
  108. 108. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 First-Time Use 108 No  forwards  found.   No  orders  found.  
  109. 109. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 No Data 109
  110. 110. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 No Data 110
  111. 111. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 No Data 111
  112. 112. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 Evolve Over Time 112
  113. 113. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 113 Answer meaningful questions Provide relevant role-based views Use visualization metaphors that fit the data Balance rollups vs instance level data Prioritize and eliminate unnecessary details Give users some control over the display Accessible, mobile and responsive Plan for scalability and full lifecycle 1 2 3 4 5 6 7 8
  114. 114. Lisa Battle President and Principal Consultant lisa@designforcontext.com @design4context Presentation is on Slideshare – Go to www.designforcontext.com/insights Designing Great Dashboards for SaaS and Enterprise Applications UXPA 2016 Conference • 3 June 2016

×