Matt Woodlief, esri

Operations Dashboard: Effective by

Design

Dashboards - Patterns of Use

• Strategic

• Tactical / Analytical

• Operational

• Informational

- Not shown in conceptual diagram

- Less formal

Details

Functionality Personas

Operational

A

Operations Staff

AnalyzeTactical

Managers/Analysts

Monitor Strategic Executives

Georgia Emergency Management Agency

• Live Traffic Dashboard with Waze data

https://bit.ly/2GkgqRI

Johns Hopkins Corona VirusCoronavirus Cases

Planning for the User Experience

How do I do that?

Design Theory – Overall Objective

• Don Norman

- Cognitive scientist and usability engineer

“Two of the most important characteristics

of good design are discoverability and understanding”

Design Theory

• Aesthetic Usability Effect:

• Source: https://lawsofux.com/

Users often perceive aesthetically pleasing

design as design that’s more usable

Configuring Dashboards

• Challenge:

- Communicate and share data in an effective

and aesthetically pleasing manner

- Balance functionality vs. usability

- Consider UI/UX

- Consider end user(s) technical level

Source: https://syndicode.com/uiux-design/

A

Qualities of “Good” Dashboards

• Know your audience:

- What question(s) are they trying to answer?

- In what environments are they going to view the dashboard?

- What is their technical level?

• Express information clearly and accurately

• Focus attention to where it is needed

Start with Web Map

• Which data are most important?

• Style your layers to convey meaning

• Set appropriate refresh interval(s) on layers

• Basemap that helps to highlight data

• Options:

- Scale dependent renderers

- Spatial bookmarks

Arcade support in Operations Dashboard

• Arcade

- Expression/scripting language made by esri

- Can be authored and executed across the ArcGIS Platform

- Some example usage:

- Classify numeric data

- Date differences

- Number and date formatting

- Concatenate text

• Symbology in the Map element

• Pop-ups in the Map

- Details element

Arcade in the Web Map

• Symbology in the Map element

Arcade in the Web Map

• Pop-ups in the Map

Presenter(s)

Arcade

Dashboard Layout

The goal of a dashboard is NOT to see how

many different ways you can display your data

Keep it simple

A

Design Approach Build focused dashboards

Design Theory

• Flexibility-usability tradeoff:

• Source: https://medium.com/about-codecademy/horror-vacui-1af263f068bb

As the flexibility of a system increases,

the usability of the system decreases

Design Theory: Flexibility-Usability Tradeoff Example

usability

flexibility

A

Design Theory

• Hick’s Law:

• Source: https://lawsofux.com/

The time it takes to make a decision

increases with the number and complexity

of choices

Dashboard Layout

• General guideline: Keep it simple

• How will the Dashboard be used?

vs

Dashboard Layout

• Configure a dashboard to the audience’s requirements

• Use appropriate elements

• Provide contextual information

• Use color to focus on certain data

Design Theory

• Miller’s Law:

• Source: https://lawsofux.com/

The average person can only keep 7

(plus or minus 2) items in their working

memory

Dashboard Layout – Example 1

• Suggestions to

improve?

Dashboard Layout – Example 2

• Suggestions to

improve?

Dashboard Layout – Example 3

• Suggestions to

improve?

Dashboard Layout – Example 4

• What about this one?

Dashboard Layout – Some Good Examples

Dashboard Layout – Some Good Examples

Dashboard Layout – Some Good Examples

Design Approach Consider the end user’s perspective

How you think your

dashboard will be used

How everyone else uses

your dashboard

Dashboard Layout Considerations

• Use Case: Want a single URL to access and view many Dashboards

• 3 approaches to solve:

1. Use a Story Map to contain the Dashboards

2. Display several Dashboards on a web page

3. “Stack” several Dashboards on top of each other

single URL

Dashboard Layout – Contain in a Story Map

Dashboard Layout – Display on a Web Page

Dashboard Layout – Stack Embedded Content Elements

Dashboard Elements Many data visualization options

Dashboard Elements

• Header

• Side Panel

• Map and Map Legend

• Serial chart

• Pie chart

• Indicator

• Does a Dashboard need to have ALL of these elements?

• Gauge

• List

• Details

• Rich text

• Embedded Content

Tips for Visual Elements

• Ensure they are legible

• Provide context to data

• Less is more

Charts

• Visualize your data so that you can make better decisions faster

• Likely one of the key data visualizations used in a Dashboard

• Pie Chart → Show part-to-whole relationships or for data composition

• Serial Chart → Compare something between different groups or track change(s) over time

of people are

visual thinkers

Pie Chart element

• Use ‘donut’ style over ‘pie slices’ style

• Limit to 6 categories or less

• Use labels or legend, not both

Pie Chart Examples

• Suggestions to

improve?

Serial Chart element

• Start from ‘0’ value, especially when there are many categories

• Use 5-7 lines at most

• Remove gridlines

• Use scalebar when applicable

• Suggestions to

improve?

Serial Chart - Good Examples

Serial Chart - Good Examples

Serial Chart - Good Example

Indicator element

• Great performance indicator

- Simple, easy to interpret

• Leverage other properties

- Icon

- Supporting text

- Colors

Indicator - Good Examples

List element

• Only display relevant information

- Purpose of the list

• Considerations:

- Which attributes are needed?

- In what order?

- How many features?

• Leverage HTML to help format appearance

Gauge element

• Provide context

• Unit of measure

Gauge Example

Embedded Content element

• Include web pages, video, and apps

• Social media content

• Can provide additional context to Dashboard

• Video

- Get the embed code (an HTML fragment)

- copy/paste its ‘src’ property

- Set Content Type as Document

• <iframe width="1280" height="720" src="https://www.youtube.com/embed/wmnkAOO6Qo4" frameborder="0"

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Embedded Content element

• Survey123 web forms

- Support data collection workflows

• Web AppBuilder apps

- Enable editing workflows

- Incorporate custom widget functionality

• 3D web scenes

- 3D visualizations

Mobile Dashboard Example

Colors can be used for Different Purposes

• Connect related data together across different elements of the dashboard

• For branding purposes to create a feeling of authenticity

• Evoke emotion (discomfort or relief)

• Ease eye strain and reduce harshness in dim lighting environments

• Create a captivating aesthetic

Using Color in Data Visualizations

• If you need more than 7 colors in a chart, consider

- Use another chart type

- Group categories together

• Use same color for the same variables

- Across different elements

• Apply appropriate contrast

• Use intuitive colors

• Light colors for low values, dark colors for high values

Dashboard Color – Example 1

• Suggestions to

improve?

Dashboard Color – Example 2

• Suggestions to

improve?

Dashboard Color – Example 3

• Suggestions to

improve?

Design Theory

• Von Restorff Effect:

• Source: https://lawsofux.com/

Aka: The isolation effect, predicts that when

multiple smaller objects are present, the

one that differs from the rest is likely to

be remembered

Colors – Some Good Examples

• Select colors to contrast with the background

Colors – Example 1

Colors – Example 2

Colors – Example 3

Interactive Dashboards

• An interactive dashboard involves:

1. Events: map extent change or selection change (triggered by user)

2. Actions: spatial/attribute-based filtering or map actions

3. Defined at source elements, applied to target elements

• Configure and apply multiple filters to drill down on data

• Set up attribute-based filters to show related records

• Flexibility-usability tradeoff: As the flexibility of a system increases,

the usability of the system decreases

Selectors and Filters

• Header or Side Panel?

- Header → minimal choices

- Side Panel → more choices

• Filters

- How many?

- Buttons or Dropdown?

- Configure actions

- Spatial or attribute?

Mobile Dashboard Considerations

• Dashboards authored for Desktops need to be refactored for mobile

• Configure focused Dashboards

- Less is more

• What is the purpose of the mobile Dashboard?

- Keep information content minimal

• Authoring experience for mobile Dashboards is different

• Blog: Strategies & Best Practices for using Dashboards on your Smartphone

Designing Mobile Dashboards

• Need to refactor the layout for mobile devices

A

ArcGIS Solutions Team

• Industry template

Dashboards

• https://solutions.arcgis.com/

Resources

• Operations Dashboard product page

• Operations Dashboard help documentation

• Operations Dashboard – Useful Links blog

- Contains links to many example Dashboards

• Operations Dashboard Customer examples ppt deck (on Compass)

Print Your Certificate of Attendance

Print Stations Located in 150 Concourse Lobby

Tuesday12:30 pm – 6:30 pm

Expo

Hall B

5:15 pm – 6:30 pm

Expo Social

Hall B

Wednesday10:45 am – 5:15 pm

Expo

Hall B

6:30 pm – 9:30 pm

Networking Reception

Smithsonian National Museum

of Natural History

Download the Esri

Events app and find your event

Select the session

you attended

Scroll down to

“Survey”

Log in to access the

survey

Complete the survey

and select “Submit”

Please Share Your Feedback in the App