Stromdashboard

Thema

In der Vorlesung Grundlagen im medialen Raum ist ein Dashboard zum Thema Stromverbrauch und Stromerzeugung mit Echtzeitdaten entstanden. Der Fokus liegt auf dem Entwurf des Layouts und der datengrafisch korrekten Darstellung. Die Daten sollen in einem übersichtlichen und interaktiven Dashboard kombiniert und die passende Darstellungsart gewählt werden. Ein wichtiger Aspekt ist der reale Anwendungsfall. Dem Nutzer soll eine schnelle Möglichkeit gegeben werden, sich über die Stromerzeuger und -verbraucher zu informieren, die sich in seiner Nähe befinden. Im Projektverlauf hat sich eine Erweiterung ergeben, die das Auslesen von Daten im eigenen Haushalt ermöglicht.

Gestaltung

Um das Dashboard zu strukturieren, ist ein Styleguide entstanden, passend für die Anwendungsbeispiele.

Um größtmögliche Schriftvarianz zu genieren, sind sechs verschiedene „Text Styles“ eingesetzt worden. Diese unterscheiden sich in Schriftgröße und Schriftschnitt. Die Varianten wurden gezielt angewandt, um das Dashboard ruhig und einheitlich zu halten. Bei der Auswahl der Schriftarten wurde auf eine serifenlose und bildschirmoptimierte Schrift gesetzt. Aufgrund der guten Lesbarkeit in kleine Schriftgrößen fiel die Wahl auf die Schrift Quicksand.

Ein dunkelblauer Farbton wurde als Primärfarbe für den Hintergrund festgelegt. Sie soll bei wechselnden Graphen das Gesamtbild ruhig halten. Die zweite Primärfarbe entstand beim Experimentieren mit der Farbe der Deutschlandkarte. Die Wahl dieser Farbe fiel auf einen hellen Grünton. Der Nutzer soll das Grün mit den Themen Nachhaltigkeit und erneuerbare Energiequellen assoziieren. Der Kontrast zwischen beiden Farben wirkt stimmig und bildet auf dem dunklen Hintergrund eine Akzent-, fast schon eine Highlight-Farbe. Im späteren Verlauf wurde der Hintergrund in zwei Teile geteilt. Um eine klare Abgrenzung zu schaffen, wurde die Farbe Weiß als zweite Hintergrundfarbe festgelegt. Dies dient der besseren Lesbarkeit der Graphen. Des Weiteren werden so erneut Fokuspunkte generiert und die Blicke des Nutzers geleitet. Um Abhebungen in der Navigation zu schaffen, wurde eine Sekundärfarbe festgelegt. Diese wird verwendet, bei untergeordneten Navigationselementen, wie zum Beispiel sekundären Buttons. Der Rotton der Signalfarbe schafft eine farbliche Stimmigkeit zu den Primärfarben und zeigt dem Nutzer weitere Interaktionen an, ohne ihn von den Hauptinteraktionen abzulenken. Die Farben für die Graphen sind aus den bisherigen Farben abgeleitet und übernommen worden. Um eine klare Abgrenzung zu den Primär- und Sekundärfarben zu schaffen, sind diese Farben um 20 % in der Deckkraft reduziert. Dies lässt das Gesamtbild weiterhin konsistent wirken.

Prototyp

Der finale Prototyp besteht aus zwei Hauptansichten. Es wurde auf ein konsistentes Erscheinungsbild geachtet. So können einzelne Elemente immer wiedererkannt werden. Die linke Seite des Dashboards wird für datenspezifische Inhalte genutzt und die rechten Seite für bildliche Darstellung, wie die Deutschlandkarte oder ein Kreisdiagramm. Über kleine Informationsbuttons können dem User spezifische Begriffserklärungen zu dem jeweiligen Thema angezeigt werden. Es wurden viele interaktive Elemente hinzugefügt, wie die Slider in der Kraftwerksuche oder das Tool, um einen Standort markieren zu können. Gerade diese passenden UX-Elemente runden das Erscheinungsbild des gesamten Dashboards ab.