Retour sur le processus de conception de NotebookLM

• Le designer de NotebookLM résume l’ensemble du processus de conception, de la phase d’expérimentation jusqu’au lancement, autour de l’expérience utilisateur centrale et du système de marque
• L’objectif de NotebookLM était d’établir une structure en 3 panneaux et un système de panneaux responsive reliant lecture, conversation et création dans un même espace afin de résoudre la surcharge d’onglets (tab overwhelm)
• Le flux d’information a été organisé selon un modèle mental explicite — Inputs → Chat → Outputs — afin de mettre en œuvre une UX orientée contexte qui évite à l’utilisateur de perdre ses repères
• Des fonctionnalités comme Audio Overviews intègrent des interactions nativement IA dans des flux de travail réalistes, notamment via les citations de sources et des modèles d’interruption
• En définitive, cela montre qu’une équipe réduite et agile a construit un cadre de conception produit AI-first extensible et cohérent, de l’identité de marque jusqu’aux assets visuels

---

Architecture

• Le projet partage le cheminement par lequel une architecture UI pensée pour combiner lecture, conversation et création a évolué d’une expérimentation vers un système prêt pour le lancement
• L’image UI Evolution visualise la manière dont l’interface expérimentale initiale a progressivement convergé vers une structure en 3 panneaux
• L’ensemble de la conception a privilégié la scalabilité et l’adaptabilité, en adoptant des principes de grille et de panneaux qui restent solides même avec l’ajout de nouveaux outils et modes

Early Prototype & Notes-driven UI

• La présentation revient sur une première tentative consistant à superposer un chat exploratoire à un canvas centré sur les notes mis en place au début du projet
• De nombreuses itérations ont été menées pour faire coexister notes et conversation sur un même écran tout en trouvant une mise en page réduisant la charge cognitive
• Au final, le chat a cessé d’être un simple outil pour devenir un axe de la vue, puis l’un des piliers du système de panneaux

3-Panel Structure

• La structure finale repose sur trois panneaux — Source / Chat / Studio(Notes) — avec une approche responsive garantissant l’accessibilité, y compris sur de petites largeurs, notamment via le maintien des icônes essentielles
• Les presets de mise en page comme Standard et Reading + Chat proposent des configurations optimisées selon l’usage, en soutenant notamment les tâches centrées sur les citations et les références
• La largeur des panneaux est réajustée dynamiquement selon le focus de l’utilisateur afin de réduire au minimum les frictions lors du passage d’un outil à l’autre

Problem + Requirements

• Le problème central était une expérience fragmentée due au passage constant entre plusieurs outils, générant une surcharge d’onglets ; l’exigence était donc d’unifier en un seul espace les entrées, la conversation et les sorties
• Côté entrée, on trouve Source list / Open Source(wide) ; côté sortie, Notes list / Open Note(wide) ; au centre, Chat et Citations
• Les actions de génération ont été conçues avec plusieurs points d’entrée afin que l’utilisateur puisse enchaîner directement vers la production de livrables sans casser son flux

Early Sketches

• La structure actuelle peut sembler évidente aujourd’hui, mais elle est le résultat de très nombreuses itérations
• Le récit du processus explique qu’une feuille étant tombée dans l’avion, la solution finale a été trouvée via un croquis sur serviette
• L’objectif était d’établir une combinaison de blocs capable de satisfaire à la fois un modèle mental clair et une UI facile à assimiler

Mental Model

• Le modèle mental s’articule autour d’un flux linéaire mais flexible : Inputs → Chat → Outputs
• L’utilisateur importe documents, notes et références, puis, à travers questions, synthèse et composition, produit des résultats structurés comme des notes, des guides d’étude ou des Audio Overviews
• Ce modèle rend la complexité des nouvelles interactions IA assimilable grâce à un meilleur sens de la position et des étapes

Solution • Détails de la structure en 3 panneaux

• Le système de panneaux responsive se redimensionne de façon fluide selon les besoins de l’utilisateur tout en conservant l’accessibilité aux sources et aux notes, même à largeur minimale
• La mise en page Standard offre une vue de base équilibrée entre sources, chat et notes
• Reading + Chat est optimisée pour la génération de réponses appuyées sur des citations, renforçant ainsi le flux de justification par les sources

Panel States

• Les états des panneaux maximisent l’efficacité de l’espace grâce au maintien des icônes des éléments essentiels et à une recomposition par paliers de largeur
• Même lorsque le contenu interne évolue, les principes structurels restent fixes, ce qui permet d’intégrer avec souplesse de nouveaux outils et workflows
• Les principes de conception se résument en capacité de croissance et résilience

Source Panel

• Il sert de point d’ancrage pour toutes les sources fournies par l’utilisateur (entrées) et joue le rôle de point de départ du parcours de travail
• L’organisation, la consultation et le basculement entre les sources s’y effectuent rapidement, favorisant l’interaction avec le Chat central
• Même à largeur minimale, le maintien d’indices visuels évite la perte de contexte

Studio Panel

• C’est l’espace où les entrées se transforment en livrables, dédié à la génération, au raffinement et à la consignation
• Il est conçu comme une vue conteneur capable d’accueillir différents types de sorties, comme notes, rapports et guides d’étude
• La dernière release présente des exemples d’extension avec flashcards, quizzes et professional reports

Chat Panel

• Il constitue l’axe central de l’expérience, reste toujours présent et ajuste automatiquement sa taille selon les besoins
• Sa conception conversationnelle, centrée sur les citations et la présentation des sources, vise à offrir une interaction IA fiable
• Même quand d’autres outils passent au premier plan, il préserve le contexte conversationnel afin de limiter les ruptures dans le flux

User Journey • Annotated Overview

• Le parcours utilisateur annoté visualise les interactions étape par étape : collecte des entrées → compréhension et organisation par la conversation → génération de livrables
• Il explique comment, à chaque étape, les déplacements de focus entre panneaux et les transitions d’état s’articulent de manière organique
• L’objectif est de construire une expérience end-to-end qui préserve le contexte tout en accélérant le travail

Audio Overviews

• Audio Overviews a introduit, de l’idée au prototype puis au lancement, de nouveaux paradigmes d’interaction, notamment des modèles d’interruption
• La valeur de la fonctionnalité tient à un usage ancré dans les sources (grounded) et à un apprentissage/synthèse en un clic ; l’auteur partage aussi en coulisses qu’il en a trouvé le nom par hasard
• C’est aussi un exemple de collaboration cross-functional en petite équipe ayant permis des cycles rapides d’expérimentation et de lancement

Brand Identity

• Une collaboration étroite avec Google Labs et l’équipe marque centrale a permis de définir rapidement l’identité de marque et le système visuel
• Couleurs, typographie, icônes et illustrations ont été structurés en un langage de design cohérent et extensible à travers de multiples assets
• L’accent est mis sur l’alignement entre UX et BI afin que l’expérience produit et le ton de marque portent le même message

Visual Assets

• Le texte présente des exemples de création d’assets full stack, du press kit jusqu’aux visuels de lancement
• Des assets haute fidélité comme des hero images web, animations et key visuals servent à clarifier le message et à élargir sa portée
• La cohérence du message avec des canaux externes comme Keyword blog a aussi contribué à une communication élargie

Key Takeaways from the Journey

• Les enseignements tirés de la construction d’Audio Overviews se résument à construire le produit avec les utilisateurs, publier vite puis itérer, et répondre à la demande de citations inline
• L’IA doit être native au produit, sous forme Built-in, et la clé est de concevoir de manière à combler l’écart entre la recherche et les usages réels
• Une UI dynamique et context-aware est essentielle ; dans cette phase de transition, le Chat agit comme une ancre familière et comme un pont vers de nouvelles expériences

[GN⁺]

Commentaires sur Hacker News

• J’ai l’impression que ce billet est, comme NotebookLM, fondamentalement simple mais conçu de manière excessivement complexe. Le besoin est simple : sélectionner des fichiers, discuter avec eux ou obtenir un résumé. En pratique, la densité d’information est faible et il y a trop de cartes, de boutons, de sections et d’icônes, au point qu’il devient difficile d’accéder à l’UX essentielle. Je voulais entendre la réflexion du designer, mais au lieu de cela, des éléments visuels comme le scroll-jacking, les carrousels d’images et une hiérarchie visuelle inutile finissent par gêner l’expérience d’utilisation. Je reconnais ses qualités, mais l’UI rend difficile de se concentrer sur l’essentiel.

  • Ce n’est pas une critique négative, au contraire c’est un point de vue auquel je m’identifie. Si l’on veut discuter avec des fichiers, Gemini, ChatGPT et Claude le font aussi très bien. L’objectif de ce produit expérimental était de réfléchir de manière créative à la possibilité d’un outil réellement fondé sur des sources. Nous avons rapidement testé de nombreuses pistes en fonction des besoins des utilisateurs, et cela continuera d’évoluer à partir de ce type de retours. Dans le cas de mon site web, je voulais mieux transmettre le processus de décision grâce à des éléments visuels.

  • Il doit exister un mot allemand parfait pour décrire ce phénomène. On voit parfois des défauts présentés comme s’ils avaient contribué au succès. On le voit souvent dans les présentations de la big tech : quelque chose a en réalité réussi malgré certains problèmes, mais c’est raconté comme une belle histoire, et je trouve ça amusant.

  • Il y a une ironie à devoir scroller à l’infini pour expliquer une mise en page à trois panneaux qui existe depuis les années 80.

  • Ça a l’air propre, mais en réalité l’expérience utilisateur de NotebookLM n’est pas terrible. Le service est tellement bon que je continue à l’utiliser, mais l’UI est ce que j’aime le moins.

  • Au début, je me demandais à quel point ça pouvait être peu pratique, mais en voyant à quel point c’était surdesigné, j’ai trouvé ça presque amusant.

• Ce site est mon portfolio, et c’est intéressant de voir les réactions des gens. Le design repose sur l’itération et l’évolution. NotebookLM continuera lui aussi à changer. Je me considère très chanceux d’avoir pu participer à ce produit dès ses débuts. En tant que designer, j’ai essayé d’anticiper l’avenir de la technologie et de construire une UI adaptée à cette vision. Je pense que l’équipe Google Labs avançait vraiment vite et avec une vision tournée vers l’avenir. Pendant un an et demi, nous avons écouté les retours des utilisateurs, itéré et fait grandir le produit. Créer un nouveau produit de 0 à 1 a été une expérience incroyable. Je n’aurais jamais imaginé que mon portfolio deviendrait aussi connu.

  • Je me demande s’il existe des limites ou des règles concernant ce qu’on peut montrer publiquement en lien avec la propriété intellectuelle de Google.

  • J’ai trouvé un bug sur le site : il envoie au navigateur ou aux extensions un signal comme si le mode sombre était activé. Du coup, alors que ce n’est pas vraiment le cas, certaines choses ne fonctionnent pas correctement.

  • Merci pour tout ce travail. Même si je me plains parfois, c’est le produit d’apprentissage le plus captivant que j’aie utilisé jusqu’ici. J’espère qu’il continuera à progresser.

  • L’idée de « patiner vers l’avenir de la technologie » me parle beaucoup. Au fond, ce genre de travail n’est pas une science qui se déroule exactement selon le plan, c’est plutôt un art qui demande des ajustements constants. J’imagine que le projet a évolué à partir de nombreux rôles différents et des retours utilisateurs. NotebookLM a bousculé le marché et je pense qu’il va encore s’améliorer, comme Bard ou Gemini à leurs débuts, en particulier sur l’UI/UX.

• J’utilise NotebookLM tous les jours. J’apprécie la simplicité du design, mais à mesure que des fonctionnalités s’ajoutent, des problèmes apparaissent pour faire évoluer l’UI tout en la gardant cohérente. Avec l’ajout récent des flashcards et des quiz, le Artifacts Button Container est passé à 328 px de hauteur avec 6 gros boutons. Des utilisateurs indiens sur petit écran demandaient de l’aide sur le forum Discord parce qu’ils ne pouvaient plus voir leurs notes. J’ai donc créé un script Tampermonkey pour le rendre repliable [script de repli]. J’ai entendu dire que l’équipe allait bientôt corriger ça, mais il aurait fallu davantage de vérifications avant la sortie. J’ai corrigé moi-même ce genre de problèmes par script. Le plus étrange, ce sont les notes, qui vous obligent à lire une dissertation de 2 000 caractères dans une barre latérale de 360 px. J’ai donc aussi créé un script pour les afficher en plein écran [script plein écran]. Le champ de saisie du chat pose également problème : les questions de suivi ne fonctionnent pas correctement et ça reste instable même après sélection. Je pourrais en parler toute la journée, mais je préfère corriger les choses.

• Je n’aime pas l’UX de NotebookLM. La mise en page est confuse et les concepts transmis par l’UI ne sont pas intuitifs. La puissance du backend ne se reflète pas correctement dans le frontend. En revanche, l’article lui-même est propre et on sent bien la réflexion de l’auteur. Je ne suis pas d’accord avec la conclusion ni avec le résultat, mais j’espère voir d’autres tentatives plus réfléchies. Dans un marché qui évolue si vite, il n’est pas facile de faire un design avec un vrai souci d’artisanat.

  • Je me demande si vous utilisez un service alternatif. Je n’ai pas beaucoup exploré ce domaine.

• Je pense que NotebookLM est un cas de réussite non pas grâce à son interface, mais malgré elle. Pour être honnête, l’UX est vraiment mauvaise. Le mérite revient largement aux ingénieurs backend. Il m’a fallu un temps fou rien que pour trouver le simple copier-coller de texte. L’édition de texte n’est pas bonne non plus. Je ne comprends pas pourquoi il n’y a pas de vraie zone de notes Markdown dédiée. La plupart des gens sont plus habitués à coller du texte qu’à manipuler des PDF, donc il faudrait aussi une structure de dossiers et de fichiers. L’UI de l’app Notes n’est pas adaptée à l’édition et à la maintenance des notes.

• Je n’ai jamais utilisé NotebookLM, donc je suis curieux : qu’est-ce qu’il fait de vraiment mieux que le fait d’uploader des fichiers dans Claude Projects puis de discuter avec eux ? Je sais que la fonction podcast est particulière, mais j’aimerais avoir une comparaison de la part de gens qui ont utilisé les deux services.

  • J’aime NLM pour sa fonction podcast. Ces derniers temps, je lance chaque matin un podcast d’apprentissage pour commencer la journée, et c’est vraiment excellent.

  • Je pense pareil. Maintenant, je mets simplement mes documents dans un dossier dans Claude Code ou Codex CLI, puis je travaille directement dedans.

• Il y a beaucoup de bons points, comme la structure à trois panneaux ou le visualiseur de sources à gauche. Mais certaines choses m’ont gêné. Premièrement, le mode trois panneaux devrait pouvoir se basculer via des icônes dans la barre du haut, car si l’on n’utilise pas en même temps le chat et les notes, c’est du gaspillage d’espace. Deuxièmement, la grande zone centrale devrait impérativement être centrée sur la sortie. Le chat n’est pas une fonctionnalité aussi spéciale que les aperçus audio, donc il pourrait être déporté sur le côté. Troisièmement, la densité d’information est beaucoup trop faible et les boutons comme les icônes sont gros et patauds. L’IA traite d’énormes volumes d’information, donc l’espace à l’écran est crucial, et cette interface y nuit. L’attrait de NBLM réside dans les aperçus audio. Les questions-réponses basées sur le chat, à part les citations, sont déjà fournies de base par les grands LLM. Et comme seul Gemini Flash est utilisé, cela donne un côté modèle orienté recherche ; ce serait sans doute mieux en combinaison avec un modèle de raisonnement.

• J’ai téléversé un livre et échangé des choses utiles avec NotebookLM, mais pour une raison quelconque cette conversation n’est pas enregistrée, donc je ne peux ni la retrouver ni la reprendre. Contrairement à d’autres services d’IA comme Gemini ou GPT, je ne comprends pas pourquoi l’UX/UI semble fonctionner à l’envers. Et NotebookLM n’arrive même pas à rédiger une dissertation à partir de mes documents.

  • Dans le même ordre d’idées, il est aussi étrange que l’app limite autant l’export des informations vers l’extérieur. Une fonction comme l’export vers Google Docs devrait aller de soi, mais on n’a droit qu’au copier-coller.

• La taille du contexte et la fonction podcast sont bonnes, mais je ne comprends pas l’UX. Le concept de note est flou. Je ne vois pas bien la différence entre mes notes et les notes de l’IA. C’est peut-être parce que ça ne correspond pas à ma manière de travailler sur des articles scientifiques (doctorat en psycho), ou peut-être parce que je suis trop habitué à Elicit.

  • Les notes sont utiles quand on partage un notebook avec quelqu’un d’autre. Elles permettent de fournir immédiatement, via des extraits, des points de discussion importants.

  • En tant que chercheur en autisme, moi non plus je ne comprends pas bien le concept de « notes ». Je ne sais pas si je suis censé l’utiliser comme une app de prise de notes à la OneNote. Étudier des articles en interaction avec un LLM va clairement plus vite, et j’ai aussi essayé les aperçus audio en voiture, mais il est difficile d’aller vraiment en profondeur sur des contenus scientifiques exigeants.

• J’aimerais poser une question à ceux qui l’utilisent régulièrement : pour quels usages principalement ? En dehors des aperçus audio, qu’est-ce que ça apporte de mieux qu’un chat généraliste ou qu’une simple intégration de documents ?

  • Je transforme des articles arXiv, des commentaires Hacker News et d’autres longs textes en podcasts que j’écoute pendant mes trajets domicile-travail.

  • Je suis consultant technique et je rencontre souvent un client pour la première fois après la signature du contrat. Je mets dans NotebookLM les transcriptions des réunions précédentes et les conditions contractuelles, puis je lui pose des questions de haut niveau sur les objectifs, les risques ou les priorités. À partir de là, je prépare les slides de la première réunion, puis j’ajoute plus tard les transcriptions des sessions de découverte. J’en sors même une première version d’un rapport d’évaluation du mode de gestion. En revanche, je ne montre jamais tel quel à un client un texte rédigé par un LLM : je le réécris toujours dans mon propre style. Dans mon entreprise, nous utilisons officiellement GSuite, et l’un des avantages de NotebookLM est qu’il gère très bien la curation des sources.

  • Pour les règles complexes de jeux de société, c’est extrêmement pratique : au lieu de chercher dans le livret, je pose une question et il me répond avec des citations à l’appui.

  • Je trouve qu’une explication en vidéo serait meilleure que l’audio.

  • Un ami l’utilise pour créer des quiz et des flashcards afin de réviser ses examens à l’université.