- Der Designverantwortliche von NotebookLM fasst den gesamten Prozess zusammen, in dem die zentrale User Experience und das Brand-System von der Experimentierphase bis zum Launch gestaltet wurden
- Ziel von NotebookLM war es, zur Auflösung von Tab Overwhelm eine 3-Panel-Struktur und ein responsives Panel-System zu etablieren, das Lesen, Gespräch und Erstellung in einem Raum verbindet
- Der Informationsfluss wurde als explizites mentales Modell aus Inputs → Chat → Outputs organisiert, um eine kontextorientierte UX umzusetzen, bei der Nutzer nicht die Orientierung verlieren
- Funktionen wie Audio Overviews integrieren AI-native Interaktionen mit Quellenzitaten und Interrupt-Mustern in realistische Arbeitsabläufe
- Daraus ergibt sich als Kernaussage, dass ein kleines, agiles Team ein konsistent skalierbares AI-first Produktdesign-Framework aufgebaut hat, das von der Brand Identity bis zu visuellen Assets reicht
Architecture
- Das Projekt teilt den Prozess, wie eine UI-Architektur mit dem Ziel der Verbindung von Lesen, Gespräch und Erstellung von einem Experiment zu einem Launch-tauglichen System weiterentwickelt wurde
- Die Abbildung UI Evolution visualisiert, wie frühe experimentelle Interfaces schrittweise in eine 3-Panel-Struktur übergingen
- Das gesamte Design priorisierte Skalierbarkeit und Anpassungsfähigkeit und übernahm Grid-/Panel-Prinzipien, damit die Struktur auch beim Hinzufügen neuer Tools und Modi nicht zerbricht
Early Prototype & Notes-driven UI
- Vorgestellt wird ein früher Versuch, auf einer notenorientierten Canvas ein exploratives Chat-Overlay aufzusetzen
- Um Notizen und Gespräche auf einem Bildschirm zu vereinen, wurden viele Iterationen durchgeführt, um ein Layout mit geringerer kognitiver Belastung zu finden
- Dadurch wurde Chat letztlich nicht mehr als bloßes Tool, sondern als eigene Achse der Ansicht verstanden und zum Kern der späteren Panel-Struktur
3-Panel Structure
- Die finale Struktur besteht aus Source / Chat / Studio(Notes) als dreigeteilte Panels und setzt auf responsive Panels, die auch bei geringer Breite über Elemente wie zentrale Icons die Zugänglichkeit sichern
- Layout-Presets wie Standard und Reading + Chat bieten je nach Situation optimierte Konfigurationen und unterstützen zitat- und referenzzentriertes Arbeiten
- Je nach Nutzerfokus wird die Breite der Panels dynamisch angepasst, um Reibung beim Wechsel zwischen Tools zu minimieren
Problem + Requirements
- Das Kernproblem war Tab Overwhelm durch eine fragmentierte Erfahrung über viele verschiedene Tools hinweg; daraus ergab sich die Anforderung, dies in einem Raum als Input, Gespräch und Output zu integrieren
- Auf der Eingabeseite liegen Source list / Open Source(wide), auf der Ausgabeseite Notes list / Open Note(wide), zentral sind Chat und Citations angeordnet
- Der Erstellungsvorgang bietet mehrere Einstiegspunkte, damit Nutzer ihren Flow nicht unterbrechen müssen und direkt zur Erstellung von Ergebnissen übergehen können
Early Sketches
- Die heutige Struktur wirkt offensichtlich, ist aber das Resultat unzähliger Iterationen
- Geteilt wird die Dokumentation der Exploration, wonach die endgültige Lösung in einer Serviettenskizze gefunden wurde, nachdem im Flugzeug das Papier ausgegangen war
- Ziel war die Etablierung einer Blockkombination, die zugleich ein klares mentales Modell und eine gut verdauliche UI erfüllt
Mental Model
- Das mentale Modell ist um einen linearen, aber flexiblen Flow aus Inputs → Chat → Outputs aufgebaut
- Nutzer bringen Dokumente, Notizen und Referenzen ein und erstellen über Fragen, Strukturieren und Synthese strukturierte Ergebnisse wie Notizen, Study Guides und Audio Overviews
- Dieses Modell macht die Komplexität neuer AI-Interaktionen durch Orientierung und ein Gefühl für Schritte beherrschbar
Solution • 3 Panel Structure im Detail
- Das responsive Panel-System skaliert flexibel entsprechend den Nutzerbedürfnissen und erhält den Zugang zu Quellen und Notizen auch bei minimaler Breite
- Das Standard-Layout bietet eine ausgewogene Standardansicht von Quellen, Chat und Notizen
- Reading + Chat ist auf die Erzeugung zitatsbasierter Antworten optimiert und stärkt den Flow der Belegführung
Panel States
- Die Panel-Zustände maximieren die Platzeffizienz durch Beibehaltung essenzieller Icons und Reorganisation nach Breitenstufen
- Auch wenn sich die Inhalte innerhalb eines Panels ändern, bleiben die Strukturprinzipien fest, sodass künftige neue Tools und Workflows flexibel aufgenommen werden können
- Die Designprinzipien lassen sich als Wachstumsfähigkeit und Resilienz zusammenfassen
Source Panel
- Es dient als Basis für alle vom Nutzer bereitgestellten Quellen (Inputs) und als Ausgangspunkt der Arbeitsreise
- Organisation, Ansicht und Wechsel der Quellen erfolgen schnell und fördern die Interaktion mit dem zentralen Chat
- Auch bei minimaler Breite bleiben visuelle Hinweise erhalten, um Kontextverlust zu vermeiden
Studio Panel
- Es ist der Raum, in dem Eingaben in Ergebnisse umgewandelt werden, und übernimmt Erstellung, Verfeinerung und Dokumentation
- Es ist als Container-View ausgelegt, die verschiedene Output-Typen wie Notizen, Berichte und Study Guides aufnehmen kann
- In aktuellen Releases werden flashcards, quizzes und professional reports als Beispiele für Erweiterungen vorgestellt
Chat Panel
- Als Kernachse der Experience ist es immer präsent und passt seine Größe bei Bedarf automatisch an
- Durch ein Gesprächsdesign mit Fokus auf Quellenzitate und Belege bietet es vertrauenswürdige AI-Interaktionen
- Auch wenn andere Tools in den Vordergrund treten, bleibt der Gesprächskontext erhalten, um Unterbrechungen im Flow zu minimieren
User Journey • Annotated Overview
- Die annotierte User Journey visualisiert die schrittweisen Interaktionen von Input-Sammlung → Verstehen und Strukturieren per Gespräch → Erstellung von Ergebnissen
- Sie erläutert, wie Fokuswechsel zwischen Panels und Statuswechsel in jeder Phase organisch miteinander verbunden sind
- Ziel ist der Aufbau einer End-to-End Experience, die zugleich Kontextwahrung und Arbeitstempo erreicht
Audio Overviews
- Audio Overviews führten auf dem Weg von Idee über Prototyp bis zum Launch neue Interaktionsparadigmen wie Interrupt-Muster ein
- Der Nutzen der Funktion liegt in quellenbasiertem (grounded) Lernen und Zusammenfassen per One-Click; als Hintergrundnotiz wird geteilt, dass der Name zufällig vom Autor geprägt wurde
- Es ist ein Beispiel dafür, wie durch kleine cross-funktionale Teamarbeit ein schneller Zyklus aus Experiment und Launch erreicht wurde
Brand Identity
- In enger Zusammenarbeit mit Google Labs und dem zentralen Brand-Team wurden Brand Identity und visuelles System schnell definiert
- Farbe, Typografie, Icons und Illustrationen wurden als Designsprache etabliert, die mehrere Asset-Typen konsistent und skalierbar erweitert
- Hervorgehoben wird die Ausrichtung von UX und BI, damit Produkterlebnis und Brand-Ton dieselbe Botschaft vermitteln
Visual Assets
- Vorgestellt werden Beispiele für die Produktion eines Full-Stack-Sets visueller Assets vom Press Kit bis zu Launch-Visuals
- Web-Hero-Images, Animationen und Key Visuals unterstützen mit hochgradig ausgereiften Assets eine klarere Botschaft und größere Reichweite
- Durch die Sicherung einer konsistenten Botschaft über externe Kanäle wie den Keyword blog hinweg wird die skalierte Kommunikation unterstützt
Key Takeaways from the Journey
- Die Lehren aus dem Build-Prozess von Audio Overviews lassen sich zusammenfassen als Produkte gemeinsam mit Nutzern bauen, früh veröffentlichen und schnell iterieren sowie Nachfrage nach Inline-Zitaten bedienen
- AI-native Produkte sollten Probleme mit einem Built-in-Ansatz lösen; zentral ist ein Design, das die Lücke zwischen Forschung und realen Nutzungsaufgaben schließt
- Eine dynamische, kontextbewusste UI ist wichtig, und in der Übergangsphase fungiert Chat als vertrauter Anker und als Brücke zu neuen Experiences
1 Kommentare
Hacker-News-Kommentare
Dieser Beitrag wirkt, als sei er wie NotebookLM im Kern einfach, aber übermäßig komplex gestaltet: Das grundlegende Bedürfnis ist simpel — eine Datei auswählen, damit chatten oder eine Zusammenfassung bekommen —, doch in der Praxis ist die Informationsdichte gering, und es gibt zu viele Karten, Buttons, Bereiche und Icons, sodass der Einstieg in die Kern-UX schwerfällt. Ich wollte die Gedanken des Designers dazu hören, stattdessen behindern visuelle Elemente wie Scrolljacking, Bilderkarussells und unnötige visuelle Hierarchien eher die Nutzererfahrung. Ich erkenne an, was daran cool ist, aber wegen der UI fällt es schwer, sich auf das Wesentliche zu konzentrieren.
Das ist nicht negativ gemeint, im Gegenteil, diese Sichtweise ist nachvollziehbar. Wenn man mit Dateien chatten möchte, funktionieren Gemini, ChatGPT und Claude ebenfalls gut. Das Ziel dieses experimentellen Produkts war, kreativ zu erkunden, ob es ein Tool werden kann, das wirklich auf echten Quellen basiert. Wir haben uns schnell an die Nutzerbedürfnisse angepasst und vieles ausprobiert, und auf Basis solchen Feedbacks wird es sich auch künftig weiterentwickeln. Bei meiner Website wollte ich mit visuellen Elementen den Entscheidungsprozess besser vermitteln.
Dafür gibt es bestimmt ein passendes deutsches Wort. Man sieht manchmal, dass ein Nachteil so dargestellt wird, als hätte er zum Erfolg beigetragen. Bei Big-Tech-Präsentationen kommt das oft vor: Eigentlich war etwas trotz eines Problems erfolgreich, aber dann wird es erzählt, als wäre genau das eine Heldengeschichte gewesen. Das finde ich lustig.
Es hat eine gewisse Ironie, dass man endlos scrollen muss, um ein Drei-Panel-Layout zu erklären, das es schon seit den 80ern gibt.
Es sieht sauber aus, aber die tatsächliche Nutzererfahrung von NotebookLM ist nicht besonders gut. Der Dienst ist so gut, dass ich ihn trotzdem weiter nutze, aber die UI ist mein am wenigsten geschätzter Teil davon.
Anfangs dachte ich, so schlimm kann es doch nicht sein, aber als ich gesehen habe, wie überdesignt das tatsächlich ist, fand ich es fast schon amüsant.
Diese Website ist mein Portfolio, und ich finde es spannend, die Meinungen so vieler Menschen zu sehen. Design setzt Wiederholung und Weiterentwicklung voraus. NotebookLM wird sich auch künftig weiter verändern. Ich halte mich wirklich für glücklich, dass ich bei diesem Produkt schon in einer so frühen Phase dabei sein konnte. Als Designer habe ich versucht, die Zukunft der Technologie vorauszuahnen und eine passende UI dafür zu bauen. Ich glaube, das Google-Labs-Team hat sich wirklich schnell und zukunftsorientiert bewegt. Über anderthalb Jahre hinweg haben wir auf Nutzerfeedback gehört, iteriert und das Produkt wachsen lassen. Es war eine großartige Erfahrung, in meinem Leben einmal ein neues Produkt von 0 auf 1 aufzubauen. Ich hätte nie gedacht, dass mein Portfolio so bekannt werden würde.
Ich frage mich, ob es in Bezug auf Googles IP Grenzen oder Regeln dafür gibt, was man öffentlich zeigen darf.
Ich habe auf der Website einen Bug gefunden: Sie sendet offenbar ein Signal an Browser oder Erweiterungen, als wäre Dark Mode aktiv. Dadurch funktioniert einiges nicht richtig, obwohl tatsächlich gar kein Dark Mode aktiv ist.
Danke für die ganze Arbeit. Ich meckere zwar manchmal, aber es ist bisher das fesselndste Lernprodukt, das ich erlebt habe. Hoffentlich entwickelt es sich weiter.
Die Formulierung „in Richtung der Zukunft der Technologie skaten“ spricht mich sehr an. Am Ende ist so etwas keine Wissenschaft, die sich perfekt planen lässt, sondern eher eine Kunst. Es ist ein Bereich, der ständig nachjustiert werden muss. Ich denke, das Projekt hat sich auf Basis vieler Rollen und viel Nutzerfeedback weiterentwickelt. NotebookLM hat den Markt aufgemischt, und ich glaube, es wird sich wie Bard oder Gemini in den Anfangszeiten noch weiter verbessern — besonders bei UI/UX.
Ich nutze NotebookLM täglich. Ich schätze die Schlichtheit des Designs, aber je mehr Funktionen hinzukommen, desto mehr Probleme gibt es dabei, die UI beizubehalten und zugleich zu skalieren. Mit den zuletzt hinzugefügten Flashcards und Quizzen ist der „Artifacts Button Container“ auf 328 px Höhe mit sechs großen Buttons angewachsen. Nutzer mit kleinen Bildschirmen in Indien konnten ihre eigenen Notizen nicht mehr sehen und baten im Discord-Forum um Hilfe. Deshalb habe ich ein Tampermonkey-Skript geschrieben, mit dem man das einklappen kann [Skript zum Einklappen]. Ich habe gehört, dass das Team es bald beheben will, aber vor dem Release hätte es mehr Validierung gebraucht. Solche Probleme habe ich direkt per Skript behoben, und am seltsamsten ist „notes“: Man wird gezwungen, einen 2000 Zeichen langen Essay in einer 360-px-Seitenleiste zu lesen. Deshalb habe ich auch ein Skript gebaut, um das im Vollbild zu sehen [Vollbild-Skript]. Auch das Chat-Eingabefeld hat Probleme: Folgefragen funktionieren nicht zuverlässig, und selbst nach einer Auswahl bleibt es instabil. Ich könnte den ganzen Tag darüber reden, aber ich finde, es ist besser, es zu reparieren.
Mir gefällt die UX von NotebookLM nicht. Das Layout ist verwirrend, und die Konzepte, die die UI vermittelt, sind nicht intuitiv. Die Power des Backends kommt im Frontend nicht richtig zur Geltung. Der Text selbst ist aber sauber geschrieben, und man spürt die Überlegungen des Autors gut. Ich stimme der Schlussfolgerung und dem Ergebnis zwar nicht zu, hoffe aber, dass weiterhin sorgfältigere Versuche entstehen. In einem sich schnell verändernden Markt ist handwerklich starke Gestaltung nicht leicht.
Ich denke, NotebookLM ist ein Fall, der nicht wegen seiner Oberfläche erfolgreich war, sondern trotz ihr. Ehrlich gesagt ist die UX ziemlich schlecht. Das Backend-Engineering verdient einen großen Teil des Lobs. Selbst simples Kopieren und Einfügen von Text war nur schwer zu finden. Auch die Textbearbeitung ist nicht gut. Ich verstehe nicht, warum es keinen dedizierten Markdown-Notizbereich gibt. Die meisten Menschen sind eher daran gewöhnt, Text einzufügen als PDFs hochzuladen, also bräuchte es auch eine Ordner- und Dateistruktur. Die UI der Notes-App eignet sich nicht gut zum Bearbeiten und Pflegen von Notizen.
Ich habe NotebookLM noch nie benutzt und bin neugierig: Gibt es etwas, das es deutlich besser macht, als in Claude Projects Dateien hochzuladen und dort zu chatten? Ich weiß, dass die Podcast-Funktion einzigartig ist, aber mich würde ein Vergleich von Leuten interessieren, die beide Dienste genutzt haben.
Ich mag NLM wegen der Podcast-Funktion. In letzter Zeit starte ich fast jeden Morgen damit, mir einen Lern-Podcast anzumachen, und das ist wirklich großartig.
Ich denke ähnlich. Inzwischen packe ich meine Materialien einfach in einen Ordner in Claude Code oder Codex CLI und arbeite direkt darin.
Es gibt viele gute Aspekte, zum Beispiel die Drei-Panel-Struktur oder den Quellen-Viewer auf der linken Seite. Aber Folgendes war unpraktisch: Erstens sollte man zwischen den drei Panels über Icons in der oberen Leiste umschalten können; wenn Chat und Notizen nicht gleichzeitig genutzt werden, ist das Platzverschwendung. Zweitens sollte sich der große mittlere Bereich unbedingt auf die Ausgabe konzentrieren. Chat ist keine so besondere Funktion wie etwa Audio Overview und könnte an die Seite ausgelagert werden. Drittens ist die Informationsdichte zu gering, und Buttons sowie Icons sind groß und klobig. AI soll riesige Informationsmengen handhabbar machen, daher ist Bildschirmfläche wichtig, und das ist hier ein Nachteil. Der Reiz von NBLM liegt in Audio Overview. Chatbasiertes Q&A bieten große LLMs — abgesehen von Zitaten — ohnehin standardmäßig. Außerdem wird nur Gemini Flash verwendet; das wirkt eher wie ein Suchmodell, und ich denke, es wäre besser in Kombination mit einem Modell fürs Reasoning.
Ich habe eine Buchdatei hochgeladen und mit NotebookLM darüber ein nützliches Gespräch geführt, aber aus irgendeinem Grund wurde dieser Chat nicht gespeichert, sodass ich ihn nicht wiederfinden oder fortsetzen konnte. Anders als bei anderen AI-Diensten (Gemini, GPT) verstehe ich nicht, warum die UX/UI hier in die falsche Richtung verändert wurde. Und außerdem kann NotebookLM aus den Materialien nicht einmal einen Essay schreiben.
Kontextgröße und Podcast sind gut, aber die UX verstehe ich nicht. Das Konzept von Notizen ist unklar. Ich weiß nicht, was genau der Unterschied zwischen meinen Notizen und AI-Notizen sein soll. Vielleicht liegt es daran, dass es nicht zu meiner Arbeitsweise bei wissenschaftlichen Papers passt (PhD in Psychologie), oder daran, dass ich an elicit gewöhnt bin.
Notizen helfen, wenn man ein Notebook mit anderen teilt. Über Snippets kann man direkt zentrale Gesprächspunkte bereitstellen.
Als Autism Researcher verstehe ich das Konzept von „Notizen“ auch nicht. Soll man das wie eine Notiz-App à la OneNote benutzen? Wenn man mit einem LLM interaktiv wissenschaftliche Arbeiten durcharbeitet, ist man definitiv schneller. Ich habe Audio Overview auch schon beim Autofahren ausprobiert, aber für wirklich tiefgehende wissenschaftliche Inhalte reicht das nicht so recht.
An die Leute, die es regelmäßig nutzen: Wofür verwendet ihr es hauptsächlich? Abgesehen von Audio Overview würde mich interessieren, was daran besser ist als ein normaler Chat oder eine Dokumentensammlung.
Ich mache aus arXiv-Papers, Hacker-News-Kommentaren und anderen langen Texten Podcasts und höre sie auf dem Weg zur Arbeit.
Ich bin technischer Berater und treffe Kunden zum ersten Mal nach Vertragsabschluss. Ich lade frühere Meeting-Transkripte und Vertragsbedingungen in NotebookLM und stelle High-Level-Fragen zu Zielen, Risiken oder Prioritäten. Auf dieser Basis erstelle ich Folien für das erste Meeting und lade später auch Transkripte aus Discovery-Sessions hoch. Daraus ziehe ich sogar einen ersten Entwurf für einen Bericht zur Bewertung der Managementprozesse. Was das LLM schreibt, zeige ich dem Kunden aber nie unverändert, sondern formuliere es immer in meinem eigenen Stil um. Mein Unternehmen nutzt offiziell GSuite, und ein Vorteil von NotebookLM ist, dass es die Quellenauswahl gut kuratiert.
Bei komplexen Brettspielregeln ist es extrem nützlich, weil ich nicht alles im Regelbuch nachschlagen muss, sondern einfach Fragen stellen kann und Antworten mit Zitaten bekomme.
Mir gefallen Video-Erklärungen mehr als Audio.
Ein Freund nutzt es fürs Lernen an der Uni, um Quizze und Flashcards zu erstellen.