Visualisierungsdesign
1 Visualisierungsdesign
Dieser Bericht dokumentiert die visuellen Encoding- und Designentscheidungen, die im Lauf der Entwicklung des Visualisierungsprodukts getroffen wurden. Er übersetzt das Konzept aus der Projekt Charta in konkrete Designspezifikationen und beschreibt den aktuellen Prototypen.
1.1 Designüberblick
Das Visualisierungsprodukt beantwortet die Kernfrage „Werden Schweizer Bundespolitiker:innen wirklich immer älter?” in einem narrativen Bogen aus vier Seiten. Seite 1 (Headline) liefert die Antwort vorweg; Seite 2 (Aufschlüsselung) zerlegt den Trend nach Partei und Geschlecht; Seite 3 (Mechanismus) prüft, ob ein veränderter Median durch jüngere Einstiege oder längere Karrieren erklärt wird; Seite 4 (Personen) bringt die Extremfälle und die heutige Verteilung als konkrete Personen ins Bild. Diese Struktur folgt dem klassischen overview first, details on demand Pattern [1].
Im Vergleich zum ursprünglichen Konzept in der Charta sind zwei Refinements entstanden. Erstens wurde aus zunächst sechs Seiten eine kompaktere Fassung mit vier Seiten; zwei Sektionen aus einer früheren Iteration (Parteikoalitionen, Parteidisziplin) entfielen mit dem Pivot von der Abstimmungsanalyse zur Altersanalyse. Zweitens haben wir die ursprünglich vorgesehenen Streudiagramme durch klarere Vergleichsformen ersetzt (Boxplots pro Jahrzente statt eines globalen Streudiagramms Eintrittsalter über Zeit), nachdem die ersten Renderings zeigten, dass ein Streudiagramm mit 5400 Mandatspunkten visuell unleserlich war.
1.2 Daten-zu-Visualisierungs-Mapping
| Seite | View | Datenvariablen | Mark | Visuelle Kanäle | Skala |
|---|---|---|---|---|---|
| Headline | KPI-Karten | aktuelle Werte aus parliament_yearly und politicians |
Text | Schriftgrösse, Position | nicht skaliert |
| Headline | Median-Alter NR und SR | year, chamber, median, q25, q75 (parliament_yearly) |
Linie und gefüllte Fläche | x-Position (Jahr), y-Position (Alter), Farbton (Kammer), Transparenz für IQR-Band | linear, linear, kategorial |
| Aufschlüsselung | Median-Alter pro Partei | year, party_harmonized_de, age (parliament_yearly) |
Linie | x-Position, y-Position, Farbton (Partei) | linear, linear, kategorial |
| Aufschlüsselung | Median-Alter nach Geschlecht | year, gender, age (parliament_yearly) |
Linie | x-Position, y-Position, Farbton | linear, linear, kategorial |
| Mechanismus | Eintrittsalter pro Eintrittsjahrzent | entry_decade, entry_age (politicians) |
Box-and-Whisker | x-Position, Box-Geometrie für Quartile, Punkte für Ausreisser | ordinal, linear |
| Mechanismus | Mandatsdauer-Verteilung | total_tenure_years (politicians) |
Balken (Histogramm) | x-Position (Bucket), Höhe (Anzahl) | linear, linear |
| Mechanismus | Mediane Mandatsdauer pro Jahrzente | entry_decade, median total_tenure (politicians) |
Balken | x-Position, Höhe | ordinal, linear |
| Personen | Top-10 Listen (jüngste, älteste, längste Karrieren) | name, party, entry_age oder total_tenure, year (politicians) |
Text in Tabelle | Reihenfolge (Position) | ordinal |
| Personen | Altersverteilung heute | age_today, party_de auf currently_active == True (politicians) |
Gestapelte Balken (Histogramm) | x-Position (Altersklasse), Höhe (Anzahl), Farbton (Partei) | linear, linear, kategorial |
Skalen und Achsen. Die y-Achse aller Alters-Diagramme ist bewusst auf den Bereich 35 bis 70 Jahre limitiert. Eine bei Null beginnende y-Achse würde den Trend optisch flach erscheinen lassen; bei Altersangaben gibt es keine sinnvolle Null. Die x-Achse der Zeitreihen ist linear in Jahren von 1850 bis 2025. Achsenbeschriftungen sind durchgängig auf Deutsch und ohne Abkürzungen.
Farbgestaltung. Die Hauptfarben sind Dunkelblau (#1f4e79) für den Nationalrat und Orange (#e07b3a) für den Ständerat. Für die Aufschlüsselung nach Partei kommt eine kategoriale Palette zum Einsatz, die sich an den traditionellen Parteifarben orientiert (z. B. SVP grün, SP rot, GLP hellgrün), ohne sie streng zu reproduzieren. Sequentielle Skalen (etwa für Heatmaps in früheren Iterationen) verwendeten Plotly-eigene Palette RdYlGn.
1.3 Layout und Komposition
Das Produkt ist als mehrseitige Streamlit-Anwendung organisiert. Die Seitennavigation liegt fix in der linken Sidebar; der Hauptbereich rendert pro Seite genau einen narrativen Block. Die Reihenfolge der Seiten ist durchnummeriert (1 bis 4) und entspricht dem Lesefluss vom Headline-Befund über die Aufschlüsselung und den Mechanismus bis zu den Personen.
+--------------------------------------------------------------------+
| Werden Bundespolitiker:innen älter? |
+----------------+---------------------------------------------------+
| | Seite 1: Headline |
| Navigation | ------------------------------------------ |
| • 1. Headline | [KPI 1] [KPI 2] [KPI 3] [KPI 4] |
| • 2. Aufschl. | |
| • 3. Mechan. | Liniendiagramm: Median-Alter NR + SR |
| • 4. Personen | 1850 .................................. 2025 |
| | |
| Dokumentation | Befund: Alltagsthese stimmt nicht ... |
+----------------+---------------------------------------------------+Innerhalb jeder Seite folgt die Komposition einem konsistenten Muster: Titel, kurze Einleitung mit der Teilfrage, dann die Visualisierung beziehungsweise mehrere Visualisierungen vertikal gestapelt, abschliessend eine schriftliche Beobachtung. Die Streamlit-Layoutoption wide gibt mehr Breite für die Diagramme; der Inhalt scrollt vertikal. Es existiert keine zweispaltige Anordnung innerhalb einer Seite, mit Ausnahme der KPI-Karten auf der Headline-Seite und der Top-10-Listen auf der Personen-Seite, wo st.columns() für nebeneinanderliegende Vergleiche genutzt wird.
Koordinierte Interaktion zwischen mehreren Views ist im aktuellen Prototypen nicht implementiert. Die Hierarchie ist linear: die Seite ist das primäre Navigationsmittel, eine zusätzliche Detail-Ebene innerhalb einer Seite gibt es nicht. Die Responsive-Anpassung folgt den Streamlit-Defaults; auf schmalen Bildschirmen kollabiert die Sidebar in ein Burger-Menü, und Plotly-Charts skalieren über use_container_width=True.
1.4 Interaktionsdesign
Die Interaktivität bleibt auf das Minimum beschränkt, das den narrativen Bogen unterstützt, ohne ihn zu erschweren.
- Navigation zwischen Seiten: Klick auf einen Sidebar-Eintrag wechselt die Seite. Diese Interaktion adressiert direkt die Persona Marco (Persona im Charta-Dokument), der laut Aufgabenbeschreibung in wenigen Minuten eine Übersicht möchte und nur bei Interesse Details aufrufen will.
- Hover-Tooltips auf allen Plotly-Charts: Beim Überfahren eines Datenpunktes erscheint die exakte Zahl. Bei der Headline-Linie etwa wird pro Jahr das Median-Alter pro Kammer eingeblendet. Diese Funktion adressiert insbesondere die Persona Sarah (Datenjournalistin), die für ihre Recherche zitierfähige Zahlen mit Stichtagsangabe braucht.
- Zoom und Pan auf Plotly-Charts: Standardfunktionalität von Plotly, nicht aktiv beworben in der UI, aber für Power-User verfügbar. Erlaubt es, in ein bestimmtes Jahrzent hineinzuzoomen.
Auf eine globale Filterleiste (z. B. „Zeitraum von / bis”, „nur ausgewählte Parteien anzeigen”) haben wir bewusst verzichtet. Solche Filter erhöhen die Mächtigkeit auf Kosten der Aussagekraft.
State Management beschränkt sich auf den aktuellen Seitenkontext; es gibt keine seitenübergreifenden Filter oder gespeicherten Selektionen. @st.cache_data cached die teuren Aggregationen (etwa yearly_chamber_stats()), sodass die App nach dem ersten Rendering responsive bleibt.
1.5 Visueller Stil und Ästhetik
Typografie. Standard-Schriftfamilie aus dem Streamlit-Default-Theme (Source Sans Pro, sans-serif). Hierarchie wird über die st.title, st.subheader und st.markdown Konventionen abgebildet. Innerhalb der Plotly-Diagramme ist die Schriftgrösse auf die Plotly-Defaults gesetzt; Achsentitel und Diagrammtitel sind deutsch und vollständig ausgeschrieben.
Farbpalette.
| Element | Farbcode | Verwendung |
|---|---|---|
| Nationalrat | #1f4e79 |
Linie, Histogramm, Default für Hauptelemente |
| Ständerat | #e07b3a |
Linie, Akzentfarbe |
| Hintergrund | #FFFFFF |
Streamlit-Default |
| Sekundärtext | #666666 |
Achsenbeschriftungen, Captions |
Plus eine kategoriale Palette mit sechs Werten (SVP, SP, FDP-Liberale, Die Mitte, GRÜNE, glp) für die Partei-Aufschlüsselung.
Spacing und Alignment. Wir verwenden das Streamlit-Standardlayout. Diagramme nutzen die volle Containerbreite (use_container_width=True), Tabellen ebenfalls. Zwischen den vertikal gestapelten Sektionen kommt st.divider() oder eine st.subheader() als visueller Trenner zum Einsatz.
1.6 Prototypbeschreibung
- Fidelity: High-Fidelity, produktionsbereiter interaktiver Prototyp.
- Technologie: Streamlit Seite mit Plotly Grafiken, gehostet auf eigenen Server.
- Online: Alles unter einer Domäne: vdss.cboss.dev/streamlit
1.7 Design-Rationale und Iterationen
Pivot vom Abstimmungs- zum Altersthema. Die erste Iteration des Visualisierungsprodukts beschäftigte sich mit Abstimmungsverhalten, Parteikoalitionen und Sprechaktivität auf Basis derselben OpenParlData-Quelle. Sechs Seiten waren angedacht: Übersicht, Zeitverlauf, Geschäfte, Koalitionen, Parteidisziplin und Parlamentarier. Während der Implementierung zeigte sich, dass diese Sicht ohne politikwissenschaftliches Vorwissen für uns schwierig wurde umzusetzen. Wir haben deshalb auf eine einzige falsifizierbare Hypothese eingegrenzt, die ohne Domänenwissen verständlich ist.
Design-Rationale. Die Wahl der vier Seiten folgt einer expliziten Logik: Antwort, Aufschlüsselung, Mechanismus, Personen. Diese Reihenfolge beantwortet schnell die Hauptfrage und erlaubt Nutzer:innen bei Bedarf tiefer in die Materie zu lesen. Die Aggregation der Daten erlaubt es über das ganze Produkt hinweg schnell und ohne grosses Vorwissen was vermittelt wird zu verstehen.
1.8 Schluss
Die wesentlichen Designentscheidungen sind getroffen und im Prototypen umgesetzt. Die Headline-Grafik liefert die Antwort auf die Forschungsfrage in unter zehn Sekunden Lesezeit. Die nachgelagerten Seiten beantworten die Folgefragen, ohne die Hauptaussage zu verwässern.
Offene Punkte für die Evaluation:
- Wirkung der Personifizierung: Ob die Top-10 Tabellen auf Seite 4 die abstrakten Befunde tatsächlich greifbarer machen, müssten Nutzer:innen-Tests zeigen. Aktuell ist das eine Annahme.
- Mobile Lesbarkeit: Die Streamlit-Defaults sind responsive, aber die Sidebar-Navigation wirkt auf einem Smartphone gedrungen. Persona Marco nutzt explizit Tablet und Smartphone, was eine zusätzliche mobile Iteration möglicherweise bedrüngen könnte.
- Screenreader-Zugänglichkeit: Plotly-Charts haben nur rudimentäre Screenreader-Unterstützung. Ein Fallback mit beschreibendem Alt-Text pro Diagramm wäre eine sinnvolle Ergänzung, falls die Zielgruppe entsprechend erweitert wird.