designing great dashboards for saas and enterprise applications

© Design for Context

Lisa Battle President and Principal Consultant [email protected] @design4context

Designing Great Dashboards

for SaaS and Enterprise Applications UXPA 2016 Conference • 3 June 2016

@design4context Designing Great Dashboards UXPA 2016


http://www.uxpa2016.org/sessionsurvey/67

SIMPLICITY

Dashboards




What is a dashboard? (in modern enterprise and SaaS applications)



http://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




What is NOT a dashboard?




Is this a dashboard?

8





9





10





11




Does my application need a dashboard?




An application with only one task

13




An application to create things for my own use

14




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




Multi-user order entry & workflow system

16

16

Logo




Dashboard patterns




Alerts




Alerts Highest priority alerts

Second priority

alerts

Other alerts in context




Alerts




Alerts

23




Alerts “To Do” Items




“To Do” Items




Alerts “To Do” Items Performance Statistics




Performance Statistics





30





32

Type A Type B




Performance Statistics Alerts “To Do” Items Current Status

Amount

25 12%




Balances

34




Stats

35




Visual Indicators of Status

36





37





38




Current Status

Amount

25 12%

Performance Statistics Alerts “To Do” Items Search




Search




Search Current Status

Amount

25 12%

Performance Statistics Alerts “To Do” Items

Task Starting Points

Action





Action


Amount

25 12%


Social Components




Social Components




Social Components

My Team’s Progress Leader Board




Social Components


Action


Amount

25 12%


Recent Activity




Recent Activity




Recent Activity

54




Recent Activity Social Components


Action


Amount

25 12%


News, Events, Announcements




News, Events, Announcements




News, Events, Announcements Recent Activity Social

Components Task Starting

Points

Action


Amount

25 12%


Push Content

Headline




“Push” Content




Search Alerts


Action

Social Components Recent Activity News, Events,

Announcements Push Content

Headline

“To Do” Items Performance Statistics Current Status

Amount

25 12%




How do we ensure a good user experience for dashboards?




Answer meaningful questions

1




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?




User Research

66




Organizational Values

67




Exceptions

68




Provide relevant role-based views

2




Learner Instructor




Instructor

72




Learner

73




Use visualization metaphors that fit the type of data

3




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




Comparison of Quantity

76




Relative Proportions of Things

77




Progress Towards a Goal

78

39%




Trends Over Time

79




Activity Over Time

80




Percentages

81




Tables vs Graphs

82




Familiar Metaphors

83




Fads

84




Sensitive Information

85




Balance rollups vs instance level data 4




Instance-level data

87

12 Instance-level data Rollup

12




Instance-level data Logo

Logo




Instance-level data

89




Rollups

90




Rollups

91




Prioritize and eliminate unnecessary details

5




Prioritize

93




Hover or Expand

94




Asking “Why?”

95




Give users/clients (some) control over the display

6




User Configuration

97




User Configuration

98

Can I turn off the Invoice Summary?




User Configuration

99




User Configuration

100

Easy to create new dashboards and widgets




Client Configuration

101




Accessible and responsive 7




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




Responsive

104

What will people

really be doing on

mobile?

Understand the user

scenarios

Keep it simple, relevant and timely.




Responsive

105




Mobile

106

Quick access to

timely, high

level

information

and alerts




Plan for scalability and full lifecycle 8




First-Time Use

108

No forwards found. No orders found.




No Data

109




No Data

110




No Data

111




Evolve Over Time

112




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


Lisa Battle President and Principal Consultant [email protected] @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