Datenvisualisierung

Das semesterumfassende Projekt in Programmiertem Entwerfen II befasst sich mit dem Thema der Datenvisualisierung. Bei der Auswahl des Inhaltes gab es keine Einschränkungen – es sollte nur persönliche Interessen widerspiegeln und eine zeitliche Veränderung (Geschichte) darstellen. Für die visuelle Umsetzung standen vor allem Grundformen zur Verfügung, auf alphanumerische Zeichen und Transparenzen sollte weitestgehend verzichtet werden.

Thema und Recherche

Alle vier Jahre wird in Deutschland ein neuer Bundestag gewählt – und auch dieses Jahr, nämlich am 26. September 2021, steht eine solche Wahl an. Das Image der klassischen Volksparteien ist schon etwas länger angeknackst und Corona-Krise, Finanzkrise, Flüchtlinge und Klimawandel ebnen anderen Parteien den Weg. Den Wandel, den unser Parteienspektrum seit Gründung der Bundesrepublik Deutschland 1949 durchlaufen hat und besonders den Zu- bzw. Ablauf, den bestimmte Parteien auf diesem Weg erfahren haben, wollte ich genauer unter die Lupe nehmen. Also ist meine Themenwahl auf die Ergebnisse der Bundestagswahlen (genauer gesagt der Zweitstimmen) von 1949 bis 2017 gefallen.

Die notwendigen Daten hierfür konnte ich dem Internet entnehmen: Sowohl der Bundeswahlleiter (S. 16–21) als auch die Bundeszentrale für politische Bildung stellen hier ausführliche Aufzeichnungen zur Verfügung. Die Ergebnisse meiner Recherche habe ich dann in folgender Tabelle zusammengefasst (auch als Google Sheet hier einzusehen):

Tabelle der Wahlergebnisse

Die fett gedruckten Zahlen bedeuten, dass die Partei in dieser Legislaturperiode Teil der Regierung war, die dünneren Zahlen zeigen dementsprechend die Zugehörigkeit zur Opposition an.

Skizzen und Variantenbildung

Um das Thema visuell zu erfassen und auch darstellen zu können, habe ich als erstes analoge Skizzen erstellt. Hierfür habe ich mich sowohl an den herkömmlichen Darstellungen von tatsächlichen Hochrechnungen und Ergebnissen orientiert, als auch etwas experimentellere Versuche unternommen. Die Halbkreise zum Beispiel sind von der runden Anordnung der Sitze im Plenarsaal des Bundestages inspiriert.

Analoge Skizzen


Für weitere und besonders genauere Exploration ging es dann an die digitale Umsetzung (bei mir in Adobe Illustrator) der Skizzen und deren Weiterentwicklung. Die ersten Umsetzungen sind eher am Ausprobieren interessiert, deswegen enthalten noch nicht alle Darstellungen die genauen Daten. Bezüglich der Farbigkeit habe ich mich beim Entwerfen vorerst für die parteitypischen Farben entschieden.

Radiale Entwürfe
Bar Chart Entwürfe
Unit Chart Entwürfe
Alluvial Diagram Entwürfe


Die Variante des Alluvial Diagram schien mir erst die passendste zu sein. Nach einigem Überlegen und Abwägen von Vor- und Nachteilen (z.B. Unübersichtlichkeit, wenig Aussage auf viel Raum, … ) habe ich mich wieder von dieser Idee abgewandt und für einen Entwurf aus dem Bereich Bar Chart entschieden. Die Entwicklung von den hier entstandenen Varianten hin zum Endprodukt kann im nächsten Kapitel nachverfolgt werden.

Ausarbeitung

Für die weitere Ausarbeitung hin zur finalen Datenvisualisierung habe ich also einen Entwurf aus den Bar Charts gewählt. Basierend auf diesem sind einige Varianten entstanden, die ich dann abgewogen und verglichen habe. Zuerst waren z.B. die Parteien durch ihre klassischen politischen Farben (in einer abgeschwächte Version) repräsentiert. Um das ganze neutraler zu gestalten, habe ich mich dazu entschieden, sie alle in der gleichen Farbe zu zeigen und nur durch die Anordnung im Spektrum von links nach rechts zu differenzieren. Die Zeit, die anfangs durch verschiedene Sättigung und Position angegeben wurde, habe ich allein mit der Position kodiert (die Zeit verläuft hier von unten nach oben). Der Abstand zwischen den einzelnen Parteisäulen musste auch extra erprobt und angepasst werden, sodass ein Vergleich zwischen ihnen möglich ist, die Säulen aber nicht miteinander verschwimmen. Als zusätzliche Information sollten auch noch die jeweiligen Regierungs- und Oppositionsparteien voneinander unterscheidbar sein: Sättigung und Fläche/Umriss waren hier Optionen. Da der Umriss (besonders in den hellen Farben) schwer zu erkennen ist, ist die Entscheidung auf die Kodierung durch Sättigung gefallen.

Ausarbeitung
Finale Darstellung

Form und Farbe

In der genaueren Ausarbeitung des finalen Entwurfs haben sich schnell kantige, klare Formen als passend herauskristallisiert. Obwohl (oder besser gesagt, gerade weil) die Wahlen ein sehr persönliches, subjektives Thema sind, war es mir ein Anliegen, die Ergebnisse möglichst objektiv darzustellen. Denn wer wen wählt ist zwar von Person zu Person unterschiedlich, die Ergebnisse allerdings sind als solche zu akzeptieren (dass das auch anders geht, hat man dieses Frühjahr in Amerika beobachten können). Präzise Formen prägen also meine finale Darstellung, man soll ohne Fehlinterpretation das Ergebnis erkennen können.

Ähnlich ist meine Entscheidung bei der Farbigkeit gefallen. Die Entwürfe sind vorerst noch farbig (Orange als “unpolitische” Farbe, Blau inspiriert von den Stühlen im Bundestag, der Verlauf von Gelb nach Rot inspiriert von den Stadtwappen von Bonn und Berlin), haben für mich aber zu voreingenommen gewirkt. Farben sind besonders in unserem politischen System stark mit Parteien verbunden, weswegen ich mich schließlich für eine neutrale, monochrome Farbigkeit in zwei verschiedenen Grautönen entschieden habe.

Form und Farbigkeit


Kodierung

Die Informationen, die ich anfangs in der Tabelle (s. oben) in schriftlicher alphanumerischer Weise gesammelt habe, mussten mit einem Kodierungssystem in die visuelle Sprache übersetzt werden:

  • der Zeitverlauf wird durch die Position in y-Richtung dargestellt
  • das Parteispektrum wird ebenfalls durch die Position, aber in x-Richtung gezeigt
  • die Stimmanzahl kann an der Höhe der einzelnen Balken abgelesen werden (alle Balken eines Jahres ergeben zusammen 100%)
  • Regierung und Opposition sind durch die Helligkeit kodiert
    Kodierung


    Ergebnis

    Nachdem alle diese Informationen getroffen waren, galt es, die fertige Darstellung zusammenzusetzen! Hier ist sie ohne jegliche Art der Beschriftung zu sehen. Zur Dekodierung kann das Bild “Kodierung” (s.o.) genutzt werden!

    Finale Visualisierung ohne erklärende Legende/Beschriftung
Plakat

Die fertige Datenvisualisierung sollte dann auf einem Plakat (A2) präsentiert werden. Auch hier ohne Beschriftung! Um sich das ganze als Plakat vorstellen zu können und nicht “nur” auf ein große Darstellung zu schauen, habe ich ein Mockup (Vorlage) erstellt.

Plakat mit Datenvisualisierung ohne Beschriftung

Für ein intuitiveres Verständnis habe ich im Nachhinein noch eine beschriftete Version erstellt:

Plakat mit Datenvisualisierung mit Beschriftung
Einsatz von Typografie

Um meine Datenvisualisierung intuitiver und unterschwelliger zugänglich zu machen, war eine Beschriftung sinnvoll (s. Plakat mit Beschriftung). In meinem Fall sind besonders die Parteien, der zeitliche Verlauf und die genaue prozentuelle Verteilung zu beschriften. Diese geben genaue detailreiche Auskünfte über die Entwicklung über die Jahre, die aus der reinen Form- und Farbsprache nicht hervorgehen und zeigen gleichzeitig Thema und Informationen, ohne dass eine weitere Erklärung notwendig ist. Die Darstellung kann für sich stehen.

Für diese neue Informationsebene habe ich mich wieder am Wunsch nach neutraler Darstellung orientiert. Deswegen ist meine Wahl auf die Schrift DIN Pro gefallen, sie vermittelt meiner Meinung nach die Informationen ohne sich zu stark in den Vordergrund zu drängen. Farblich ist die Schrift an der Farbigkeit der Formen angelehnt.
Die Schrift ist so angeordnet, dass sie eindeutig zugeordnet werden kann, die Darstellung aber totzdem “alleinstehend” wirken lässt.

Da die Schrift im Vergleich zu den Formen der Datenvisualisierung eine relativ kleine Fläche einnimmt, war dort der farbliche Unterschied zwischen den Grautönen schlecht zu erkennen. Deswegen habe ich mich bei der beschrifteten Version für einen helleren Grauton (#AFAFAF) für die Oppositionsparteien entschieden.

Repräsentativer Ausschnitt aus der beschrifteten Version
Website

Entwürfe

Wie die ersten Entwürfe für die eigentliche Datenvisualisierung startet auch der Website-Prozess mit analogen Skizzen. Da für mich schnell klar war, dass es sich bei meiner Website um einen Onepager handeln soll, stand bei der ersten Entwürfen besonders der oberste Teil der Landingpage im Fokus.

Erste analoge Entwürfe

Für die weitere Ausarbeitung habe ich mich mit zwei Entwürfen (Nr. 2) und 4)) intensiver auf Adobe Illustrator beschäftigt und die Seite strukturiert. Beide sind hier ausschnitthaft abgebildet:

Zwei weiter gedachte Entwürfe

Der linke (blaue) Entwurf funktioniert vor allem bei einer bestimmten Bildschirmgröße gut – jeder Abschnitt bzw. Ausschnitt ist als ein in sich geschlossenes Kapitel zu verstehen. Da dies aber nicht besonders vorausschauend ist (Browser-Fenster können jegliche Höhe und Breite annehmen und der Übertrag auf ein mobiles Gerät wäre auch sehr kompliziert geworden), habe ich mich für die rechte, graue Version entschieden. Von diesem ersten Entwurf bin ich dann für die weitere Planung und Ausarbeitung ausgegangen.

Ausarbeitung

Für einen ersten Prototypen habe ich den Illustrator-Entwurf in Figma nachgebaut. Hier sind schon erste Interaktionen möglich, man bekommt ein Gefühl für die Fluidität des Webs.

Blick hinter die Kulissen des Figma-Protoypen

Wichtige Elemente waren für mich besonders eine “sticky” Navigationsbar (bleibt beim Scrollen oben “kleben”), ein ausgewogenes und informatives Text-Bild-Verhältnis und die interaktive Erfahrbarkeit der Informationen.
Mit diesem ersten Prototypen und der Erkenntnis über die für mich wichtigen Elemente ausgestattet ging es dann an die Umsetzung im Tool “Webflow”. Hier lassen sich responsive (funktioniert auf Desktop und Mobilgerät) Layouts fürs Web erstellen, ohne dass eigenständig der Code geschrieben werden muss (das übernimmt das Programm).
Gestaltung und Inhalt standen schon mehr oder weniger fest: Das Layout war erstellt, die Schriften (DIN-2014 und Cutive Mono) ausgewählt und die Farben und Bilder festgelegt. Für Texte und Zusatzinformationen habe ich wieder die Bundeszentrale für politische Bildung zu Rate gezogen.

Der Fokus lag also vor allem auf der technischen Umsetzung: Für die vertikale Teilung der Seite habe ich Spalten (“columns”) verwendet, die verschiedenen Textblöcke durch “Selectors” definiert und für die Navigation durch Zeitstrahl und Parteispektrum das Tool der “Tabs” für mich entdeckt.

Blick hinter die Kulissen von Webflow


Für die mobile Version habe ich die zwei Spalten auf eine reduziert – die Inhalte sind jetzt wegen der geringen Screengröße untereinander angeordnet – und das Menü über ein Icon (Kreis) erreichbar gemacht. Es erscheint nur, wenn der User es braucht und auf den Kreis klickt, um auch hier Platz zu sparen.

Menüzugriff bei schmalem Bildschirm



Interaktionsmöglichkeiten

Die wichtigste Interaktion (für das Zurechtfinden auf der Seite) ist die Navigation. Meine Navigationsbar hat drei Unterkapitel (Bundestagswahlen, Daten und Fakten, Parteienspektrum), die einen zum jeweiligen Abschnitt bringen und ein Icon (Bundestagsadler), das zurück nach oben führt. Die Navigationsbar bleibt immer an Ort und Stelle, sodass man auch mühelos zwischen den Kapiteln springen kann.
Durch Interaktionsmöglichkeiten werden auch ein Zeitstrahl, der mehr Infos zur jeweiligen Wahl als nur die prozentualen Ergebnisse gibt, und das Parteienspektrum erfahrbar: Man kann immer nur eine Jahreszahl/Partei anwählen, über die dann ausführlicher berichtet wird. So ist der User nicht mit zu viel Text auf einmal überfordert und die Möglichkeit zum eigenen Experimentieren lädt zum Entdecken ein. Damit diese Option der Interaktion ersichtlich ist, ist schon eine Info ausgeklappt. Auch die Maus lässt erkennen, dass die Elemente “klickbar” sind, da sie beim Hovern ihre Gestalt ändert.

Interaktionsmöglichkeiten am Beispiel Parteienspektrum



Anpassung der Darstellung fürs Web

Um meine Datenvisualisierung, die ja unter anderem Kernstück der Website ist, sinnvoll einzubauen, musste ich sie ein wenig verändern und anpassen: Da das Scrollen intuitiv und automatisch von oben nach unten erfolgt, erschien es mir sinnvoll, den zeitlichen Ablauf “umzukehren”: Die Darstellung beginnt jetzt oben mit dem Jahr 1949 und endet unten mit 2017. Da die ganze Visualisierung nicht auf einmal auf dem Bildschirm zu sehen ist, habe ich außerdem die Leiste mit den Parteien “sticky” angelegt: Sie bleibt sichtbar, solange man sich innerhalb der Darstellung bewegt, so muss man sich die Anordnung der Parteien nicht merken.

Sticky Parteienleiste zum einfacheren Verständnis

Für die mobile Version habe ich die Darstellung kompakter für den schmaleren Screen gemacht: Die Prozentzahlen stehen jetzt nicht mehr gesammelt an der linken Seite, sondern unter dem jeweiligen Balken. So hat die visuelle Darstellung mehr Raum und ist nicht zu kleinteilig.

Repräsentativer Ausschnitt aus der für Mobilgeräte angepassten Darstellung



Fertige Website

Nach diesem ganzen Prozess bestehend aus Planung, Experimenten, Programme Kennenlernen und schließlich Umsetzen und Zusammenbasteln ist eine fertige, funktionstüchtige Website entstanden. Sie ist hier online abrufbar (ganz egal, von welchem Gerät!).
Ich wünsche viel Freude mit meinem Ergebnis und hoffe, Dein Interesse für und Dein Wissen über die Bundestagswahlen in Deutschland geweckt und angesprochen zu haben!