Pourquoi notre site web ressemble-t-il à un système d’exploitation ?

• 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