Post on 19-Jul-2020
transcript
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 – 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