Bei der Konzeptentwicklung und grafischen Ausarbeitung liegt der Fokus auf der Variantenbildung. Dabei experimentieren wir mit verschiedene Möglichkeiten der visuellen Darstellung. Ziel ist es, dass die Darstellung auch ohne Text verständlich ist.

Dies sind meine ersten Vorzeichnungen mit vielen verschiedenen Darstellungsideen. Eine Diagrammart, die dabei häufig vorkam, war das Streudiagramm (Scatter Plot). Mit diesem wollte ich die Teilnehmer darstellen und verschiedene Daten gegenüberstellen. Allerdings stellte sich heraus, dass dies nicht umsetzbar war, da ich zu viele Daten hatte. Es hätten zu viele Punkte gezeichnet werden müssen, was die Übersichtlichkeit stark beeinträchtigt hätte.

Hier wollte ich die Teilnehmer nach ihrer Platzierung gruppieren und dann für jeden Kilometer zeigen, wie schnell die erste und die letzte Person dieser Gruppe waren, um eine Zeitspanne zu erhalten.

Ich hatte auch die Idee, die Strecke mit den Zeiten zu vergleichen, um beispielsweise bei Höhenmetern zu sehen, wie sich die Zeiten der Läuferinnen und Läufer verhalten. Leider gab es keine signifikanten Unterschiede in den Höhenmetern, weshalb ich diese Idee verworfen habe.

Ich wollte auch das Alter der Teilnehmer ihrer Platzierung gegenüberstellen. Dabei stellte ich jedoch schnell fest, dass die gewählte Diagrammart dafür nicht geeignet war und es bei der tatsächlichen Programmierung wahrscheinlich sehr unübersichtlich geworden wäre.

In diesen beiden Darstellungen habe ich mir überlegt, Anteile wie Altersgruppen oder Geschlechteranteile innerhalb der Gruppen der Gesamteilnehmer zu zeigen. Außerdem wollte ich die Teilnehmer mit ihrer Geschwindigkeit pro Kilometer und auch nach ihrer Gesamtschnelligkeit zeigen.

Nachdem ich viele verschiedene Varianten gesammelt hatte, habe ich mich bewusst hingesetzt und überlegt, was ich an einem solchen Wettkampf interessant finde, was ich sehen möchte und wie ich das darstellen kann. Dabei kam mir die Idee, dass ich gerne das Feld der Läuferinnen und Läufer zeigen möchte, um zu veranschaulichen, wie es sich über die Kilometer entwickelt, wie sich Gruppen bilden und wie sich alles bei einem so langen Wettkampf wie einem Marathon auseinanderzieht.

Meine erste Idee, um ein solches Feld darzustellen, war es, die Zeit der ersten Person bei 5 km zu nutzen und dann die Zeiten der anderen Teilnehmer zurückzurechnen. Dabei hatte ich die Zeit auf der x-Achse. Allerdings fiel mir auf, dass nun die Teilnehmergruppe mit der geringsten Zeit wie die letzten aussieht, obwohl sie eigentlich die ersten sind, weil sie die 5 km in der kürzesten Zeit geschafft haben.

Hier sind noch zwei Farbvariationen, die ich versucht habe, um die Geschwindigkeit darzustellen, die sich jedoch leider nicht direkt aus der Darstellung ablesen lässt.

Ich hatte weiterhin die Idee des Läuferfeldes im Kopf und probierte daher die Optionen einer Heatmap aus. Auf dieser ist die gesamte Zeit des Wettkampfes auf der y-Achse bis zum Eintreffen der letzten Person im Ziel aufgeteilt. Auf der x-Achse sind die Kilometer in 5-km-Schritten dargestellt. Die Felder enthalten also Gruppen von Personen, die sich bei diesem Kilometer in der jeweiligen Zeitzone befunden haben. Eine hellere Färbung steht für weniger Personen innerhalb einer Gruppe.

Hier habe ich die y-Achse gedreht, da ich wollte, dass die schnellsten Personen im obersten Feld zu finden sind.

Beim Weiterarbeiten wollte ich gerne die Breite der Balken einbeziehen, um zusätzliche Informationen zu vermitteln. Daher repräsentieren in dieser Darstellung sowohl die Breite der Balken als auch die Deckkraft die Anzahl der Personen innerhalb eines Feldes.

Hier sieht man meine erste Programmierung dieses Konzepts. Ich habe die Deckkraft weggelassen und stattdessen nur die Breite der Balken verwendet. Ansonsten bleibt das Prinzip gleich. Ich habe auch 0 km weggelassen, da dort alle Teilnehmer am Start standen und keine sinnvollen Informationen zu Zeit oder Verteilung ersichtlich gewesen wären.

In den unteren Darstellungen habe ich die programmierte Version mit Figma bearbeitet, um Buttons für Filtermöglichkeiten nach Jahr, Alter und Geschlecht hinzuzufügen. Zudem gibt es auf einer Darstellung einen Play-Button für eine mögliche Animation, bei der die Balken nach und nach erscheinen zum Beispiel nach den Zeiten. Und ein Gesamteilnehmer-Balken wird entsprechend der ausgewählten Filter eingefärbt und aufgeteilt habe ich unten noch eingefügt.

Für meinen zweiten Screen wollte ich eine Siegerehrungsansicht erstellen. Deshalb habe ich in Figma zwei Entwürfe angefertigt, die ich später weiterentwickelt und umgesetzt habe. In diesen Entwürfen gibt es Spalten für die Teilnehmer, die nach ihrer Platzierung sortiert sind. Die Felder in der linken Spalte stehen für die Gruppe von Teilnehmern, die als Erste im Ziel waren. Die Zeilen repräsentieren Altersgruppen in bestimmten Intervallen, wobei alle Teilnehmer innerhalb einer Altersgruppe in einer Zeile dargestellt sind.