interaktive Informationsgrafik
Diana Vasys (19937)
Judith Höfer (20132)
Lehrveranstaltung “interaktive Infografiken”
Prof. Tille
Sommersemester 2010

Hier gehts zur fertigen Infografik

Projektbeschreibung

Regelenergie und Ausgleichsenergie, was ist denn nun was? Und was funktioniert wie?
Bilanzkreis oder Bilanzgruppe, was ist denn da der Unterschied?
Diese Fragen beschäftigten uns unter anderem in unserer recht langen Recherchephase
zum Thema “Energieregulierung mit Bedarf an Ausgleichsenergie”, welches wir nach einigen
Absprachen in “Energieregelung” umformten.
Nachdem wir dann endlich wussten, wie die verschiedenen Prozesse der Regelung ablaufen,
haben wir uns überlegt, wie wir das einem 360° Publikum vermitteln wollen.

Konzept – Vom Detail zum Abstrakten

Lange haben wir überlegt, wie man das Thema Stromregelung für den Betrachter interessant
und verständlich gestalten kann. Schließlich haben wir uns entschieden vom Detail
zum Großen zu gehen. Denn es ist einfacher bei Stromverbrauchern und -produzenten
anzufangen, die noch jeder kennt. Dann kann man erklären, dass mehrere Verbraucher
und Produzenten zusammen einen Bilanzkreis bilden. Mehrere Bilanzkreise wiederum
werden zu einer Regelzone zusammengefasst, die vom Übertragungsnetzbetreiber (ÜNB)
geführt wird. So kommt man dann ganz einfach vom “Alltagswissen” zu den komplizierteren
Prozessen.

Um ein exploratives Lernen zu ermöglichen wollten wir auch noch einen spielerischen
Aspekt in die Infografik einbauen. In einer Art Simulation sollte der Zuschauer selbst die
Möglichkeit bekommen den Energieverbrauch und die Produktion zu steuern und damit
den Ausgleichsenergiebedarf zu beeinflussen. Eine andere Idee war es, den Betrachter
ein Szenario wählen zu lassen, das dann ein Stromdefizit zur Folge hat. Die Frequenzabweichung
muss der Betrachter dann als ÜNB ausgleichen. Die Simulation sollte dazu
dienen, das Wissen, was der Betrachter sich vorher in der Grafik angeeignet hat, zu
kontrollieren und zu festigen.

Eine weitere Frage war immer wieder, inwieweit wir das Thema Smart Grids einbauen
sollen. Dazu hatten wir uns folgende Aspekte überlegt:

• Was hat Energieregelung mit Smart Grids zu tun?
• Wie können Smart Grids helfen die Ausgleichs- und Regelenergie zu verringern?
• Wie kann man die Energie “clever” nutzen?

Kernaussagen

Am Ende haben wir uns gegen die Simulation entschieden, denn die Person muss unausweichlich
vorher die Informationsgrafik durchgehen. Außerdem haben wir uns gefragt:
Wenn eine Person etwas über Energieregelung wissen will, was will sie dann genau wissen?

Und daraus haben wir folgende Kernaussagen abgeleitet, die die Grafik auf jeden Fall
erklären soll:

• Wie funktioniert Ausgleichsenergie?
• Was ist Regelleistung und welche Formen gibt es?
• Was sind Bilanzkreise und Regelzonen?
• Wo können wir den Betrachter mit einer Geschichte oder einem Alltagsbeispiel
  abholen?

Umsetzung

Die Idee mit dem Alltagsbeispiel fand schließlich in die Umsetzung, indem wir von einem
Wohnzimmer rauszoomen zu einem Hochhaus in dem jeder gleichzeitig den Kühlschrank
aufreißt. Trotz des plötzlich ansteigenden Stromverbrauchs steht immer Strom zur Verfügung und das
obwohl man ihn noch nicht wirklich speichern kann. Am Schluss des Intros stellen wir
deshalb die Frage, wie das gehen kann und erklären, dass die Energieregelung dafür
verantwortlich ist. So leiten wir über auf unsere Informationsgrafik.

Navigation

Für die Navigation wollten wir erst einen Zoombalken ähnlich wie bei Google Maps
anbieten, doch dann ist uns aufgefallen, dass wir einen recht chronologischen Verlauf
zeigen. Also kippte unsere Navigation, um die Metapher eines Zeitstrahls zu verwenden.

Farbkonzept

Das Farbkonzept war unser größter Knackpunkt. Anfänglich hatten wir die Idee
5 Farben für jeweils einen der Zustände zu verwenden.

• Normalzustand – neutrale Farbe (blaugrün)
• Unterversorgung – Signalfarbe, ähnlich zu Überversorgung (lila)
• Überversorgung – Signalfarbe, ähnlich zu Unterversorgung (rot)
• Stromverbraucher – (orange, gelb)
• Stromerzeuger – (blau)

Doch das war viel zu bunt und so haben wir versucht zu reduzieren, indem wir überlegt
haben, welche Elemente wirklich wichtig sind. Und schließlich sind wir bei 3 Farben angelangt.

• Grau für die unwichtigeren Elemente
• Orange für die Stromverbaucher
• Blau in verschiedenen Abstufungen für die Stromerzeugung und die verschiedenen
  Regelleistungen

Gestaltungssprache

Neben der Isometrie der Häuser haben wir uns auch sonst für einen sachlichen Ton entschieden. Außerdem haben wir einiges abstrahiert. Beispielsweise sind die Häuser und Kraftwerke nun nicht mehr mit einem komplizierten Stromnetz verbunden, sondern über Halbkreise, die den Verbrauch bzw. die Erzeugung symobilisieren. Um den Ausgleich noch deutlicher zu machen, haben wir ausserdem die kleinen Quader gewählt, die sich zu Balken auftürmen. Wir haben diese Gestaltungssprache gewählt, da die Zielgruppe recht groß ist und wir keinen Teil der Zielgruppe speziell ansprechen wollen.

Ein Rätsel war zum Beispiel der Videoimport in Flash. Ganze 2,5 Tage haben wir versucht 20 verschiedene Filmchen in ungefähr 40 verschiedenen Formaten zu importieren. Nichts wollte gehen. Nur die Fehlermeldung poppte immer schön auf.
Des Rätsels Lösung war denn CS5, das ein eigenes Konvertierprogramm mitbringt. Damit ging es dann. Doch da wir nicht beide CS5 haben, mussten wir ab dem Zeitpunkt zweigleisig fahren. Weil doch noch nicht alles perfekt war im Intro, musste ich immer in beide Versionen die Änderungen einbauen.

Ein zweites Rätsel war eine Variable in einer kleinen Funktion, die plötzlich alle Animationen der ganzen Grafike beschleunigt hat. Doch da wir genau wussten nach welchen Änderungen sich die Geschwindigkeit geändert hat, konnten wir das Rätsel schnell lösen.

Und größtes Problem und Rätsel offenbarte sich uns jedoch gestern Abend. Die Grafik stand so weit und wir wollten die Navigation finalisieren.
Eigentlich war ja eine Navi mit Schieberegler angedacht, doch das war nicht möglich wegen der vielen Übergänge. Dann wollten wir eine Buttonsleiste machen auf der man alle Schritte anklicken kann. Das haben wir dann umgesetzt und beim testen mal ein bisschen schneller wild rumgeklickt. Da brach dann das CHaos aus. Tweens die noch nicht fertig waren, spielten noch ab auf Screens, auf denen sie gar nicht vorgesehen waren.
Diese Problem hat uns dann heute den ganzen Tag gekostet. Die Lösung fiel mir dann gestern Nacht im “Traume” ein.
Nun hat man bei unsere Navi nur die Möglichkeit einen Schritt vor und einen Schritt zurück zu gehen. Denn selbst diese ÜBergänge zu realisieren hat den halben Tag gekostet.

Allerdings haben wir uns jetzt gefragt, ob wir nicht einfach nur die Buttons anklickbar machen. Allerdings ist es ganz gut, dass beim Klick über den weiter Button, der Schieber weiter springt und der Nutzer so immer weiss, bei welchem Schritt er gerade ist.

Der nächste Schritt ist nun neben der weiteren Animation, die Textüberarbeitung.
Nachdem wir uns anfangs passende Bilder zum Text überlegt haben und muss nun der Text wieder passend für die Bilder umgeformt werden.

Außerdem brauchen wir noch einen Sprecher als Sportmoderator für das Intro und die Projektbeschreibung.

Kleiner Codeauszug.
Vielleicht findet ja jemand den Fehler.
Besser wäre natürlich mit Case das zu lösen. Allderdings wusste ich nicht, wie das mit dem größer und kleiner als funktionieren soll.
//draggen stoppen und an Position springen
zoom.slider.onRelease = function() {
stopDrag();
var pos = zoom.slider._x;
trace(pos);
if (pos <30){ trace(“kleiner 30″); gotoAndStop(1); } else if (pos <60 ) { trace(“kleiner 60 größer als 30″); gotoAndStop(5); } else if (pos < 90) { gotoAndStop(10); } else if (pos < 120) { gotoAndStop(15); } else if (pos < 150) { gotoAndStop(20); } else { trace(“größer al 150″); gotoAndStop(5); } }