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); } }

Doch für den Feinschliff müssen erstmal die Farben für das Hauptkonzept stehen.

Außerdem wollen wir nun endlich auch in Flash anfangen.

Inspiriert wurden wir z.B. durch folgende Grafiken.

http://www.info-quadrat.de/infografik/infografik.html

http://idblog.hdm-stuttgart.de/interaktive_infografiken/files/2010/05/Radioaktivit%C3%A4t_Animation.jpg

Dadurch konnten wir auch schon einige Farbprobleme umgehen. Dennoch sind noch nicht alle Schwierigkeiten gelöst.

Heute haben wir hin und her überlegt, wie wir vom Bilanzkreis zur Gesamtkarte kommen.
Bei einigen Überlegungen fiel die Karte dann komplett weg, bei anderen wurde unser gesamtes Konzept umgestaltet. Außerdem ist beim Prozess der Regelleistung noch gähnende Leere.
Bis Mittwoch arbeiten wir nun verschiedenen Ansätze und Ideen aus und hoffen, dass wir langsam mal die “Gestaltungskonzeption” abschliessen können.

Dabei traten folgende große Schwierigkeiten auf:

• Wie kann man einen Strommast in Illustrator nachzeichnen?
• Welche Farben sollen wir wählen?

Beim Feedback am 9.06.2010 haben wir unsere Ideen präsentiert.

Farbkonzept

Das Farbkonzept wollen wir möglichst ruhig und sachlich halten.
Auch bei unserem Schreibstil haben wir uns nun für den sachlichen Stil und gegen die Erzählform á la Sendung mit der Maus entschieden.

Nur was für Farben nehmen wir jetzt für unsere Abläufe?
Die erste Idee beinhaltete folgende unterschiedliche Zustände, die jeweils eine Farbe erhalten sollten
– Normalzustand – neutrale Farbe (blaugrün)
– Unterversorgung – Signalfarbe, ähnlich zu Überversorgung (lila)
– Überversorgung – Signalfarbe, ähnlich zu Unterversorgung (rot)
– Stromverbraucher – (orange, gelb)
– Stromeinspeiser – (blau)

Detailgrad
Des weiteren haben wir entschieden, dass der Detailgrad unserer Elemente (Strommast, Kraftwerk, Hause) abnehmen soll.
Bis sie möglicherweise nur noch als Farbkreise auf der UCTE Karte zu sehen sind.

Apropos Farbe: Wahnsinn was WordPress beim Upload aus einem ganz normalen DUNKEL grün macht.

Visualisierung des Ausgleichsprozesses

Da wir gerne weniger Farben nutzen wollen, kam uns folgende Idee:
Wir zeigen den Notfall in zwei Schritten.
1. Kreise um Häuser, noch kein Netz sichtbar. Oder Netz hat neutral Farbe (z.B. grau)
2. Ein Kraftwerk fällt aus, der Kreis wird kleiner. Die Häuserkreise pulsieren.
Dann fähbt sich das Netz und gleichzeitig, gehen alle Kreise weg.

Wie geschieht Schritt zwei?
Der Kreis des Hauses wird größer, löst sich auf und drängt seine Farbe ins Netz oder der Kreis verschmälert sich bis zur Linie.

Wenn Ausgleichsenergie kommt, z.B. durch Energieeinspeisung, pulsieren z.B. blaue Wellen durchs Netz, die das gelb wieder zu den Häusern drängen, an denen sich wieder Kreise bilden. Das Netz wird aber nicht blau, sondern bekommt seine neutrale Farbe.

Und welche Farbe nehmen wir?
Am besten wären 3 Farben. Eine für Einspeisung, eine für Entnahme und eine Mischung davon, wenn der Ausgleich stattgefunden hat.
Wir haben uns also wieder an unsere Grundschulzeit erinnert, welche Farben sich wie mischen lassen und schwanken nun zwischen gelb, blau und grün oder rot, blau und lila.

Mal sehen was das Feedback morgen ergibt.

Aus den Gesprächen mit anderen Gruppen haben wir für uns folgende wichtige Aspekte notiert:
– den Begriff Regulierung streichen und durch Regelung ersetzen!
– 80% der Energie kommt aus Steinkohlekraftwerken
– die UCTE Seite (UCTE.org) und besonders, die Blackoutbeschreibung von November 2006 könnte für uns sehr interessant sein
– die Bilanzkreise überschneiden sich (also sollten wir sie vielleicht doch lieber als Kreise darstellen)

Zu unserem Interaktionskonzept haben wir auch sehr sinnvolle Kritik bekommen, die wir auf jeden Fall berücksichtigen werden:
Zum einen können wir das Intro als Kapitelüberschrift streichen und zum anderen können wir auf die Simulation verzichten, da diese schon in unsererm Interaktionskonzept steckt.
Das erleichert wiederum die Navigation, weil wir uns die Einteilung in drei Kapitel schon mal sparen können.

Zu unserem Intro wurde positiv bemerkt, dass es durch das rauszoomen das Bild (ich vor dem Fernseher) zum Muster wird.
Das wollen wir auf jeden Fall berücksichtigen.
Außerdem wollen wir noch eine Zeitleiste unterhalb der Kurvendiagramme einbauen, die die zeitliche Abfolge der Regulierung zeigt.

Positiv wirkten auch wichtige Zusatzinfos, wie dass von einem Kraftwerksausfall in Deutschland auch das gesamte UCTE Netz sofort betroffen ist.
Daher wollen wir nun noch weitere solche Zusatzinfos herausfiltern und irgendwie gesondert kennzeichnen und dem Nutzer zur Verfügung stellen. Dadurch würde sich auch unsere Textlänge etwas verkürzen.

Bei der Erklärung sahen wir dann plötzlich nur noch Kreise, gefüllte, leere, große, kleine, in verschiedenen Farben.

Daraufhin haben wir unser Konzept noch einmal überdacht und uns entschieden wieder zu unserer Ausgangsidee zurückzukehren und die natürlichen Formen der Regelzonen zu wählen. Lediglich beim Bilanzkreis, wollen wir den Kreis als Methapher verwenden, da dieser eher virtuell zu verstehen ist.
Des weiteren haben wir unser Farbkonzept diskutiert. Wir brauchen für verschiedene Zustände Farben. Insgesamt haben wir aber so viele Zustände dass es zu bunt wird, deshalb ist unser Farbkonzept bisher nur eine Idee:

Farbkonzept
Wir brauchen 5 Farben.
– Normalzustand – neutrale Farbe (blaugrün)
– Unterversorgung – Signalfarbe, ähnlich zu Überversorgung (lila)
– Überversorgung – Signalfarbe, ähnlich zu Unterversorgung (rot)
– Abweichung
– Stromverbraucher – (orange, gelb)
– Stromeinspeiser – (blau)