Dashboards

von der Datenflut zur

datengetriebenen Entscheidung

Elisabeth Engel

@_lizzelo_

https://unsplash.com/photos/npxXWgQ33ZQ

Eines Tages im November...

https://i.stack.imgur.com/QRBYR.png

... tauchen weitere Rechner im Netzwerk auf

Hoppla, das Dashboard des Chefs!

http://192.168.178.143:8080/

# Datenflut

überfordernd

Management Controlling Board

57.000 €

Was sind das für Daten?

Datenpunkte

Aufbereitung

Tabelle

Visualisierung

Info

Rohdaten

Maier

01.01.2012

Huber

01.07.2016

???

??

?

Name	Einstellungsdatum	LOC
Maier	31.01.1978	53279
Huber	01.07.1980	16507

Datengetrieben

Icon made by freepik from www.flaticon.com

Fragegetrieben

Klare Fragestellung

Entscheidungs-

empfehlung

Icon made by freepik from www.flaticon.com

Nutzergetrieben

???

Nutzer

Klare Fragestellung

Dashboard

Entscheidungs-

empfehlung

10 Sekunden

Key Takeaway

Idee

Test

Entwurf

Erstellungsprozess

Papier

Tabellen Diagramm

"Entscheiden Sie, ob ..."

Key Takeaway

Visualisierungen

Visualisierungsarten

Dimensionen

Enkodierung

Farben

Visualisierungsarten

https://extremepresentation.typepad.com/files/choosing-a-good-chart-09.pdf

Tortendiagramme

Shop Kontext

Zeit

Ort

Erfolg / Misserfolg

Zugriffsart

Personengruppe

Dimensionen-Quiz

Shop Kontext

Enkodierung

Kombination

Form

Farbe

http://www.mmi.ifi.lmu.de/lehre/ws1920/iv/slides/iv_ws19_02_perception.pdf

Pre-attentiv wahrnehmbar

attentiv wahrnehmbar

Enkodierung

https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization

zu viel Enkodierung

"Sonnenschein"
"Irgendwelche Kreise"
"Menschen um einen Tisch"
"Komisches Logo"

Verständlichkeit für den Nutzer

Bedeutung &

Wertung

Farben

Farbblindheit

colororacle.org

colorbrewer2.org

Farbschema

Achsen

400

600

Glaube keiner Statistik...

500

100

200

300

400

600

Glaube keiner Statistik...

500

100

300

200

800

700

Proportion

10 %

Variant B

20 %

Variant A

Glaube keiner Statistik...

http://www.stat.columbia.edu/~gelman/communication/Bateman2010.pdf

Konkretes Beispiel

Was können wir verbessern?

Icon made by freepik from www.flaticon.com

???

Nutzer:

Klare Fragestellung:

"Wie ist die Leistung des Teams?"

Selbstorganisiertes Team

1. richtige Daten-Grundlage schaffen

2. Clutter entfernen

3. passende Visualisierung wählen

4. aussagekräftige Enkodierung wählen

5. Beschriftungen einfügen

6. Kontext geben

7. Details bei Bedarf einblenden

- Details bei Bedarf einblenden

- Kontext geben

- Beschriftungen einfügen

- aussagekräftige Enkodierung wählen

- passende Visualisierung wählen

- Clutter entfernen

- richtige Daten-Grundlage schaffen

Visualisierungen optimieren

Key Takeaway

Pinterest • informationisbeautiful.net • behance.net • dailyinfographics.com

coolinfographics.com • visualcomplexity.com • flowingdata.com

improving-visualisations.org/visuals

Inspirationen

Dashboards

Aufteilung

Interaktionen

http://192.168.178.143:8080/

Aufteilung

Feedback einholen

http://192.168.178.143:8081/

Zoomen

Verschieben

Filtern

Sortieren

Verbinden

Hervorheben

Interaktionen

http://192.168.178.143:8080/

Best Practises

Datenflut beherrschen

Klein einfangen ...

Variant A

Variant B

Variant C

Blue Button Test

Red Button Test

Yellow Button Test

Mit echten Daten testen

Key Takeaway

Vorwissen der Nutzer beachten

https://unsplash.com/photos/REZp_5-2wzA

260 000 Piloten

7 Mrd. Laien

Wissen & Verständnis aufbauen

"Challenger" suchen & prüfen:

Lässt sich aus den Daten meine Frage beantworten?

- Daten repräsentativ?

- Daten durch andere Einflussfaktoren verzerrt?

- Datenausschnitt passend gewählt?

Gegencheck

Key Takeaway

Tools

Anforderungen

Tool-Vergleich

Anforderungen

vielseitig

kostengünstig

explorativ

per UI

konfigurierbar

spezialisiert

blackrockdigital.github.io/startbootstrap-sb-admin-2

Eigenentwicklung

Datenquellen: beliebig

Styling: beliebig

Besonderheiten: je nach Framework

vielseitig

kosten-

günstig

explorativ

per UI

konfigurierbar

spezialisiert

Grafana

vielseitig

kosten-

günstig

explorativ

per UI

konfigurierbar

spezialisiert auf Monitoring

Datenquellen: 50+ Plugins für Datenquellen (z.B. MySQL, Elasticsearch)

Styling: Themes per SASS anpassbar

Besonderheiten: Alerting

play.grafana.org

Tableau

vielseitig

kosten-

günstig

explorativ

per UI

konfigurierbar

spezialisiert auf Exploration

Datenquellen: 80+ Connectors (z.B. Microsoft, Oracle, SAP, Mongo DB, MySQL)

Styling: Formatierung per UI

Besonderheiten: Drag & Drop, Daten Präsentation

www.tableau.com

Zoho Analytics

vielseitig

kosten-

günstig

explorativ

per UI

konfigurierbar

spezialisiert auf

BI & Analyse

Datenquellen: 65+ Datenquellen (z.B. Google Drive, Dropbox, Amazon, CRMs)

Styling: Chart Formatierung per UI

Besonderheiten: Drag & Drop & intelligenter Frage-Assistent

www.zoho.com/analytics/

MS Power BI

vielseitig

kosten-

günstig

explorativ

per UI

konfigurierbar

spezialisiert auf Unternehmensdaten

Datenquellen: 80+ Datenquellen (z.B. Excel, IBM, SAP, Azure)

Styling: Formatierung per UI

Besonderheiten: Excel Integration & Kombination mit Azure

powerbi.microsoft.com

TL;DL

Entscheidungs-

empfehlung

Nutzer mit klarer

Fragestellung

10 Sekunden Regel

https://unsplash.com/photos/dyYP4nCi7_o

Ja, das kann sich oft so anfühlen...

https://unsplash.com/photos/PO7CGnoDFUI

doch es lohnt sich!

Dank ans Team

!?!

Diskussion

Fragen?

Empfehlungen?

Anmerkungen?

Folien

@_lizzelo_

engel@interfacewerk.de

Kontakt

slides.com/elisabethengel/dashboards

Credits

interfacewerk GmbH

Matthias Groch

Anna Rieder

Sebastian Ullherr

Information Dashboard Design: The Effective Visual Communication of Data
https://dataschool.com/how-to-design-a-dashboard/
policyviz.com/helpmeviz
infoactive.co/data-design
datavizcatalogue.com
improving-visualizations.org
storytellingwithdata.com
blog.tr3dent.com/2016/03/21/top-10-data-visualization-experts-to-follow-on-twitter
lisacharlotterost.github.io/2016/04/22/Colors-for-DataVis

Quellen & interessante Links