Por qué nuestro sitio web parece un sistema operativo

• Muchos sitios web tecnológicos grandes generan un problema de explosión de pestañas cuando intentas consultar varias páginas al mismo tiempo
• PostHog.com también enfrentó un problema similar y, para resolverlo, adoptó una UI estilo sistema operativo
• En la nueva estructura se ofrecen varias funciones de interacción como multitarea, ajuste de ventanas y atajos de teclado
• Se aplicaron innovaciones técnicas como jerarquía visual y separación del contenido, gestión de contenido basada en JSON y una base de datos de clientes
• Al principio resultó extraño, pero la experiencia de desarrollo y uso cambió de forma positiva, logrando flexibilidad y escalabilidad

---

El problema: la explosión de pestañas en los sitios web técnicos

• En muchos sitios web técnicos de gran escala, cuando intentas consultar varias páginas a la vez, terminas abriendo múltiples pestañas nuevas con CMD + clic
• Debido al mismo favicon y a diseños parecidos, es difícil distinguir cada pestaña
• A medida que PostHog.com creció, también empezó a sufrir el mismo problema; al soportar más productos de pago y aumentar la cantidad de páginas, la falta de diferenciación se agravó

Explorando alternativas e innovación en la UI

• Empezaron a cuestionar las interfaces centradas en el scroll de los sitios tradicionales de marketing y documentación, sus grandes pies de página y el exceso de espacio en blanco
• Reconocieron la necesidad de una mejor forma de consumir contenido en lugar de fomentar un scroll sin sentido
• Para resolverlo, el nuevo PostHog.com fue diseñado para permitir multitarea, abrir varios artículos al mismo tiempo y moverse libremente dentro de la pantalla

Un sitio que funciona como un sistema operativo

• La nueva UI implementa funciones como ajuste de ventanas, atajos de teclado y una app de marcadores
• Ofrece una experiencia similar a la de un sistema operativo dentro del navegador, donde es posible realizar varias tareas al mismo tiempo
• Por ejemplo, puedes leer un boletín para ingenieros, ver un video demo y ejecutar un juego (hedgehog mode) al mismo tiempo

Adaptación inicial y reacción de los usuarios

• La interfaz estilo sistema operativo puede sentirse un poco extraña al principio
• Al salirse de los patrones tradicionales del navegador, al cerebro puede costarle aceptarla, pero con el uso repetido se vuelve familiar y empieza a percibirse de forma positiva
• Los colegas internos también dieron comentarios positivos sobre esta nueva experiencia, hasta el punto de que volver a la forma anterior ya parece difícil

Proceso de construcción y puntos técnicos destacados

• Junto con Eli Kinsey, diseñaron y desarrollaron la UI basada en Typescript y Tailwind, y construyeron el sitio
• Mientras ideaban cómo organizar de forma escalable cinco años de contenido, exploraron varios enfoques técnicos

Puntos técnicos principales

• Separación entre jerarquía visual y contenido

  • Todas las páginas de producto se renderizan con base en archivos JSON
  • El JSON controla directamente el diseño de la página, el despliegue del contenido, la comparación con competidores por función y las capturas en distintos temas (modo claro/oscuro)
  • A largo plazo, planean mover esta estructura a un repositorio compartido con la app de PostHog para convertirla en una fuente única de información

• Temas y skinning de color

  • Mantienen los modos claro y oscuro, y estudiaron cómo aplicar de forma armoniosa varios temas, como colores primarios, secundarios y terciarios
  • Planean compartir esa experiencia en un artículo aparte más adelante

• Base de datos de clientes de referencia

  • Definen un único registro de cliente dentro del código para almacenar información sobre el uso por producto, citas de clientes y logos SVG (compatibles con modo claro/oscuro)
  • Esto permite cargar automáticamente, según cada página, citas, nombres, fotos y logos de empresa relacionados con distintos productos, logrando mayor flexibilidad

Método de desarrollo y prototipado

• Implementaron la UI con Typescript y Tailwind, avanzando en el diseño y desarrollo del sitio al mismo tiempo
• Eligieron un enfoque de prototipado dentro del entorno de producción para facilitar la generación de nuevas ideas y la expansión de funciones
• Cuando fue necesario, también usaron herramientas externas de mockup como Balsamiq para concretar mejor los conceptos

Conclusión y dirección de mejoras futuras

• Actualmente, esto corresponde a una etapa inicial de MVP, y todavía hay muchas mejoras por hacer
• Esperan que los usuarios disfruten la nueva UX de PostHog.com y que se diviertan mientras exploran el sitio
• También se ofrece por separado documentación técnica sobre cómo funciona el sitio