Stromerzeugung 2011

Erneuerbare Energien in den Bundesländern

Deutschland

Klicken Sie auf ein Bundesland um detaillierte Informationen zu bekommen. Beachten Sie auch die grünen Navigationsleisten im unteren Teil der Hauptbereiche um Zusatzinformationen zu bekommen.
Saarland Rheinland-Pfalz Nordrhein-Westfalen Bremen Niedersachsen Schleswig-Holstein Hamburg Mecklenburg-Vorpommern Berlin Brandenburg Sachsen-Anhalt Thüringen Hessen Baden-Württemberg Bayern Sachsen Bremen
Erneuerbare Energie
22%
Fossile Energie
78%

 

Windkraft 11.5%

Biomasse 6.3%

Photovoltaik 3.0%

Wasserkraft 1.8%

 

 

Informationsvideo

Dokuementation

Hinweis: Diese Seite ist für die Ansicht auf Mozilla Firefox 24 bei einer Auflösung von 1280*800 Pixel optimiert. Es gab einige Unklarheiten im vorhandenen Datenmaterial. In manchen Fällen ergab die Summe der prozentualen Anteile nicht 100%. Es gab jedoch keinen Hinweis dazu - wir haben diese Differenzen mit übernommen. Zur Vereinfachung wurde, analog zum statistischen Material, welches wir genutzt haben Atomenergie mit den fossilen Energieträgern zusammengefasst.

1. Ziel/Idee

Ziel der Infografik ist es einen schnell erfassbaren Überblick darüber zu verschaffen, wie sich die Energiegewinnung in Deutschland auf fossile und eneuerbare Energieträger verteilt.

Besonderes Augenmerk legen wir darauf, eine übersichtliche Vergleichbarkeit der Bundesländer zu schaffen.

Lediglich mit einer initialen Handlungsanweisung und ohne weitere große Erklärung soll die Interaktion intuitiv bedienbar sein.

Der Einsatz erneuerbarer Energien zielt auf die Schonung der Umwelt und die Reduzierung der globalen Erderwärmung ab. Das Thema kann für jedermann interessant sein. Die erkennbare Aussage ist, dass die Differenzen der Bundesländer groß sind und, dass anhand der besten Beispiele ein großer Anteil erneuerbaren Energien im Bereich des Möglichen liegt.

2. Diagrammtyp

Genutzte Diagrammtypen werden durch Inhalte bestimmt. Bei den dargestellten Daten geht es um Vergleiche, Rangfolgen und Aufteilungen.

Hier wurden Balkendiagramme genutzt um eine Rangfolge der Bundesländer danach zu erstellen, welche Bundesländer die größten Anteile der erzeugten Energie, mit Hilfe von erneuerbaren Energieträgern gewinnen. Auch die Rangliste, als Vergleich der erneuerbaren Energieträger je Bundesland, basiert auf Balkendiagrammen.

Um die Gesamtheit der produzierten Energie und deren Unterteilung auf fossile und erneuerbare Energieträger zu verbildlichen haben wir Kreisdiagramme genutzt.

3. Gestaltung

Farbgestaltung

Das Farbschema ergibt sich aus dem Thema. Neben den Farben Grün und Rot, metaphorisch für erneuerbare- und fossile Energieträger war kein Platz für weitere Farbe. Wir haben uns entschlossen alle Elemente, welche inhaltlich nicht vordergründig sind in Grautönen darzustellen.

Ausschließlich Elemente, welche im direkten Zusammenhang mit den Energieträgern stehen, oder zur Interaktionsbedienung vorhanden sind, wurden in den zwei Farben Grün und Rot dargestellt. Der Hoverstatus wird zur Hervorhebung durch dunklere Farbtöne visualisiert.

Der Informationsfilm lehnt sich in der farblichen Gestaltung an die Informationsgrafik an.

Anordnung der Medienelemente

Wir haben uns entschieden unsere Informationsgrafik so aufzubauen, dass sie bei der angenommenen Auflösung, auf einen Blick und ohne Scrollbalken sichtbar ist. Die Aufteilung der Seite erfolgte nach dem goldenen Schnitt.

Der kartografische Teil der Infografik sorgt dafür, dass eine geografische Zuordnung erkennbar wird. Da er allerdings 'nur' Navigationselement ist, haben wir im größeren rechten Bereich die eigentliche Information dargestellt. Alternativ lässt sich über die untere Navigation im Kartenbereich von der Karten- in eine Listenansicht schalten. Hier sind die Bundesländer nach Anteil der erneuerbaren Energien geordnet. So hat man alle im direkten Vergleich und kann, unabhängig von geografischen Wissen durch die Einzelansichten navigieren. Zusätzlich haben wir als Indikator für den Benutzer ein Breadcrumb oberhalb der Karte entwickelt. Dieses bietet, erkennbar durch einen Pfeil, ein zusätzliches Navigationselement, in welchem die einzelnen Bundesländer stehen. Es soll die Navigation auch ohne geografische Kenntnisse zugänglich machen und trägt somit zur Usability bei.

Typografisch haben wir uns, für das Web, unüblicherweise auch für eine Serifenschriftart entschieden. Diese wird für Headlines genutzt. Durch die Größe der Headlines und durch die serifenlose Schriftart des Fließtextes, ist eine gute Lesbarkeit gegeben. Außerdem unterstützt diese Mischung aus klassisch und modern den Konfliktcharakter der zwei Energiegewinnungsarten fossil (klassisch) und erneuerbar (modern).

Metapher Auswahl

In der Infografik und den dazugehörigen Medien lassen sich einige Metaphern wiederfinden. Die Hervorhebung von Grün für alle Interaktionselemente gibt einen metaphorischen Ausblick auf ein grünes Deutschland.

Sowohl in der webbasierten Informationsgrafik, als auch im dazugehörigen Informationsfilm finden sich geografische Merkmale, welche im weitesten Sinne auf 'Wege' hinweisen. In der Grafik ist es der Kopfbereich, welcher die Silhouette einer Landschaft darstellt, im Video ist es ein dargestellter Weg. Beides soll auf den Weg hinweisen, welchen Deutschland im Energiepolitischen Thema 'Erneuerbare Energien' und 'Energiegewinnung' einschlägt.

In der Informationsgrafik, wie auch in dem Video finden sich entlang des Weges Symbole, stellvertretend für bestimmte Energiegewinnungsarten. Im Kofbereich der Informationsgrafik passen sich die Symbole in der Zahl, der Aufteilung der Energiegewinnungarten in den einzelnen Bundesländern an.

4. Interaktion, Animation, Animationstechnik

Einsatz

Informationsgrafik

Animation ist nur sinnvoll, wenn sie einen Zweck erfüllt.

In der Infografik werden Kopfbereich und einzelne Inhaltsbereiche mit zeitlich versetzter Bewegung und Opazitätsveränderungen animiert.


Video

Zusätzlich haben wir das Thema 'Animation' aufgegriffen, um die Möglichkeiten der webbasierten Informationsgrafik durch ein Video gänzlich auszuschöpfen.

Begründung

Informationsgrafik

In der Infografik lassen wir die Karte der einzelnen Bundesländer von der großen Navigationskarte links, in den Informationsbereich rechts gleiten, und die dazugehörigen Informationen nacheinander, zeitversetzt einblenden. Dies soll die Zugehörigkeit zum gewählten Bundesland visualisieren, und dann den Blick lenken, damit der Betrachter die Informationen in der richtigen Reihenfolge ansieht. So lassen sich inhaltliche Zusammenhänge noch einfacher erfassen.

Die Animation im Kopfbereich, welche bei jedem Bundesland neu ausgelöst wird, visualisiert die Verteilung der Energieträger in jedem Bundesland und stellt durch die faltkartenähnlichen Animationseffekte eine Parallele zum Video her.

Im rechten unteren Bereich der Grafik haben wir außerdem den erneuerbaren Energieträger, welcher pro Bundesland am meisten zur Energiegewinnung beiträgt mit einer dezenten Animation visualisiert.


Video

Das Video, schafft mit Audiokommentar und Musik neben der sachlichen Aussage der eigentlichen Infografik, eine emotionale Ebene, erklärt anleitend, verschafft einen einfachen Überblick über die Thematik und gibt einen einfachen Einstieg.

Um einen möglichen Informationsoverload zu vermeiden haben wir dieses Erklärungsvideo nicht zur Bedingung für das Verständnis der Grafik gemacht. Es wurden keine zusätzlichen Informationen verwendet. Sie soll der Animation als Technik nur noch eine alternative, sinnvolle Verwendung verleihen. Die Animation konnte in der Infografik nur sekundäre Aufgaben erfüllen, im Video aber selbst Informationen transportieren.

Technik

Für die webbasierte Animation haben wir CSS3 Keyframe Animationen benutzt und bei einer Iteration von 1 die Elemente via JavaScript zu jedem neuen Auslösen der Animation einmal mit '.clone()' dupliziert und das schon einmal animierte mit '.remove()' entfernt.

5. Formular

Aufbau

Nachdem die Position des Formulars festgelegt war, mussten wir nur noch entscheiden, welche Daten wir abfragen. Wir haben uns entschieden die Anzahl der Felder gering zu halten um die Hürde für den Benutzer gering zu gestalten.

Des weiteren haben wir uns entschieden nur die wirklich relevanten Felder als Pflichtfelder zu kennzeichnen. Zur weiteren Erleichterung haben wir für die Bewertung nach verschiedenen, speziellen Kriterien HTML5 input-Felder vom type 'Range' genutzt.

Alle Felder sind mit einem Label beschriftet, welche mit dem dazugehörigen input-Feld verbunden sind.

Wir haben als erste Handlungsmöglichkeit nach dem Ausfüllen des Formulars den Button zum Versenden platziert und erst dann den Button zum Löschen der Angaben.

Gestaltung

Wir haben eine schlichte Anordnung untereinander gewählt. Der Formularbereich hat eine Hintergrundfarbe bekommen um den Kontrast zwischen Hintergrund und Eingabefeldern zu erhöhen. Die Reihenfolge der Felder ist logsich, somit lässt sich das Formular mittels Tabulator-Taste ausfüllen. Erst werden persönliche Daten wie Name und E-Mail-Adresse abgefragt und im Anschluss alle Daten zur Bewertung.

Durch unterschiedliche Abstände wird die Zugehörigkeit der Beschriftung zu den Feldern, sowie die Unterscheidung der einzelnen Felder vereinfacht.

Eingabefelder entsprechen einer jeweils angemessenen Größe, gemessen an den einzugebenden Daten.

Die gewünschte Form der Daten wird durch die type-Vorgabe erreicht. Ein input-Feld vom type 'Range' ermöglicht nur die gewünschte Eingabeform.

Das Sternchen, zur Kennzeichnung von Pflichfeldern ist hervorgehoben und somit kaum zu übersehen.

Die Platzierung und die farbliche kodierung der Buttons sollen dazu beitragen, die Wahrscheinlichkeit des Absendens zu erhöhen.

Quellen