4 – Strategies for Dashboard DesignDerek Law, Product Manager - Apps

@GIS_Bandit

Topics

• Dashboard design strategies• Considerations for mobile dashboards• Single URL endpoint for multiple dashboards

Designing a dashboard

• Know your audience:- What question(s) are they trying to answer?- What actions will be enabled by this information?- What is their technical level?- How are they going to view the dashboard?

- Web browser vs. mobile device

• Express information clearly and accurately

• Focus attention to where it is needed vs

Dashboard design

The goal of a dashboard is NOT to see howmany different ways you can display your data

Keep it simple

A

Design Theory: Flexibility-Usability Tradeoff example

usability

flexibility

A

Design Approach Build focused dashboards

COVID-19 dashboards: simple vs complex

A

Dashboard design challenges

• Communicate and share data in an effective way• Balance functionality vs. usability• Consider end user(s) technical level• Consider user interface & user experience• Aesthetically pleasing manner

Leverage colors in dashboards

• Connect related data together across different dashboard elements• For branding purposes• Create a captivating aesthetic • Ease eye strain and reduce harshness in dim lighting environments

Using color in data visualizations

• If you need more than 7 colors in a chart, consider- Using another chart type- Grouping 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

COVID-19 dashboard examples

COVID-19 dashboard examples

Evolution of a dashboard

• Johns Hopkins University COVID-19 dashboard

A

COVID-19 dashboard design tips

• Keep it simple• Highlight actionable information• Use maps and data• Consider non-English speakers• Use screen real-estate wisely• Design it for mobile• Provide a narrative

https://bit.ly/34Fv2UK

Mobile dashboard considerations

• Dashboards authored for desktops need to be refactored for mobile• Configure focused dashboards

- Less is more- Keep information content minimal

• Authoring mobile dashboards is different- Simplified layout; stack elements

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

Designing mobile dashboards

• Need to refactor the layout for mobile devices

A

Mobile dashboard strategy

• Embed desktop and mobile dashboards into ArcGIS Experience Builder- Enables mobile responsive user experience with a single URL link- Video: Make Your Dashboards Mobile Friendly- Blog: Two dashboards, one intelligent URL

ExperienceBuilder

Web Dashboard

Mobile Dashboard

Dashboard layout considerations

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

• Approaches to solve:• Use a Story Map to contain the Dashboards• Display several Dashboards on a web page

single URL

Dashboard Layout – Contained in a Story Maphttps://bit.ly/2V09qPM

Dashboard Layout – Contained in a Story Maphttps://bit.ly/2V09qPM

A

Dashboard Layout – Display on a Web Pagehttps://www.esri.com/en-us/covid-19/overview#maps-dashboards

Design tip: Copy an existing dashboard

• Blog: How Did They Make That Dashboard?

• Copy a dashboard’s item ID #• From Dashboard home page → Create Dashboard • Add ?id=itemID# to the Create Dashboard URL

Dashboard data visualization tips

• Design for your audience- Consider their technical level- What question(s) are they trying to answer?- Build focused dashboards

• Design for your display environment- Desktop vs mobile device

• Elements should have a purpose• Ensure they are legible• Less is more

Resources

• ArcGIS Dashboards- ArcGIS Dashboards – Useful Links blog- Links:

- Visualizing Data Effectively on Dashboards- Strategies & Best Practices for using Dashboards on your Smartphone- Provide Context to Your Dashboard Indicators- Pie Charts: Dos and Don’ts- Choosing the right colors for your dashboard