DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices
-
Upload
steve-remington -
Category
Technology
-
view
416 -
download
1
Transcript of DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices
![Page 1: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/1.jpg)
Dashboard Best Practices 2016 v.2 (Copy)
![Page 2: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/2.jpg)
What do business-users want?
![Page 3: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/3.jpg)
![Page 4: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/4.jpg)
Why Dashboards?
![Page 5: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/5.jpg)
2 types of BI users
![Page 6: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/6.jpg)
Dashboards for the BI Consumer
![Page 7: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/7.jpg)
1 - Purpose
![Page 8: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/8.jpg)
Who is the dashboard for?
![Page 9: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/9.jpg)
What data do you need?
![Page 10: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/10.jpg)
4 - Functionality
![Page 11: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/11.jpg)
How will the dashboard be used?
![Page 12: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/12.jpg)
Planning your dashboard
![Page 13: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/13.jpg)
Make dashboards an engaging experience
Examine data further with
TooltipsDrill BrushingFiltersDate SliderSeries SelectionMap Zoom & Layers
![Page 14: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/14.jpg)
2 - Summarize
![Page 15: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/15.jpg)
Single subject area per tabDon't overwhelm
![Page 16: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/16.jpg)
Summary to Detail
![Page 17: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/17.jpg)
Display important metrics with KPIs
![Page 18: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/18.jpg)
3 - Relevance
![Page 19: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/19.jpg)
Is it relevant to your audience
![Page 20: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/20.jpg)
5 - Visual Fit
![Page 21: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/21.jpg)
Right chart to tell your story
![Page 22: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/22.jpg)
6 - Layout
![Page 23: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/23.jpg)
![Page 24: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/24.jpg)
![Page 25: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/25.jpg)
Allocate layout by importance - Before
Reports in the wrong order
Athlete Regional Metrics - wrong shape
Bubble - not wide enough to be clear
Campaign effectiveness - clear
Agency Sales over Time - too small
Heat Grid - clear
![Page 26: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/26.jpg)
Allocate layout by importance - After
Athlete Regional Metrics - correct shape & size
Bubble - double width now, easier to read
Campaign Effectiveness - slightly more space
Agency Sales over Time - double width, easier to read
Heat Grid - clear
![Page 27: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/27.jpg)
7 - Clarity
![Page 28: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/28.jpg)
Titles
What does this chart represent?
![Page 29: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/29.jpg)
Descriptions
![Page 30: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/30.jpg)
Conditional Formatting
Rank Flag Camp Country Invoiced Profit Cost Rating % of Max
1 Italy $8,882,013.53
2 Austria $7,447,954.66
3 USA $5,642,422.04
4 Australia $4,490,174.68
5 New Zealand $3,637,444.43
6 Japan $2,185,357.28
7 Germany $1,681,510.02
8 Canada $1,458,473.15
9 Armenia $1,296,521.07
10 Finland $1,145,911.31
Colours to highlight extremesIcon alertsFlags
![Page 31: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/31.jpg)
Annotations and Reference Lines
Use annotation sparinglyAnnotations get more attention Higher dwell time
![Page 32: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/32.jpg)
8 - Consistency
![Page 33: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/33.jpg)
Consistency
![Page 34: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/34.jpg)
9 - Trust
![Page 35: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/35.jpg)
![Page 36: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/36.jpg)
10 - Share
![Page 37: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/37.jpg)
Any Platform, Any Device
![Page 38: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/38.jpg)
Data-Driven Decisions
![Page 39: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/39.jpg)
![Page 40: DataDrivenSG Hackathon 2016 - Dashboard Design Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022030317/586f84ab1a28ab54768b4e31/html5/thumbnails/40.jpg)