Art, UI & UX für Wissenschaft — eine Recherche über die besten interaktiven Wissenschaftserlebnisse unserer Zeit, erzählt aus zwei Blickwinkeln: dem der Nutzer, die staunen wollen, und dem der Entwickler, die bauen müssen.
Meisterschaft ist Reduktion. Die wirkmächtigsten Wissenschaftsvisualisierungen aller Zeit — Warming Stripes, die FT-Pandemiekurve, Gapminders Blasen — sind die einfachsten. Ein Gedanke pro Bildschirm, eine Frage pro Scrollabschnitt.
Nutzer erleben Meisterschaft als Flow ohne Kontextverlust. Sie können lesen und spielen, ohne den Faden zu verlieren — NUKEMAP-Besucher bleiben im Schnitt fünf Minuten, ein Vielfaches üblicher Verweildauern.
Developer erleben Meisterschaft als deklaratives, reproduzierbares Artefakt. Vega-Lite-Specs, Grapher-Configs, Quarto-Dokumente: Das Werk ist Code und bleibt über Jahre konsistent renderbar.
Die Kluft ist redaktionell, nicht technisch. Distill pausierte 2021 nicht aus Mangel an Werkzeugen, sondern weil 100+ Stunden Arbeit und die seltene Kombination aus Forschungs- und Design-Skill fehlen.
Annotation ist Inhalt. John Burn-Murdoch investiert mehr Zeit in den Titel als in die Geometrie — das Auge wandert im Z-Lesepfad von Titel über Achsen zu den Daten.
Unsicherheit zeigen ist Vertrauensgewinn. Die FT ließ Nutzer zwischen log- und linearer Skala umschalten, statt sie zu belehren — und machte Log-Skalen 2020 zum Volkswissen.
A11y ist Teil der Meisterschaft. arXiv HTML Papers machte Formeln erstmals screenreader-tauglich; Okabe-Ito- und Tol-Paletten sind der Branchenstandard für farbsichere Wissenschaft.
Der Stack 2026 ist ausgereift. Quarto + Observable/D3 + Scrollama deckt 90 % aller Fälle ab — der Engpass bleibt das Urteil: Was muss interaktiv sein?
01
Die Nutzer-Sicht — was normale Menschen als meisterhaft erleben
12 Fallstudien · 10 Muster · Theorie
Fragt man Menschen, warum sie bei einer Wissenschafts-Visualisierung hängen bleiben, hört man selten Worte wie „responsiv“ oder „dynamisch“. Man hört Sätze wie: „Ich habe endlich verstanden, was ein logarithmischer Maßstab ist.“ — „Ich habe zwanzig Minuten dort verbracht.“ — „Ich habe es meiner Mutter geschickt.“ Meisterhafter Science-Content erzeugt drei Dinge gleichzeitig: Verständnis (Aha), Fluss (Ich darf spielen, ohne verloren zu gehen) und Vertrauen (Ich sehe, woher das kommt). Alles andere — Frameworks, Shader, Millisekunden — ist Mittel zum Zweck.
Die Psychologie dahinter ist gut vermessen: Neugier entsteht aus spürbaren, aber schließbaren Wissenslücken (Loewensteins „Information Gap“); Flow aus balancierter Herausforderung; und Lernen aus Wort und Bild gelingt nur, wenn beide Kanäle nicht überladen werden — Richard E. Mayers Cognitive Theory of Multimedia Learning fasst dafür 15 Prinzipien aus über 200 Experimenten zusammen, mit erstaunlich großen Effektstärken: zeitliche Kontiguität d = 1.30, Redundanz-Vermeidung d = 0.87, räumliche Kontiguität d = 0.79, Kohärenz d = 0.70[M1]. Das liest sich wie eine Bauanleitung für alle zwölf Werke, die folgen.
Fallstudien 1–12Die Hero-Werke im Detail
Jede Karte nennt das Werk, die Machenden, eine messbare Spur seiner Wirkung — und das Muster, das man daraus lernen kann.
Warming Stripes
Ed Hawkins · Univ. of Reading · 2018 – laufend · Klimaforschung
Ein Streifen pro Jahr, blau für kühler, rot für wärmer als der Referenzzeitraum — keine Achsen, keine Zahlen, keine Legende. „Keine Worte. Keine Zahlen. Keine Grafiken.“, beschreibt es die University of Reading selbst. Für showyourstripes.info luden im Startmonat Juni 2019 über eine Million Menschen ihr Landes-Grafikpaket herunter; die Streifen wurden auf Bussen, Trikots, Kirchtürmen und einer Papst-Stola gesehen und 2025 ins MoMA („Pirouette: Turning Points in Design“) aufgenommen. 2023 musste Hawkins eine dunklere Rotstufe ergänzen — das heißeste Jahr der Reihe passte sonst nicht mehr auf die Skala.
Warum meisterhaft: Maximale Reduktion bei voller wissenschaftlicher Integrität — die Grafik steht für Milliarden Einzelmessungen und bleibt trotzdem in einer Sekunde erfassbar. Hawkins’ Bilanz im Bulletin of the American Meteorological Society 2025: Die Streifen „funken Gespräche an“ — über 200 Länder-Versionen, ein jährlicher #ShowYourStripes-Day am 21. Juni, WMO und Klimawetter-Moderatoren als Multiplikatoren.
Reduktion auf ein SignalEmotion vor ErklärungSkalierbare Generierung (je Ort eine Variante)
Coronavirus Trajectory Tracker — Financial Times
John Burn-Murdoch & FT-Grafikteam · März 2020 – 2022 · Epidemie / Datenjournalismus
Eine einzige Kurvenschar mit Zeit seit dem 100. Fall auf der x-Achse und logarithmischer y-Achse — die berühmte „hairy chart“ machte exponentielles Wachstum lesbar, als die Welt es brauchte. Das FT-Team dokumentierte jede Design-Entscheidung: Warum log („eine Gerade statt eines Hockeyschlägers“), warum nicht pro Kopf (Fokus auf Trajektorien), warum bestätigte Fälle mit breitem Caveat. Auf Kritik an der Skala reagierte man nicht mit Belehrung, sondern mit einem Toggle: log/linear umschaltbar für alle. Google-Suchen nach „log scale“ erreichten am 22. März 2020 ihren Fünf-Jahres-Höhepunkt — gut eine Woche, nachdem die FT begonnen hatte, die Charts zu erklären.
Warum meisterhaft: „Charts change minds“, sagt Burn-Murdoch — aber nur, wenn Titel, Achsen und Daten eine Einheit bilden. Er nutzt Eye-Tracking-Studien (der Z-Lesepfad: Titel → Achsen → Daten) und schreibt Titel als Nachrichten, nicht als Beschriftung. Das Werk lehrte einer Generation Redaktionen und Lesern zugleich visuelles Denken.
Unsicherheit zeigenKontrollumkehr (log/linear)D3, stark getemplatet + Styleguide
Gapminder — Bubble Chart & Dollar Street
Hans Rosling, Ola & Anna Rosling Rönnlund · 2005 – laufend · globale Entwicklung
Roslings animierte Blasendiagramme (Einkommen, Lebenserwartung, Bevölkerung, Region — fünf Dimensionen in einem Bild) wurden durch TED-Talks zu den bekanntesten Statistik-Visualisierungen der Welt; die dahinterliegende Software Trendalyzer wurde an Google verkauft. Die radikalere Idee kam von Anna Rosling Rönnlund: Dollar Street ordnet Familien nach Einkommen — „Fotos als Daten“. Startheim, Bett, Zahnbürste: 469 dokumentierte Familien in 67 Ländern, über 46.000 Fotos, kostenlos für alle. „Menschen in anderen Kulturen werden oft als furchteinflößend oder exotisch dargestellt“, sagt sie. „Das muss sich ändern. Wir zeigen, wie Menschen wirklich leben.“
Warum meisterhaft: Abstrakte Zahlen und konkretes Menschsein im selben Interface. Der Nutzer vergleicht entlang einer einzigen, ehrlichen Achse (Einkommen), statt in Länder-Klischees zu denken — Gapminders eigenes Mission Statement ist die „fact-based worldview“.
Vergleichen entlang einer AchseAbstraktion + KonkretionAnimation als Argument
earth.nullschool
Cameron Beccario · seit 2013 · Meteorologie / Ozeanographie
Ein Globus, auf dem der Wind in Echtzeit strömt — Partikel-Trails über NOAA-GFS-Vorhersagedaten, alle drei Stunden aktualisiert, später ergänzt um Ozeanströmungen, Wellenhöhen, Aerosole, Korallen-Bleaching-Alarme und Polarlicht-Grenzen. Beccario baute es als Lernprojekt („to learn javascript“), inspiriert vom hint.fm-Winddukt und D3, und veröffentlichte alles als Open Source — der Quelltext wurde zum Blaupausen-Klassiker für Karten-Timelapses. Die PBS nannte es bei Launch schlicht: „You don’t need a weatherman to know which way the wind blows. You just need this interactive map.“
Warum meisterhaft: Lebendigkeit. Kein Dashboard, kein Filter-Chaos — ein einziger lebender Planet, dessen Daten man durch Klicken, Drehen und Zeitschieben ertastet. Dass ein Solitär-Werkzeug weltweit in Nachrichtenzimmern und Klassenzimmern gleichzeitig hängt, ist die seltenste Form von UX-Erfolg.
Daten in BewegungEin Orb, keine LeisteOpen Source, TopoJSON, Partikel-Rendering
NASA Eyes on the Solar System
NASA/JPL (Jason Craig u. a.) · Revamp 2022 · Raumfahrt
Browserbasierte 3D-Simulation des Sonnensystems aus echten Missionsdaten: 126 Raumfahrzeuge, Zeitreise von 1949 bis 2049 — man kann neben Cassini durch die Eisfontänen von Enceladus fliegen oder Perseverances „seven minutes of terror“ Schritt für Schritt nachfahren. Die 2022er Version (über zwei Jahre Arbeit) fügte geführte „Journeys“ hinzu, und Eyes on Asteroids sogar eine eingebaute Scrollytelling-Tour über 30.000+ erdnahe Asteroiden. „You just need an internet connection, a web browser, and some curiosity“, sagt Produzent Jason Craig — und genau das ist das Produktversprechen.
Warum meisterhaft: Maßstäbe erlebbar machen. Komplexe Missions-CAD-Modelle werden zu leichten, web-optimierten 3D-Assets; aus einem abstrakt-entfernten Themenfeld wird ein Ort, den man besucht. Mehrfach Webby-gekrönt (u. a. People’s Voice „Data Visualization“ 2023 für Eyes on Asteroids, NASA.gov 2024/2025).
Nicky Case & Community · seit 2014 · Lehre / Systemdenken
Case prägte die Genre-Bezeichnung für interaktive Nichtfiktion, die man spielerisch liest: „Parable of the Polygons“ (mit Vi Hart) erklärt Segregation durch verschiebbare Dreiecke und Quadrate, „The Evolution of Trust“ Spieltheorie durch runde Spielrunden. Ihre Design-Patterns sind Pflichtlektüre: der Hook ohne Vorwissen, die „Interest Curve“ mit kontra-intuitiven Wendungen alle paar Minuten, Puzzle statt Belehrung („Puzzle It Out“), Wette vorm Antworten („Place Your Bets“) und am Ende immer ein offener Sandbox-Modus — „in the beginning I give the player my question; at the end I want them to explore their own.“ Der Hub explorabl.es versammelt die ganze „unorganisierte Bewegung“ von Künstlern, Codern und Lehrkräften.
Warum meisterhaft: Interaktivität mit pädagogischem Nutzennachweis. Jede Interaktion ist eine Frage, nicht ein Effekt. Und das Material ist Public Domain — Meisterschaft, die sich vermehrt, statt zu verkaufen.
Spielen first, lesen secondSandbox als FinalePublic Domain, eigenes Tooling (Nutshell)
Zwei webbasierte Interaktive, die Black-Box-Modelle von innen heraus erlebbar machen: CNN Explainer (IEEE VIS 2020) zeigt, wie ein winziges VGG-Netz ein Espresso-Foto klassifiziert — Klick auf ein Neuron öffnet die Faltungs-Animation samt Mathe-Detail; gebaut mit Svelte, D3 und TensorFlow.js, läuft komplett lokal im Browser. Transformer Explainer (CHI 2026, über 490.000 Nutzer) ließ als erstes Tool ein echtes GPT-2 live im Browser laufen: eigener Text rein, Temperatur-Schieber bewegen, Attention-Matrizen und Einbettungen in Echtzeit atmen sehen. Eine 90-Personen-Studie zeigte signifikante Verständnis- und Engagement-Gewinne.
Warum meisterhaft: Abstraktionsebenen, die nahtlos ineinandergreifen — Übersicht → Baustein → Formel — ohne dass der Nutzer je „zu tief fällt“. Der Vorgänger TensorFlow Playground (Smilkov & Carter, 2016) formulierte das Versprechen schon perfekt: „Don’t worry, you can’t break it.“
Progressive Disclosure entlang der AbstraktionEchtes Modell statt Spielzeug-AnimationSvelte + D3 + ONNX/TF.js
NUKEMAP
Alex Wellerstein · Stevens Institute · 2012 – laufend · Nukleargeschichte / Risikkommunikation
Ziel wählen, Sprengkopf wählen („Davy Crockett“ bis „Tsar Bomba“), Detonate drücken — konzentrische Ringe für Feuerball, Druckwelle, Strahlung, kontaminierte Fallout-Fahne, plus geschätzte Opferzahlen aus Bevölkerungsdaten. Ein Mash-up aus Glasstone & Dolans Standardwerk The Effects of Nuclear Weapons (1977) und Webkarten. Bis Mai 2017 zählte das Tool über 113 Millionen simulierte Detonationen; die Menschen blieben im Schnitt rund fünf Minuten — „a long time in an era of endless possibilities for internet distraction“, wie das Bulletin of the Atomic Scientists notierte. Wellersteins Ziel: „die Angst der Menschen kalibrieren“ — eine Atombube ist weder Weltuntergang noch überlebensbares Ereignis, sondern Ingenieurstechnik mit berechenbaren, erschreckend konkreten Folgen.
Warum meisterhaft: Ein kontroverses Thema ohne Sensationalismus explorabel machen. Jede Zahl ist belegt, jede Annahme einsehbar (Höhe der Detonation, Wind), und die Haltung ist ehrlich: Es gibt kein „Survivable!“-Euphemismus und keine Panik-Optik.
Eigene Stadt, eigene FrageAnnahmen offenlegenEffektmodelle + Bevölkerungsdaten kombiniert
En-ROADS Climate Solutions Simulator
Climate Interactive + MIT Sloan · laufend seit 2019 · Klimapolitik
Rund 30 Politik-Hebel — Kohlesubventionen, Elektrifizierung, CO₂-Preis, Aufforstung — und ein Systemdynamik-Modell, das in Bruchteilen einer Sekunde auf dem Laptop durchrechnet, was jedes Setting für 2100 bedeutet: Temperatur, Energiemix, Meeresspiegel. Übersetzt in 23 Sprachen, über 1,5 Millionen Nutzer, 970+ zertifizierte „Climate Ambassadors“, und vor der US-Klimagesetzgebung 2022 diskutierten 128 Kongressmitglieder damit. 2025 ging der Preisregen nieder: System-Dynamics-Award, FT „Responsible Business Education“ Highly Commended, GeSI Education Award.
Warum meisterhaft: Das Modell ist wissenschaftlich kalibriert gegen ganze IAM-Ensembles — aber die Erfahrung ist ein Gesellschaftsspiel: Workshops, Rollenspiele, geführte Debatten. Meisterschaft hier bedeutet: ein industrielles Analysewerkzeug so verpacken, dass Kommunalpolitiker und Teenager dieselben Aha-Momente haben.
Mit Daten spielenGemeinschaftserlebnisSystemdynamik im Browser, 23 Sprachen
Galaxy Zoo startete 2007 die Ära der „people-powered research“: Laien klassifizieren Galaxien, Pinguine, historische Handschriften — 2026 feierte Zooniverse drei Millionen registrierte Freiwillige und die milliardste Klassifikation (zusammen „19,5 Millionen Stunden“ menschlicher Forschungsarbeit, rechnet das Team vor). Über 400 Projekte, über 400 Publikationen, seit 2015 ein offener Project Builder für alle Forschenden — und maschinelles Lernen, das aktiv Freiwilligen-Antworten nachgewichtet. Die Komplementärgeschichte aus dem Apps-Sektor: Seek (2018) erkennt Arten per Kamera-Live-Scan — ohne Konto, ohne Datensammlung, mit verschleiertem Standort und Badge-Gamification für Kinder. iNaturalist-Daten fließen als „research grade“ in GBIF und stecken inzwischen in 7.000+ wissenschaftlichen Arbeiten.
Warum meisterhaft: Teilhabe als Interface. Die Interaktion ist winzig (ein Klick, ein Foto), die Wirkung riesig (echte Entdeckungen, echte Politik — Penguin-Watch-Daten verschoben Grenzen mariner Schutzgebiete). Und Seek zeigt, dass Kindersicherheit und Machine Learning kein Widerspruch sind.
Ein-Klick-BeitragGamification ohne Daten-MolchPanoptes-API, aktives Lernen, Computer Vision
3Blue1Brown & Kurzgesagt — Mathematik und Biologie als Kino
Sanderson baut Lineare Algebra, Neuronale Netze und Kryptographie als reine Animation — mit Manim, seiner eigenen Open-Source-Engine, die heute Tausende für eigene Erklärvideos nutzen. Seine Didaktik ist radikal anti-nützlichkeitsgetrieben: „When people engage with fiction, no one ever asks ‚When am I going to use this?‘ — the same thing fiction can do, so can math. There’s wonder and mystery, and once there’s a story, you can go behind the mechanics.“ (8 Mio.+ Abonnenten; seine Visuals trugen zum Emmy-prämierten Netflix-Dokumentarfilm „A Trip to Infinity“ bei.) Kurzgesagt, 2013 in München gegründet, treibt die Illustrationskunst auf die Spitze: flache Neon-Vektorillustrationen, Dutzende Skript-Entwürfe, Expertengespräche pro Video — und als Gipfel der Transparenz ein öffentliches Sourcesheet mit allen Belegen zu jedem Video.
Warum meisterhaft: Kunst und Strenge fallen zusammen. Emotion (Neugier, Staunen) ist hier nicht Dekoration, sondern Träger des Verständnisses; Beleglisten machen aus „schönen Videos“ zitierfähige Wissenschaftskommunikation.
Geschichte vor FormelEmotion als KatalysatorOpen-Source-Werkzeuge / Source-Sheets
Connected Papers — Literatur als Landkarte
Eddie Smolyansky & Freunde · 2019 – laufend · Literaturrecherche
Ein Paper rein, eine Ähnlichkeits-Landkarte raus: Der Graph analysiert ~50.000 Arbeiten pro Anfrage und gruppiert die Dutzend stärksten Nachbarn per Co-Zitation und bibliografischer Kopplung in einem Force-Directed-Layout — „Connected Papers ist kein Zitationsbaum“, betont das Team. Aus einem Wochenend-Projekt zwischen vier Freunden wurde binnen zwölf Monaten ein Millionennutzer-Werkzeug; seit Februar 2021 ist es als arXivLabs-Integration direkt unter jeden arXiv-Abstract gelegt. Die „Prior Works“- und „Derivative Works“-Ansichten beantworten die zwei Fragen jedes Einstiegs in ein neues Feld: Woher kommt das — und was ist daraus geworden?
Warum meisterhaft: Ein uraltes Medium (Zitationsgraphen) wird zu einem navigierbaren Raum. Distanz bedeutet hier wirklich etwas (Ähnlichkeit), Größe auch (Zitationsanzahl) — räumliche Metapher mit echter Datensemantik, kein Deko-Netz.
Orientierung statt TrefferlisteDistanz als BedeutungSemantic-Scholar-Korpus, Force-Graph
Muster-KatalogDie zehn Interaktionsmuster hinter den Werken
Schaut man die Fallstudien im Querstrich an, wiederholen sich dieselben nutzerseitigen Muster — unabhängig von Technologie und Jahrzehnt:
Scrollytelling Kamera führt, Nutzer folgt
Ein sticky Grafik-Canvas, Textschritte steuern die Szene (Eyes on Asteroids, FT-Tracker). Wirkt nur, wenn jede Szene eine eigene Aussage hat — sonst ist es ein Diashow-Ersatz.
Ein Gedanke pro Bildschirm Segmenting
Mayers Segmenting-Prinzip in Layout übersetzt: Der Nutzer pacing-setzt selbst, ob er weiterliest. Die Pudding-Essays funktionieren, weil jede Scrollstufe ein in sich geschlossenes Kapitel ist.
Annotation-first Titel sind Nachrichten
Jede Linie benannt, jeder Peak datiert, der Titel transportiert das Ergebnis („Why we’re using a log scale“). Burn-Murdochs Z-Pfad: Titel und Achsen sind Teil der Daten, nicht Rahmen.
Progressive Disclosure Details wachsen nach
CNN/Transformer Explainer: Übersicht first, Klick öffnet die nächste Abstraktionsebene bis zur Mathe-Zelle. Nie alles gleichzeitig zeigen, aber alles erreichbar.
Explorable Spielen first, lesen second
Nicky Cases Pattern: Hook ohne Vorwissen, kontra-intuitive Wendungen, Sandbox am Ende. Interaktivität als Frage, nicht als Effekt.
Comparison Slider, Small Multiples, Split
Vorher/nachher, log/linear, Land/Land: Vergleich ist die stärkste Kausalerfahrung, die ein Bildschirm erzeugen kann (Tufte: „the most powerful design“).
Unsicherheit zeigen Fans, Intervalle, Ensembles
Fan-Charts, Konfidenzbänder, hypothetische Outcome-Plots. Hullmans Forschung zeigt: Weglassen ist die Norm — genau deshalb ist Zeigen Meisterschaft (und Vertrauensgewinn).
Mit Daten spielen Slider & Szenarien
En-ROADS, NUKEMAP, TF Playground: Parameter drehen, Folgen sofort sehen. Voraussetzung: Rechenzeit unter der Fühlbarkeitsschwelle.
Neugier-Loops Wette, Puzzle, Rate
„Place Your Bets“ vor der Auflösung, NYT „You Draw It“-Charts: erst schätzen lassen, dann korrigieren — Verstehen als Überraschungseffekt.
Teilhabe Contribution als Interaktion
Zooniverse, iNaturalist: Der Klick selbst ist wissenschaftlicher Beitrag. Anerkennung (Badges, Credits, „Ihre Klassifikation #1.000.000.000“) hält den Loop aufrecht.
Theorie-SteckerleisteWarum es wirkt — die Wissenschaft hinter dem Staunen
Mayers Multimedia-Prinzipien. Drei Annahmen tragen alles: dualer Kanal (Auge/Ohr getrennt), begrenzte Kapazität, aktive Verarbeitung. Daraus folgen die Bauanleitungen: Kohärenz (Deko raus), Signalisierung (Wichtiges markieren), Segmentierung (nutzergesteuerte Häppchen), Personalisierung („du“ statt „man“), Prätraining (erst Begriffe, dann System).[M1,M2]
Cognitive Load Theory. Intrinsische Last (das Thema), extraneous Load (die Darstellung), germane Last (das Denken). Die EU-Dataviz-Leitfaden-Übertragung ist praxisnah: Hohe intrinsische Last verlangt minimale extraneous Last — und zu wenig Last langweilt. Meisterschaft ist Load-Design, nicht Simplifizierung.[C1]
Tufte. Data-Ink-Ratio, Chartjunk, Small Multiples, Sparklines als „datawords“ mit typografischer Auflösung („data graphics should have the resolution of typography“). Tuftes Erbe lebt in jeder FT-Titelzeile und jedem OWID-Sparkline.[T1]
Wahrnehmungshierarchie. Position > Länge > Winkel > Fläche > Farbe — weshalb Blasendiagramme begeistern und an Grenzen stoßen: Gapminder kompensiert Größe (schlecht vergleichbar) durch Bewegung und Kontext.
Die vier Elemente. David McCandless‘ Rezept: Information, Story, Ziel/Funktion, visuelle Form — fehlt eine, wird das Werk „boring“ oder „useless“. Sein Zeitbudget: 80 % Daten und Verstehen, 20 % Gestaltung. „You don’t design data. You design your understanding of the data.“[I1]
„Vermutlich die beste Form des Storytelling ist oft statisch.“ — Die unbequemste Erkenntnis der Malofiej-Jury-Welt, die dieser Report trotzdem unterschreibt: Interaktivität ist ein Werkzeug unter vielen. Die Meisterschaft liegt in der Entscheidung, wann nicht.
Anti-PatternsWas Nutzer als „nicht meisterhaft“ erleben
Hover-only-Information. Alles, was nur per Maus-Hover existiert, ist für Tastatur, Touch und Screenreader unsichtbar — die WCAG-Checklisten für Dataviz verbieten es ausdrücklich.
Unbezeichnete Achsen und Einheiten. Die häufigste Form von wissenschaftlicher Unredlichkeit ist unbeabsichtigt: „Was zeigt diese Achse? In welcher Einheit? Ab wann?“
Deko-Interaktivität. Filter, um der Filter willen; 3D-Kuchen, die sich drehen lassen; Dashboards ohne Story. Interaktivität ohne Frage ist Lärm.
Kontextverlust beim Interagieren. Wer die Auswahl leert und vergisst, was vorher sichtbar war, zerstört Vergleich — der stärkste kognitive Hebel.
Unsicherheit verschweigen. Hullman: Autoren lassen Unsicherheit weg, weil es rhetorisch bequem ist — und genau das untergräbt das Vertrauen, das Wissenschaft braucht.
Scroll-Jacking & Autoplay-Overkill. Gekaperte Scrollräder und ungefragte Videosoundtracks brechen Flow ab, statt ihn zu erzeugen; prefers-reduced-motion ist Pflicht, nicht Kür.
Nackte Zahlen ohne Größenordnung. „150 Millionen Kilometer“ ohne Vergleich schließt die Wissenslücke nicht, sondern vergrößert sie — Maßstäbe brauchen Gelände (Dollar Street, Eyes).
Tool-Worship. Das Framework im Impressum beeindruckt niemanden, der verstehen will. Nutzer bewerten das Erlebnis, nie den Stack.
02
Die Developer-Sicht — wie meisterhafte Science-Werkzeuge gebaut sind
Plattformen · Stacks · Budgets
Wer Wissenschaftsinhalte baut, hat eine andere Lastenheft-Lage als ein Produktteam: Die Zielgruppe ist dreifach (Leser, Reviewer, Maschine), die Lebensdauer soll Jahrzehnte betragen, jedes Artefakt muss zitierbar, versionierbar und reproduzierbar sein — und das Budget ist meist ein Forschungsgrant. Die meisterhaften Antworten auf dieses Lastenheft kommen erstaunlich konvergent daher: deklarative Spezifikationen, Daten als Bürger erster Klasse, und Publikationsformate, die das PDF beerben, ohne es zu begraben.
01 · Die Domain ist besondersDrei Zielgruppen, ein Artefakt, zehn Jahre Haltbarkeit
Distills Gründungsessay „Research Debt“ benennt das Grundproblem: Wissenschaft kommuniziert ihre Ergebnisse in einem Format, das für Lesen statt Verstehen optimiert ist, nicht für Verstehen. Der Gegenvorschlag — Artikel, die Erklärung, Code, Daten und interaktive Diagramme integrieren — definierte 2016–2021 den Goldstandard: Chris Olah und Shan Carter als Gründungseditoren, ein Stab mit Bostock (D3), Cox (NYT), Karpathy, Bengio, Viegas; Artikel mit im Schnitt 23 Zitationen und einer Million Unique Readern — „top 2 % of academic journals by this metric“. Als Distill 2021 in die Pause ging, war die Diagnose lehrreich: „The primary bottleneck is the amount of effort it takes to produce these articles and the unusual combination of scientific and design expertise required.“ Das Werkzeug war nie das Problem — es war die Seltenheit der Doppelausbildung. Distills Vermächtnis lebt im open-source Template fort, auf dem Dutzende Nicht-Distill-Artikel bis heute laufen.
Der Distill-Editorial-Update 2018 beschrieb zudem das „Engagement-Spektrum“: Lesen ↔ Interaktive Diagramme ↔ In-Browser-Notebooks ↔ Neue Experimente — Nutzer sollen entlang dieser Achse ein- und aussteigen können. Genau diese Architektur finden wir heute in Quarto (Code einklappbar), Observable (Zellen forken) und arXiv HTML Papers wieder.
arXiv HTML Papers / ar5iv — LaTeX fürs Web. Das vielleicht unterschätzteste UX-Projekt der Ära: Deyan Ginev und die KWARC-Gruppe um Michael Kohlhase konvertierten den gesamten arXiv-Korpus mit LaTeXML — 2022 meldeten sie 74 % saubere Konvertierungen, 97 % teilweise lesbar, 1,78 Millionen Seiten. Seit dem 1. Dezember 2023 liefert arXiv selbst zu jeder neuen TeX-Einreichung ein HTML-Pendant aus, mit MathML statt Formel-Bildern (ermöglicht durch Igalias MathML-Core-Umsetzung in Chromium 2023). 2026 stehen die nächsten Ziele fest: 90 % fehlerfreies HTML (aktuell ~75 %), MathML-4-Intent-Annotationen für Screenreader-Sprachausgabe — „the reading of the HTML file by VoiceOver is impressive even for mathematical formulae“, testimonialte ein früher Tester — und ein Rust-Port von LaTeXML für schnellere Previews. Für Developer: A11y ist hier kein Feature, sondern der Kern des Business Case.[A1]
OpenReview — Peer Review als Schnittstelle. Aus dem UMass-Amherst-Labor von Andrew McCallum wurde die Betriebsplattform von ICLR und NeurIPS: Einreichungen, Reviews, Rebuttals, Meta-Reviews und Entscheidungen als versionierte, per REST-API abfragbare Diskussions-Threads. Sekundärforschung kann den ganzen Prozess quantitativ auswerten (Wang et al. 2023: 11.915 Einreichungen, 41.276 Reviews) — und 2025 positionieren Papers das Korpus als „Community Asset“ fürs LLM-Zeitalter. Das UX-Meisterstück: Transparenz ist konfigurierbar, nicht Glaubensbekenntnis.
PubPub — Gemeinschaft statt Verlag. Am MIT Media Lab geboren (2015–2019), dann als Nonprofit Knowledge Futures weitergeführt: Echtzeit-Kollaboration, Import aus Word/XML/LaTeX/Markdown, eingebettete Interaktive (im Demo-Fall: ein echtes Song-Picker-Widget in einem Artikel), ein-Klick-DOIs via CrossRef, öffentliche Annotationen, Export in alles. Harvard Data Science Review und MIT Press Open laufen darauf. 2024/25 stellte KF auf „PubPub Platform“ um — voll anpassbare Infrastruktur statt One-Size-Fits-All-Editor.
OWID Grapher — Diagramm als deklarative Pipeline. Our World in Data open-sourcet seinen Chart-Motor, und die Architektur ist eine Lektion: Eine JSON-Konfiguration beschreibt, was zu zeigen ist; eine Tabellen-Pipeline (Root Table → globale Transforms → Child Tables pro Chart-Komponente) liefert die Daten; gerendert wird clientseitig. Das Chart-API hängt Daten an jede URL („.csv“, „.metadata.json“, „.zip“), Embeds gibt es live oder archiviert-versionsstabil — Zitierbarkeit als URL-Design. Der Redesign-Report 2023 zeigt die nutzerseitige Gegenseite: vier sauber getrennte Anliegen (Ansicht wählen, Herunterladen/Teilen, Quellen hervorheben, Vollbild-Exploration).
Datawrapper — das Berliner Exporteur-Modell. Von einem Team gebaut, das aus NYT, NPR, DW, Correctiv und ZEIT ONLINE kommt: No-Code-Charts mit Redaktions-Disziplin (The Press auf Tasten, keine Chartjunk-Templates), dazu eine Academy, die als freies Lehrbuch für Chart-Design gilt. Die Covid-Kurzkurve der Wirkung: von 260 Millionen monatlichen Chart-Views (Januar 2020) auf 4,7 Milliarden (April 2020). Für Developer relevant: API- und R/Python-Bindings, Live-Verknüpfung zu Google Sheets — Chart-Pipelines, die Reporter ohne Terminal bedienen.
03 · Der Visualisierungs-StackDeklarativ wo möglich, D3 wo nötig
Vega-Lite (Satyanarayan, Moritz, Wongsuphasawat, Heer — UW IDL) ist die grammatische Referenz: „A Grammar of Interactive Graphics“ — Selektionen als deklarative Einheiten, die Legendenschaltungen, Verknüpfungen und Crossfilter kompilieren. Der Vergleich mit Vega: etwa ein Zehntel der Spezifikationslänge, kompiliert hinunter, mit D3 im Kern. Wer's generisch braucht, schreibt Spec statt Code — und die Spec ist self-documenting, diff-fähig, maschinenlesbar.[V1]
Observable Plot radikalisiert dasselbe für JavaScript: „Marks statt Chart-Typen“, eine Zeile pro Layer, SSR-fähig. Observable selbst setzt darauf die reaktive Notebook-Umgebung (über eine Million erstellte Notebooks) mit Git-artigem Forken — der engagement-Punkt „In-Browser-Notebook“ aus Distills Spektrum, als Produkt.
Der Rendering-Fahrplan als Faustregel für Developer: bis ~1.000 Elemente SVG (Zugänglichkeit, DOM-Events), bis ~10.000 Canvas (Schnelligkeit), darüber WebGL/deck.gl — earth.nullschool und die NASA-Eyes-Familie sitzen auf dieser dritten Stufe. ECharts deckt pragmatisch Stufe 1–2 für Dashboards ab.
Scrollytelling-Architektur ist heute ein gelöstes Problem: Scrollama (Russell Goldenberg/Samora, 6k Sterne) setzt auf IntersectionObserver + position:sticky statt Scroll-Events — performant, bibliotheksagnostisch, mit dokumentiertem Sticky-Graphic-Muster (side-by-side und overlay). React-Port und 17 Beispiel-Stories zeigen die Bandbreite. Die offenen Flanken sind weiterhin A11y (Tastatur-Reihenfolge, Print-Ansicht, reduced-motion) — genau dort trennt sich Meisterschaft von Templates.
04 · ML/AI-Explainer-GalerieErklärbare KI als eigenes Genre
Die Genealogie ist kurz und illustrativ: Karpathys ConvNet.js-Demos und Olahs Blogartikel → TensorFlow Playground (Smilkov & Carter, 2016, heute 13k Sterne — „Don’t worry, you can’t break it“ als UX-Vertrag) → CNN Explainer (2020, Svelte+D3+TF.js, aus Interviews mit Lehrenden gestaltet) → Transformer Explainer (2024–26, echtes GPT-2 via ONNX im Browser, 490k Nutzer, CHI-Studie). Daneben die Forschungszeuge: BertViz (Jesse Vig, Head/Model/Neuron-Views, Colab-tauglich), AttentionViz (Yeh/Viégas/Wattenberg — Query-Key-Gemeinschaftsräume), Netron (Lutz Roeder, 33k Sterne, über 20 Modellformate, Browser bis Desktop). Und für die Verantwortungsebene: Model Cards (Mitchell et al., FAT* 2019 — neun Abschnitte von „Intended Use“ bis „Caveats“) wurden vom Paper zum Industriestandard; Modelle ohne Karte gelten heute als undokumentiert.
05 · Literatur-NavigationRecherche-Werkzeuge, die das Feld veränderten
Connected Papers (siehe Fallstudie 12) machte Co-Zitation navigierbar; Karpathys arxiv-sanity (2015, Neufassung „lite“ 2021 — SVM über TF-IDF, betrieben auf einem 5-Dollar-Nanode) war der Prototyp personalisierter Paper-Feeds und ging als Idee in unzählige Nachfolger ein; Semantic Scholar liefert dazu den offenen Korpus. Das Gemeinsame: Sie alle behandeln Literatur als Graphraum, nicht als Trefferliste — und alle drei sind aus Eigenbedarf entstanden („weekend side project between friends“), was sie mit Nullschool, ptable und NUKEMAP verbindet: Die besten Science-UX-Werke sind oft Kratz-Tools von Menschen, die selbst Nutzer waren.
06 · Pipeline 2026Vom Notebook zum zitierfähigen Artefakt
Quarto (Posit) ist der aktuelle Anwärter auf den „Word-Zugänglichkeit + LaTeX-Skalierbarkeit“-Thron, wie es JupyterCon-Kollege Allaire formulierte: Ein Markdown-Quelltext, ausgeführte Code-Zellen (Python/R/Julia/Observable), Ausgabe als HTML-Site, PDF, Word, Revealjs-Slides oder Dashboard — Single-Source-Publishing inklusive Querverweise, Zitationen, Abbildungspanels. Fast.ais kompletter Kurs läuft darauf. Observable Framework ergänzt das für JS-native Teams mit Data-Loadern und Build-Step; Typst greift das LaTeX-Nachfolge-Thema direkt an; Manubot demonstriert Git-getriebene Papers mit Versionsgeschichte. Der Gruppen-Tipp dieses Reports: Quarto + GitHub + Zenodo-DOI deckt den kompletten Weg vom Labor-Notebook bis zur zitierfähigen Version ab — ohne Lizenzkosten.
Faustregeln der Praxis — gemessen an den Werken dieses Reports gelten folgende Richtwerte als meisterhaft-getestet:
Farbsicherheit: Qualitativ → Okabe-Ito (9 Farben, „Color Universal Design“, 2008) oder Paul Tol (bright/vibrant/muted); kontinuierlich → viridis-Familie. Kein Rot-Grün-Paar als alleiniger Kanal.
Kontrast: Text 4.5:1, Grafikelemente untereinander 3:1 (WCAG); Charts müssen auch in Graustufen unterscheidbar bleiben.
Alternativen: Alt-Text plus Datentabelle für jede Grafik; Interaktionen klick-/fokussierbar, nie nur hover; dynamische Änderungen per aria-live ankündigen.
Motion: prefers-reduced-motion respektieren (Pflicht bei allen Canvas-/Scroll-Werken); Animationen kommunizieren Zustand oder Daten, nie Stimmung allein.
Performance: Interaktionsantwort < 100 ms gefühlt (En-ROADS rechnet in Bruchteilen von Sekunden lokal); schwere Modelle vorab in ONNX/WebGL kompilieren statt Streaming-Warten.
Haltbarkeit: Self-contained HTML (Distill-Artikel laufen nach 10 Jahren noch), versionierte Daten-Anhänge, stabile DOIs/URLs, kein CDN-Rot. Warming Stripes, ptable und NUKEMAP funktionieren, weil sie niemandem „gehören“, was kaputtgehen könnte.
Ein Paradebeispiel für Haltbarkeit aus der Nutzer-Abteilung, das Developer ernst nehmen sollten: Michael Dayahs Ptable — 1997 als Highschool-Projekt gestartet, bewusst „All HTML, no images, no Flash“, heute 15 Millionen Schüler:innen pro Jahr, 50 Sprachen, im offiziellen deutschen Lehrplan empfohlen, und trotz regelmäßiger Buyout-Angebote unabhängig geblieben. Technische Bescheidenheit als Langlebigkeitsstrategie.
03
Die Meister-Galerie
28 kuratierte Werke · filterbar
Der Schnellindex dieser Recherche: jedes Werk mit Disziplin, Muster und Link. Filter „Nutzer-Sicht“ zeigt, was man als Lesender erleben kann; „Developer-Sicht“, was als Bau-Referenz taugt; viele Werke sind beides.
Größte Online-Ausstellung zu Erfindungen: 110+ Institutionen, 400+ Interactive, CERN-Street-View, AR-Big-Bang mit Tilda Swinton.
Wundersam
Ergänzend aus der Redaktions-Welt: The Pudding (SND47 Best in Show 2026), NYT Upshot „10 Years, 100 Stories“, Reuters Graphics‘ Ocean-Shock-Serie, ZEIT ONLINEs Energiemonitor-Dashboards und NOAA „Weather the Storm“ (VR-Sturmflut, 2025) — alle in den Fallstudien bzw. Quellen verlinkt.
04
Zehn Prinzipien meisterhaften Science-UX
Synthese + interaktive Scorecard
Alles zusammengefasst — die Fallstudien, die Theorie, die Developer-Berichte — verdichtet sich auf zehn Sätze. Sie sind als Prüfliste formuliert; die Scorecard darunter rechnet sie vor (rein lokal, ohne Netz).
Ein Gedanke pro Bildschirm
Jede Scrollstufe, jede Ansicht trägt genau eine Aussage. Segmenting-Prinzip: Der Nutzer setzt das Tempo, nicht die Autorenschaft.
Annotation ist Inhalt, nicht Deko
Titel als Nachricht, jede Kurve benannt, jede Annahme sichtbar. Der Z-Lesepfad ist Teil des Datendesigns.
Unsicherheit zeigen statt verstecken
Intervalle, Fans, Ensembles, Umschalter. Vertrauen entsteht durch Belegbarkeit — nicht durch Putz.
Jede Interaktion braucht eine Frage
Slider, Hover und Klick sind Fragen an die Daten. Gibt es keine Frage, ist der Button Deko.
Konvention vor Kreativität bei Achsen & Farben
Lineare Zeit nach rechts, kategoriale Farbsicherheit via Okabe-Ito/Tol/viridis. Neuerung gehört in die Erzählung, nicht ins Koordinatensystem.
Abstraktionsebenen weich koppeln
Übersicht → Baustein → Formel, jederzeit zurücknavigierbar. Progressive Disclosure gegen Panik und Langeweile zugleich.
Motion dient Zustand und Daten
Bewegung zeigt Veränderung (Strömung, Training, Zeit). reduced-motion respektieren; sonst stehen lassen.
Wahrnehmbar für alle
Farbsicher, kontraststark, tastaturbedienbar, mit Alt-Text und Datentabelle als Zwilling. A11y ist Qualitätsmaß, nicht Compliance-Rest.
Reproduzierbar: Code & Daten gehören zum Werk
Source-Sheets (Kurzgesagt), Model Cards, Chart-APIs, Quarto-Repos. Wer es nicht nachbauen kann, muss es glauben — schlechte Wissenschaft.
Gebaut für zehn Jahre
Self-contained, versionsstabil, zitierfähig, offline-tauglich. Meisterschaft misst sich daran, was 2036 noch funktioniert.
Scorecard: Wie meisterhaft ist Ihr Vorhaben?
Die zehn Prinzipien abhaken, was Ihr aktuelles Projekt erfüllt — der Score aktualisiert sich live.
Noch unbewertet
0 %
0–3 erfüllt: Handwerk · 4–6: Solide · 7–8: Meisterschaft in Reichweite · 9–10: Kanonverdächtig. Der Report selbst schafft nach eigener strenger Bewertung 8 von 10 — die automatische Canvas-Animation und die fehlende Datentabelle hinter jedem Mini-Kunstwerk bleiben bewusste Kompromisse dieses Formats.
05
Stack-Empfehlungen 2026 — nach Szenario
Redaktion · Labor · Lehre · Produkt
Je nach Auftraggeber ändert sich der richtige Stack drastisch — dieselben Zutaten, andere Gewichtung. Diese Matrix fasst die Recherche-Ergebnisse als konkrete Startempfehlungen:
Szenario
Basistack
Meister-Referenz zum Kopieren
Fallstricke
Wissenschaftsredaktion / Datenjournalismus
Datawrapper oder Flourish für Masse; Svelte + D3 + Scrollama für Leitartikel; FT Visual Vocabulary als Redaktions-Fibel; Gregor Aischs Drei-Fähigkeiten-Regel (Journalist·Daten·Kommunikation) als Rollenmodell
FT-Tracker, Pudding-Essays, ZEIT-Energiemonitor
Chartjunk-Verführung; Templates ohne Titel-Disziplin; Hover-only
Forschungsgruppe / Lab-Publikation
Quarto (.qmd) + GitHub + Zenodo-DOI; Vega-Lite/Altair für Standard-Charts; ggdist für Unsicherheit; distill-Template für interaktive companion sites
Distill-Artikel, OWID-Grapher-Pipeline, Model Cards
PDF-Only-Denken; HTML ohne MathML-A11y-Test; fehlende Daten-Anhänge
Lehre / Schule / Universität
PhET einbetten statt nachbauen; Explorable-Patterns (Hook, Sandbox) für Eigenbauten mit Observable-Framework; ptable verlinken (Lehrplan-tauglich)
Buyout-/Plattform-Lock-in unterschätzen; „für immer kostenlos“ nicht vertraglich denken
Quer-Schnitt für alle Szenarien: Okabe-Ito/Tol-Paletten, Kontrast- und Tastatur-Tests, Quellen-Zettel pro Grafik, versionierte Rohdaten. Das kostet nichts außer Disziplin — und ist der schnellste Weg von „gut“ zu „meisterhaft“.
06
Offene Flanken — was 2026/27 noch ungelöst ist
Ausblick statt Fazit
1 · KI-generierte Figuren. BioRender verschmilzt Icon-Bibliothek und Generative AI (Protokoll-, Timeline- und Flowchart-Erstszenarien; „BioRender-Style“-Normalisierung beliebiger Eingaben; MCP-Integrationen für Agenten-Workflows). Die offene Frage: Wer garantiert wissenschaftliche Korrektheit, wenn der Pixel-Satz generativ ist — Peer-Review der Prompt-Schicht?
2 · Agenten als Co-Leser. Wenn LLM-Agenten Papers und Dashboards „lesen“, wird Maschinen-Lesbarkeit zum sekundären Publikumsziel (arXiv macht HTML+MathML genau deshalb zum Standard). Semantic HTML, saubere Datentabellen und Chart-APIs werden Ranking- und Reasoning-Faktoren.
3 · Die Skalierungs-Falle von Distill. Das Bottleneck war nie technisch. Ohne Invest in Doppelqualifizierte (Forschung + Design) bleibt interaktive Exposition ein Solitär-Genre. Erfreuliche Gegenbewegungen: Quarto senkt die Eintrittshürde, PubPub institutionalisiert Community-Publishing, und „Communicating with Interactive Articles“ (Distill 2020) hat die Forschungsliteratur angerissen.
4 · Unsicherheits-Konventionen fehlen. Hullmans Befund — „we lack canonical forms for lay audiences“ — steht weiterhin. Bis eine Konvention entsteht (wie Log-Skala 2020 durch Wiederholung), ist jede Fan-Chart eine kleine Pioniertat.
5 · Anerkennung. Kein Preis der Branche honoriert den 100-Stunden-Explainer angemessen; Malofiej, SND, Webby und Kavli/Schmidt-Awards zeichnen Einzelergebnisse aus, nicht die Gattung. Solange das so bleibt, entstehen die Meisterwerke dort, wo Eigenantrieb die Rolle des Markts übernimmt — bei den Nicky Cases, Dayahs, Beccarios und Wellersteins dieser Welt.
07
Methodik & Quellen
57 Suchanlagen · 60+ Quellen
Vorgehen: 57 thematisch gruppierte Websuchen (Januar–September 2026, Schwerpunkt letzter Stand) plus gezielte Vertiefung der Schlüsselwerke; Präferenz für Primärquellen (Projektseiten, Papers, Betreiberinterviews) vor Sekundärberichten. Zahlen sind, wo möglich, direkt der Primärquelle entnommen und im Text der Fallstudien verortet. Kategorial gedruckt: Journalismus, Meisterwerke & Plattformen, Forschungspublikation & Werkzeuge, Theorie & Richtwerte.
In-Text-Marker verweisen auf die Quellgruppen: [M] Theorie Multimedia, [C] Cognitive Load, [T] Tufte, [A] Accessibility/arXiv, [V] Vega/Stack, [I] Information is Beautiful.
Link-Check: Alle URLs wurden am 18. September 2026 über die Recherche erreicht; Ausnahmen (Paywalls bei FT/Malofiej-Listen) sind über frei zugängliche Primär- bzw. Zweitquellen abgedeckt.