- O responsável pelo design do NotebookLM resume todo o processo de concepção da experiência central do usuário e do sistema de marca, da fase experimental até o lançamento
- O objetivo do NotebookLM era estabelecer uma estrutura de 3 painéis e um sistema de painéis responsivo que conectasse leitura, conversa e criação em um só espaço para resolver a sobrecarga de abas (tab overwhelm)
- O fluxo de informações foi organizado em um modelo mental explícito de Inputs → Chat → Outputs, implementando uma UX orientada por contexto para que o usuário não perca a noção de onde está
- Recursos como Audio Overviews integram interações nativas de IA a fluxos de trabalho reais, incluindo citações de fontes e padrões de interrupção
- Como resultado, a principal lição é que uma equipe pequena e ágil construiu um framework de design AI-first escalável e consistente, da identidade de marca aos ativos visuais
Architecture
- O projeto compartilha o processo de evoluir a arquitetura de UI de um experimento para um sistema em nível de lançamento, com o objetivo de combinar leitura, conversa e criação
- A imagem de UI Evolution visualiza a transição da interface experimental inicial até convergir para uma estrutura de 3 painéis
- Todo o design priorizou escalabilidade e adaptabilidade, adotando princípios de grade/painéis para que a estrutura não se quebre mesmo com a adição de novas ferramentas e modos
Early Prototype & Notes-driven UI
- É apresentada a tentativa inicial de sobrepor um chat exploratório sobre uma canvas centrada em notas
- Foram feitos muitos ciclos de iteração para encontrar um layout que reduzisse a carga cognitiva, permitindo que notas e conversa coexistissem na mesma tela
- Como resultado, o chat foi promovido de ferramenta a um dos eixos da visualização, tornando-se um pilar do sistema de painéis posterior
3-Panel Structure
- A estrutura final é formada por Source / Chat / Studio(Notes) em três painéis, adotando painéis responsivos que garantem acessibilidade mesmo em larguras pequenas, como a preservação dos ícones principais
- Os presets de layout, como Standard e Reading + Chat, oferecem configurações ideais para cada situação e dão suporte a trabalhos centrados em citação e referência
- A largura dos painéis é reajustada dinamicamente conforme o foco do usuário, minimizando o atrito na alternância entre ferramentas
Problem + Requirements
- O problema central era a sobrecarga de abas causada por uma experiência fragmentada, com o usuário pulando entre várias ferramentas; por isso, definiu-se a necessidade de integrar tudo em um só espaço como entrada, conversa e saída
- No lado de entrada, há Source list / Open Source(wide); no lado de saída, Notes list / Open Note(wide); e, ao centro, ficam Chat e Citations
- A ação de gerar conteúdo foi projetada com múltiplos pontos de entrada, para que o usuário possa seguir diretamente para a produção de resultados sem quebrar o fluxo
Early Sketches
- A estrutura atual parece óbvia hoje, mas é resultado de incontáveis iterações
- Compartilha-se o registro da exploração, incluindo a descoberta da solução final em um esboço em guardanapo, depois que os papéis caíram durante um voo
- O objetivo era estabelecer uma combinação de blocos que satisfizesse ao mesmo tempo um modelo mental claro e uma UI assimilável
Mental Model
- O modelo mental é centrado em um fluxo linear, porém flexível, de Inputs → Chat → Outputs
- O usuário traz documentos, notas e referências, passa por perguntas, organização e síntese e então gera resultados estruturados, como notas, guias de estudo e Audio Overviews
- Esse modelo torna assimilável a complexidade das novas interações com IA por meio de uma sensação de localização e progressão por etapas
Solution • 3 Panel Structure detalhes
- O sistema de painéis responsivo se adapta de forma fluida às necessidades do usuário e escala dinamicamente, mantendo a acessibilidade a fontes e notas mesmo em larguras mínimas
- O layout Standard oferece uma visualização básica equilibrada entre fontes, chat e notas
- Reading + Chat é uma configuração otimizada para geração de respostas baseadas em citações, reforçando o fluxo de apresentação de evidências
Panel States
- Os estados dos painéis maximizam a eficiência do espaço ao preservar ícones de elementos essenciais e reconfigurar a estrutura conforme faixas de largura
- Mesmo que o conteúdo interno dos painéis mude, os princípios estruturais permanecem fixos, permitindo responder com flexibilidade à adição futura de novas ferramentas e fluxos de trabalho
- Os princípios de design podem ser resumidos em capacidade de crescimento e resiliência
Source Panel
- Atua como a base de todas as fontes (entradas) fornecidas pelo usuário e como o ponto de partida da jornada de trabalho
- A organização, visualização e troca de fontes acontece rapidamente, estimulando a interação com o Chat central
- Mesmo em largura mínima, a manutenção de pistas visuais evita a perda de contexto
Studio Panel
- É o espaço em que a entrada é convertida em resultado, responsável por gerar, refinar e registrar
- Foi projetado como uma visualização-contêiner capaz de acomodar vários tipos de saída, como notas, relatórios e guias de estudo
- Nas versões mais recentes, são apresentados casos de expansão para flashcards, quizzes e professional reports
Chat Panel
- É o eixo central da experiência, sempre presente e com redimensionamento automático conforme necessário
- Oferece uma interação com IA mais confiável por meio de um design de conversa centrado em citação de fontes e apresentação de evidências
- Mesmo quando outras ferramentas ganham destaque, o contexto da conversa é preservado, minimizando interrupções no fluxo
User Journey • Annotated Overview
- A jornada anotada do usuário visualiza as interações em etapas de coleta de entradas → compreensão e organização via conversa → geração de resultados
- Explica como o deslocamento de foco entre painéis e as mudanças de estado se conectam organicamente em cada etapa
- O objetivo é construir uma experiência end-to-end que alcance ao mesmo tempo manutenção de contexto e velocidade de trabalho
Audio Overviews
- Audio Overviews introduziu novos paradigmas de interação, incluindo padrões de interrupção, ao longo do processo que vai da ideia ao protótipo e ao lançamento
- O valor do recurso está em ser baseado nas fontes (grounded) e permitir resumo/aprendizado com um clique; também é compartilhado o bastidor de que o nome foi dado por acaso pelo autor
- É um caso de colaboração cross-functional em pequena escala que alcançou um ciclo rápido de experimentação e lançamento
Brand Identity
- Em estreita colaboração com Google Labs e a equipe central de marca, a identidade de marca e o sistema visual foram definidos rapidamente
- Cor, tipografia, ícones e ilustrações, entre outros múltiplos ativos, foram consolidados em uma linguagem de design consistente e escalável
- Destaca-se o alinhamento entre UX e BI para que a experiência do produto e o tom da marca transmitam a mesma mensagem
Visual Assets
- São apresentados exemplos de produção de ativos full-stack, do press kit aos visuais de lançamento
- Imagens hero para web, animações e key visuals, entre outros ativos de alta fidelidade, ajudaram a tornar a mensagem mais clara e ampliar o alcance
- Ao garantir consistência de mensagem com canais externos, como o Keyword blog, isso contribuiu para uma comunicação escalável
Key Takeaways from the Journey
- As lições da experiência de construção do Audio Overviews se resumem a construir o produto com os usuários, lançar cedo e iterar rapidamente e responder à demanda por citações inline
- A IA deve resolver problemas de forma embutida (Built-in), como um produto AI-native, e o ponto central é projetar para preencher a lacuna entre pesquisa e tarefas reais de uso
- Uma UI dinâmica e sensível ao contexto é essencial e, neste período de transição, o Chat funciona como uma âncora familiar e também como ponte para novas experiências
1 comentários
Comentários no Hacker News
Este post passa a sensação de ser, como o NotebookLM, essencialmente simples, mas projetado de forma exageradamente complexa; existe uma necessidade simples de selecionar arquivos para conversar com eles ou receber um resumo, mas na prática a densidade de informação é baixa e há cartões, botões, seções e ícones demais, o que dificulta chegar ao UX central; eu queria ouvir a visão do designer, mas elementos visuais como scrolljacking, carrossel de imagens e hierarquia visual desnecessária acabam atrapalhando a experiência de uso; reconheço que há coisas legais, mas a UI dificulta focar no essencial
Não é uma visão negativa, na verdade é algo com que dá para concordar; se a ideia é conversar com arquivos, Gemini, ChatGPT e Claude também funcionam bem; o objetivo deste produto experimental era pensar de forma criativa se ele poderia se tornar uma ferramenta realmente baseada nas fontes; fizemos rapidamente várias tentativas alinhadas às necessidades dos usuários e ele continuará evoluindo com base nesse tipo de feedback; no meu site, tentei usar elementos visuais para transmitir melhor o processo de tomada de decisão
Parece que deve existir uma palavra adequada em alemão para explicar esse fenômeno; às vezes vejo casos em que uma desvantagem é apresentada como se tivesse contribuído para o sucesso; isso aparece muito em apresentações de big tech, e é engraçado ver algo que, na prática, deu certo apesar de um problema ser contado como uma bela história de origem
Há uma ironia em precisar rolar infinitamente para explicar um layout de 3 painéis que existe desde os anos 80
Parece limpo, mas na prática a experiência de uso do NotebookLM não é boa; continuo usando porque o serviço em si é muito bom, mas a UI é a parte de que menos gosto
No começo achei que não seria tão incômodo assim, mas ver algo realmente tão excessivamente desenhado acaba sendo curioso de um jeito até divertido
Este site é o meu portfólio, e é interessante ver as opiniões de tantas pessoas; design pressupõe repetição e evolução; o NotebookLM continuará mudando no futuro; considero uma grande sorte ter podido participar desde a fase inicial deste produto; como designer, tentei prever o futuro da tecnologia e construir uma UI adequada a isso; acho que a equipe do Google Labs se moveu de forma realmente rápida e orientada ao futuro; ao longo de um ano e meio, ouvimos o feedback dos usuários, iteramos e fizemos o produto crescer; foi uma experiência incrível criar um produto do zero ao um; eu nunca imaginei que meu portfólio ficaria tão famoso assim
Fico curioso se existem limites ou diretrizes sobre o que pode ser mostrado publicamente em relação à propriedade intelectual do Google
Encontrei um bug no site: ele parece sinalizar ao navegador ou às extensões como se o modo escuro estivesse ativado; por causa disso, as coisas não funcionam direito mesmo quando o site não está realmente em modo escuro
Obrigado pelo esforço; mesmo quando reclamo, ele ainda é o produto de aprendizado mais envolvente que já usei; espero que continue evoluindo
A expressão “patinar em direção ao futuro da tecnologia” ressoa bastante; no fim, esse tipo de trabalho não é uma ciência que segue perfeitamente um plano, mas uma arte; é uma área que exige ajustes contínuos; imagino que o projeto tenha evoluído com base em diferentes funções e no feedback dos usuários; o NotebookLM já chacoalhou o mercado e acredito que ainda vai melhorar, como aconteceu com o Bard ou o Gemini no começo, especialmente do ponto de vista de UI/UX
Uso o NotebookLM todos os dias e agradeço pela simplicidade do design, mas à medida que mais recursos são adicionados surgem problemas para escalar a UI mantendo essa estrutura; com a adição recente de flashcards e quizzes, o
Artifacts Button Containervirou um bloco de 6 botões grandes com 328px de altura; usuários de telas pequenas na Índia pediram ajuda no fórum do Discord porque não conseguiam ver suas próprias notas; então eu criei um script de Tampermonkey para recolher isso [script de recolhimento]; ouvi dizer que a equipe deve corrigir isso em breve, mas teria sido necessário validar melhor antes do lançamento; corrigi vários desses problemas com scripts, e o mais estranho é a seçãonotes, que força a leitura de um ensaio de 2000 caracteres em uma barra lateral de 360px; por isso também fiz um script para ver em tela cheia [script de tela cheia]; o campo de entrada do chat também tem problemas, já que perguntas de acompanhamento não funcionam direito e continuam instáveis mesmo após seleção; eu poderia falar disso o dia todo, mas acho melhor ir corrigindoNão gosto do UX do NotebookLM; o layout é confuso e os conceitos transmitidos pela UI não são intuitivos; o poder do backend não se traduz bem no frontend; ainda assim, o texto em si é limpo e dá para sentir bem as reflexões do autor; não concordo com a conclusão nem com o resultado, mas espero ver mais tentativas cuidadosas; em um mercado que muda tão rápido, design com capricho artesanal não é fácil
Acho que o NotebookLM é um caso de sucesso não por causa da interface, mas apesar dela; sinceramente, o UX é muito ruim; grande parte do mérito vai para os engenheiros de backend; até para encontrar uma simples ação de copiar e colar texto eu demorei; a edição de texto também não é boa; não entendo por que não existe uma área dedicada de notas em Markdown; como a maioria das pessoas está mais acostumada a colar texto do que lidar com PDFs, também seria necessária uma estrutura de pastas e arquivos; a UI do app de Notes não é adequada para editar e manter anotações
Nunca usei o NotebookLM, então tenho curiosidade: ele oferece algo claramente melhor do que subir arquivos no Claude Projects e conversar por lá? Sei que o recurso de podcast é diferente, mas queria ouvir uma comparação de quem já usou os dois serviços
Gosto do NLM por causa do recurso de podcast; recentemente tenho começado as manhãs ouvindo podcasts de estudo, e isso tem sido realmente muito bom
Penso a mesma coisa; hoje em dia eu simplesmente coloco os materiais em uma pasta no Claude Code ou no Codex CLI e trabalho direto ali dentro
Há muitos pontos bons, como a estrutura de 3 painéis e o visualizador de fontes à esquerda; mas algumas coisas me incomodaram: primeiro, os 3 painéis deveriam poder ser alternados por ícones na barra superior, e, se chat e notas não forem usados ao mesmo tempo, isso é desperdício de espaço; segundo, a grande área central precisa obrigatoriamente ser focada na saída; chat não é um recurso tão especial quanto o resumo em áudio, então poderia ficar ao lado; terceiro, a densidade de informação é baixa demais e os botões e ícones são grandes e desajeitados; IA lida com enormes volumes de informação, então espaço de tela é importante e isso joga contra; o grande atrativo do NBLM está no resumo em áudio; perguntas e respostas baseadas em chat, tirando as citações, já são algo básico em grandes LLMs; além disso, ele usa apenas o Gemini Flash, e como passa uma sensação de modelo voltado a busca, talvez funcionasse melhor combinado com um modelo de raciocínio
Já subi um arquivo de livro e tive conversas úteis com o NotebookLM, mas por algum motivo essa conversa não foi salva, então não consegui voltar depois nem continuar; ao contrário de outros serviços de IA como Gemini e GPT, não entendo por que o UX/UI do NotebookLM parece ter andado para trás; e ele também não consegue escrever um ensaio com base no material fornecido
O tamanho do contexto e o podcast são bons, mas eu realmente não entendo o UX; o conceito de nota é pouco claro; não sei exatamente qual é a diferença entre minhas notas e as notas da IA; pode ser porque isso não combina com meu jeito de trabalhar com artigos acadêmicos (PhD in Psy), ou talvez porque eu já esteja acostumado ao elicit
As notas ajudam quando você compartilha um notebook com outras pessoas; por meio de snippets, elas podem oferecer rapidamente pontos-chave para conversa
Como pesquisador em autismo, eu também não entendo o conceito de “notas”; não sei se isso deveria ser usado como um app de notas tipo OneNote; estudar interagindo com artigos por meio de LLM realmente acelera as coisas, mas, embora eu tenha usado o resumo em áudio ao dirigir, é difícil fazer isso mergulhar em conteúdo científico realmente profundo
Para quem usa com frequência, tenho curiosidade: para que vocês usam principalmente? Além do resumo em áudio, o que ele faz melhor do que um chat comum ou integração de documentos?
Transformo artigos do arXiv, comentários do Hacker News e outros textos longos em podcasts para ouvir no trajeto de ida e volta
Sou consultor técnico e costumo conhecer o cliente pela primeira vez depois da assinatura do contrato; coloco no NotebookLM gravações de reuniões anteriores e os termos do contrato, e faço perguntas de alto nível sobre objetivos, riscos e prioridades; com base nisso, monto os slides da primeira reunião e, depois, também adiciono transcrições de sessões de discovery; a partir daí, consigo até gerar um rascunho de relatório de avaliação do modelo de gestão; mas nunca mostro ao cliente o texto escrito pelo LLM do jeito que saiu, sempre reescrevo no meu próprio estilo; na empresa usamos oficialmente o GSuite, e a vantagem do NotebookLM é que ele faz uma boa curadoria das fontes
É extremamente útil para estudar regras complexas de jogos de tabuleiro, porque em vez de procurar tudo manualmente no livro de regras, basta perguntar e ele responde com citações
Para mim, uma explicação em vídeo parece melhor do que áudio
Um amigo usa para criar quizzes e flashcards para estudar para provas da faculdade