Entwicklung

Da mein Konzept für den ersten Bildschirm feststand und auch abgenommen wurde, habe ich angefangen, die Map richtig zu positionieren. Ich habe lange an den Koordinaten im Code rumgespielt, bis es gepasst hatte und mir die Map richtig angezeigt wurde.

Nachdem die Karte an der richtigen Position platziert war, fügte ich Buttons für die verschiedenen Crimelevels hinzu. Durch Klicken auf einen dieser Buttons passt sich die Karte an das ausgewählte Crimelevel an. Wenn man beispielsweise auf Crimelevel 3 klickt, zeigt die Karte nur die Verbrechen dieses Levels an. Je mehr Verbrechen in diesem Crimelevel stattgefunden haben, desto intensiver ist die Farbe auf der Karte. Zu Beginn gab es keinen Übergang von der Karte zum dunklen Hintergrund. Dies habe ich geändert, indem ich die erste Farbe, die mit der Anzahl der Verbrechen verknüpft ist, auf Schwarz gesetzt habe. So wird das Rechteck schwarz gefärbt, wenn in dem Gebiet des ausgewählten Crimelevels keine Verbrechen stattgefunden haben.

Nachdem meine erste Ansichtsidee schnell feststand, überlegte ich, wie ich nun alle 9 Crimelevels zusammenführen könnte, die bisher nur einzeln betrachtet werden konnten.

Meine erste Idee war, dass ich auf eines der Rechtecke auf der Karte klicke und mir dort alle 9 Crimelevels für dieses spezifische Gebiet angezeigt werden. Davon habe ich auch 3 verschiedene Darstellungen bereits in Figma und die ganz linke Idee auch im Code umgesetzt.

Nach Rücksprache habe ich diese Idee jedoch verworfen, da der Informationsgehalt gering war und sich dies besser mit mehr Detailtiefe darstellen lässt. Also habe ich überlegt und eine neue Variante im Code implementiert. Zu den bereits vorhandenen 9 Crime-Buttons habe ich einen zusätzlichen Button hinzugefügt, der mit “alle” beschriftet ist. Wenn man diesen Button drückt, werden auf der gesamten Karte alle neun Crimelevels dargestellt, indem jedes Rechteck, das bisher nur ein Crimelevel angezeigt hat, nun alle neun in einem zeigt. Das bedeutet, dass alle 9 Crimelevels in jedes Rechteck auf der Karte integriert werden.

Diese Idee erwies sich als deutlich besser, da sie einen umfangreichen Informationsgehalt bietet und auf den ersten Blick interessante Daten enthüllt werden können. Als nächster Schritt entschied ich mich dazu, die Rechtecke zu vergrößern, und zwar auf eine Größe von 9x9 Einheiten, um die bisher recht kleinen Rechtecke besser sichtbar zu machen. Dabei habe ich auch die Farben angepasst und eine Legende hinzugefügt, um leicht erkennen zu können, welches Crimelevel welcher Farbe entspricht.

Ich wollte, dass die Farben gleichwertig und dennoch gut erkennbar sind, um einen klaren Vergleich zu ermöglichen. Das Problem war, dass durch die gleichwertigen Farben die Informationen schwer zu erkennen waren, und ich überlegen musste, was ich genau hier sehen möchte. Während ich versuchte, die Farben den Crimelevels zuzuordnen, kam mir eine Idee. Ich habe die Crimelevels vorübergehend in Schwarz dargestellt, um nach und nach die passenden Farben zuzuordnen. Dabei sollte die Symbolik der Farben zur Schwere der Crimelevels passen, wobei die auffälligeren Farben eher den niedrigeren Crimelevels zugeordnet werden sollten, was zu einer Diskrepanz führte.

Nachdem ich es dennoch versucht habe, wurde mir klar, dass ich möglicherweise jedes einzelne Crimelevel bei der “alle” Option ausschalten kann, um die Crimelevels in verschiedenen Gebieten auf einen Blick zu vergleichen. Damit war das Problem weitgehend gelöst. Daraufhin habe ich schrittweise die Farben den jeweiligen Crimelevels zugeordnet und mich auf folgende Farbreihenfolge festgelegt:

Nachdem ich mit meiner ersten Ansicht zufrieden war, habe ich meine Gedanken zur zweiten Ansicht gesammelt und bin zu meinen Skizzen zurückgekehrt, um zu überprüfen, was ich noch bedacht hatte. Mich interessierte, ob bestimmte Crimelevels zu bestimmten Uhrzeiten häufiger auftreten als andere und in welchem Verhältnis sie zueinander stehen.

Die Idee einer Kreisanordnung, die ich zu Beginn skizziert hatte, fand ich ansprechend, weil ich den Parameter der Uhrzeit integrieren wollte. Anfangs plante ich, den Tag durch nach außen gerichtete Rechtecke darzustellen, die die Uhrzeiten über den Tag anzeigen, und nach innen gerichtete Rechtecke für die Nacht zu verwenden. Aufgrund von Platzmangel habe ich diese Idee jedoch verworfen und über eine alternative Anordnung nachgedacht.

Daraufhin kam ich auf die Idee, alle Uhrzeiten, sowohl Tag als auch Nacht, innerhalb eines Kreises anzuordnen. Die Rechtecke sollen in einer Anordnung nach außen gehen, wobei jedes Crime Level seine eigene Farbe erhält. Beginnend mit Crime Level 1 wird jedes folgende Rechteck nach außen angeordnet. Der Kreis selbst soll die Uhrzeit anzeigen, während die Dicke der Rechtecke die Menge der Verbrechen repräsentiert.

Zunächst habe ich versucht, meine Idee in Figma zu visualisieren, um zu überprüfen, ob sie sinnvoll ist. Ich habe zwei Varianten erstellt: eine, bei der die Uhrzeit im Kreis in 24-Stunden-Format mit angeordneten Rechtecken dargestellt wird.

Un einmal die Variante statt Rechtecke mit Kreisen zu arbeiten und eine Tag und Nacht button in die Mitte des Kreises hinzuzufügen um diese beiden Ansichten zu wechseln.

Ich bevorzugte die Verwendung von Rechtecken, da ich bereits in der ersten Ansicht auf Rechtecke gesetzt hatte und einheitlich bleiben wollte. Zudem finde ich die Anordnung der Elemente in einem 24-Stunden-Kreis spannender als die Verwendung eines Tag- und Nacht-Buttons. Auf diese Weise lassen sich die Informationen auf einen Blick vergleichen, und man erkennt schneller, ob mehr Verbrechen tagsüber oder nachts in den jeweiligen Crimelevels stattfinden.

Als die Idee abgenommen und für gut befunden wurde habe ich sie im Code umgesetzt und habe begonnen, eine Kreisanordnung mit 24 Rechtecken zu erstellen, die im richtigen Winkel zueinander stehen. Außerdem habe ich eine Navigationsleiste hinzugefügt, durch die die Kreise nur sichtbar werden, wenn ich auf Ansicht 2 klicke.

Als nächstes habe ich die Rechtecke entsprechend ausgerichtet und basierend auf den neun Crimelevels gezeichnet, jeweils mit einer eigenen Farbe versehen.

Anschließend habe ich versucht, den Kreis in die Mitte des Renderers zu bringen und sicherzustellen, dass die Elemente der ersten Ansicht verschwinden, wenn ich in der Navigation auf Ansicht 2 klicke.

Zum Abschluss habe ich die Farben angepasst und jedem Crimelevel eine eigene Farbe zugewiesen. Ich habe die Farben aus der ersten Ansicht für die Crimelevel-Buttons übernommen, um eine Zusammengehörigkeit zu vermitteln, da sie für die jeweiligen Crimelevels stehen. Außerdem habe ich der Navigation eine Transparenz gegeben, sodass bei Klick auf Ansicht 2 die Ansicht 1 eine Opazität von 50% erhält und umgekehrt.

Abschließend habe ich zwei Legenden hinzugefügt, um die Ansicht verständlicher zu gestalten und die Bedeutung der verschiedenen Elemente zu erklären.