Auf der Jahreshauptversammlung liegt die Bilanz als Tabelle auf dem Tisch, und kaum jemand schaut sie sich länger an. Dabei interessiert viele Mitglieder und mögliche Förderer eine einfache Frage: Wohin geht eigentlich mein Geld? Ein Flussdiagramm auf der Website beantwortet sie auf einen Blick.
Für Geldflüsse eignet sich ein Sankey-Diagramm, weil die Breite jedes Bandes dem Betrag entspricht. Noch stärker wird es, wenn Besucher ihren eigenen Beitrag eintragen können. Technisch geht das etwa mit der freien Diagramm-Bibliothek D3, und die Zahlen sollten immer auch als Tabelle danebenstehen.
Fahren Sie über einen Posten oder tippen Sie ihn an, und tragen Sie unten einen Betrag ein. Verein und Zahlen sind erfunden:
Warum ein Flussdiagramm mehr sagt als eine Bilanz
Eine Tabelle listet Zahlen auf, in die man sich einlesen muss. Im Sankey-Diagramm sieht man ohne Lesen, dass Trainerinnen und Halle den größten Teil ausmachen und die Verwaltung nur einen kleinen. Gerade dieses Verhältnis ist für einen Verein oft die beste Nachricht, und in einer Tabelle geht sie unter.
Das Feld für den eigenen Beitrag macht aus der Statistik eine persönliche Antwort: Von 120 Euro gehen im Beispiel 45,60 Euro in Training und Kurse und 18 Euro in die Arbeit mit Kindern und Jugendlichen. Das ist eine einfache Verhältnisrechnung. Sie sagt nicht, dass genau Ihr Geld dorthin gegangen ist, sondern wie sich der gemeinsame Topf verteilt. Schreiben Sie das auch so dazu.
Sinnvoll ist so etwas überall dort, wo Menschen Geld geben und wissen möchten, was damit geschieht:
- Vereine bei Mitgliedern und vor der Beitragserhöhung.
- Spendenorganisationen gegenüber Spenderinnen und Spendern.
- Förderanträge: ein Link, der mehr zeigt als die Pflichtangaben.
- Betriebe, die erklären möchten, woraus sich ein Preis zusammensetzt.
Eine Pflicht zur Veröffentlichung leite ich daraus nicht ab. Was Sie zeigen, entscheidet Ihr Vorstand, und das sollte auch vorher so besprochen werden.
So bereiten Sie die Vereinszahlen für das Diagramm vor
Die Grafik ist schnell gebaut. Die Arbeit steckt in der Entscheidung, was zusammengehört:
- Fünf bis sieben Posten je Seite. Mehr wird zum Teppich. Fassen Sie Kleinbeträge zusammen und nennen Sie sie ehrlich „Sonstiges“.
- Begriffe, die Mitglieder verstehen. „Kinder und Jugend“ statt der Kontenbezeichnung.
- Die Summen müssen aufgehen. Bleibt Geld übrig oder fehlt welches, gehört es als eigener Posten hinein, etwa „Rücklage“ oder „aus der Rücklage“. Der Rechner im Beispiel verteilt außerdem in Cent, damit die Zeilen immer genau den eingegebenen Beitrag ergeben.
- Das Jahr dazuschreiben und jährlich erneuern. Veraltete Zahlen wirken schlechter als gar keine. Wenn die Zahlen in einer eigenen Datei stehen wie hier, reicht einmal im Jahr eine einzige Änderung.
- Keine Einzelpersonen erkennbar machen. Ein Posten „Geschäftsführung“ mit einer einzigen Person dahinter verrät deren Gehalt. Klären Sie das, bevor es online steht.
Ein Sankey-Diagramm auf der Website: die Möglichkeiten
Mit einem Tabellen- und Diagramm-Plugin. In WordPress gibt es Plugins für Diagramme, zum Beispiel Visualizer mit laut wordpress.org mehr als 20.000 aktiven Installationen. Für Balken und Torten reicht das meist. Ob ein Plugin das Sankey-Diagramm kann, in welcher Version und von welchem Server es seine Dateien lädt, prüfen Sie vor der Entscheidung. Diese Fragen entscheiden darüber, ob es zu Ihrem Datenschutz und zu Ihrer Vorstellung passt. Tabellen und deren mögliche Darstellungen in WordPress als eigenes Thema habe ich in meinem Artikel Tabellen in WordPress, einfach erklärt beschrieben.
Mit der frei verfügbaren Programm-Bibliothek D3. Das Beispiel oben ist mit D3 und seiner Erweiterung d3-sankey gebaut. D3 ist eine Sammlung von fertigem Programmcode für Diagramme im Browser. Es kann fast jede Darstellung zeichnen und lässt sich vollständig an Ihr Erscheinungsbild anpassen, setzt aber Programmierkenntnisse voraus. Die Dateien liegen dabei auf Ihrem eigenen Server, nicht bei einem Anbieter oder einer externen Plattform. Wie Sie so etwas selbst auf Ihrer Website einbinden, steht in meinem Artikel eigenen Code in WordPress einbauen.
Als Bild. Die einfachste Lösung, wenn Sie nur einmal im Jahr etwas zeigen möchten: In einem Diagrammwerkzeug gezeichnet und als Bild mit gutem Alternativtext eingefügt, also dem Text, den Suchmaschinen und Vorleseprogramme statt des Bildes lesen. Sie verlieren das Beitragsfeld und die Hervorhebung (und dazu noch eine ordentliche Portion Einzigartigkeit), gewinnen aber Einfachheit. Für viele kleine Vereine ist das völlig ausreichend.
Was das Flussdiagramm an Ladezeit kostet
Hier umfasst D3 tatsächlich einiges an Datenmenge, und das soll nicht unter den Tisch fallen. Das Beispiel überträgt, gemessen komprimiert mit gzip, so wie der Server die Dateien schickt:
- D3, gesamte Bibliothek: 92,5 KB
- d3-sankey: 2,0 KB
- Grafik, Zahlen und Hilfsdateien: 5,4 KB
Das sind rund 100 KB, zwar weniger als viele Fotos, aber deutlich mehr als die anderen Beispiele in meiner Website-Werkstatt. Der iframe, in dem das Beispiel läuft, lädt deshalb erst, wenn jemand in seine Nähe scrollt. Der übrige Beitrag bleibt davon unberührt. Es gehen keine Anfragen an fremde Server, und nichts wird gespeichert.
Lassen Sie auch die Tabelle stehen. Unter dem Diagramm stehen dieselben Zahlen zum Aufklappen. Wer einen Screenreader benutzt, also ein Programm, das die Seite vorliest, kann mit einem Bild aus Bändern wenig anfangen, und manche möchten einfach eine Zahl nachlesen. Ein Diagramm ersetzt die Tabelle nicht, es macht sie nur verständlich.
Wenn Sie noch keine Zahlen zeigen, beginnen Sie mit dem letzten Jahresabschluss: fünf Einnahmen, sechs Ausgaben, und fragen Sie im Vorstand, was davon alle sehen dürfen. Weitere Ideen zum Ausprobieren finden Sie in der Website-Werkstatt.
