Reporting-Blog

Information Design & Visual Business Intelligence

Eine interaktive visuelle Fußball-Tabelle der europäischen Ligen

Hinterlasse einen Kommentar

Wenn wir uns online die Fußball-Tabellen der europäischen Ligen anschauen, gibt es wenig visuelle Unterstützung zum Lesen der Tabellen. Das gewohnte Bild sind einfache Tabellen. Sie zeigen meist den Namen des Vereins, dessen Tabellenplatzierung sowie Anzahl der Siege, Unentschieden und Niederlagen. Manche dieser Tabellen haben noch das Logo des Vereins als visuelles Highlight.

Gibt es auch andere Formen der Darstellung?

Doch geht es auch anders? Mit den inspirierenden Worten von Edward Tufte, einer der bekanntesten Information Designer, wollte Jon Ferry genau das beweisen.

Seine Ziele:

  • Tabelle, Ergebnisse und Spielplan in einer interaktiven Form zusammenführen,
  • keinen Informationsverlust in Vergleich zu bestehenden Darstellungen,
  • dem Leser zusätzliche Informationen liefern,
  • die Verwendung von visuellen Elementen sollen die Informationsvermittlung unterstützen und keinen reinen ästhetischen Zweck erfüllen.

Und daraus entstand ein sehr gutes Ergebnis.

Die interaktive visuelle Fußball-Tabelle

The_beautiful_table

Bild anklicken, um die interaktive Tabelle zu testen. Quelle: http://the-beautiful-table.com/bundesliga

Die interaktive Tabelle bietet zunächst eine Filterfunktion, in der zwischen den einzelnen Ligen in England, Spanien, Deutschland, Italien und Frankreich gewählt werden kann. Das Logo klassifiziert den Verein. Zwei voneinander optisch getrennte Säulendiagramme zeigen die beiden Saisonhälften an. Insgesamt gibt es 34 Säulen, die jeweils für ein Punktspiel des ausgewählten Vereins stehen. Die Länge der Säulen entspricht der Anzahl der geschossenen Tore, die in den jeweiligen Spielen von der Mannschaft und dessen Gegner erzielt wurden. Das Mittel des Hightlighten und die Länge der Säulen wird dafür verwendet um anzuzeigen, ob es sich um einen Sieg, eine Niederlage oder ein Unentschieden handelt. Wenn die angezeigte Mannschaft ein Spiel gewonnen hat, so wird ein intensiver Ton der Vereinsfarbe gewählt. Bei einem Unentschieden oder einer Niederlage werden matte Farben eingesetzt. Bei identischer Länge der Säulen bedeutet das ein Unentschieden und bei kürzeren Säulen der ausgewählten Mannschaft eine Niederlage. The_beautiful_table_2_KST So wird sehr schnell deutlich, dass die Mannschaften an der Spitze der Tabelle einen Großteil ihrer Spiele gewonnen, dagegen die Mannschaften im Tabellenkeller häufig verloren haben. Ein ähnlicher Eindruck vermittelt auch die Anzahl der geschossenen Tore durch die jeweilige Länge der Säulen. The_beautiful_table_3_KSTMit Hilfe des Mouse-Over-Effekts können auf Anfrage weitere Details zu den Spielen angezeigt werden. So wird beispielsweise innerhalb der Säulen das Datum und die Uhrzeit der Begegnung, die Spielpaarung, das Endergebnisse und die Torschützen mit den jeweiligen Zeitangaben angezeigt. Der Mouse-Over zu der Punktzahl des Vereins gibt Aufschluss über die Anzahl der Siege, Unentschieden, Niederlagen und der Tordifferenz.

Weitere Ideen für die visuelle Fußball-Tabelle

Weitere zu ergänzende Informationen wären, die Nennung des Tabellenplatzes und eine optische Hervorhebung, welche Mannschaften in der Championsleague, im Europapokal, in der Relegation oder welche Vereine in eine niedrige Fußballliga abgestiegen sind. Zudem würde ein zusammenziehen der Tabelle einen besseren Überblick über die gesamte Tabelle auf einer Bildschirmseite ermöglichen.

Oftmals stehen wir auch im Business vor der Herausforderung bestehende Zahlenfriedhöfe oder gewohnte Präsentationen mit neuen Impulsen umzugestalten. Dieses Beispiel zeigt sehr schön auf, dass veränderte Darstellungen in allen Bereichen möglich sind. Also nur Mut. Sie werden die Herausforderung meistern.

Wenn Sie noch die Entwicklungsschritte von Jon Ferry nachlesen möchten, ist das hier möglich. Auf ein gutes Reporting!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s