Warum sieht unsere Website wie ein Betriebssystem aus?

 (posthog.com)
1 Punkte von GN⁺ 2025-09-12 | 1 Kommentare | Auf WhatsApp teilen
  • Viele große Technologie-Websites verursachen eine Tab-Explosion, wenn man mehrere Seiten gleichzeitig heranziehen will
  • Auch PostHog.com hatte ein ähnliches Problem und führte zur Lösung eine UI im Betriebssystem-Stil ein
  • Die neue Struktur bietet verschiedene Interaktionsfunktionen wie Multitasking, Fenster-Snapping und Tastaturkürzel
  • Technische Neuerungen wie visuelle Hierarchien und Trennung von Inhalten, JSON-basierte Content-Verwaltung und eine Kundendatenbank wurden umgesetzt
  • Anfangs war es ungewohnt, doch die Entwicklungs- und Nutzungserfahrung verbesserte sich positiv, während Flexibilität und Erweiterbarkeit sichergestellt wurden

Das Problem: Tab-Explosion auf Technologie-Websites

  • Auf vielen großen Technologie-Websites öffnet man beim gleichzeitigen Nachschlagen mehrerer Seiten per CMD + Klick mehrere neue Tabs
  • Durch identische Favicons und ähnliche Designs ist es schwer, die einzelnen Tabs auseinanderzuhalten
  • Auch PostHog.com begann mit dem Wachstum des Dienstes unter demselben Problem zu leiden; mit mehr unterstützten Bezahlprodukten und mehr Seiten wurde der Mangel an Unterscheidbarkeit noch gravierender

Alternativen und UI-Innovation

  • Die scrolllastigen Interfaces bestehender Marketing- und Dokumentationsseiten, große Footer und übermäßiger Leerraum wurden hinterfragt
  • Statt bedeutungsloses Scrollen zu erzwingen, wurde die Notwendigkeit einer besseren Art des Content-Konsums erkannt
  • Um das zu lösen, wurde das neue PostHog.com so entworfen, dass Multitasking, das gleichzeitige Lesen mehrerer Artikel und freie Bewegung innerhalb des Bildschirms möglich sind

Eine Website, die wie ein Betriebssystem funktioniert

  • Die neue UI implementiert Funktionen wie Fenster-Snapping, Tastaturkürzel und Bookmark-Apps
  • Sie bietet ein Erlebnis wie ein Betriebssystem im Browser, in dem mehrere Aufgaben gleichzeitig erledigt werden können
  • Zum Beispiel kann man gleichzeitig einen Newsletter für Engineers lesen, ein Demo-Video ansehen und ein Spiel ausführen (Hedgehog-Modus)

Frühe Eingewöhnung und Nutzerreaktionen

  • Die Oberfläche im Betriebssystem-Stil kann anfangs etwas ungewohnt wirken
  • Das Gehirn sträubte sich teils gegen die Abkehr von traditionellen Browser-Mustern, doch mit wiederholter Nutzung stellte sich Gewöhnung ein und die Wahrnehmung wurde positiv
  • Auch interne Kolleginnen und Kollegen gaben positives Feedback zu diesem neuen Erlebnis, und es wurde ein Punkt erreicht, an dem eine Rückkehr zur alten Art kaum noch vorstellbar ist

Aufbauprozess und technische Highlights

  • Gemeinsam mit Eli Kinsey wurde die UI auf Basis von Typescript und Tailwind entworfen und entwickelt, während die Website gebaut wurde
  • Bei der Suche nach einer skalierbaren Organisation von fünf Jahren Content wurden verschiedene technische Ansätze erkundet

Zentrale technische Punkte

  • Visuelle Hierarchie und Trennung von Inhalten

    • Alle Produktseiten werden auf Basis von JSON-Dateien gerendert
    • JSON steuert direkt Seitenlayout, Content-Aufbau, Wettbewerbsvergleiche nach Funktionen und Screenshots verschiedener Themes (Light-/Dark-Mode)
    • Langfristig ist geplant, diese Struktur in ein gemeinsam mit der PostHog-App genutztes Repository zu überführen, um eine einzige Informationsquelle zu schaffen

  • Themes und Farbschema-Skinning

    • Light- und Dark-Mode bleiben erhalten, und es wurde überlegt, wie Haupt-, Sekundär- und Tertiärfarben sowie verschiedene Themes harmonisch angewendet werden können
    • Erfahrungen dazu sollen später in einem separaten Beitrag geteilt werden

  • Referenzkunden-Datenbank

    • Im Code wird ein einzelner Kundendatensatz definiert, der Informationen zu produktbezogener Nutzung, Kundenzitaten und SVG-Logos (für Light-/Dark-Mode) speichert
    • So können je nach Seite Zitate, Namen, Fotos und Firmenlogos, die mit unterschiedlichen Produkten verknüpft sind, automatisch geladen werden, was Flexibilität schafft

Entwicklungsansatz und Prototyping

  • Die UI wurde mit Typescript und Tailwind umgesetzt, wobei Website-Design und Entwicklung parallel vorangetrieben wurden
  • Gewählt wurde ein Prototyping-Ansatz direkt in der Produktionsumgebung, um neue Ideen und Funktionserweiterungen leicht abzuleiten
  • Bei Bedarf wurden zusätzlich externe Mockup-Tools wie Balsamiq genutzt, um Konzepte zu konkretisieren

Fazit und künftige Verbesserungen

  • Aktuell befindet sich das Projekt noch in einer frühen MVP-Phase, und es sind auch künftig zahlreiche Verbesserungen nötig
  • Es wird gehofft, dass Nutzerinnen und Nutzer die neue UX von PostHog.com genießen und beim Erkunden der Website auch Spaß haben
  • Eine technische Dokumentation zur Funktionsweise der Website wird separat bereitgestellt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-09-12
Hacker-News-Kommentare

  • Warum das im Vergleich zu bestehenden Designs so ungewöhnlich attraktiv wirkt, könnten wohl eher Psychologen, Kognitionswissenschaftler oder Neurowissenschaftler beantworten; ich denke, dafür braucht es tiefergehende Forschung als die hastig geschriebenen Blogposts, die wir derzeit in der Softwarebranche produzieren.
    Eine Sache kann ich aus Erfahrung sagen: Ich habe bei einer Firma gearbeitet, die Websites und Strategien für große SaaS-Produkte erstellt, und gehöre selbst zur Zielgruppe solcher Seiten (Engineering Director oder VP).
    Aus Sicht potenzieller Kunden sind Geschwindigkeit und Komfort beim Auffinden der gewünschten Informationen eindeutig besser als alles, was ich bisher gesehen habe.
    Zum Beispiel konnte ich sofort erkennen, dass es 34 Produkte in 7 Kategorien gibt, und die 5 beliebtesten sowie 4 neuen Produkte waren direkt sichtbar.
    Wenn man ein Produkt ausprobieren möchte: Docs > Product OS > Integration > Install and configure > Install PostHog
    Wenn man sich für die Engineering-Kultur interessiert: Company > Handbook > Engineering > Internal Processes > Bug prioritization
    Preise ansehen: Pricing calculator > Produkt auswählen > Nutzung festlegen, Zusatzfunktionen wählen
    All diese Interaktionen passieren in wenigen Sekunden, und man kann ohne komplettes Neuladen der Website direkt zwischen der bereits geöffneten Übersichtsseite und der neu geöffneten Preisseite wechseln, ohne extra neue Tabs zu öffnen oder zu scrollen.
    Deshalb glaube ich, dass hier etwas Grundsätzlicheres dahintersteckt als bloß Ästhetik; vielleicht könnte man sogar zu dem Schluss kommen, dass die heutige UI/UX-Philosophie den Nutzern eher unfreundlich geworden ist.

    • Ich erinnere mich, dass Cory und Eli (Frontend-Ingenieur) über Website-Design diskutiert haben unter dem Thema: „Warum bestehen alle Websites aus langen, scrolllastigen Seiten, und passt das überhaupt zu unserem Business?“
      Da wir verschiedene Produkte und ein breites Spektrum an Inhalten anbieten (mehr als 10 Produkte, Handbook, Jobs, Newsletter usw.), kamen wir zu dem Schluss, dass die flache Struktur, die für Ein-Produkt-Firmen geeignet ist, für uns nicht passt.
      Die meisten Websites versuchen, in 3 Sekunden alles über sich zu vermitteln, aber unser Unternehmen ist zu facettenreich, um in eine 3-Sekunden-Einführung zu passen. Deshalb haben wir die Struktur absichtlich so gebaut, dass Leute die Website erkunden und die Inhalte tiefer verstehen.
      Deshalb springen manche Besucher schnell wieder ab, aber die, die bleiben, mögen dieses UX (manchmal!) wirklich sehr.
      Das Projekt selbst hat auch Spaß gemacht, und wir wollten etwas ausprobieren, das auf besondere Weise heraussticht.
      Es ist viel cooler und kosteneffizienter als traditioneller Outbound-Sales.
      Als Startup-Kennzahl arbeiten wir mit einer CAC-Amortisationszeit von 3 Monaten.
      Allerdings setzt diese Strategie voraus, dass man es „wirklich“ tiefgehend umsetzt, damit es den Leuten im Gedächtnis bleibt.

    • Hätte nicht gedacht, so eine Haltung auf HN zu sehen.
      Normalerweise dominiert auf HN die Sichtweise, dass viel JavaScript ein schlechtes Design sei, unbenutzbar und wenig portabel.
      Dieser Fall ist gewissermaßen die maximal gesteigerte Version von JavaScript.

    • Dass man benötigte Informationen schnell und einfach finden kann, fühlt sich wirklich so an, als würde das Web zur menübasierten Gestaltung der Vergangenheit zurückkehren.
      Moderne UIs setzen auf Einfachheit und ein „angenehmes Erlebnis“, aber an die Effizienz einer gut aufgebauten Menüleiste kommen sie schwer heran.

    • Man sollte vorsichtig sein, das angenehme Gefühl bei solchen Interfaces zu verallgemeinern.
      Im Vergleich zu CLI oder einer Command Palette wirkt dieses UI belastend und kognitiv ermüdend.

    • Wenn ich mich richtig erinnere, hat diese Firma alle Inhalte in dasselbe CMS gepackt und insbesondere Diskussions-/Hilfeforen in die Hauptseite integriert.
      Aus meiner Erfahrung mit ähnlichen Projekten bleibt dabei der Eindruck, dass alle Inhalte auf der Startseite von einer Organisation gesteuert und kontrolliert werden; es gibt keine Spuren von Revierkämpfen zwischen Abteilungen oder chaotischen Links auf verschiedene Subdomains.
      Ich denke, solche Sites lassen sich nur mit einem Content-Integrationssystem (CMS) im Backend bauen.
      Und auf Organisationsebene muss man einer Tendenz zur Dezentralisierung (jede VP verteidigt ihr eigenes Territorium) stark widerstehen, damit eine solche CMS-Struktur möglich ist.

  • PostHog.com sagt, dass es ohne Third-Party-Cookies nur ein internes Cookie verwendet,
    aber rechtlich muss es eine Opt-out-Möglichkeit geben, wenn dieses Cookie nicht für die Kernfunktion der Website erforderlich ist.
    Falls es für die Kernfunktion notwendig ist, braucht man den Banner selbst nicht.

    • Wenn Cookies tatsächlich nur für notwendige Funktionen verwendet werden, ist so ein scherzhafter Cookie-Banner eher unnötig nervig, während er so tut, als würde er die Privatsphäre der Besucher respektieren.
      Noch schlimmer ist, dass EU-Recht dadurch wie eine lästige Regulierung ohne echten Nutzen wirkt und am Ende Websites, die Nutzer tatsächlich überwachen, eher bessere Rechte verschafft.
      Wirklich absurd.

    • Ich glaube, das Kriterium dafür, ob ein Cookie-Banner nötig ist, ist einfacher.
      Wenn Cookies nicht zu Tracking-Zwecken verwendet werden, braucht man keinen Banner.
      Zum Beispiel denke ich, dass Cookies, die sich etwa die Sortierreihenfolge merken, keinen Banner brauchen, weil sie nicht fürs Tracking da sind.
      Am Ende ist nicht das „Cookie“ das Problem, sondern „Tracking“.

    • Ich frage mich, welches Land Cookie-Banner für alle Cookies vorschreibt.
      Die EU verlangt sie nur für Tracking-Cookies, und PostHog nennt diesen Zweck nicht.
      Ich selbst habe auch schon etwas eingebaut mit dem Gedanken „es ist wohl nötig“, obwohl es auch ohne Cookie ging.
      Die Vorstellung, dass jede Website Cookie-Banner haben muss, könnte in der Praxis schädlicher sein als die Banner selbst.

    • Da es ein Login-System gibt, ist es wahrscheinlich, dass das interne Cookie Login-Informationen (JWT o. Ä.) enthält.
      In diesem Fall wäre das Cookie ein für Kernfunktionen notwendiges Cookie, und es wäre kein Banner nötig.
      Daraus lässt sich schließen, dass es rechtlich nicht erforderlich ist, aber man es einfach eingebaut hat, weil sonst vielleicht jemand fragen würde: „Warum habt ihr keinen Cookie-Banner?“
      Letztlich besteht also keine echte rechtliche Pflicht, sondern eher eine praktische bzw. wahrnehmungsbezogene Notwendigkeit.

    • Es ist 2025, und ich frage mich immer noch, warum Leute Cookies überhaupt noch sehen und manuell ablehnen wollen.
      Der Browser sollte das doch einfach automatisch übernehmen, oder?

  • Die Seite https://posthog.com/404 ist eine Parodie auf den Blue Screen of Death.

  • Früher dachte ich immer, dass ein „Multi Document Interface“ (MDI) ein Anti-Pattern ist.
    Es gibt doch bereits perfekte Window-Manager; warum braucht dann jede App ihr eigenes eingebautes Fenstermanagement?
    Auf Mobilgeräten ist das natürlich eine Ausnahme, weil es dort keinen Fenstermanager auf Betriebssystemebene gibt.

    • Einige Apps (z. B. Bildbearbeiter) brauchen mehrere Fenster innerhalb der Anwendung.
      Aber fast alle allgemeinen MDI-Implementierungen (Win32, Qt) sind so minimalistisch, dass sie enttäuschen.
      In Krita möchte ich mehrere Fenster öffnen, aber Qts MDI ist schlechter als Windows 95.

    • Im Vergleich zu Apps wie Gimp gefällt mir eine Struktur, bei der alles in einem einzigen Fenster steckt, sogar besser.
      Wenn zwei oder drei Apps gleichzeitig geöffnet sind, ist das Finden von Fenstern ein einziges Versteckspiel.
      Ich hasse es wirklich, wenn Toolbars als separate Fenster erscheinen.

    • Als jemand, der lange einen Mac benutzt hat, fühlt sich MDI wie eine Behelfslösung an, die daraus entstanden ist, dass dem OS anwendungsbezogene Fensterverwaltungsfunktionen fehlen.
      Früher konnte man in Photoshop auf dem Mac Fenster und Paletten frei platzieren, und ungefähr ab CS4 wurde dann ein MDI-Typ eingeführt; plötzlich wirkte alles eingeengt, sodass ich es immer deaktiviert habe.
      Gerade auf dem Mac fühlt sich das sehr fremd und einengend an.

    • Die meisten Unix-Befehle haben jeweils ihre eigene Art von Ausgabeformaten (Spalten, Tabellen, Listen, Dateien, TTY usw.).
      Die UNIX-Abstraktion ist letztlich textzentriert.
      Aber weil das Ökosystem so reichhaltig ist, hat jedes Tool unterschiedliche Anforderungen.
      Wenn es neben Text eine bessere geeignete Abstraktion gäbe, hätte sie sich wohl längst durchgesetzt, aber am Ende läuft alles auf Text-Pipelines hinaus.

    • Die Window-Manager von Betriebssystemen scheinen nicht besonders gut darin zu sein, viele kleine Fenster auf einem Bildschirm effizient zu handhaben.
      Dagegen sind benutzerdefinierte Fenstermanagement-Tools in Art- oder CAD-Software oft darauf optimiert, mit kleinen Titelleisten Platz zu sparen.

  • Ich halte das für ein fast perfektes und inspirierendes Projekt.
    Noch besser wäre es, wenn man wie auf einem echten OS-Desktop leere Bereiche ziehen könnte und dabei ein Auswahlrechteck entstünde, das man bewegen kann.
    Ich habe sogar selbst ein Code-Snippet gebaut, das genau das ermöglicht; wenn man es in die Konsole einfügt und ausprobiert, wird der Traum wahr.
    (Code: JS, das per Mausziehen ein selection rect auf dem Bildschirm anzeigt und das Ergebnis in der Konsole ausgibt)

  • Sowohl die Idee als auch die Umsetzung sind cool, aber ehrlich gesagt will ich das nicht.
    Ich müsste eine neue UI/UX lernen und dann auch noch Fenster in Fenstern organisieren.
    Ich finde, Websites reichen als einfache Textblöcke völlig aus, statt eine schicke Oberfläche zu haben.

    • Stimme vollkommen zu.
      Ich habe mein Betriebssystem bereits so eingerichtet, dass es das Fenstermanagement perfekt übernimmt.

    • Man sollte sich einmal vorstellen, wie monströs lang es wäre, wenn man alle Inhalte dieser Seite in einen einzigen Blocktext verwandeln müsste.

  • Es ist schwer zu sagen, wie ich es ausdrücken soll, aber das ist wirklich großartige Arbeit.
    Nach Jahren in der Webentwicklung, in denen ich mich immer über schlechte UI geärgert habe, ist diese Website wirklich herausragend.
    Es ist nicht nur ein „Windows-Lookalike“, sondern fühlt sich tatsächlich besser an als alle browserbasierten Desktop-Simulator-Sites, die ich bisher benutzt habe.
    Ein kleiner Wermutstropfen wäre nur, dass im Kontextmenü beim Rechtsklick auf den Hintergrund noch ein Eintrag „Neu laden“ fehlen würde; dann wäre das Browser-Desktop-Gefühl perfekt (die Funktion müsste gar nicht wirklich etwas tun, aber atmosphärisch wäre es vollständig).
    Kurz gesagt: tolle Arbeit, tolle Website.

    • Danke für den Vorschlag, wir überlegen uns den „Neu laden“-Button.

  • Visuell ist es cool, aber die Performance ist viel zu langsam.
    Wenn man ein paar Fenster öffnet und bewegt, ist das frustrierend träge.
    Wenn man so eine Multi-Window-Webseite baut, muss auch die Performance gut sein.
    Früher hätte man allein wegen SEO niemals so eine Struktur verwendet.
    Inzwischen wirkt es, als würde die Bedeutung von SEO selbst langsam der Vergangenheit angehören.

    • Ich habe das langsame Verhalten in Firefox erlebt.
      In Edge lief es dann flüssig.

    • Mich würde interessieren, in welcher Umgebung du Performance-Probleme hattest.
      Bis zum ersten Fenster läuft es gut, ab dem zweiten ruckelt es etwas, und danach wieder mit voller Geschwindigkeit.
      Vielleicht liegt es daran, dass der Browser Optimierungsroutinen erst etwas verzögert aktiviert, wenn er die Verwendung bestimmter Funktionen erkennt.

    • Früher war SEO auf Webseiten als „Dokumente“ ausgerichtet, aber jetzt scheint der Trend dahin zu gehen, das Web wie ein Spiel zu bauen.
      Für spielartige Websites dürfte Ranking auch schwerer sein, oder?

  • Ich mag diese Website wirklich sehr, weil sie so originell ist.
    In einem Paradies aus SaaS-Marketing-Sites, die alle dieselbe Vorlage aus gestapelten Sektionen verwenden, sticht sie heraus.
    Aber ich glaube nicht, dass irgendjemand sie tatsächlich so benutzt, wie oben beschrieben.
    Niemand bleibt lange genug, um eigens eine fensterbasierte Bedienung nur für diese Seite zu lernen.

    • Für mich fühlte sich die UX eher intuitiv an.
      Und es machte Spaß.
      Normalerweise schließe ich solche Produktseiten sofort, aber diesmal habe ich 5 bis 10 Minuten oder länger verbracht und wirklich gründlich angeschaut, was es dort alles gibt.

    • Mir ging es ähnlich, auf eine seltsame Weise.
      Aber die meisten HN-Kommentare scheinen eher unzufrieden zu sein.

    • Meine Reaktion war ähnlich.
      Eindrucksvoll, unterhaltsam und ein gutes Abbild der Unternehmensphilosophie.
      Für den praktischen Alltag ist es nicht besonders zweckmäßig, aber ich glaube nicht, dass das hier das entscheidende Problem ist.

  • Bei der Arbeit mit PostHog war mir das Ausmaß des Trackings nach meinen ethischen Maßstäben unangenehm, aber technisch ist es wirklich hervorragend gemacht.
    Die Landingpage zeigt gut das technische Niveau und die Qualität, die im Produkt selbst steckt.
    Es war eine originelle und unterhaltsame Landingpage, und auch der Witz mit dem „Cookie-Banner“ war lustig.