Prozessdokumentation

Februar

Die Arbeit begann mit der Vermutung, dass Texte am Bildschirm anders wirken als auf Papier. Aber warum genau und was lässt sich gestalterisch damit machen? Der Februar war der Versuch, diese Vermutung in eine konkrete Problemstellung zu übersetzen. Gleichzeitig begann ich, ohne viel Vorbereitung direkt im Browser zu arbeiten. Weniger darum, gleich Lösungen zu finden, als darum, zu verstehen, womit ich es überhaupt zu tun habe.

Kick-off

Der Kick-off-Workshop war zugleich Ideenfindung und Eingrenzung. Im Gespräch mit Prof. Philipp Stamm und Mitstudierenden verdichtete sich die Frage, die mich von da an leitete: An welcher Stelle kann mit Bewegung und Interaktion eingegriffen werden, um Leser:innen zu lenken – und ab wann kippt diese Lenkung in Ablenkung? Ich merkte, dass diese Spannung auf wahrnehmungspsychologischen Grundlagen beruht, die mir zu diesem Zeitpunkt noch nicht bewusst waren. Ob ein Eingriff orientiert oder stört, hängt nicht allein vom Mittel ab, sondern vom Moment, in dem es eingesetzt wird.

Die ersten Skizzen dienten dazu, die Vielschichtigkeit der digitalen Leseerfahrung sichtbar zu machen. Oberflächen, Augenführung, Rhythmus und Navigation beeinflussen den Lesefluss. Dabei wurde schnell klar, dass diese Faktoren nicht isoliert wirken, sondern sich gegenseitig beeinflussen. Kein einzelner Parameter entscheidet, ob Lesen gelingt oder scheitert.

Bei den Inspirationen, die ich für das Moodboard sammelte, leitete mich vor allem die Ästhetik. Was spricht mich als Gestalter an, und wo sehe ich Potenzial, von dem ich etwas lernen kann? Mir war zu diesem Zeitpunkt noch nicht bewusst, dass mich der Prozess immer wieder zu dieser spielerischen Herangehensweise zurückbringen würde.

Die ersten Tests waren wenig spezifisch. Es ging vor allem darum, meine Gedanken visuell zu verankern und den Möglichkeitsraum zu erkunden. Der erste Test setzte einen Beispieltext in HTML und verwendete die CSS-Funktion clamp(), um Schriftgrösse und Flattersatz dynamisch an die Fensterbreite anzupassen. Das klingt technisch, hat aber eine direkte wahrnehmungspsychologische Relevanz: Schriftgrösse, Zeilenlänge und Zeilenabstand beeinflussen die Anzahl der Fixierungen pro Zeile und damit die kognitive Belastung beim Lesen.

Ein weiterer Gedanke: Wenn Scrollen die natürlichste Interaktion im digitalen Raum ist, was passiert, wenn es keinen Inhalt mehr transportiert? Der endlose Scroll erzeugte eine Situation, in der Leser:innen über den Sinn der Interaktion selbst nachdachten. Interaktion bedeutet nicht immer Informationsgewinn – manchmal ist sie selbst die Aussage. Diese Idee liess sich nicht direkt in ein lesbares Format überführen, blieb jedoch als konzeptuelle Referenz bestehen.

Der nächste Schritt brachte als dritte Dimension den Raum hinzu. Ein Gedicht reagierte auf die physische Neigung des Geräts mithilfe des Gyroskops des Smartphones. Variable Schriften und Textpositionen wurden durch Körperbewegungen gesteuert. Das Experiment thematisierte, wie stark körperliche Interaktion das Verhältnis zur Lesbarkeit beeinflussen kann.

Workshop

Während einer Woche besuchte ich den Weiterbildungsworkshop «Responsive Typography» bei Thomas Bircher. Im Vordergrund standen der Umgang mit relativen Einheiten sowie die Skalierbarkeit und Kontextabhängigkeit typografischer Entscheidungen. Ich lernte, dass Typografie im digitalen Raum nie in einem festen Zustand existiert, sondern immer von Gerät, Auflösung und Nutzungssituation abhängt. Während der gestalterischen Phasen versuchte ich, das Gelernte auf mein Themengebiet zu beziehen und responsive Typografie mit Lesbarkeit sowie der Veränderung durch das Medium zu verbinden. Die Experimente bewegten sich dabei zwischen der präzisen Kontrolle über Lesebedingungen und dem freien Erkunden von Effekten.

Die Erstellung eines möglichst gut lesbaren Textabschnitts auf dem Bildschirm war die Ausgangslage für den Umgang mit relativen Einheiten wie em, rem, %, vw, vh und ch. Der erarbeitete Textabschnitt war für die Darstellung auf einem MacBook Pro (4112x2658px) konzipiert. Diese Information ist relevant, weil die Lesebedingung stark von der physischen Oberfläche abhängt: Was auf einem Gerät optimal ist, kann auf einem anderen die Lesbarkeit deutlich verschlechtern.

Screenshot eines Textabschnitts, der mit relativen Einheiten gestaltet wurde.

Im nächsten Experiment wurde die x-Position der Maus auf die Rotation und Position einzelner Wörter gemappt, sodass der Textblock die Illusion erzeugt, sich im dreidimensionalen Raum zu bewegen. Die Bewegung erzeugt hier zwar Aufmerksamkeit, lenkt sie jedoch nicht auf den Inhalt – der Blick folgt eher der Bewegung als dem Text.

Ein anderer Test hatte zum Ziel, Veränderung allein durch CSS-Bedingungen zu schaffen. Daraus schloss ich, dass die Bildschirmgrösse selbst genutzt werden kann, um ein Narrativ zu unterstützen: Was sich so simpel zur Fensterbreite verhält, trägt eine starke inhaltliche Relevanz. Da Ladezeiten und Ruckler den Lesefluss direkt stören können, war es ein Ziel, auf JavaScript komplett zu verzichten. Das Experiment liegt nahe an Barbara Brownies Definition des «Dynamic Layout», wo sich einzelne typografische Einheiten neu anordnen, ohne dass die innere Textstruktur verloren geht.

In einem spielerischen Versuch veränderten Buchstaben durch die Scrollbewegung ihre Position, Rotation und Skalierung. Schnell wird aus einer typografischen Komposition ein spielerisches Element – das funktioniert als Eye-Catcher, nicht als Lesehilfe.

Im Gegensatz dazu wurde die Bewegung im nächsten Experiment nicht zufällig, sondern an die vertikale Position der Elemente gebunden. Der Unterschied zwischen einem klar definierten Bewegungsablauf und einem offenen Rahmen hat direkte Auswirkungen darauf, wie viel vom System verstanden werden muss und wie viel kognitive Kapazität die Interaktion bindet, die dann beim Inhalt fehlt.

Eine weitere Visualisierung zeigte, wie sich eine variable Schrift verhalten kann, wenn sie aktiv animiert wird; das Spannende war hier der ruckelfreie Übergang zwischen vielen Schriftschnitten.

In einem Hover-Experiment wurde ein Teil der Schrift versteckt und durch Berührung aufgedeckt, während sich gleichzeitig der Schriftschnitt veränderte und das aktivierte Element hervorhob. Das warf eine weiterführende Frage auf: Was würde passieren, wenn ein Element beim Aktivieren nicht stärker, sondern schwächer wird, die Hierarchie also umgekehrt würde? Die Idee, Wichtigkeit durch bewusstes Zurücktreten statt durch Betonung zu erzeugen, blieb als Gedanke offen.

Ein letztes Experiment zeigte, wie ein einfacher Hinweis («click») plötzlich Verständnis für das Gezeigte erzeugen kann. Erst durch den Klick erschliesst sich, worum es geht: Die Position des Buchstabens wird eingefroren und dupliziert; durch Rotation entstehen Überschneidungen, die den Buchstaben schrittweise unlesbar machen.

März

Der März war geprägt von einer Vertiefung in zwei Richtungen gleichzeitig: einerseits durch die Weiterentwicklung der gestalterischen Experimente, andererseits durch Interviews und Recherchen, die die theoretische Grundlage für die kulturgeschichtliche Thesis bildeten.

Experimente

Die Experimente im März wurden etwas gezielter. Es ging eher in die Richtung dessen, was beim Lesen tatsächlich hilft, und nicht in die Richtung dessen, was alles möglich ist. Ich versuchte, die Experimente aktiv mit den wahrnehmungspsychologischen Grundlagen in Verbindung zu setzen, die ich durch Lektüre und Gespräche kennenlernte.

Die Zeilenlänge ist einer der wirkungsvollsten, aber am meisten unterschätzten Parameter der Lesetypografie. Zu lange Zeilen erzwingen weite horizontale Augenbewegungen und erhöhen die Fehlerquote beim Zeilensprung; zu kurze unterbrechen den Lesefluss. Dieses Experiment ermöglichte es den Leser:innen, per Knopfdruck einen Text in Spalten zu unterteilen und so die Zeilenlänge aktiv anzupassen. Individuelle Anpassbarkeit ist deshalb wichtig, weil Menschen unterschiedlich lesen und unterschiedliche Fixierungsgewohnheiten haben.

Die nächste Frage: Was passiert, wenn nicht die Breite, sondern die Menge der sichtbaren Informationen reduziert wird? Das Abgrenzen einzelner Sätze und das Einbetten in viel Weissraum verlangsamten die Informationsaufnahme spürbar. Das Scrollen diente nicht als Navigation durch Menge, sondern als Mittel, um Intensität zu steuern. Der Weissraum gibt dem Gehirn Zeit, Verarbeitetes zu festigen, bevor neue Informationen aufgenommen werden.

In einer Weiterentwicklung wurden die Sätze nicht vollständig getrennt, sondern nur visuell abgegrenzt: Der aktive Satz steht immer in der Bildschirmmitte und erzwingt eine stabile Blickhaltung. Bereits Gelesenes wurde nicht unsichtbar, sondern nur schwächer lesbar, sodass Regressionen möglich blieben, jedoch erschwert wurden.

Die Einblendung von Text durch die Skalierung einzelner Wörter wirkt auf den ersten Blick etwas poetisch. Tatsächlich ist es aber auch eine Visualisierung eines kognitiven Prozesses: Wörter werden im Gehirn als Wortbilder gespeichert und erst durch ihre Verknüpfung zu Sätzen mit Bedeutung aufgeladen. Das Experiment steht zwischen gestalterischer Reflexion und Inhaltsvermittlung.

Interviews

Ich hatte die Möglichkeit, mit zwei Expert:innen zu sprechen, deren Perspektiven die Arbeit in zwei verschiedene Richtungen erweiterten: die eine wahrnehmungspsychologisch, die andere aus der gestalterischen Praxis. Beide Gespräche wurden zu festen Bestandteilen der kulturgeschichtlichen Thesis und halfen mir gleichzeitig, die gestalterischen Experimente präziser zu denken.

Gabriele A. Forster ist Expertin für bewusste und unbewusste Wahrnehmungs- und Lernvorgänge sowie Autorin von «Effizient lesen» (2021). Sie unterscheidet scharf zwischen Prosa- und Informationstexten, zwischen Aufmerksamkeit als Wahrnehmungszustand und Textverständnis als kognitivem Prozess, zwischen Steuerung als Tätigkeit und Kontrolle als Emotion. Diese Differenzierungen haben meine gestalterische Fragestellung direkt geschärft. Besonders prägend war ihre Aussage, dass Konzentration immer ein Ergebnis ist, nie eine Voraussetzung, und dass Design zwar Bedingungen schaffen kann, unter denen Konzentration entsteht, sie jedoch nicht erzwingen kann.

Die zweite interviewte Person ist seit mehreren Jahren in der gestalterischen Praxis tätig, mit Schwerpunkt auf typografischen Systemen, Editorial Design und digitalen Anwendungen. Sie machte deutlich, dass Entscheidungen über Hervorhebungen, Hierarchien und Bewegung in der Praxis selten frei getroffen werden, sondern in Abhängigkeit von Briefings, Zielgruppen und Kommunikationszielen. Die Frage, ob ein gestalterischer Eingriff dem Verständnis dient oder es verhindert, ist dabei oft eine ethische, nicht nur eine ästhetische. Die Person wünschte keine Namensnennung; das vollständige Transkript liegt dem Autor vor.

Aus beiden Gesprächen nahm ich vor allem mit, dass es keine universell richtige Gestaltung gibt. Die Unterscheidung zwischen Informationstext und Prosatext ist für jede gestalterische Entscheidung grundlegend, da Bewegung und Interaktion, die literarisch poetisch wirken, im Informationskontext die Verständlichkeit untergraben können. Hinzu kommt, dass die Lesegeschwindigkeit individuell ist: Was für die eine Person die richtige Stimulation erzeugt, überfordert die nächste. Dieses Argument spricht für anpassbare Systeme statt festgelegter Abläufe. Und schliesslich erwies sich das Kontrollgefühl der Leser:innen als eigenständiger Wert; manchmal genügt ein einzelner Button, um das Verhältnis zum Text zu stabilisieren.

Mit den Interviews war die theoretische Grundlage weitgehend gelegt und die kulturgeschichtliche Thesis konnte abgeschlossen werden. Was als Nächstes folgte, war der Versuch, diese Erkenntnisse zurück in die gestalterische Praxis zu holen.

April

Die Erkenntnisse aus der kulturgeschichtlichen Arbeit halfen mir, im April an den Prozess anzuknüpfen und mit den gestalterischen Experimenten fortzufahren.

Recherche

Rückblickend auf die kulturgeschichtliche Thesis vertiefte ich mich zunächst in verschiedene gestalterische Referenzprojekte. Zwei davon werden im Ausblick der kulturgeschichtlichen Thesis erwähnt und zeigen exemplarisch, wohin sich das Feld bewegt. In beiden werden technische Möglichkeiten eingesetzt, weil sie etwas ermöglichen, das im statischen Format nicht möglich wäre.

«Caption with Intention» erschliesst emotionale Kommunikation für Menschen, die sonst auf einen Teil davon verzichten müssten. Das Scrollytelling der New York Times macht komplexe Zusammenhänge schrittweise erfahrbar, statt sie als Ganzes zu präsentieren. In beiden Fällen ist Bewegung kein Eye-Catcher, sondern ein Orientierungsmittel – und genau das war der Massstab, den ich für die weiteren Experimente anlegen wollte.

Als Nächstes analysierte ich fünf Applikationen, die das digitale Lesen auf unterschiedliche Weisen zu verbessern versuchen, von simplen Lesemodi bis zu algorithmischen Eingriffen in die Typografie.

Instapaper ist eine App, die Online-Artikel in einer persönlichen Bibliothek speichert und sie in einem bereinigten Leseformat zeigt. Der Fokus liegt auf Ablenkungsfreiheit: Werbung, Navigation und visuelles Rauschen werden entfernt, der Text steht im Vordergrund. Man wählt aktiv aus, was man liest und wann.

Spritz Reader verwendet RSVP als Methode: Wörter erscheinen einzeln an einer fixen Position, wobei jeweils ein Buchstabe farblich hervorgehoben wird – der sogenannte Optimal Recognition Point, der die Fixation des Auges auf die statisch günstigste Stelle im Wort lenkt. Die Methode ermöglicht sehr hohe Lesegeschwindigkeiten, eliminiert jedoch die Möglichkeit einer Regression.

Der BeeLine Reader greift nicht in die Struktur des Textes ein, sondern in seine Farbe: Ein Farbgradient, der von Zeile zu Zeile wechselt, erleichtert den Zeilensprung und reduziert einen der häufigsten Lesefehler am Bildschirm – das versehentliche Überspringen oder Wiederholen einer Zeile. Der Ansatz ist subtil und verändert den Text selbst nicht.

Bionic Reading setzt die ersten Buchstaben jedes Wortes fett, um die Anzahl der Fixierungen zu reduzieren. Die Idee basiert darauf, dass das Gehirn Wörter ohnehin aus partieller visueller Information ergänzt; Bionic Reading verstärkt den Anfang eines Wortes, damit es schneller erkannt wird. Die Methode ist jedoch umstritten, weil sie die gewohnten Wortbilder verändert und eine Eingewöhnungszeit erfordert. Für manche Menschen ist sie effektiv, für andere störend.

Den Browser-Lesemodus kannte ich zuvor gar nicht und entdeckte ihn erst durch die Recherche. Ich war überrascht, wie einfach der Inhalt allein durch die Reduzierung visueller Reize zugänglich wird. Die Lesemodi sind in den drei grossen Browsern – Chrome, Safari und Firefox – unterschiedlich implementiert. Allen gemeinsam sind das Entfernen von Werbung, Navigation und Bildern sowie eine auf Lesbarkeit ausgelegte Grundtypografie. Die Unterschiede liegen in den Anpassungsoptionen, da nicht alle Browser dieselben Funktionen bereitstellen. Keiner der drei Modi kennt scrollbasierte Hervorhebung, kinetische Typografie oder erweiterte sensorische Interaktion.

Experimente

Die Recherche inspirierte mich dazu, einen eigenen Web-Reader zu bauen. Gleichzeitig fehlte mir noch die Entscheidung, welcher Informationstext als Grundlage für die weiteren Experimente dienen sollte.

Die Antwort war Wikipedia. Die Artikel sind klar strukturiert und sachlich und werden nicht als Prosa gelesen. Gleichzeitig sind sie wegen ihres Erscheinungsbildes kaum zum Lesen einladend – zu dicht, zu unruhig, zu wenig Weissraum. Die Enzyklopädie ist inhaltlich neutral, da viele Autor:innen an den Texten mitwirken, frei zugänglich und über die Wikipedia REST API programmatisch abrufbar. Ausserdem liegt sie thematisch weit genug von meiner eigenen Thematik entfernt, sodass sie – anders als ein Buch über Typografie – die Beurteilung der Experimente nicht inhaltlich überlagert. Hinzu kommt die klare HTML-Hierarchie aus Überschriften, Absätzen, Listen und Verlinkungen, die sich direkt über Code ansprechen und für Experimente mit Bewegung und Interaktion nutzen lässt.

Der erste technische Schritt war der Aufbau einer Verbindung zwischen dem lokalen Entwicklungsserver und der Wikipedia REST API. Über die Suchleiste lassen sich nun beliebige Artikel in verschiedenen Sprachen abrufen, und die internen Verlinkungen zu anderen Artikeln bleiben erhalten: Ein Klick auf einen verlinkten Begriff lädt den entsprechenden Artikel direkt im Reader, sodass sich die gesamte Enzyklopädie innerhalb eines einzigen, kontrollierten Leseformats durchqueren lässt.

Beim Laden wird das rohe Wikipedia-HTML bereinigt – Bilder, Infoboxen, Fussnoten und Navigationsleisten werden entfernt. Was bleibt, ist der reine Textinhalt mit seiner semantischen Struktur. Schon allein die Änderung der Schriftart erzeugte eine spürbar angenehmere Lesesituation.

In einem nächsten Schritt kamen die ersten Steuerelemente hinzu: die individuelle Anpassbarkeit von Schriftgrösse, Zeilenabstand und Spaltenbreite. Parallel dazu entstand ein erster Satzfokus-Modus, bei dem ein Klick auf einen Satz alle anderen dimmt, während der aktive Satz vollständig lesbar bleibt. Die technische Umsetzung brachte ans Licht, dass der Satztrenner nicht jeden Satz korrekt erkannte. Ein weiteres Problem war die Wahl der Schriftart, die unter Umständen nicht alle Schriftzeichen enthält.

Mit diesen Steuerelementen versuchte ich, den digitalen Text nach typografischen Grundprinzipien zu setzen, sodass die Grundbedingungen des Lesens erfüllt sind, bevor weitere Eingriffe durch Bewegung oder Interaktion hinzukommen.

Um zu verstehen, welche Strukturelemente Wikipedia-Artikel enthalten, hob ich anschliessend die HTML-Tags farblich hervor. Jeder Tag-Typ erhielt eine eigene Farbe. Die meisten Artikel folgen einer klaren Hierarchie, werden in einzelnen Fällen jedoch deutlich komplexer. Diese Analyse war die Grundlage dafür, störende Elemente gezielt auszublenden oder umzugestalten, ohne den inhaltlichen Zusammenhang des Artikels zu unterbrechen.

In einem zweiten Schritt wählte ich eine andere Darstellung, um Block- und Inline-Tags visuell gleichzustellen, und untersuchte, wie Wikipedia Bilder und Bildunterschriften einbettet.

Die ersten gestalterischen Experimente untersuchten eine Mouse-Hover-Interaktion: Beim Überfahren einzelner Wörter veränderten sich Schriftgewicht und Schriftgrösse über die Achsen der variablen Schrift.

Die Ergebnisse machten vor allem den Unterschied zwischen subtiler und extremer Veränderung deutlich. Bei subtilen Veränderungen blieb der Textzusammenhang erhalten. Bei extremen drohten einzelne Wörter aus ihrem Kontext gerissen zu werden. Gleichzeitig entstand ein interessanter Nebeneffekt: Durch das Überfliegen können dank der zufälligen Aktivierung eigene Zusammenhänge zwischen einzelnen Wörtern gebildet werden. Das Wort «Überfliegen» lässt sich hier sowohl als Lesetechnik als auch als Beschreibung dessen verstehen, was im Experiment passiert.

Im Gespräch mit Gabriele A. Forster war die individualisierte Steuerung der Lesegeschwindigkeit als gestalterischer Ansatz diskutiert worden. Daraus entstand das Gyroskop-Experiment: Die Neigung des Smartphones steuert die Scrollgeschwindigkeit – nach vorne neigen scrollt nach unten, zurückneigen verlangsamen. Ein Tap-Scroll bleibt möglich, die Funktion lässt sich per Button ein- und ausschalten.

Die grösste Herausforderung war die Zugänglichkeit, da Browser Sensordaten aus Sicherheitsgründen unterschiedlich freigeben und Nutzer:innen den Zugriff explizit erlauben müssen. Nach der Freigabe wird über einen Button der Nullpunkt gesetzt: der Winkel, bei dem kein Scroll stattfindet.

Beim Testen zeigte sich ein wiederkehrendes Problem: Proband:innen schafften den Zeilensprung nicht zuverlässig, da die ungewohnte Steuerung die Augenführung zusätzlich erschwerte. Das führte zu einem anschliessenden Experiment, das sich gezielt mit der Führung des Blicks befasste. Inspiriert vom Prinzip des RSVP wird der Text wortweise hervorgehoben – stets in der Bildschirmmitte –, um dem Auge stabilere Fixationspunkte zu bieten.

An diesem Punkt wollte ich extremer und spielerischer vorgehen. Ich sammelte weitere Ideen auf einem Moodboard und fertigte kleine Skizzen an, die mir bei der Ausarbeitung helfen sollten.

Inspiriert von Blickführung und linearer Hierarchie untersuchte ich die verlinkten Wörter, die in Wikipedia-Artikeln en masse vorkommen. Sie stören den Lesefluss, lassen sich jedoch nicht weglassen, da sie eine Kernfunktion der Enzyklopädie darstellen. Ich versuchte, diese Struktur in einem Artikel sichtbar zu machen: Jeder Link wird in seiner Reihenfolge markiert und mit einer geraden Linie mit dem Nächsten verbunden.

Es entstehen immer neue Formen, die die Komplexität der Enzyklopädie visualisieren. Gleichzeitig lassen sich durch die Wortpaare grobe Themenfelder eines Artikels erschliessen, ohne dessen genauen Inhalt zu kennen. Die entstehende Form ist allerdings nicht fixierbar und kaum interpretierbar, da sie je nach Fensterbreite und Zeilenlänge unterschiedlich ausfällt.

Dieses flüchtige Erfassen von Inhalten war die Inspiration für das nächste Experiment, in dem ich mit der Lesbarkeit einzelner Wörter innerhalb eines Satzes spielte.

In der kulturgeschichtlichen Thesis hatte ich das Beispiel «Nord» (2003–2004) von Esther Hunziker aufgegriffen. Die spielerische Individualisierung von Inhalten durch einen begrenzten Handlungsspielraum inspirierte mich dazu, einzelne Textabschnitte und Bilder trennbar und frei anordenbar zu machen. Es entsteht eine andere Art zu lesen, bei der Inhalte abschnittsweise erfahren und neue Zusammenhänge gebildet werden. Die Umsetzung war noch holprig: Texte verschoben sich zunehmend nach unten und der Überblick ging schnell verloren.

Ein strukturelles Experiment teilte den Text schliesslich kapitelweise in Spalten auf. Nebeneinander platzierte Abschnitte lassen sich einfacher vergleichen und geben den Gesamtüberblick besser wieder als ein endloser Scroll.

Zum Abschluss des Monats wandte ich mich dem Eye-Tracking zu. Ich testete zwei JavaScript-Libraries: WebGazer erwies sich als zu ungenau, SeeSo zeigte mehr Potenzial, funktionierte auf dem Smartphone aber nicht zuverlässig. Als die Implementierung von SeeSo auf ein bestehendes Experiment funktionierte und ich es das erste Mal testete, war ich von der Wirkung überrascht: Eine variable Schrift veränderte sich etwa dort, wohin ich mit den Augen blickte. Einiges musste optimiert werden, vor allem der radiale Bereich, in dem die Schrift dicker wird, da die Genauigkeit das eigentliche Problem war.

Eye-Tracking wird normalerweise für Usertracking und die Optimierung von Benutzeroberflächen verwendet; in dieser gestalterischen Anwendung sehe ich aber durchaus eine Zukunft. Beim Lesen müsste es allerdings sehr präzise sein, damit die Augen nicht durch geringen Versatz oder Verzögerung ständig abgelenkt werden. Im Gespräch mit Dr. Paloma López Grüninger wurde deutlich, dass Eye-Tracking für eine Ausstellungssituation mit wechselnden Personen und Lichtverhältnissen zu aufwendig ist. Das Experiment wurde zurückgestellt.

Zwischenfazit

Der April war eine breite Erkundungsphase, in der viele gestalterische Richtungen ausprobiert und ein Überblick über die Möglichkeiten des Formats gewonnen wurden. Die Einschränkung auf Wikipedia-Artikel erwies sich dabei als Vorteil, da sie eine vollständige Konzentration auf die Gestaltung ermöglichte. Etwa die Hälfte der Zeit für die Arbeit an der gestalterischen Thesis war zu diesem Zeitpunkt vorbei. Ich hatte vieles ausprobiert, aber noch kein klares Bild von einem Produkt, das ich gestalten wollte.

Im Mentorat wurden Fragen aufgeworfen, die den weiteren Prozess prägen sollten. Die Experimente mussten klarer nach ihrem Ziel befragt werden: Geht es um Leseerlebnis, Textverständnis, einen spielerischen Zugang oder um etwas anderes? Und für welche Inhalte passt welches Experiment, wo doch nicht jeder Ansatz für jeden Artikeltyp gleich gut funktioniert? Deutlich wurde auch, dass Bewegung oft mehr Störung als Unterstützung ist und dass weniger Interaktion manchmal mehr Orientierung schafft – das letzte Experiment mit der Spaltenansicht zeigte das exemplarisch.

Zwei Richtungen standen offen: viele Experimente anhand eines einzigen Artikels oder wenige, präzise Experimente anhand verschiedener Texttypen. Es ging um die genauere Definition der Forschungsfrage sowie um ein mögliches Ablösen von der Überschrift «Wikipedia reimagined».

Mai

Der Mai begann mit der Frage, welche Richtung die Arbeit nehmen soll. Die Entscheidungen des Monats veränderten das Konzept grundlegend: Nicht mehr eine Untersuchung, ein Informationstext oder ein Tool standen im Vordergrund, sondern eine Erfahrung, eine Erzählung und eine Installation.

Ein verändertes Konzept

Da mir der Inhalt die Form nicht vorgeben konnte, überlegte ich, ob ein konsequent experimentelles Vorgehen eine Lösung wäre. Ich teilte die Experimente in Kategorien ein – nach den Möglichkeiten, die das Smartphone bietet. Darin lag bereits die Erkenntnis, dass ich mit einem einzigen Medium arbeiten wollte – dem Smartphone. Es ist ein Objekt, das die meisten Menschen täglich benutzen und auf dem heute am meisten Text gelesen wird. Sensoren wie die Kamera, das Gyroskop oder der Bildschirm als Touch-Oberfläche sollten zu meinem Hauptthema werden. Doch ich merkte schnell, dass das noch nicht die richtige Richtung war.

Die Schwierigkeiten mit dem Eye-Tracking hatten eine grössere Frage aufgeworfen: Was will ich eigentlich aussagen? Ein Satz aus dem Gespräch mit Paloma blieb hängen: «Wirst du dir bewusst, wie viel das Interface über dich bestimmt?» Nicht die Frage, wie der Körper das Lesen verändert – sondern die Frage, wer beim digitalen Lesen die Kontrolle hat.

Das bisherige Konzept war methodisch sauber, aber emotional flach. Die Lektüre von «Schiff nach Europa» (1957) von Markus Kutter und die Auseinandersetzung mit «Queers in Love at the End of the World» (2013) von Anna Anthropy – einem interaktiven Werk, das immer dasselbe Ende hat und trotzdem zum Wiederholen zwingt – gaben dem neuen Konzept seine Form.

Statt drei neutraler Experimente entstand die Idee einer Installation mit dramaturgischem Bogen. Die Installation sollte das simulieren, was wir täglich erleben: zu viele Informationen, zu wenig Zeit und das Gefühl, immer hinterherzuhinken. Kafkas Türhüterparabel «Vor dem Gesetz» (1915) bot den idealen Inhalt: Ein Mann wartet sein Leben lang vor einer Tür, die nur für ihn bestimmt war – und die sich am Ende schliesst. Die Spannung zwischen gefühlter und tatsächlicher Kontrolle ist strukturell identisch mit dem, was beim digitalen Lesen passiert. Man hält das Gerät in der Hand und tätigt Interaktionen, hat also theoretisch Zugang zum Text, aber das Interface bestimmt die Bedingungen. Der Türhüter ist das Interface.

Vor allem inspirierten mich einzelne Abschnitte, die sofort ein Bild in meinem Kopf erzeugten. «Schliesslich wird sein Augenlicht schwach…» oder «Dort sitzt er Tage und Jahre.» – bei solchen Sätzen verspürte ich sofort die Lust, sie mit reiner Typografie visuell umzusetzen, ihre Bedeutung zu verstärken und ihnen eine tiefere emotionale Dimension zu geben.

Damit schliesst das Konzept direkt an die kulturgeschichtliche Thesis an: Design kann Bedingungen schaffen, unter denen Konzentration entsteht, aber auch Bedingungen, unter denen sie systematisch verhindert wird. Die Installation zeigt den zweiten Fall.

Vom Text zur typografischen Szene

Der erste Schritt, um mir einen Überblick über die Parabel zu verschaffen, war es, den Text in inhaltlich sinnvolle Abschnitte zu teilen – denn wie ich gelernt hatte, sind Strukturierung und das Erzeugen von Pausen durch Trennung wichtig. Anschliessend versuchte ich, kurze Assoziationen, die ich beim Lesen der Abschnitte hatte, wörtlich oder bildlich umzusetzen, was das spätere Experimentieren erleichtern sollte.

Die ersten typografischen Experimente bauen auf den früheren Auseinandersetzungen im Rahmen dieser Arbeit auf. Das Grundprinzip: Der Text ist zunächst nicht lesbar. Erst durch eine Interaktion entsteht eine typografische Reaktion, die ihn lesbar macht und das Fortfahren der Geschichte ermöglicht. Dabei soll jede Interaktion inhaltlich zur Türhüterparabel passen – nicht nur, weil das Smartphone sie technisch erlaubt, sondern weil sie auch etwas über die Geschichte erzählt. Wichtig war, von Anfang an im Format und Layout zu denken, da der beschränkte Platz eines kleinen Hochformats keinen unendlichen Handlungsspielraum bot. Jeweils der vorangehende Abschnitt kann einen Hinweis auf die folgende Interaktion und ihre Bedienung geben; zusätzlich werden Anweisungen auf einem grossen Bildschirm eingeblendet, um die lesende Person zu leiten.

Die ersten Versuche entstanden mit einer serifenlosen Schrift, doch dabei stellte sich heraus, dass sie nicht zum Charakter der philosophischen Parabel passte. Ein Vergleich zwischen drei variablen Schrifttypen – Serif, Sans-Serif und Egyptienne – führte zur Entscheidung für die ABC Daily Slab Variable Edu. Neben der inhaltlichen Wirkung war die Lesbarkeit auch in kleineren Schriftgraden ein wichtiges Kriterium.

Mit den ersten Skizzen und den Experimenten aus den vorigen Monaten entstanden die ersten Animationen und Interaktionen für das Smartphone. Von Anfang an arbeitete ich mit dem Endmedium, um Probleme früh zu erkennen. Spannend war die Begrenzung auf bestimmte Parameter wie Schriftgrösse, Position und das Splitten in Zeilen, Wörter und Buchstaben – Parameter, die sich direkt auf die Lesbarkeit auswirken. Der Text möchte am Anfang nicht gelesen werden und wird erst durch eine Interaktion gelesen, ähnlich wie der Mann in der Geschichte, der durch seine Versuche Reaktionen vom Türhüter erhält, aber nie Zugang zum Gesetz bekommt. Die Geschichte hat einen linearen Aufbau, in dem keine Regression möglich ist.

Schon früh dachte ich über den Farbwechsel als dramaturgisches Mittel nach. Zuerst spielte ich mit der Idee eines unsichtbaren Timers, der durch das Erscheinen der roten Farbe sichtbar wird und die lesende Person in eine nervöse Haltung versetzt. Das Farbschema Schwarz, Weiss, Rot entstand aus dieser Dramaturgie: Die Besuchenden sollen in den Bann der sich nähernden Gefahr des Kontrollverlusts gezogen werden. Der Alarmmodus – ein abrupter Farbwechsel – trifft sie unvorbereitet. Zeitpunkt und Intensität blieben zunächst offen, um sie später gemeinsam mit dem Licht und dem grossen Bildschirm festzulegen.

Installation

Parallel zur Konzeptentwicklung entstand eine erste Skizze für den Ausstellungsraum. Eine Person betritt einen abgedunkelten Raum – keine Ablenkung von aussen, nur sie und das Gerät. Smartphone und Bildschirm kommunizieren miteinander, übernehmen aber unterschiedliche Rollen: Das Smartphone liegt als intimes Lesegerät in der Hand, der Bildschirm steht dahinter als übergeordnete Instanz im Raum.

In mehreren Skizzen dachte ich über verschiedene Raumsituationen nach, wobei mich vor allem die Themen Privatsphäre und Immersion beschäftigten. Offen blieben zunächst die genaue Proportionierung beider Medien zueinander sowie Raumgestaltung und Beleuchtung.

Daraus entwickelte sich die definitive Form: Die Installation ist in einer V-Form aufgebaut, bei der zwei grosse Leinwände den Raum zu einem Eingang hin verengen. Die besuchende Person läuft auf diesen Bereich zu und bleibt vor einer rautenförmigen Säule stehen, auf der das Smartphone liegt – der Schlüssel, um gegebenenfalls die Tür zu öffnen. Die Offenheit nach oben vermittelt Grösse und Machtlosigkeit. Der zentralperspektivische Aufbau spiegelt die zentrierte Typografie auf dem Bildschirm. Die besuchende Person befindet sich damit in der Rolle des Mannes aus der Geschichte: Sie erhält Zugang zu etwas, das ihr gleichzeitig verwehrt bleibt. Der Bildschirm übernimmt mit seinen Anweisungen die Rolle des Türhüters.

Inspiriert von der Radierung Hermann Naumanns (1955) zu «Vor dem Gesetz» wurden mit KI Variationen von einer Tür erstellt, die den Charakter bewahren, aber in ihrer Form variieren. Die Tür zieht von Beginn an die Aufmerksamkeit auf sich; schon zu Beginn der Geschichte ist der Blick auf sie gerichtet.

Technisch sind Smartphone und Bildschirm über einen lokalen Node.js-Server mit Socket.io in Echtzeit verbunden. Jede Interaktion auf dem Smartphone – Screen-Wechsel, Timer, Alarmmodus – wird sofort auf den Bildschirm übertragen. Da Gyroskop und Kamera im Browser nur über HTTPS funktionieren, läuft das Smartphone über ngrok. Das Projekt ist in zwei getrennte Interfaces aufgeteilt: phone/ für die Geschichte und die Interaktionen, screen/ für Timer und Anweisungen. Beide kommunizieren über denselben Server, halten aber keinen gemeinsamen State.

Juni

Der Juni war die Phase der Verdichtung. Die einzelnen Teile – Interface, Animation, Licht und Raum – mussten zu einer zusammenhängenden Erfahrung zusammenwachsen.

UI-Design & Dramaturgie

Der Juni startete mit einer Entwurfsserie des User Interfaces für das Smartphone. Zentral war die Frage, wie eine Lösung sowohl für die statischen Textseiten als auch für die Interaktionsseiten funktioniert. Die statischen Seiten sollten bewusst einfach gehalten werden, damit der Fokus auf den Interaktionsseiten liegt. Trotzdem war es wichtig herauszufinden, wo der Textblock und die Navigation platziert werden und welche Form diese annehmen können. Rein aus kognitionspsychologischer Sicht kann es hilfreich sein, nicht zu viel Text auf einer Seite zu zeigen, da das Lesen auf dem Smartphone schnell als anstrengend empfunden wird. Bei der Anordnung der Typografie auf den statischen Seiten experimentierte ich mit links- und rechtsbündiger Ausrichtung, was mehr Dynamik in die Komposition brachte.

Für die Navigation entschied ich mich für die Rautenform, die in der Installation als Säule unter dem Smartphone im Zentrum steht. Ein Slider als Navigationselement verhindert zudem das zu schnelle Überspringen einzelner Abschnitte und fügt eine zusätzliche Interaktionshürde ein.

Bei der Dramaturgie ging es mir vor allem um einen Spannungsbogen aus Interaktion, Animation und Licht. Die Interaktionen und Animationen auf dem Smartphone verändern sich über die Zeit, während die Tür auf dem Bildschirm immer verschlossen bleibt. Lange war offen, ob auf dem Bildschirm nur Typografie oder auch Bilder erscheinen sollen und ob die Tür nur zeitweise oder durchgehend sichtbar ist. Nach vielem Ausprobieren wurde die Tür zum zentralen Element des gesamten Ablaufs – die Typografie wirkt als eine Art Untertitel dazwischen.

Animation

Beim Testen der Interaktionen zeigte sich ein Problem: Viele Personen blickten wie gebannt auf das Smartphone und beachteten den Bildschirm kaum. Die Lösung war eine dynamische Animation der Tür, die mir bis dahin ohnehin zu statisch war. Da sich die Beziehung zwischen Türhüter und Mann in der Geschichte über die Zeit verändert, sollte sich auch das Erscheinungsbild der Tür wandeln. Die KI-generierten Variationen nutzte ich, um einen Übergang zu schaffen: Die Tür wird in ihre strukturellen Einzelteile gespalten und setzt sich dahinter in einer neuen Form wieder zusammen – analog zum sich verändernden digitalen Interface. Diese Animation lenkt die Aufmerksamkeit kurz auf den Bildschirm, bevor Text oder Anweisung eingeblendet wird und der Blick zurück auf das Smartphone wandert.

Installation & DMX

Mit dem überarbeiteten UI und der Animation folgte ein weiterer Test direkt an der Installation, diesmal mit der technischen Konfiguration von Storyline und Scheinwerfern. Die Scheinwerfer wurden über ein DMX-Kabel miteinander und mit dem Hauptserver verbunden. Das Smartphone steuert die Lichtzustände über definierte States, die zeitgesteuert oder durch Interaktion ausgelöst werden. Der Alarm-State, der durch bestimmte Interaktionen aufgerufen wird, löst einen Fade der Scheinwerfer zu Rot aus. Diese Funktionalität ist ein Kernelement der Überforderungsdramaturgie.

Das Licht erfüllt dabei zwei Aufgaben gleichzeitig. Zum einen beleuchten die Scheinwerfer den Raum diffus über die Leinwände, sodass der abgedunkelte Raum gerade genug erhellt wird, ohne die Immersion zu brechen. Zum anderen reagiert die Farbe der Tür auf die Lichtänderung: Da das knallige Rot der Scheinwerfer sich auch in der Tür am stimmigsten erwies, legte ich zu den passenden Momenten einen Farbfilter über die Tür, sodass die Illusion entsteht, sie werde vom roten Licht beleuchtet.

Ein letzter Schritt betraf die Bildqualität. Das Rauschen, das Firefly beim Generieren der Türvariationen erzeugte, sowie die Tatsache, dass der grosse Bildschirm Kontraste und Details viel stärker hervorhob als mein Laptop, machten eine intensive Nachbearbeitung nötig, damit die Tür in ihrer Materialität möglichst organisch und realistisch wirkte.

Fazit

Rückblickend bin ich erstaunt, wie viele verschiedene Facetten das Projekt angenommen hat. Vom reinen Experimentieren mit digitaler Typografie über das Redesign von Wikipedia als Grundlage für den Umgang mit Informationstexten bis hin zur immersiven Installation, in der die Leseerfahrung im Vordergrund steht. Die intensive Arbeit hat mich vor allem dazu gebracht, jeden Schritt genauer zu hinterfragen und nicht einfach einen Plan umzusetzen, sondern ihn immer wieder zu überdenken und mich enger einzugrenzen.

Was als Frage nach Lesbarkeit und Aufmerksamkeit begann, wurde im Verlauf zu einer Frage nach Kontrolle. Wer bestimmt, wie, wann und was wir lesen? Die Installation stellt die Frage erfahrbar in den Raum. Die besuchende Person erlebt am eigenen Körper, was es heisst, Zugang zu haben und ihn trotzdem nicht ganz nach eigenem Willen nutzen zu können – und nimmt vielleicht die Reflexion mit, wie oft sie diese Situation in ihrem digitalen Alltag erlebt, ohne sie zu bemerken oder zu hinterfragen.

Genau an diesem Punkt bin ich auf die begehbaren Korridore von Bruce Nauman aufmerksam gemacht worden, in denen der Raum die Besuchenden lenkt, einengt und ihnen verschiedene Gefühle vermitteln kann. Bei diesen künstlerischen Arbeiten sehe ich eine Verbindung zu meiner Installation, da sie ebenfalls mit der körperlichen Dimension arbeitet: Der Raum, das Licht und das Gerät steuern die Person, während sie glaubt, selbst zu steuern. Solche immersiven, raumgreifenden Formen zeigen, dass die Auseinandersetzung mit Lesen, Aufmerksamkeit und Kontrolle nicht auf den Bildschirm beschränkt bleiben muss.

Für die Zukunft interessiert mich vor allem die Frage, wie sich das Thema in andere Formen der Kommunikation übertragen lässt. Kann es im öffentlichen Raum stattfinden, mit anderen Medien oder Textsorten? Die Türhüterparabel war ein idealer Ausgangspunkt. Jedoch lässt sich das Prinzip dahinter, die Diskrepanz zwischen gefühlter und tatsächlicher Kontrolle, auf nahezu jede Form digitaler Kommunikation übertragen. Wenn diese Arbeit eine Sache bewirken kann, dann ist es, einen Moment des Innehaltens zu erzeugen: das Bewusstsein dafür, dass das Lesen am Bildschirm nie ganz uns selbst gehört.

«Vor dem Gesetz» ist nur für die Desktop-Ansicht geeignet.