Matt Woodlief, esri Operations Dashboard: Effective by Design
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