Por qué nuestro sitio web parece un sistema operativo
(posthog.com)- 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
1 comentarios
Comentarios en Hacker News
Sobre por qué esto se siente inusualmente atractivo en comparación con los diseños existentes, siento que alguien de psicología, ciencias cognitivas o neurociencia podría responderlo mejor; creo que hace falta una investigación más profunda que las entradas de blog apresuradas que solemos escribir en la industria del software.
Personalmente sí puedo decir una cosa desde la experiencia: trabajé en una empresa que hacía sitios web y estrategia para grandes productos SaaS, y además soy el público objetivo de este tipo de sitios (director de ingeniería o VP).
Desde la perspectiva de un cliente potencial, la velocidad y la facilidad con la que puedes explorar la información que quieres es claramente mejor que en lo que había visto hasta ahora.
Por ejemplo, pude ver de inmediato que hay 34 productos bajo 7 categorías, y enseguida se muestran 5 productos populares y 4 nuevos.
Si quieres probar un producto: Docs > Product OS > Integration > Install and configure > Install PostHog
Si te interesa la cultura de ingeniería: Company > Handbook > Engineering > Internal Processes > Bug prioritization
Para revisar precios: Pricing calculator > elegir producto > configurar uso, elegir complementos
Todas estas interacciones ocurren en cuestión de segundos, y además puedes alternar de inmediato entre la página general que ya tenías abierta y la nueva página de precios sin recargar todo el sitio; no hace falta abrir una pestaña nueva ni hacer scroll.
Por eso creo que aquí hay algo esencial más allá de lo estético; quizá incluso se podría concluir que la filosofía actual de UI/UX se ha vuelto más hostil para el usuario.
Recuerdo que Cory y Eli (ingeniero frontend) discutieron el diseño del sitio web a partir de una pregunta: “¿Por qué todos los sitios están hechos de páginas largas con mucho scroll? ¿De verdad eso le conviene a nuestro negocio?”
Como ofrecemos productos variados y contenido amplio (más de 10 productos, handbook, vacantes, newsletter, etc.), llegamos a la conclusión de que una estructura plana, adecuada para una empresa de un solo producto, no nos servía.
La mayoría de los sitios intenta comunicar todo sobre sí misma en 3 segundos, pero nuestra empresa es demasiado multifacética para caber en una intro de 3 segundos, así que deliberadamente creamos una estructura que invita a la gente a explorar el sitio y entender el contenido con más profundidad.
Por eso algunos visitantes se irán rápido, pero quienes se quedan (¡a veces!) realmente aman esta UX.
El proyecto en sí también fue divertido, y quisimos intentar algo que destacara de una manera especial.
Es mucho más genial y rentable que la prospección comercial tradicional.
Operamos con un período de recuperación de CAC de 3 meses como métrica de startup.
Eso sí, esta estrategia solo funciona de verdad si la llevas a un nivel "realmente" profundo para que la gente la recuerde.
No esperaba ver una postura así en HN.
Normalmente en HN domina la idea de que si usas mucho JavaScript, es mal diseño: inutilizable y poco portable.
Este caso sería, por decirlo así, la versión extrema de JavaScript.
El hecho de poder encontrar la información necesaria rápido y fácil realmente da la sensación de que la web volvió al diseño centrado en menús de antes.
Las UI modernas hablan de simplicidad y de una “experiencia agradable”, pero cuesta que igualen la eficiencia de una barra de menú bien organizada.
Hay que tener cuidado al generalizar la comodidad que se siente con una interfaz así.
Comparada con una CLI o una command palette, esta UI se siente pesada y cognitivamente cansada.
Si no recuerdo mal, esta empresa puso todo el contenido en el mismo CMS, en especial integrando los foros de discusión/ayuda dentro del sitio principal.
Por experiencia en proyectos parecidos en el pasado, se nota que todo el contenido de la página principal está bajo el control de una sola organización, sin rastros de luchas territoriales entre departamentos ni ese caos de enlaces a múltiples subdominios.
Creo que un sitio así solo puede hacerse si existe un sistema de integración de contenido (CMS) en el backend.
Y para que esa estructura de CMS sea posible, la organización tiene que resistir con fuerza la tendencia hacia la descentralización (cada VP defendiendo su propio territorio).
PostHog.com dice que usa una sola cookie interna y ninguna cookie de terceros,
pero legalmente, si esa cookie no es necesaria para una función esencial del sitio, entonces deberían ofrecer una opción de opt-out.
Si sí es necesaria para una función esencial, entonces ni siquiera haría falta el banner.
Si de verdad usan cookies solo para funciones esenciales, entonces ese banner de cookies en tono de broma solo termina siendo una molestia innecesaria mientras finge respetar la privacidad del visitante.
Lo peor es que hace que la ley de la UE parezca una regulación fastidiosa sin significado real, y al final les da una especie de cobertura peor a los sitios que sí vigilan a los usuarios de verdad.
Es ridículo.
Parece que el criterio para necesitar un banner de cookies es más simple.
Si la cookie no se usa con fines de tracking, entonces no hace falta banner.
Por ejemplo, una cookie que recuerda el orden de clasificación no sería para tracking, así que no debería requerir banner.
Al final, el problema no es la “cookie”, sino el “tracking”.
Me pregunto qué país obliga a poner banners para todas las cookies.
La UE solo lo exige para cookies de tracking, y PostHog no especifica ese propósito.
Yo también he puesto cookies alguna vez simplemente porque “eran necesarias”, aunque en la práctica no lo fueran.
La idea de que todos los sitios deben tener banner de cookies quizá termina siendo más dañina que el propio banner.
Como tienen sistema de login, es muy probable que la cookie interna lleve información de sesión (JWT, etc.).
En ese caso sería una cookie de función esencial y no necesitaría banner.
O sea, probablemente no era un requisito legal, pero lo pusieron por si alguien preguntaba “¿por qué no tienen banner de cookies?”.
Al final no sería una obligación legal real, sino más bien algo necesario por costumbre o percepción.
Ya estamos en 2025 y me sigue intrigando por qué la gente todavía quiere ver las cookies y rechazarlas manualmente.
Pensaría que el navegador simplemente debería hacerlo automáticamente.
La página https://posthog.com/404 es una parodia de la pantalla azul de la muerte.
Antes siempre pensé que la “interfaz de múltiples documentos” (MDI) era un antipatrón.
Si ya existe un window manager perfecto, ¿por qué cada app necesitaría su propia herramienta integrada para gestionar ventanas?
Claro, en móvil esto sería la excepción, porque no hay un window manager a nivel de sistema operativo.
Algunas apps (por ejemplo, editores de imagen) sí necesitan múltiples ventanas dentro de la aplicación.
Pero casi todas las implementaciones generales de MDI (Win32, Qt) son tan minimalistas que decepcionan.
En Krita me gustaría abrir varias ventanas, pero el MDI de Qt está por debajo de Windows 95.
Comparado con apps como Gimp, yo prefiero que todo quede dentro de una sola ventana.
Si hay dos o tres apps abiertas a la vez, encontrar la ventana correcta se vuelve una especie de escondidas.
De verdad detesto cuando la toolbar aparece como una ventana aparte.
Después de usar Mac durante mucho tiempo, siento que el MDI es una solución temporal nacida de que el OS no ofrece buenas funciones de manejo de ventanas por aplicación.
Antes Photoshop en Mac dejaba abrir libremente ventanas y paletas, pero cerca de CS4 introdujeron un modo tipo MDI y de repente se volvió sofocante, así que siempre lo desactivaba.
En Mac, al menos, se siente demasiado extraño y restrictivo.
La mayoría de los comandos de Unix tiene su propio estilo para el formato de salida (columnas, tablas, listas, archivos, TTY, etc.).
La abstracción de UNIX al final gira alrededor del “texto”.
Pero como el ecosistema es tan rico, cada herramienta tiene requerimientos distintos.
Si hubiera una abstracción más adecuada que el texto, ya habría aparecido, pero al final todo sigue siendo un pipeline de texto.
Los window managers del OS no parecen manejar de forma eficiente situaciones donde hay muchas ventanas pequeñas en una sola pantalla.
En cambio, las herramientas de gestión de ventanas personalizadas en software de arte o CAD muchas veces están optimizadas para ahorrar espacio con barras de título pequeñas.
Me parece un proyecto casi perfecto e inspirador.
Estaría todavía mejor si, como en un escritorio real de OS, pudieras arrastrar en un espacio vacío para crear un rectángulo de selección y moverlo;
de hecho hice un snippet de código que lo permite, así que si lo pegas en la consola y lo pruebas, el sueño se hace realidad.
(Código: JS que muestra un rectángulo de selección en pantalla al arrastrar el mouse e imprime el resultado en la consola)
La idea y la implementación están geniales, pero honestamente no lo quiero.
Hay que aprender una UI/UX nueva y además organizar ventanas dentro de ventanas.
Creo que un sitio web no necesita una interfaz elegante; con bloques de texto basta.
Totalmente de acuerdo.
Mi sistema operativo ya está configurado para manejar ventanas perfectamente.
Si intentaras convertir todo el contenido de esta página en un solo bloque de texto, sería absurdamente largo.
Me cuesta encontrar cómo describirlo, pero es un trabajo realmente genial.
Después de años en desarrollo web, siempre he tenido muchas quejas sobre las malas UI, y este sitio de verdad sobresale.
No es solo que “se parece a Windows”; realmente se siente mejor al usarlo que cualquier otro sitio de simulación de escritorio en navegador que haya probado.
Si tuviera que pedir una cosa, sería que el menú contextual al hacer clic derecho sobre el fondo incluyera una opción de “Refrescar”; no hace falta que funcione, pero completaría la vibra de escritorio del navegador.
En resumen: gran trabajo, gran sitio.
Visualmente se ve genial, pero el rendimiento es demasiado lento.
Si abres varias ventanas y tratas de moverlas, se siente pesado.
Si vas a hacer una página web de múltiples ventanas, también tiene que rendir bien.
Antes nunca se habría usado una estructura así por SEO.
Ahora da la impresión de que la importancia del SEO ya va quedando atrás.
Yo lo sentí lento en Firefox.
Entré con Edge y ahí sí se movía fluido.
Me intriga en qué entorno están teniendo problemas de rendimiento.
Hasta la primera ventana todo iba bien, pero desde la segunda empezó a trabarse un poco, y luego volvió a ir a toda velocidad.
Tal vez el navegador tarda un poco en aplicar ciertas optimizaciones al detectar el uso de determinadas funciones.
Antes el SEO era sobre páginas web como “documentos”, pero ahora parece que todos quieren convertir la web en un juego.
Supongo que también sería difícil rankear sitios de tipo juego.
Me encanta que este sitio web sea tan original.
Destaca en medio del paraíso de sitios de marketing SaaS que usan la misma plantilla de secciones apiladas.
Pero no creo que nadie lo vaya a usar realmente como se describe arriba.
No pienso que la gente se quede tanto tiempo como para aprender y usar un sistema de manejo de ventanas específico del sitio.
A mí la UX me pareció intuitiva.
Además es divertida.
Normalmente cierro este tipo de sitios de producto enseguida, pero esta vez me quedé entre 5 y 10 minutos explorando a fondo a ver qué había.
A mí también me pareció curioso.
Pero la mayoría de los comentarios en HN parecen algo inconformes.
Mi reacción fue parecida.
Es impresionante, divertido y transmite bien la filosofía de la empresa.
Como herramienta práctica de uso diario quizá no sea lo ideal, pero no creo que eso sea lo importante aquí.
Trabajando con PostHog me sentí incómodo porque el volumen de analítica no encaja con mis estándares éticos, pero técnicamente está realmente muy bien hecho.
La landing page muestra bien la capacidad técnica y el nivel que aplican a su producto.
Fue una landing page original y divertida, y el chiste del “banner de cookies” sí me sacó una risa.