designing great dashboards for saas and enterprise applications

Lisa Battle President and Principal Consultant lisa@designforcontext.com @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

How am I doing? What’s going on?

Trends in my business Recent

activity

What is NOT a dashboard?

Is this a dashboard?

Does my application need a dashboard?

An application with only one task

An application to create things for my own use

Membership management system

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

Dashboard patterns

Alerts

Alerts Highest priority alerts

Second priority

alerts

Other alerts in context

Alerts

Alerts “To Do” Items

“To Do” Items

Alerts “To Do” Items Performance Statistics

Performance Statistics

Type A Type B

Performance Statistics Alerts “To Do” Items Current Status

Amount

25 12%

Balances

Visual Indicators of Status

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

Amount

25 12%

Social Components

My Team’s Progress Leader Board

Social Components

Action

Amount

25 12%

Recent Activity

Recent Activity Social Components

Action

Amount

25 12%

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

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

Organizational Values

Exceptions

Provide relevant role-based views

Learner Instructor

Instructor

Learner

Use visualization metaphors that fit the type of data

Metaphors

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

Relative Proportions of Things

Progress Towards a Goal

Trends Over Time

Activity Over Time

Percentages

Tables vs Graphs

Familiar Metaphors

Sensitive Information

Balance rollups vs instance level data 4

Instance-level data

12 Instance-level data Rollup

Instance-level data Logo

Instance-level data

Rollups

Prioritize and eliminate unnecessary details

Prioritize

Hover or Expand

Asking “Why?”

Give users/clients (some) control over the display

User Configuration

Can I turn off the Invoice Summary?

User Configuration

Easy to create new dashboards and widgets

Client Configuration

Accessible and responsive 7

Accessibility

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

What will people

really be doing on

mobile?

Understand the user

scenarios

Keep it simple, relevant and timely.

Responsive

Mobile

Quick access to

timely, high

information

and alerts

Plan for scalability and full lifecycle 8

First-Time Use

No forwards found. No orders found.

No Data

Evolve Over Time

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 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

designing great dashboards for saas and enterprise applications

Design

pdidenko - saas-unconf - saas - #uxaas2011

building dashboards in fm:interact...3 building dashboards...

dokumentenmanagement als saas, dokumentenmanagement saas

designing personal dashboards - your big 5 design decisions

visualisation dashboards

designing dashboards

designing a security architecture for enterprises accessing...

operations dashboard: designing effective dashboards ·...

designing dashboards & data visualisations in web apps

(arc304) designing for saas: next-generation software...

designing dashboards in sap bi using web application...

rich data, poor data: designing dashboards to inform · pdf...

optimizing security for workcenters and dashboards ·...

designing microservice-based applications by using a...

dashboards - pedigree technologies€¦ · dashboards...

learning dashboards

mipct dashboards & reports introduction to mipct dashboards...

designing dashboards in sap bi using web application...

dashboards - cisco · dashboards...

michael le, dmitri rogulkin, designing public and private...