Farben

Während des Prozesses habe ich mir auch verschiedene Farbvarianten für die verschiedenen Ansichten überlegt und ausprobiert.

In den ersten drei Varianten gefallen mir die Farbübergänge gut, und es ist deutlich zu erkennen, wo viele und wo eher weniger Verbrechen passieren. Hier habe ich auch mit dem Übergang in den Hintergrund experimentiert. Allerdings stellte ich fest, dass die Farben symbolisch nicht passen: Gelb wirkt zu fröhlich, ebenso wie Orange und Grün. Das Rot in der dritten Variante finde ich von der Bedeutung her passender, aber es ging unter, da es von Gelb und Orange überstrahlt wurde. Image

Deshalb habe ich mich für Farben entschieden, die sowohl von der Symbolik, als auch von dem Kontrast und besser zusammenpassen und klar anzeigen, wo die meisten Verbrechen geschehen. Die linke Variante fand ich ansprechend, da ich dachte, dass das Rosa gut zum zuvor verwendeten Rot passt und in kräftigen Farben dargestellt werden kann. Dennoch fand ich den Übergang von Lila zu Türkis in der rechten Variante stimmiger und auffälliger. Daher habe ich mich für diese Farbvariante für meine erste Ansicht entschieden.

Layout

Nachdem ich die Farben festgelegt und die Anzahl der Elemente für meine erste Ansicht bestimmt hatte, begann ich in Figma mit dem Layout zu experimentieren. Zunächst dachte ich daran, ein zweispaltiges Design zu verwenden, aber das wirkte sehr unruhig und unübersichtlich. Image

Dann habe ich versucht, einspaltig zu arbeiten, und fand, dass alles geordneter wirkte und für mehr Ruhe sorgte. Anschließend habe ich versucht, die Legenden nach oben zu verschieben, aber das führte dazu, dass der obere Bereich gedrängt aussah, während unten ein großer schwarzer Raum entstand, was ein Ungleichgewicht verursachte.

In der mittleren Variante habe ich die Legenden versetzt angeordnet, da ich dachte, dass alle klickbaren Elemente unten platziert werden sollten und die nicht klickbaren oben. Sinnvollerweise hätte ich jedoch auch die nicht klickbaren Legenden in der 2. Ansicht nach oben platzieren müssen, was das gleiche Problem wie beim linken Layout erzeugt hätte. Außerdem fand ich es einheitlicher, alle Legenden, egal ob klickbar oder nicht, unten zu positionieren, damit alles seinen Platz hat und es bei einem Ansichtswechsel keine großen Veränderungen entstehen.

Deshalb habe ich mich für die rechte Anordnung entschieden. Das Einzige, was hier noch nicht stimmte, waren die Kästen um die Navigationsleisten. Ich bin bei den Strichen geblieben, da die Kästen stilistisch nicht passten und zu viel Aufmerksamkeit auf sich zogen. Die Aufmerksamkeit sollte eher auf der Mitte des Bildschirms, auf der Heatmap, liegen.

Alle Ansicht

Wie bereits bei der Entwicklung erwähnt, habe ich mich intensiv mit den Farben für die “Alle”-Ansicht beschäftigt. Bevor ich die Idee hatte, die Farben einzeln auszuschalten, um sie nacheinander anzuordnen, habe ich zunächst alle Farben gleichzeitig geändert und dabei lediglich die Reihenfolge variiert.

Farben

Da ich das Layout bereits festgelegt hatte, habe ich mich bei der 2. Ansicht nur noch mit Farbvarianten beschäftigt.

Ich dachte zunächst, dass es logisch wäre, alle Crimelevels in den gleichen Farben darzustellen – sowohl bei der ersten Ansicht in den beiden Legenden als auch bei der zweiten Ansicht in den jeweiligen Rechtecken. Allerdings habe ich mich dagegen entschieden, weil in der ersten Ansicht die Farben bei “alle” zum Vergleich einzeln ausgeschaltet werden können. In der zweiten Ansicht hingegen sind alle Farben gleichwertig, was keinen Sinn ergibt, da die Farben dort nicht ausgeschaltet werden können. Der Vergleich der Crimelevels wird dadurch erschwert, und es ist unlogisch, weil Crimelevel 1 am meisten hervorstechen sollte, da es die schwersten Verbrechen widerspiegelt.

Also habe ich überlegt, welche Farben man verwenden könnte, und habe erneut die Farbvarianten getestet, die ich bereits bei der Heatmap ausprobiert hatte. Ganz rechts habe ich Gelb wieder aufgenommen, weil ich den Kontrast zu Lila gut fand. Dennoch störte mich, dass Gelb nicht zu den schwersten Verbrechen, also Crimelevel 1, passt, da es zu fröhlich wirkt. Dann habe ich die Farbpalette von Blau zu Pink in Betracht gezogen, die mir bei der Heatmap zweitbeste gefallen hatte. Diese Variante habe ich letztlich gewählt: Zwar ist Blau ebenfalls ziemlich leuchtend, aber wenn man die Augen zusammenkneift, bleibt Pink präsenter und sticht hervor. Deshalb habe ich es so gelassen. Dieselbe Farbpalette habe ich dann auch für die Navigation in der ersten Ansicht verwendet, um die Crimelevel-Buttons rechts einheitlich zu gestalten und die Zusammengehörigkeit der Bedeutung zu betonen.