- La persona a cargo del diseño de NotebookLM resume todo el proceso de diseño, desde la etapa experimental hasta el lanzamiento, de la experiencia de usuario central y el sistema de marca
- El objetivo de NotebookLM fue establecer una estructura de 3 paneles y un sistema de paneles responsivo que conectara lectura, conversación y creación en un solo espacio para resolver la sobrecarga de pestañas (tab overwhelm)
- El flujo de información se organizó con el modelo mental explícito de Inputs → Chat → Outputs, implementando una UX orientada al contexto para evitar que el usuario pierda la noción de dónde está
- Funciones como Audio Overviews integran interacciones nativas de IA en flujos de trabajo reales, incluyendo citas de fuentes y patrones de interrupción
- Como resultado, la principal enseñanza es que un equipo pequeño y ágil construyó un marco de diseño de producto AI-first consistente y escalable, desde la identidad de marca hasta los activos visuales
Architecture
- El proyecto comparte el proceso de evolución de la arquitectura de UI desde la experimentación hasta un sistema listo para lanzamiento, con el objetivo de combinar lectura, conversación y creación
- La imagen de UI Evolution visualiza cómo la interfaz experimental inicial fue convergiendo hacia una estructura de 3 paneles
- Todo el diseño priorizó la escalabilidad y adaptabilidad, adoptando principios de grid/panel para que la estructura no se rompa aunque se agreguen nuevas herramientas o modos
Early Prototype & Notes-driven UI
- Se presenta un intento inicial de superponer un chat exploratorio sobre un canvas centrado en notas
- Se realizaron muchas iteraciones para encontrar un layout que redujera la carga cognitiva, permitiendo que notas y conversación coexistieran en una sola pantalla
- Como resultado, chat dejó de ser una herramienta para convertirse en un eje de la vista, y luego pasó a ser un componente central del sistema de paneles
3-Panel Structure
- La estructura final es una división en Source / Chat / Studio(Notes) con 3 paneles, usando paneles responsivos que garantizan accesibilidad incluso en anchos pequeños, por ejemplo manteniendo iconos esenciales
- Los presets de layout, como Standard y Reading + Chat, ofrecen configuraciones óptimas según el contexto y apoyan tareas centradas en citas y referencias
- El ancho de los paneles se reajusta dinámicamente según el foco del usuario para minimizar la fricción al cambiar entre herramientas
Problem + Requirements
- El problema central era la sobrecarga de pestañas causada por una experiencia fragmentada entre múltiples herramientas, y el requisito fue integrar en un solo espacio entrada, conversación y resultados
- En la parte de entrada se ubican Source list / Open Source(wide), en la salida Notes list / Open Note(wide), y al centro Chat y Citations
- Las acciones de generación se diseñaron con múltiples puntos de entrada para que el usuario pudiera pasar de inmediato a la creación de resultados sin romper su flujo
Early Sketches
- La estructura actual parece obvia, pero es el resultado de innumerables iteraciones
- Se comparte el registro de exploración de cómo se descubrió la solución final en un boceto sobre una servilleta, después de que se cayeran los papeles en un avión
- El objetivo era establecer una combinación de bloques que satisficiera a la vez un modelo mental claro y una UI fácil de asimilar
Mental Model
- El modelo mental se organiza alrededor de un flujo lineal pero flexible de Inputs → Chat → Outputs
- El usuario incorpora documentos, notas y referencias, y a través de preguntar, organizar y sintetizar genera resultados estructurados como notas, guías de estudio y Audio Overviews
- Este modelo hace manejable la complejidad de las nuevas interacciones de IA al aportar orientación espacial y sentido de etapa
Solution • 3 Panel Structure detalles
- El sistema de paneles responsivo escala con flexibilidad según las necesidades del usuario y mantiene la accesibilidad a fuentes y notas incluso en el ancho mínimo
- El layout Standard ofrece una vista base equilibrada entre fuentes, chat y notas
- Reading + Chat está optimizado para la generación de respuestas basadas en citas, reforzando el flujo de presentación de evidencia
Panel States
- Los estados de panel maximizan la eficiencia del espacio mediante la conservación de iconos esenciales y la reconfiguración por niveles de ancho
- Aunque cambie el contenido dentro del panel, los principios estructurales permanecen fijos, lo que permite responder con flexibilidad a futuras incorporaciones de nuevas herramientas y flujos de trabajo
- Los principios de diseño se resumen en capacidad de crecimiento y resiliencia
Source Panel
- Funciona como la base de todas las fuentes (entradas) proporcionadas por el usuario y como el punto de partida del recorrido de trabajo
- Permite organizar, revisar y cambiar rápidamente entre fuentes, fomentando la interacción con el Chat central
- Incluso en el ancho mínimo, mantiene pistas visuales para evitar la pérdida de contexto
Studio Panel
- Es el espacio donde las entradas se transforman en resultados, encargado de generar, depurar y registrar
- Está diseñado como una vista contenedora capaz de alojar múltiples tipos de salida, como notas, reportes y guías de estudio
- En la versión más reciente se muestran ejemplos de expansión hacia flashcards, quizzes y professional reports
Chat Panel
- Es el eje central de la experiencia, siempre presente y con ajuste automático de tamaño según sea necesario
- Ofrece una interacción de IA confiable mediante un diseño conversacional centrado en citas de fuentes y presentación de evidencia
- Incluso cuando otras herramientas pasan al frente, preserva el contexto de la conversación para minimizar interrupciones en el flujo
User Journey • Annotated Overview
- El recorrido de usuario anotado visualiza la interacción paso a paso de recolección de entradas → comprensión y organización mediante conversación → generación de resultados
- Explica cómo se conectan orgánicamente el cambio de foco entre paneles y las transiciones de estado en cada etapa
- El objetivo es construir una experiencia end-to-end que logre al mismo tiempo mantener el contexto y acelerar el trabajo
Audio Overviews
- Audio Overviews introdujo nuevos paradigmas de interacción, como los patrones de interrupción, desde la idea inicial hasta el prototipo y el lanzamiento
- El valor de la función está en ofrecer una experiencia grounded y de resumen/aprendizaje con un clic basada en fuentes; además, se comparte como detalle que el nombre fue puesto casualmente por el autor
- Es un caso de colaboración cross-functional de un equipo pequeño que logró un ciclo rápido de experimentación y lanzamiento
Brand Identity
- En estrecha colaboración con Google Labs y el equipo central de marca, se definieron rápidamente la identidad de marca y el sistema visual
- Se estableció un lenguaje de diseño capaz de escalar de forma consistente en múltiples activos como color, tipografía, iconos e ilustraciones
- Se enfatiza la alineación entre UX y BI para que la experiencia del producto y el tono de marca transmitan el mismo mensaje
Visual Assets
- Se presentan casos de producción de activos de stack completo, desde el press kit hasta los visuales de lanzamiento
- Activos de alta fidelidad como web hero images, animaciones y key visuals ayudan a clarificar el mensaje y ampliar su alcance
- Al asegurar la consistencia del mensaje con canales externos como el Keyword blog, contribuye a una comunicación ampliada
Key Takeaways from the Journey
- Las lecciones obtenidas al construir Audio Overviews se resumen en crear el producto junto con los usuarios, publicar rápido e iterar, y responder a la demanda de citas inline
- La IA debe ser parte integrada (built-in) de la forma en que se resuelven problemas en un producto AI-native, y el punto clave del diseño es cerrar la brecha entre investigación y tareas de uso real
- Una UI dinámica y consciente del contexto es esencial, y en esta transición Chat funciona como un ancla familiar y también como un puente hacia nuevas experiencias
1 comentarios
Comentarios en Hacker News
Esta publicación da la impresión de estar diseñada de forma excesivamente compleja, como NotebookLM, aunque en esencia es simple; existe la necesidad sencilla de seleccionar archivos para conversar con ellos o recibir resúmenes, pero en la práctica la densidad de información es baja y hay demasiadas tarjetas, botones, secciones e íconos, lo que dificulta llegar al UX central. Quería escuchar la perspectiva del diseñador, pero más bien elementos visuales como el scrolljacking, los carruseles de imágenes y una jerarquía visual innecesaria terminan entorpeciendo la experiencia de uso. Reconozco que tiene cosas interesantes, pero por la UI cuesta enfocarse en lo esencial.
No lo veo de forma negativa; de hecho, es una perspectiva con la que empatizo. Si quieres conversar con archivos, Gemini, ChatGPT y Claude también funcionan bien. El objetivo de este producto experimental era explorar creativamente si podía convertirse en una herramienta verdaderamente basada en fuentes reales. Se hicieron muchos intentos rápidamente según las necesidades de los usuarios, y seguirá evolucionando con base en este tipo de retroalimentación. En el caso de mi sitio web, quise transmitir mejor el proceso de toma de decisiones mediante elementos visuales.
Siento que debe existir una palabra alemana adecuada para describir este fenómeno. A veces se presenta un defecto como si hubiera contribuido al éxito. Lo veo seguido en presentaciones de Big Tech: en realidad algo tuvo éxito a pesar de cierto problema, pero luego lo cuentan como si fuera una anécdota inspiradora, y eso me parece curioso.
Es irónico tener que hacer scroll infinito para explicar un layout de tres paneles que existe desde los años 80.
Se ve limpio, pero en la práctica la experiencia de usuario de NotebookLM no es buena. Sigo usándolo porque el servicio es muy bueno, pero la UI es la parte que menos me gusta.
Al principio pensé que no podía ser tan incómodo, pero al ver algo tan sobre diseñando en la práctica me pareció hasta gracioso.
Este sitio es mi portafolio, y me parece divertido ver las opiniones de distintas personas. El diseño parte de la base de la iteración y la evolución. NotebookLM seguirá cambiando en el futuro. Me considero muy afortunado de haber podido participar desde que este producto estaba en una etapa temprana. Como diseñador, traté de anticipar el futuro de la tecnología y construir una UI acorde con eso. Creo que el equipo de Google Labs se movió de forma realmente rápida y orientada al futuro. Durante un año y medio escuchamos los comentarios de los usuarios, iteramos y fuimos haciendo crecer el producto. Fue una experiencia increíble crear un producto nuevo de 0 a 1, y jamás imaginé que mi portafolio se volvería tan conocido.
Me pregunto si hay límites o normas sobre lo que se puede mostrar públicamente en relación con la IP de Google.
Encontré un bug en el sitio: parece enviar una señal al navegador o a las extensiones como si tuviera activado el modo oscuro. Por eso algunas cosas no funcionan bien aunque en realidad no esté en modo oscuro.
Gracias por todo el esfuerzo. Aunque a veces me queje, es el producto de aprendizaje más atractivo que he probado hasta ahora. Ojalá siga mejorando.
La idea de “patinar hacia el futuro de la tecnología” me resuena mucho. Al final, esto no es una ciencia que salga exactamente según el plan, sino un arte. Es un terreno que requiere ajustes constantes. Imagino que el proyecto fue evolucionando a partir de distintos roles y del feedback de los usuarios. Creo que NotebookLM sacudió el mercado y que va a mejorar aún más, como pasó al inicio con Bard o Gemini, especialmente en la parte de UI/UX.
Uso NotebookLM todos los días. Agradezco la simplicidad del diseño, pero a medida que se agregan funciones surgen problemas para escalar sin romper la UI. Con la reciente incorporación de flashcards y quizzes, el 'Artifacts Button Container' pasó a tener seis botones grandes y una altura de 328px. Usuarios de India con pantallas pequeñas pidieron ayuda en el foro de Discord porque no podían ver sus propias notas. Así que hice un script de Tampermonkey para poder colapsarlo [script para colapsar]. Me dijeron que el equipo lo corregiría pronto, pero debió haberse validado más antes del lanzamiento. Este tipo de problemas los corregí yo mismo con scripts. Lo más raro es la sección de 'notes': te obliga a leer un ensayo de 2000 caracteres en una barra lateral de 360px. Por eso también hice un script para verlo en pantalla completa [script de pantalla completa]. El cuadro de entrada del chat también tiene problemas: las preguntas de seguimiento no funcionan bien y sigue siendo inestable incluso después de seleccionar texto. Podría hablar de esto todo el día, pero creo que es mejor arreglarlo.
No me gusta el UX de NotebookLM. El layout es confuso y los conceptos que comunica la UI no son intuitivos. El poder del backend no se traduce bien al frontend. Aun así, el texto en sí es limpio y transmite bien las inquietudes del autor. No estoy de acuerdo con la conclusión ni con el resultado, pero espero que sigan apareciendo intentos más cuidadosos. En un mercado que cambia tan rápido, no es fácil hacer diseño con verdadera artesanía.
Creo que NotebookLM es un caso de éxito no por su interfaz, sino a pesar de ella. Siendo sincero, el UX es bastante malo. Gran parte del mérito es de los ingenieros de backend. Incluso encontrar una función simple de copiar y pegar texto me tomó bastante tiempo. La edición de texto tampoco es buena. No entiendo por qué no existe un área dedicada de notas en Markdown. Como la mayoría está más acostumbrada a pegar texto que a trabajar con PDFs, también haría falta una estructura de carpetas y archivos. La UI de la app de Notes no es adecuada para editar ni mantener notas.
Nunca he usado NotebookLM, así que me da curiosidad saber si tiene algo claramente mejor que subir archivos a Claude Projects y chatear ahí mismo con ellos. Sé que la función de podcast es distintiva, pero me interesa una comparación de gente que haya usado ambos servicios.
Me gusta NLM por la función de podcast. Últimamente empiezo cada mañana poniendo un podcast de estudio, y la verdad está buenísimo.
Yo pienso igual. Ahora meto material en una carpeta dentro de Claude Code y Codex CLI, y trabajo directamente ahí.
Tiene muchas cosas buenas, como la estructura de tres paneles o el visor de fuentes a la izquierda. Pero hubo varias cosas que me resultaron incómodas. Primero, los tres paneles deberían poder alternarse desde íconos en la barra superior; si no usas chat y notas al mismo tiempo, es un desperdicio de espacio. Segundo, la gran área central debería estar enfocada obligatoriamente en la salida. El chat no es una función tan especial como el resumen de audio, así que podría ir a un lado. Tercero, la densidad de información es demasiado baja y los botones e íconos son grandes y toscos. La IA maneja enormes cantidades de información, así que el espacio en pantalla es crucial, y aquí eso juega en contra. El atractivo de NBLM está en el resumen de audio. El Q&A basado en chat, salvo por las citas, ya viene de base en los LLM grandes. Además, solo usa Gemini Flash, que se siente más como un modelo orientado a búsqueda, así que sería mejor combinarlo con uno orientado a razonamiento.
Subí el archivo de un libro y tuve intercambios útiles con NotebookLM, pero por alguna razón esa conversación no se guarda, así que no puedo volver a ella ni continuarla después. A diferencia de otros servicios de IA como Gemini o GPT, no entiendo por qué aquí el UX/UI parece estar al revés. Además, NotebookLM ni siquiera puede redactar un ensayo a partir del material.
El tamaño de contexto y la función de podcast son buenos, pero no entiendo el UX. El concepto de notas es ambiguo. No sé realmente en qué se diferencian mis notas de las notas de la IA. Puede que tenga que ver con que no encaja con mi forma de trabajar con artículos académicos (PhD in Psy), o tal vez con que ya me acostumbré a elicit.
Las notas ayudan cuando compartes un cuaderno con otra persona. A través de fragmentos puedes ofrecerle de inmediato puntos clave para conversar.
Como investigador en autismo, a mí tampoco me queda claro el concepto de 'notas'. No sé si se supone que deba usarse como una app de notas tipo OneNote. Estudiar interactuando con artículos mediante un LLM sí acelera mucho las cosas, y he probado también el resumen de audio mientras manejo, pero la verdad cuesta que llegue a profundizar en contenido científico realmente complejo.
Para quienes lo usan de forma constante, me da curiosidad: ¿para qué lo usan principalmente? Más allá del resumen de audio, me gustaría saber qué hace mejor que un chat general o la integración de documentos.
Convierto papers de arXiv, comentarios de Hacker News y otros textos largos en podcasts para escucharlos camino al trabajo.
Soy consultor técnico y suelo conocer a los clientes por primera vez después de que se firma el contrato. Meto en NotebookLM las transcripciones de reuniones anteriores y las condiciones del contrato, y le hago preguntas de alto nivel sobre objetivos, riesgos o priorización. Con eso preparo diapositivas para la primera reunión, y más adelante también cargo transcripciones de sesiones de descubrimiento. A partir de eso incluso saco un borrador de informe de evaluación del modelo de gestión. Pero no le muestro al cliente tal cual lo que escribió el LLM; siempre lo reescribo en mi propio estilo. En la empresa usamos oficialmente GSuite, y una ventaja de NotebookLM es que hace bien la curación de fuentes.
Es muy útil para juegos de mesa con reglas complejas, porque en vez de buscar todo manualmente en el reglamento, basta con hacer preguntas y te responde incluso con citas.
Siento que una explicación en video funciona mejor que el audio.
Un amigo lo usa para crear quizzes y flashcards cuando estudia para exámenes universitarios.