FIFA World Cup

Ob Hand Gottes von Diego Maradona im Jahre 1986 oder das einzigartige 7:1 im WM-Halbfinale in 2014 zwischen Deutschland und Brasilien, solche Spektakel und Ereignisse in der Geschichte der Fußballweltmeisterschaft haben sich in unser Gedächtnis eingebrannt. Die Generationen werden sich weiterhin gegenseitig Geschichten erzählen, die von unvergesslichen Erlebnissen und Ergebnissen handeln. Doch was passiert, wenn wir den Spielverlauf aus einer ganz anderen Perspektive betrachten? Was, wenn wir nicht nur die Endergebnisse, sondern auch die Halbzeitergebnisse genauer unter die Lupe nehmen? Das vorliegende Projekt zum Thema FIFA World Cup beschäftigt sich genau mit dieser Fragestellung, welche Halbzeitspielstände Einfluss auf den Spielverlauf hatten.

In dem Abschlussprojekt von Programmiertes Entwerfen II liegt der Schwerpunkt darauf, einen Gesamtüberblick über die Daten zu erzeugen, die dahinter liegende Datenlogik visuell aufzuarbeiten und mit den gelernten Gestaltungsmitteln deren Vorgänge und Zusammenhänge zum Vorschein zu bringen. Einzelne typografische Elemente und abstrakte Formen sollen die Aufmerksamkeit auf sich ziehen. Semantische Elemente wie Piktogramme sind wie in den Übungen nicht erlaubt. Die Implementierung erfolgt im Browser mit den Grundtechnologien HTML, CSS und JavaScript (jQuery).

1.1 Datensatz

Der Datensatz stammt von Kaggle. Er handelt von den FIFA World Cups seit 1930 bis 2020. Er umfasst 964 Datenreihen und Dutzende Spalten zu spiel- und personenbezogenen Informationen. Er ist auch redundant angelegt und bietet je nach Informationsgehalt auch beispielsweise Torinformationen in Kurz- und Langausführung an.

Mein Projekt handelt von den Halbzeitständen und deren Auswirkungen auf den Spielverlauf in Gruppen- und K.O-Phasen. Aus den Spalten zu den Toren, Eigentoren und regulären Elfmetertoren mussten erstmal alle Halbzeitstände ermittelt werden, weil diese im Datensatz nicht separat erhalten waren. Aus Entwicklungssicht baute sich also mein gesamtes Projekt um das Problem herum auf.

Um Zusatzinformationen wie die Wochentage aus den Datumsangaben zu extrahieren, musste der Datensatz in einem Programm wie Exploratory umstrukturiert, zusätzlich um neue Spalten erweitert und grundsätzlich aufbereitet werden, um später in JavaScript einheitlich verwendet werden zu können.

1.2 Leitfrage

Wie wirken sich die Halbzeitspielstände auf den weiteren Spielverlauf in den Gruppen- und K.O-Spielen der WM-Turniere von 1930 bis 2020 aus?

Weitere Leitfragen könnten dahingehend gestellt werden, ob sich durch Farben und Formen Trends erkennen lassen und ob weitere Spielinformationen Einfluss auf das Gesamtwirkungsbild nehmen könnten. Im Rahmen dieses Projekts konzentriert sich der Rest des Dokus auf die Leitfrage von oben.

1.3 Konzeption

In den ersten Entwürfen habe ich mich vom Stil her an das Thema heranwagen wollen. Viele piktografische Teilentwürfe konnte ich nicht übernehmen. Um eine Jahresansicht zu ermöglichen und die Halbzeitspielstände anzeigen zu können, haben sich UI-Elemente wie die Timeline oder ein Streudiagramm in den ersten Versuchen positiv gezeigt. Eine Monatsansicht soll auch dazu dienen, die Verläufe der letzten WM-Turniere über ein Kalenderjahr hinweg aufzuzeigen, vor allem wenn man an Katar als Ausreißer denkt.

Bei den Diagrammentwürfen angekommen sollte das Streudiagramm zum Einsatz kommen, wenn man die Verteilung der Halbzeitspielstände zwischen Heim- und Auswärtsmannschaft aufzeigen möchte. Das Treppendiagramm sollte den zeitlichen Verlauf von Torständen vermitteln, obwohl sich dort die Halbzeitspielstände schwieriger darstellen lassen. Eine Heatmap ist eine mögliche Lösung, die zusätzlich mit dem visuellen Parameter Farbe hohe Unterscheidbarkeit liefern soll und gleichzeitig die Verteilung zwischen Spielen eines WM-Jahres aufzeigen kann. Dazu sollen in einer Hoveransicht Infos “on demand” erscheinen können, um den Informationsgehalt der Daten - wie in den Übungen gelernt - nicht zu verlieren.

1.4 Prozess

Da ich nun einen möglichen Diagrammtyp gefunden habe, musste ich noch in weiteren Entwürfen erproben, wie sich die Heatmap auch in den Darstellungen für die Gruppen- und K.O-Spielen beweist. In der K.O-Spielübersicht wächst die Heatmap um eine Spalte und weist neben Heim- und Auswärtsmannschaft noch absolute Spalten auf für Verlängerung und Elfmeterschießen. Und aus der absoluten Anzahl an Siegen und / oder Unentschieden soll schlussendlich die Farbe ermittelt werden können, um darüber die Gewichtung bzw. Häufigkeit an Spielverläufen zu kommunizieren.

1.5 Varianten und Umsetzung

Vom Blatt Papier zum Prototyping in Figma - die Erstellung der Wireframes und die Prototypisierung richtete sich vor allem nach schon bekannten Farbschemen und Layouts, die man sonst in der Werbung oder auf Covern sehen würde. In der Praxis jedoch weisen die gewählten Hintergrund- und Vordergrundfarben entweder zu wenig Kontrast zueinander auf oder sie nehmen durch ihr stark visuelles Gewicht den Fokus von den Daten weg. Ab dem Punkt war klar, dass ich mich weiter an den Daten orientieren und daran bemessen sollte, welche layouttechnische und farbliche Darstellung am besten für das Projekt wäre.

Also habe ich mir sowohl die Werte für die Spielanzahl pro Turniertag als auch die Wahrscheinlichkeiten der Spielphasen in Abhängigkeit vom Halbzeitstand aus der Heatmap noch einmal genauer angesehen. Es zeigte sich, dass jene Spieltage mit maximal vier Spielen den Großteil des Datensatzes ausgemacht haben, während 5 bis maximal 8 Turnierspiele am Tag die Seltenheit dargestellt haben.

Wie in der Übung gelernt wollte ich den drei Kriterien Harmonie, Unterscheidbarkeit und Gewichtung folgen. Dadurch, dass die Spieltage nicht gleich verteilt sind, musste ich also auch mit der Unterscheidbarkeit der Farbpalette brechen, ohne die Harmonie zu sehr zu beeinträchtigen. Das lag daran, dass eine gleichmäßige, unterscheidbare Farbpalette den Tagen mit den meisten Spielen übermäßig viel visuelles Gewicht gegeben hätten, obwohl sie extrem selten vorkommen. Das ist der Grund, warum die Farbpalette zum Ende hin immer weniger unterscheidbar ausfällt.

Um die Wahrscheinlichkeit auszudrücken, entschied ich mich nicht für eine abgestufte Farbpalette sondern für einen Farbverlauf. Für jeden Prozentwert der Wahrscheinlichkeit soll eine Farbe aus dem Farbverlauf entnommen werden und damit stellvertretend für den Prozentwert stehen. Das einzige Problem was hierbei auftreten kann ist dann der Kontrastwert zwischen Textfarbe und gewählter Hintergrundfarbe der Heatmap.

In der Entwicklung wurden zu Beginn der Umriss und die Struktur aufgebaut. Nacheinander folgten dann die Details zur Hauptansicht mit den Spielen und der Seitenansicht mit der Heatmap. Navigationselemente und Filteroptionen waren gegen Ende des Projekts implementiert und weiter ausgearbeitet worden. Farbpaletten wurden dabei ständig angepasst und bis zuletzt mit allen anderen UI- und Interaktionselementen finalisiert.

Alle Aktionen und Interaktionen wurden mit Blick auf den Schwerpunkt des Projekts - der Förderung der Gesamtübersicht über die Daten - konzipiert. Das Zoomen und Scrollen stellt eine wichtige Grundaktion dar, um von der standardmäßigen Makroansicht in die Mikroansicht wechseln zu können. Klicken und Hovern vervollständigen die Grundaktionen, mit denen die User:innen Informationen von der Datenvisualisierung abfragen können. Das Draggen ist dem verschiebbaren Fenster vorbehalten, worin die Spiele pro Spieltag mit Halbzeitspielstand und Endstand angezeigt werden.

Zu den Navigations- und weiteren Interaktionsmöglichkeiten gehören unter anderem auch das Filtern und das Switchen dazu, wenn man die Auswahl an Spieltagen aus der Hautpansicht weiter beschränken oder in der Seitenansicht zwischen den Jahren wechseln möchte, um die Heatmap für das eine Turnierjahr einsehen zu können.

1.6 Entwicklungsverlauf

Unten im Bildkarussell gibt es eine kleine Übersicht über den visuellen Entwicklungsverlauf, welche Bestandteile er zu Beginn angenommen hat und wie sich die Datenvisualisierung immer mehr zu einem Gesamtbild zusammengesetzt hat.

1.7 Ausblick

Optimierungsbedarf besteht vor allem bei den einzelnen Interaktionselementen und -ansichten, wenn man beispielsweise von der Makro- in die Mikroansicht eintauchen möchte. Das Scrollen, mit dem man in die Ansicht reinzoomt, sollte bestenfalls von der Mausposition abhängig sein, um ein smootheres Scrollerlebnis zu anzubieten.

Die allgemeine Usability mit den allgemeinen Kritikpunkten Affordance und Feedback, wie z.B. beim Filtern der Spieltage, sollte ebenfalls einem Usability-Test unterzogen werden, um weitere Erkenntnisse über die Usability des Projekts zu gewinnen.

Was den Erweiterungsaspekt des Projekts angeht, könnten hier mehrere Spielinformationen mit eingebaut werden - seien es eben spielbezogene Informationen wie die Anzahl gezogener Karten oder personenbezogene Informationen zu Spieler- und Trainerteam.

Die Mindestabmessungen für den Prototyp liegen bei 1920 x 1080 (FHD). Es erfolgte keine Anpassung für mobile Geräte. Abweichungen in der Darstellung möglich.