Por que nosso site parece um sistema operacional
(posthog.com)- Muitos grandes sites de tecnologia sofrem com uma explosão de abas quando você tenta consultar várias páginas ao mesmo tempo
- O PostHog.com também enfrentava um problema parecido e, para resolvê-lo, adotou uma interface no estilo de sistema operacional
- Na nova estrutura, há vários recursos de interação, como multitarefa, encaixe de janelas e atalhos de teclado
- Foram aplicadas inovações técnicas como hierarquia visual e separação de conteúdo, gerenciamento de conteúdo baseado em JSON e banco de dados de clientes
- No começo pareceu estranho, mas a experiência de desenvolvimento e de uso melhorou de forma positiva, garantindo flexibilidade e escalabilidade
O problema: explosão de abas em sites de tecnologia
- Em muitos grandes sites de tecnologia, ao tentar consultar várias páginas de uma vez, acaba-se abrindo várias abas novas com
CMD+ clique - Devido ao mesmo favicon e a designs parecidos, fica difícil distinguir cada aba
- O PostHog.com também começou a sofrer o mesmo problema à medida que o serviço crescia, e a perda de clareza se intensificou com o suporte a mais produtos pagos e o aumento no número de páginas
Buscando alternativas e inovando na UI
- Surgiram dúvidas sobre a interface centrada em rolagem dos sites tradicionais de marketing e documentação, com rodapés enormes e espaço em branco em excesso
- Em vez de induzir rolagens sem sentido, percebeu-se a necessidade de uma forma melhor de consumir conteúdo
- Para resolver isso, o novo PostHog.com foi projetado para permitir multitarefa, abrir vários artigos ao mesmo tempo e se mover livremente dentro da tela
Um site que funciona como um sistema operacional
- A nova UI implementa recursos como encaixe de janelas, atalhos de teclado e um app de favoritos
- Como um sistema operacional dentro do navegador, ela oferece uma experiência em que é possível realizar várias tarefas ao mesmo tempo
- Por exemplo, é possível ver uma newsletter para engenheiros, assistir a um vídeo de demo e rodar um jogo (modo Hedgehog) simultaneamente
Adaptação inicial e reação dos usuários
- A interface no estilo de sistema operacional pode parecer um pouco estranha no começo
- Por sair dos padrões tradicionais do navegador, o cérebro pode rejeitar a experiência de início, mas com o uso repetido ela se torna familiar e passa a ser vista de forma positiva
- Colegas da equipe também deram feedback positivo sobre essa nova experiência, a ponto de ficar difícil voltar ao modo antigo
Processo de construção e destaques técnicos
- Junto com Eli Kinsey, o site foi projetado e desenvolvido com base em Typescript e Tailwind
- Ao buscar uma forma de organizar com escalabilidade cinco anos de conteúdo, foram exploradas várias abordagens técnicas
Principais pontos técnicos
-
Hierarquia visual e separação de conteúdo
- Todas as páginas de produto são renderizadas com base em arquivos JSON
- O JSON controla diretamente o layout da página, o desenvolvimento do conteúdo, as comparações com concorrentes por recurso e capturas de tela em vários temas (modo claro/escuro)
- No longo prazo, a ideia é migrar essa estrutura para um repositório compartilhado com o app do PostHog, criando uma única fonte de informação
-
Temas e skinning de cores
- Mantendo os modos claro e escuro, houve reflexão sobre como aplicar de forma harmoniosa vários temas, como cores primárias, secundárias e terciárias
- A experiência sobre isso deve ser compartilhada depois em um texto separado
-
Banco de dados de clientes de referência
- Define-se um único registro de cliente no código para armazenar informações como uso por produto, citações de clientes e logos SVG (compatíveis com modo claro/escuro)
- Isso garante flexibilidade, permitindo carregar automaticamente citações, nomes, fotos e logos de empresa associados a produtos diferentes em cada página
Forma de desenvolvimento e prototipagem
- A UI foi implementada em Typescript e Tailwind, com design e desenvolvimento do site acontecendo ao mesmo tempo
- Foi escolhida uma forma de prototipagem dentro do ambiente de produção, o que facilita gerar novas ideias e expandir funcionalidades
- Quando necessário, ferramentas externas de mockup como o Balsamiq também foram usadas em paralelo para concretizar o conceito
Conclusão e próximos passos de melhoria
- No momento, isso ainda corresponde a uma fase inicial de MVP, e ainda há muitas melhorias a fazer
- A expectativa é que os usuários curtam a nova UX do PostHog.com e se divirtam explorando o site
- Um documento técnico sobre como o site funciona é fornecido separadamente
1 comentários
Comentários no Hacker News
Sobre por que isso parece excepcionalmente atraente em comparação com designs existentes, acho que um psicólogo, cientista cognitivo ou neurocientista poderia responder; parece algo que exige um estudo mais profundo do que os posts apressados que escrevemos hoje na indústria de software
Pessoalmente, posso falar de uma coisa por experiência: já trabalhei em uma empresa que cria sites e estratégia para grandes produtos SaaS, e sou o público-alvo desse tipo de site (diretores de engenharia ou VPs)
Do ponto de vista de um cliente em potencial, a velocidade e a facilidade para navegar pelas informações desejadas são claramente superiores a tudo que vi até agora
Por exemplo, consegui ver imediatamente que havia 34 produtos em 7 categorias, e também os 5 mais populares e 4 novos
Se eu quiser experimentar um produto: Docs > Product OS > Integration > Install and configure > Install PostHog
Se eu quiser entender a cultura de engenharia: Company > Handbook > Engineering > Internal Processes > Bug prioritization
Para ver preços: Pricing calculator > selecionar produto > definir uso, escolher complementos
Todas essas interações acontecem em segundos, e posso alternar na hora entre a página de visão geral já aberta e a nova página de preços sem recarregar o site inteiro; não preciso abrir em nova aba nem rolar a página
Por isso, acho que existe algo essencial aqui que vai além da estética; talvez a conclusão seja que a filosofia atual de UI/UX acabou se tornando hostil ao usuário
Lembro de Cory e Eli (engenheiro de frontend) discutindo o design do site com a ideia de “por que todo site é composto por páginas longas e cheias de rolagem, e isso faz sentido para o nosso negócio?”
Como oferecemos vários produtos e conteúdo amplo (mais de 10 produtos, handbook, vagas, newsletter etc.), concluímos que uma estrutura plana, adequada para uma empresa de um único produto, não servia para nós
A maioria dos sites tenta comunicar tudo sobre a empresa em 3 segundos, mas a nossa é multifacetada demais para caber numa apresentação de 3 segundos, então criamos de propósito uma estrutura que incentiva as pessoas a explorar o site e entender o conteúdo mais a fundo
Por causa disso, alguns visitantes vão embora rápido, mas os que ficam às vezes adoram essa UX
O projeto em si também foi divertido, e quisemos tentar algo que pudesse se destacar de uma forma especial
É muito mais legal e mais econômico do que prospecção externa tradicional
Operamos com payback de CAC em 3 meses como métrica de startup
Mas, para essa estratégia funcionar de verdade, existe a premissa de que é preciso ir "realmente" fundo para ficar na memória das pessoas
Não esperava ver esse tipo de opinião no HN
Normalmente, no HN, a visão predominante é que usar muito JavaScript é design ruim, inutilizável e pouco portátil
Este caso é, por assim dizer, a versão máxima disso com JavaScript
O fato de ser rápido e fácil encontrar a informação necessária realmente dá a sensação de que a web voltou ao design centrado em menus do passado
As UIs modernas de hoje falam de simplicidade e de uma “experiência prazerosa”, mas é difícil superar a eficiência de uma barra de menus bem organizada
É preciso cuidado ao generalizar esse conforto percebido nessa interface
Em comparação com uma CLI ou uma command palette, essa UI parece pesada e cognitivamente cansativa
Se me lembro bem, essa empresa colocou todo o conteúdo no mesmo CMS, especialmente integrando o fórum de discussões/ajuda ao site principal
Pela minha experiência com projetos parecidos no passado, isso deixa a sensação de que todo o conteúdo da página principal é conduzido e controlado por uma mesma organização, sem sinais de disputas internas por espaço nem uma bagunça de links para vários subdomínios
Acho que um site assim só pode ser feito se houver um sistema de integração de conteúdo (CMS) no backend
E, no nível organizacional, é preciso resistir fortemente à tendência de descentralização (cada VP protegendo seu próprio território) para que essa estrutura de CMS seja possível
O PostHog.com diz usar apenas um cookie interno, sem cookies de terceiros, mas
legalmente, se esse cookie não for essencial para a funcionalidade principal do site, é preciso oferecer a opção de opt-out
Se for necessário para a função principal, então o banner em si não é necessário
Se eles realmente usam o cookie só para funcionalidade essencial, então um banner de cookies desses, em tom de piada, irrita desnecessariamente ao fingir respeitar a privacidade do visitante
Pior ainda, faz a lei da UE parecer apenas uma regulamentação incômoda e sem significado prático, dando na prática mais margem para sites que realmente monitoram usuários
É realmente absurdo
O critério para precisar de banner de cookies parece mais simples
Se o cookie não for usado para tracking, o banner não é necessário
Por exemplo, acho que um cookie que lembra a ordem de classificação não precisaria de banner, por não ter finalidade de tracking
No fim, a questão não é “cookie”, e sim “tracking”
Fico curioso sobre qual país exige banner de cookies para todos os cookies
A UE só tornou obrigatório para cookies de tracking, e o PostHog não especifica essa finalidade
Eu mesmo já coloquei algo “porque é obrigatório”, mesmo sem cookie de fato
A percepção de que todo site precisa ter banner de cookies talvez seja mais nociva do que o próprio banner
Como existe um sistema de login, é bem provável que o cookie interno carregue informações de login (JWT etc.)
Nesse caso, o cookie é de funcionalidade essencial e não precisa de banner
Ou seja, dá para inferir que isso não é exigência legal, mas foi colocado porque alguém poderia perguntar “por que não tem banner de cookies?”
No fim, não há obrigação legal substancial, só uma necessidade de prática/percepção
Já estamos em 2025 e ainda me pergunto por que as pessoas querem ver e recusar cookies visualmente
Não faria mais sentido o navegador simplesmente cuidar disso automaticamente?
A página https://posthog.com/404 é uma paródia da tela azul da morte
Antigamente eu sempre achei que “multiple document interface” (MDI) fosse um antipadrão
Já existe um window manager perfeito, então por que cada app precisa de sua própria ferramenta embutida de gerenciamento de janelas?
Claro, no mobile isso é exceção, porque não existe esse tipo de window manager em nível de sistema operacional
Alguns apps (por exemplo, editores de imagem) precisam de várias janelas dentro da aplicação
Mas quase toda implementação genérica de MDI (Win32, Qt) é minimalista demais e decepcionante
No Krita, eu gostaria de abrir várias janelas, mas o MDI do Qt é pior do que o do Windows 95
Comparando com apps como o Gimp, eu prefiro uma estrutura em que tudo fique dentro de uma única janela
Quando dois ou três apps estão abertos ao mesmo tempo, encontrar as janelas vira uma brincadeira de esconde-esconde
Eu realmente odeio quando a toolbar aparece como janela separada
Como alguém que usou Mac por muito tempo, sinto que MDI é um remendo que surgiu porque o sistema operacional carecia de recursos de gerenciamento de janelas no nível da aplicação
O Photoshop antigo no Mac deixava abrir janelas e paletas livremente, mas por volta do CS4 um MDI desse tipo foi introduzido e tudo de repente ficou sufocante, então eu sempre desativava
No Mac, especificamente, isso parece estranho e limitador demais
A maioria dos comandos no Unix tem seu próprio formato de saída (colunas, tabelas, listas, arquivos, TTY etc.)
A abstração do UNIX é, no fim, centrada em “texto”
Mas, como o ecossistema é rico, cada ferramenta tem exigências variadas
Se existisse uma abstração melhor além do texto, ela já teria surgido, mas no fim continua tudo sendo pipeline de texto
Os window managers dos sistemas operacionais não parecem lidar de forma eficiente com várias janelas pequenas numa mesma tela
Já as ferramentas personalizadas de gerenciamento de janelas em softwares de arte ou CAD muitas vezes são otimizadas para economizar espaço com barras de título pequenas
Acho que é um projeto quase perfeito e inspirador
Seria ainda melhor se, como num desktop de sistema operacional de verdade, ao arrastar numa área vazia aparecesse um retângulo que pudesse ser movido,
então fiz eu mesmo um snippet de código que permite isso; é só colar no console e testar para realizar o sonho
(código: JS que mostra um retângulo de seleção na tela ao arrastar o mouse, com saída no console)
A ideia e a implementação são legais, mas sinceramente eu não quero isso
Eu teria que aprender uma nova UI/UX e ainda organizar janelas dentro de janelas
Acho que um site não precisa de uma interface elaborada; blocos de texto já bastam
Concordo totalmente
Meu sistema operacional já está configurado para gerenciar janelas perfeitamente
Se você imaginar que todo o conteúdo desta página precisaria virar um único bloco de texto, dá para ver como ela ficaria absurdamente longa
É difícil dizer exatamente como descrever, mas é um trabalho realmente excelente
Depois de anos trabalhando com desenvolvimento web, sempre tive muitas queixas sobre UI ruim, e este site é realmente excepcional
Não é só um “parecido com Windows”; na prática, a sensação de uso foi a melhor que já tive entre sites que simulam desktop no navegador
Se eu pudesse pedir uma coisa, seria um item “Atualizar” no menu de contexto ao clicar com o botão direito no fundo; nem precisaria funcionar, mas completaria a atmosfera de desktop no navegador
Em resumo: excelente trabalho, excelente site
Visualmente é legal, mas o desempenho é lento demais
Se você abrir algumas janelas e tentar movê-las, fica frustrante
Para fazer uma página web multi-janela dessas, o desempenho também precisa ser bom
Antigamente, nunca se usaria uma estrutura dessas por causa de SEO
Agora parece que a importância de SEO já não é mais a mesma de antes
Tive essa lentidão no Firefox
Quando abri no Edge, funcionou de forma suave
Fico curioso em saber em que ambiente você teve problemas de desempenho
Até a primeira janela vai bem, a partir da segunda começa a engasgar um pouco, e depois roda em velocidade total
Talvez seja porque o navegador só aplica alguma rotina de otimização um pouco mais tarde, quando detecta o uso de certas funções
Antes, SEO era sobre páginas web como “documentos”, mas agora parece que todo mundo quer transformar a web em jogo
Imagino que também deva ser difícil ranquear sites com essa pegada de game
Gostei muito porque este site é muito original
Ele se destaca no paraíso dos sites de marketing SaaS que usam sempre o mesmo template de seções empilhadas
Mas ninguém de fato vai usá-lo do jeito descrito acima
Não acho que alguém vá ficar tempo suficiente para aprender um sistema próprio de gerenciamento de janelas de um site
Para mim, a UX pareceu intuitiva
Além disso, é divertida
Normalmente eu fecho sites desse tipo na hora, mas desta vez passei mais de 5 a 10 minutos explorando tudo para ver o que havia
Tive a mesma sensação de novidade
Mas a maioria dos comentários no HN parece não ter gostado muito
Minha reação foi parecida
É impressionante, divertido e passa bem a filosofia da empresa
Na prática, falta utilidade, mas não acho que isso seja o ponto mais importante
Trabalhando com a PostHog, fiquei desconfortável porque o volume de analytics não combinava com meus padrões éticos, mas tecnicamente eles fizeram tudo muito bem
A landing page mostra bem a capacidade técnica e o nível aplicado ao próprio produto
Foi uma landing page original e divertida, e a piada do “banner de cookies” arrancou uma risada