Willemstagram

Zusammenfassung

Letzte Woche saß ich mit einem Kunden vor der neuen willem.com-Startseite, auf der ich meine Arbeit als Erzählung präsentiere. Dieser Kunde gehört zu den besten visionären, kreativen Denkern, die ich kenne, und trotzdem schien ihn mein Text nicht anzusprechen. Beim Nachdenken fiel mir eine wichtige Lektion aus meinem Psychologiestudium wieder ein: Ich brauchte etwas anderes, etwas Nichtlineares. In diesem Beitrag geht es um einen visuellen Paukenschlag!

Volltext

Linkes versus rechtes Gehirn

Eines der coolen Dinge an meinem Studium an der Universität von Amsterdam war, dass wir Kurse aus verschiedenen Fakultäten hatten. Das ergab eine spannende Mischung aus interdisziplinärer Wissenschaft. Eines der klassischen Bücher, die wir besprachen, war „Mintzberg on Management“. Der Autor erklärt darin, warum verschiedene Menschen Unterschiedliches bevorzugen. Die klassische Zweiteilung wird oft zu „linke versus rechte Gehirnhälfte“ vereinfacht:

• Der lineare Denker (die linke Gehirnhälfte): Das ist der natürliche Zustand für Menschen, die eine logische Erzählung schätzen, die von A über B nach C aufgebaut ist. Typische Vertreter sind Geschichtenerzähler, Architekten und Programmierer.
• Der nichtlineare Denker (die rechte Gehirnhälfte): Das ist der Zustand von Menschen, die keiner geraden Linie folgen. Sie suchen nach Eindrücken, Stimmungen und emotionalen Botschaften. Typische Vertreter sind kreative Köpfe, darunter Künstler und visionäre Denker.

Meine neue willem.com-Startseite funktionierte gut für lineare Denker wie mich: Die textbasierte Erzählung passt zur linken Gehirnhälfte. Aber mein Design ließ Menschen im Stich, die am besten auf nichtlineare, stimmungsvolle Eindrücke reagieren. Ich brauchte etwas, das die vielen Bilder reich und dynamisch zeigt, lebendig und mit einer gesunden Portion interaktivem Spaß.

Solari-Tafel

Vor langer, langer Zeit habe ich meine Frau im Bahnhof Utrecht Centraal kennengelernt, direkt unter der riesigen Abfahrtstafel. Die ikonische blaue Tafel von 7 x 4,20 Metern, die rund 3000 Kilo wog, hatte mechanische Klappen, die mit ihrem unverwechselbaren Geräusch ungefähr jede Minute durch die Haupthalle hallten. Diese Art von Anzeige nennt man oft „Solari-Tafel“, benannt nach Solari di Udine, dem italienischen Unternehmen, das diese Ikonen herstellte. Heute hat der Bahnhof Utrecht digitale Anzeigen, aber wenn du möchtest, kannst du die Tafel noch im Spoorwegmuseum bewundern.

Als Metaphernfan (Buchtipp: Metaphors we live by) fand ich, die Solari-Tafel mit ihrem Klappern wäre eine wunderbare Art, Besucher von willem.com zu verschiedenen „Zielen“ (den Geschichten) auf der Seite „abfahren“ zu lassen. Statt Text habe ich mich bewusst für die Fotos und Bilder in den Blogbeiträgen entschieden, als Tore zum Bereich Einblicke auf willem.com. Neue Ziele werden zufällig aufgedeckt, das ist ganz und gar nichtlinear. Und weil du klicken und tippen kannst, fesselt es mehr als reiner Text. Jedes Ziel öffnet ein „Ticket“, das kurz erklärt, was du da siehst. Wenn dir gefällt, was du siehst, drückst du auf den großen Button und die Geschichte öffnet sich genau an der Stelle des Bildes, mitten in einem Blogbeitrag, wenn es sein muss. Die Geschichten öffnen sich in neuen Browserfenstern, sodass du zum „Bahnhof“ zurückkehren und ein neues Ziel finden kannst.

Umsetzung: ThreeJS und eine eigene Bild-API

Früher habe ich mit der 3D-Grafik-Engine ThreeJS experimentiert, um Trainingsdaten zu visualisieren. Das ist eine Bibliothek, die das HTML5-Element canvas nutzt, um Grafiken auszugeben, die mit Spatial Computing erzeugt werden. Das ist eine schicke Art zu sagen, dass man Dinge in drei Dimensionen (x, y, z) statt in zwei zeichnen kann, daher der Name. Sie bietet Steuerung für Kamera, Licht und Nebel und ist dafür gemacht, Animationen auf Basis von simulierter Position und Drehung zu ermöglichen. Es macht Spaß, damit zu spielen, und sie kann ziemlich viel. Hier sind meine beiden früheren Beiträge über meine Experimente mit ThreeJS:

Der Minimalist in mir überlegte kurz, es mit CSS-Animationen, Transformationen und Übergängen zu lösen. Aber die realistische Perspektive, bei der die äußersten Klappen stärker schräg stehen, und die zufällige Auswahl neuer Bilder würden ohnehin JavaScript erfordern. Um den Nutzen zu maximieren, wollte ich es direkt auf meiner Startseite einbauen. Aber eine komplette 3D-Engine zu laden, ist nichts, was man auf die leichte Schulter nimmt. Damit die Ladezeit der Startseite möglichst wenig leidet, habe ich es so gebaut, dass es asynchron und völlig optional geladen wird (für Leute mit deaktiviertem JS).

Um das „Visual Journal“ zu füttern, habe ich eine eigene API entworfen, die hochoptimierte Bilder in 400x400px ausliefert. Jedes Bild hat einen lokalisierten Titel und einen Deeplink mit einem Hashtag-Anker (Slug), damit du direkt in die Geschichten eintauchen kannst. Die nötige Infrastruktur dafür liefert meine eigene Lemmid-Plattform. Im Hintergrund erzeugt ein optimierter NodeJS-Dienst die Bilder mit imagemagick, jpegoptim und pngquant. Du kannst die API selbst unter https://willem.com/en/images.json ansehen. Sie gibt ein JSON-Array wie dieses aus:

[
  {
    "url": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
    "title": "An average fly is bigger than most screws inside the iMac",
    "target": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
  },
  {
    "url": "/en/2019-06-25_assembling-a-cargo-bike/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
    "title": "Using filler plates to make up for Chinese Precision",
    "target": "/en/2019-06-25_assembling-a-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision"
  },
  {
    "url": "/en/2021-01-14_abandoning-my-own-tablet-os/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
    "title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
    "target": "/en/2021-01-14_abandoning-my-own-tablet-os/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
  },
  ...
]

Damit das Ganze nicht bloß ein Zufallsgenerator für Links ist, habe ich bewusst ein kleines Popup eingebaut, das erscheint, wenn du ein Bild antippst oder anklickst. Dafür nutze ich die Bildunterschriften, die mein Lemmid Content Manager verwaltet. Sie verraten ein bisschen was, damit du entscheiden kannst, ob sich das Öffnen der Geschichte lohnt.

Veröffentlichung des Quellcodes (AGPL)

Ich freue mich sehr darüber, wie das Visual Journal auf meiner Seite funktioniert, aber ich glaube fest ans Teilen. Vielleicht hast du eine noch bessere Idee für ein Solari-Klappern. Deshalb veröffentliche ich das Ganze als freie Software unter der GNU Affero General Public License (AGPL). Das heißt, du kannst es selbst nutzen, verändern und weitergeben. Quellcode, Readme und Beispieldateien findest du unter https://source.willem.com/visual-journal/

Fazit

Wenn ich sehe, wie sehr es die Neugier meiner Kinder weckt, bin ich sehr zufrieden mit dem Visual Journal, das ich scherzhaft Willemstagram getauft habe. Aber anders als Instagram von Meta erzählt es nur mit Bildern meine Geschichten, und der Quellcode ist frei. Du kannst es dir auf der Startseite ansehen oder über den Button unten. Welches Ziel wählst du?

[action1]

Dieser Text wurde von Hand geschrieben. In Zeiten von KI-generierten Texten ist das meine einfache Art, die menschlichen Gedanken und die Mühe hinter diesen Worten zu zeigen. Wer neugierig ist, kann das originale (englische) Manuskript herunterladen.

[download1]