- Beaucoup de grands sites web techniques provoquent une véritable explosion du nombre d’onglets quand on veut consulter plusieurs pages en même temps
- PostHog.com a lui aussi rencontré un problème similaire et a adopté une interface de style système d’exploitation pour le résoudre
- Cette nouvelle structure propose diverses interactions comme le multitâche, le snap de fenêtres et les raccourcis clavier
- Des innovations techniques ont été appliquées, comme la séparation entre hiérarchie visuelle et contenu, la gestion de contenu basée sur JSON et une base de données clients
- Au départ déroutante, cette approche a finalement amélioré l’expérience de développement et d’utilisation, tout en apportant flexibilité et extensibilité
Le problème : l’explosion des onglets sur les sites techniques
- Sur beaucoup de grands sites techniques, quand on veut consulter plusieurs pages à la fois, on finit par ouvrir une série de nouveaux onglets avec
CMD+ clic - À cause du même favicon et d’un design similaire, il devient difficile de distinguer les onglets entre eux
- PostHog.com a commencé à rencontrer le même problème à mesure que le service grandissait, avec davantage de produits payants à prendre en charge et un nombre de pages en hausse, ce qui a aggravé le manque de repères
Explorer des alternatives et repenser l’interface
- L’équipe a commencé à remettre en question les interfaces centrées sur le scroll des sites marketing et de documentation classiques, leurs gros footers et leurs espaces vides excessifs
- Elle a identifié le besoin d’une meilleure façon de consommer le contenu plutôt que de pousser à faire défiler sans raison
- Pour y répondre, le nouveau PostHog.com a été conçu pour permettre le multitâche, la consultation simultanée de plusieurs articles et une navigation libre dans l’écran
Un site qui fonctionne comme un système d’exploitation
- La nouvelle interface implémente des fonctions comme le snap de fenêtres, les raccourcis clavier et une application de favoris
- Elle offre, dans le navigateur, une expérience proche d’un système d’exploitation permettant d’effectuer plusieurs tâches en même temps
- Par exemple, il est possible de lire une newsletter pour les ingénieurs, de regarder une vidéo de démonstration et de lancer un jeu (mode Hedgehog) simultanément
Adaptation initiale et réaction des utilisateurs
- L’interface de style système d’exploitation peut sembler un peu déroutante au début
- Sortir des schémas traditionnels du navigateur peut provoquer un certain rejet instinctif, mais avec l’usage répété, on s’y habitue et on finit par la percevoir positivement
- Les collègues en interne ont eux aussi réagi favorablement à cette nouvelle expérience, au point qu’il devient difficile de revenir à l’ancienne manière de faire
Processus de construction et points techniques marquants
- Avec Eli Kinsey, l’équipe a conçu et développé l’interface en Typescript et Tailwind, tout en construisant le site
- En cherchant un moyen d’organiser de façon extensible cinq années de contenu, elle a exploré plusieurs approches techniques
Points techniques clés
-
Séparation entre hiérarchie visuelle et contenu
- Toutes les pages produit sont rendues à partir de fichiers JSON
- Le JSON contrôle directement la mise en page, le déroulé du contenu, les comparaisons avec les concurrents par fonctionnalité, ainsi que des captures d’écran sous différents thèmes (mode clair/sombre)
- À long terme, l’objectif est de déplacer cette structure vers un dépôt partagé avec l’application PostHog afin d’en faire une source d’information unique
-
Thèmes et habillage couleur
- Tout en conservant les modes clair et sombre, l’équipe a réfléchi à la manière d’appliquer harmonieusement différents thèmes, avec couleurs principales, secondaires et tertiaires
- Elle prévoit de partager plus tard son retour d’expérience sur ce sujet dans un article séparé
-
Base de données des clients de référence
- Un enregistrement client unique est défini dans le code pour stocker les informations sur l’usage par produit, les citations clients et les logos SVG (compatibles modes clair/sombre)
- Cela permet de charger automatiquement, selon la page, différentes citations, noms, photos et logos d’entreprise associés aux produits concernés, avec une grande souplesse
Méthode de développement et prototypage
- L’interface a été implémentée en Typescript et Tailwind, en menant la conception du site et son développement en parallèle
- L’équipe a choisi de prototyper directement dans l’environnement de production, ce qui facilite l’émergence de nouvelles idées et l’extension des fonctionnalités
- Selon les besoins, des outils externes de mockup comme Balsamiq ont aussi été utilisés pour concrétiser les concepts
Conclusion et pistes d’amélioration
- Le site en est actuellement à une phase initiale de MVP et nécessite encore de nombreuses améliorations
- L’équipe espère que les utilisateurs apprécieront la nouvelle UX de PostHog.com et prendront du plaisir à explorer le site
- Une documentation technique distincte sur le fonctionnement du site est également proposée
1 commentaires
Avis Hacker News
La raison pour laquelle cela paraît inhabituellement attrayant par rapport aux designs existants est sans doute une question à laquelle un psychologue, un spécialiste des sciences cognitives ou un neuroscientifique pourrait répondre ; je pense qu’il faudrait une étude bien plus approfondie que les billets de blog écrits à la hâte par notre industrie logicielle
Personnellement, je peux au moins parler d’expérience : j’ai travaillé dans une société qui conçoit des sites web et des stratégies pour de gros produits SaaS, et je fais partie de la cible de ce type de site (directeur engineering ou VP)
Du point de vue d’un prospect, la rapidité et la facilité avec lesquelles on peut explorer les informations recherchées sont nettement supérieures à tout ce que j’ai vu jusqu’ici
Par exemple, on voit immédiatement qu’il y a 34 produits répartis dans 7 catégories, ainsi que les 5 produits les plus populaires et 4 nouveautés
Si je veux tester un produit : Docs > Product OS > Integration > Install and configure > Install PostHog
Si je veux comprendre la culture engineering : Company > Handbook > Engineering > Internal Processes > Bug prioritization
Pour consulter les prix : Pricing calculator > sélectionner le produit > définir l’usage, choisir les options
Toutes ces interactions se font en quelques secondes, et je peux basculer instantanément entre une page d’aperçu déjà ouverte et une nouvelle page de tarifs sans rechargement complet du site, sans avoir à ouvrir de nouvel onglet ni à scroller
Donc je pense qu’il y a ici quelque chose de fondamental, au-delà du simple aspect esthétique ; on pourrait même en arriver à la conclusion que la philosophie UI/UX actuelle est devenue, au fond, peu accueillante pour l’utilisateur
Je me souviens que Cory et Eli (frontend engineer) avaient discuté du design du site autour de la question : « Pourquoi tous les sites sont-ils faits de longues pages à faire défiler, et est-ce vraiment adapté à notre activité ? »
Comme nous proposons des produits variés et un contenu très large (plus de 10 produits, un handbook, des offres d’emploi, une newsletter, etc.), nous avons conclu qu’une structure plate, adaptée à une entreprise mono-produit, ne convenait pas
La plupart des sites essaient de tout raconter sur l’entreprise en 3 secondes, mais notre société est trop multidimensionnelle pour tenir dans une présentation de 3 secondes ; nous avons donc volontairement conçu une structure qui pousse les gens à explorer le site et à mieux comprendre le contenu en profondeur
Certains visiteurs partiront vite à cause de cela, mais ceux qui restent aiment (parfois !) vraiment cette UX
Le projet lui-même était amusant, et nous l’avons tenté parce qu’il permettait de se démarquer d’une façon particulière
C’est bien plus cool et plus rentable que la prospection commerciale traditionnelle
En métrique startup, nous fonctionnons avec une période de récupération du CAC de 3 mois
Cela dit, pour que cette stratégie fonctionne vraiment, il faut partir du principe qu’il faut aller vraiment en profondeur pour rester dans l’esprit des gens
Je ne m’attendais pas à voir ce point de vue sur HN
D’habitude, sur HN, l’idée dominante est que trop de JavaScript = mauvais design, inutilisable et peu portable
Ici, c’est en quelque sorte la version poussée au maximum de JavaScript
Le fait de pouvoir trouver les informations voulues rapidement et facilement donne vraiment l’impression d’un retour du web vers la conception centrée sur les menus d’autrefois
Les UI modernes mettent en avant la simplicité et une « expérience agréable », mais elles ont du mal à égaler l’efficacité d’une barre de menus bien conçue
Il faut faire attention avant de généraliser le confort ressenti avec ce type d’interface
Comparée à une CLI ou à une palette de commandes, cette UI me semble lourde et cognitivement fatigante
Si je me souviens bien, cette entreprise a mis tout son contenu dans le même CMS, en particulier en intégrant les forums de discussion / d’aide au site principal
D’après mon expérience sur des projets similaires, cela donne l’impression que tout le contenu de la page d’accueil est piloté et contrôlé par une seule organisation, sans traces de guerre de territoire entre départements ni de fouillis de liens vers divers sous-domaines
Je pense qu’un tel site n’est possible que s’il existe un système d’intégration de contenu (CMS) côté back-end
Et il faut aussi résister fortement, au niveau de l’organisation, à la tendance à la décentralisation (chaque VP protégeant son pré carré) pour rendre possible cette structure CMS
PostHog.com dit n’utiliser qu’un seul cookie interne, sans cookie tiers,
mais juridiquement, si ce cookie n’est pas indispensable au fonctionnement essentiel du site, il faut proposer une option d’opt-out (refus)
s’il est nécessaire au fonctionnement essentiel, alors la bannière elle-même n’est pas nécessaire
Si les cookies ne servent réellement qu’aux fonctions essentielles, alors ce genre de bannière cookie humoristique est inutilement agaçant tout en prétendant respecter la vie privée des visiteurs
Le pire, c’est que cela donne l’impression que le droit européen n’est qu’un ensemble de contraintes pénibles et vides de sens, ce qui finit par accorder davantage de légitimité aux sites qui surveillent réellement les utilisateurs
C’est franchement absurde
Le critère qui rend une bannière cookie nécessaire me paraît plus simple
Si le cookie n’est pas utilisé à des fins de tracking, il n’y a pas besoin de bannière
Par exemple, un cookie qui mémorise l’ordre de tri n’a pas de finalité de tracking, donc il ne devrait pas nécessiter de bannière
Au fond, le vrai sujet n’est pas le « cookie », mais le « tracking »
Je me demande quel pays impose une bannière pour tous les cookies
L’UE ne l’impose que pour les cookies de tracking, et PostHog n’en précise pas l’usage
Moi aussi, il m’est déjà arrivé d’en ajouter un juste parce qu’on me disait « c’est obligatoire » alors qu’il n’y avait même pas de cookie en pratique
L’idée selon laquelle tous les sites doivent avoir une bannière cookie est peut-être, en réalité, plus nuisible que la bannière elle-même
Puisqu’il y a un système de connexion, il est très probable que le cookie interne contienne des informations de connexion (JWT, etc.)
Dans ce cas, c’est un cookie nécessaire au fonctionnement essentiel, donc aucune bannière n’est requise
On peut donc supposer qu’elle n’a pas été ajoutée pour des raisons juridiques, mais simplement pour éviter que quelqu’un demande : « Pourquoi il n’y a pas de bannière cookie ? »
En fin de compte, il n’y a pas de véritable obligation légale, seulement un besoin de conformité perçue / d’attente implicite
On est en 2025, et je me demande encore pourquoi il faut toujours voir les cookies à l’écran et les refuser manuellement
J’aurais pensé que le navigateur pourrait simplement le faire automatiquement
La page https://posthog.com/404 est une parodie de l’écran bleu de la mort
J’ai toujours pensé autrefois que la « multi-document interface » (MDI) était un anti-pattern
Puisqu’on a déjà un gestionnaire de fenêtres parfaitement fonctionnel, pourquoi chaque application aurait-elle besoin de son propre outil de gestion de fenêtres embarqué ?
Bien sûr, sur mobile, c’est une exception, puisqu’il n’y a pas de gestionnaire de fenêtres de ce niveau au niveau du système d’exploitation
Certaines applications (par exemple les éditeurs d’image) ont besoin de plusieurs fenêtres à l’intérieur de l’application
Mais presque toutes les implémentations MDI généralistes (Win32, Qt) sont tellement minimalistes qu’elles sont décevantes
Dans Krita, j’aimerais pouvoir ouvrir plusieurs fenêtres, mais le MDI de Qt est pire que Windows 95
Comparé à une application comme Gimp, je préfère au contraire une structure où tout est contenu dans une seule fenêtre
Dès que deux ou trois applications sont ouvertes en même temps, retrouver les fenêtres devient un jeu de cache-cache
Je déteste vraiment quand les barres d’outils sont exposées dans des fenêtres séparées
En tant qu’utilisateur Mac de longue date, j’ai toujours eu l’impression que le MDI était un pis-aller né du manque de vraies fonctions de gestion des fenêtres au niveau applicatif dans l’OS
Les anciennes versions de Photoshop sur Mac permettaient d’ouvrir librement des fenêtres et palettes séparées, puis vers CS4 un mode de type MDI a été introduit ; tout est soudain devenu étouffant, donc je le désactivais systématiquement
Sur Mac en particulier, cela paraît très étranger et contraignant
La plupart des commandes Unix ont chacune leur propre manière de formater la sortie (colonnes, tableaux, listes, fichiers, TTY, etc.)
L’abstraction d’UNIX est au fond structurée autour du « texte »
Mais comme l’écosystème est riche, chaque outil a des exigences différentes
S’il existait une meilleure abstraction que le texte, elle se serait probablement déjà imposée ; au final, tout reste des pipelines textuels
Les gestionnaires de fenêtres des OS ne semblent pas très efficaces quand il faut manipuler beaucoup de petites fenêtres sur un seul écran
À l’inverse, les outils de gestion de fenêtres personnalisés des logiciels artistiques ou de CAO sont souvent optimisés avec de petites barres de titre pour économiser l’espace
Je trouve que c’est un projet presque parfait et inspirant
Ce serait encore mieux si, comme sur un vrai bureau d’OS, on pouvait faire glisser dans une zone vide pour faire apparaître un rectangle de sélection et le déplacer,
alors j’ai moi-même bricolé un snippet de code qui le permet ; il suffit de le coller dans la console pour réaliser ce rêve
(code : JS affichant un rectangle de sélection à l’écran au glisser de souris, avec sortie dans la console)
L’idée comme l’implémentation sont chouettes, mais honnêtement je n’en veux pas
Il faudrait apprendre une nouvelle UI/UX, puis gérer des fenêtres dans des fenêtres
Pour moi, un site web n’a pas besoin d’une interface sophistiquée ; de simples blocs de texte suffisent
Je suis totalement d’accord
Mon système d’exploitation est déjà configuré pour gérer parfaitement les fenêtres
Il suffit d’imaginer ce que donnerait tout le contenu de cette page s’il fallait le transformer en un seul bloc de texte : ce serait monstrueusement long
J’ai du mal à trouver les mots, mais c’est vraiment un super travail
Après des années dans le développement web à me plaindre en permanence des mauvaises UI, ce site est vraiment excellent
Ce n’est pas seulement un « look Windows » ; à l’usage, c’est de loin la meilleure expérience que j’aie eue sur un site de simulation de bureau basé sur navigateur
Un seul regret : si le menu contextuel qui apparaît au clic droit sur le fond contenait une entrée « Actualiser », l’ambiance de bureau navigateur serait parfaite (pas besoin qu’elle fonctionne, ce serait juste la touche finale)
En bref : superbe travail, superbe site
Visuellement c’est cool, mais les performances sont trop lentes
Dès qu’on ouvre quelques fenêtres et qu’on les déplace, ça devient pénible
Si on veut créer une page web multi-fenêtres de ce type, il faut aussi qu’elle soit performante
Avant, on n’aurait jamais utilisé ce genre de structure à cause du SEO
Aujourd’hui, on a l’impression que l’importance du SEO est en train de devenir une vieille histoire
J’ai constaté des lenteurs sur Firefox
Sur Edge, c’était fluide
Je serais curieux de savoir dans quel environnement les gens rencontrent des problèmes de performance
Chez moi, tout va bien jusqu’à la première fenêtre, puis ça saccade un peu à partir de la deuxième, avant de repartir à pleine vitesse
J’imagine que le navigateur applique ses routines d’optimisation avec un peu de retard une fois qu’il détecte l’usage de certaines fonctions
Avant, le SEO concernait des pages web en tant que « documents », mais maintenant tout le monde semble vouloir transformer le web en jeu
J’imagine qu’il doit devenir plus difficile de classer ce genre de sites
J’aime beaucoup ce site web parce qu’il est vraiment original
Au milieu du paradis des sites marketing SaaS qui recyclent tous le même template empilé de sections, il se démarque
Mais en pratique, personne ne l’utilisera réellement de la manière décrite plus haut
Je ne pense pas que qui que ce soit reste assez longtemps pour apprendre et utiliser une gestion de fenêtres spécifique au site
Pour ma part, j’ai trouvé l’UX assez intuitive
Et en plus, c’était amusant
D’habitude, je ferme immédiatement ce genre de site produit, mais là j’ai passé 5 à 10 minutes à fouiller en détail pour voir ce qu’il y avait
J’ai eu exactement la même impression
Mais la plupart des commentaires sur HN semblent plutôt mitigés
Ma réaction a été similaire
C’est impressionnant, amusant, et ça reflète bien la philosophie de l’entreprise
En usage réel, ce n’est pas très pratique, mais je ne pense pas que ce soit le point le plus important
En travaillant avec PostHog, le volume d’analytics m’a mis mal à l’aise vis-à-vis de mes standards éthiques, mais techniquement c’est vraiment très bien fait
La landing page montre bien le niveau technique et la qualité appliqués au produit lui-même
C’était une landing page originale et agréable, et la blague sur la « bannière cookie » m’a fait sourire