- Nhà thiết kế của NotebookLM tóm tắt toàn bộ quá trình thiết kế trải nghiệm người dùng cốt lõi và hệ thống thương hiệu, từ giai đoạn thử nghiệm đến khi phát hành
- Mục tiêu của NotebookLM là thiết lập cấu trúc 3 panel và hệ thống panel phản hồi để kết nối việc đọc, trò chuyện và tạo nội dung trong cùng một không gian nhằm giải quyết tình trạng quá tải tab (tab overwhelm)
- Luồng thông tin được sắp xếp theo mô hình tư duy tường minh là Inputs → Chat → Outputs, qua đó triển khai UX định hướng ngữ cảnh để người dùng không bị mất phương hướng
- Các tính năng như Audio Overviews tích hợp tương tác AI-native vào quy trình làm việc thực tế, bao gồm trích dẫn nguồn và mẫu ngắt quãng (interrupt pattern)
- Kết quả cho thấy một đội ngũ nhỏ nhưng linh hoạt đã xây dựng được khung thiết kế sản phẩm AI-first có thể mở rộng nhất quán từ bản sắc thương hiệu đến tài sản hình ảnh
Architecture
- Dự án chia sẻ quá trình phát triển kiến trúc UI từ giai đoạn thử nghiệm thành một hệ thống ở mức sẵn sàng phát hành, với mục tiêu kết hợp đọc, trò chuyện và tạo nội dung
- Hình ảnh UI Evolution trực quan hóa quá trình giao diện thử nghiệm ban đầu dần hội tụ về cấu trúc 3 panel
- Toàn bộ thiết kế ưu tiên khả năng mở rộng và tính thích ứng, áp dụng nguyên lý grid/panel để cấu trúc không bị phá vỡ ngay cả khi bổ sung công cụ hay chế độ mới
Early Prototype & Notes-driven UI
- Bài viết giới thiệu nỗ lực ban đầu đặt một lớp chat khám phá lên trên canvas lấy ghi chú làm trung tâm
- Nhiều vòng lặp thử nghiệm được thực hiện để tìm ra bố cục giảm tải nhận thức, trong đó ghi chú và hội thoại cùng tồn tại trên một màn hình
- Kết quả là chat được nâng từ công cụ thành một trục của giao diện, rồi trở thành trục cốt lõi của hệ thống panel về sau
3-Panel Structure
- Cấu trúc cuối cùng là 3 panel Source / Chat / Studio(Notes), sử dụng panel phản hồi để bảo đảm khả năng tiếp cận, như giữ lại các biểu tượng cốt lõi ngay cả ở độ rộng nhỏ
- Các preset bố cục như Standard và Reading + Chat cung cấp cấu hình tối ưu theo từng ngữ cảnh, hỗ trợ các tác vụ xoay quanh trích dẫn và tham chiếu
- Độ rộng panel được điều chỉnh động theo điểm tập trung của người dùng nhằm giảm tối đa ma sát khi chuyển đổi giữa các công cụ
Problem + Requirements
- Vấn đề cốt lõi là tình trạng quá tải tab do trải nghiệm phân mảnh khi phải qua lại giữa nhiều công cụ, nên yêu cầu được xác định là hợp nhất đầu vào, hội thoại và đầu ra trong một không gian
- Ở phía đầu vào là Source list / Open Source(wide), ở phía đầu ra là Notes list / Open Note(wide), còn trung tâm là Chat và Citations
- Hành vi tạo nội dung được thiết kế với nhiều điểm vào, để người dùng có thể tiếp tục sang soạn thảo đầu ra ngay mà không làm gián đoạn luồng làm việc
Early Sketches
- Cấu trúc hiện tại trông có vẻ hiển nhiên, nhưng thực tế là kết quả của vô số vòng lặp
- Bài viết chia sẻ hành trình khám phá rằng lời giải cuối cùng được tìm ra bằng bản phác trên khăn giấy khi giấy bị rơi mất trên máy bay
- Mục tiêu là xác lập cách kết hợp các khối để đồng thời thỏa mãn mô hình tư duy rõ ràng và UI dễ tiếp nhận
Mental Model
- Mô hình tư duy được xây dựng xoay quanh luồng tuyến tính nhưng linh hoạt là Inputs → Chat → Outputs
- Người dùng đưa vào tài liệu, ghi chú và tài liệu tham khảo; sau đó qua các bước đặt câu hỏi, sắp xếp và tổng hợp để tạo ra các đầu ra có cấu trúc như ghi chú, study guide, Audio Overviews
- Mô hình này giúp biến độ phức tạp của các tương tác AI mới thành thứ có thể tiếp nhận được nhờ cảm nhận về vị trí và từng giai đoạn
Solution • 3 Panel Structure chi tiết
- Hệ thống panel phản hồi có thể co giãn linh hoạt theo nhu cầu của người dùng, đồng thời vẫn giữ khả năng tiếp cận nguồn và ghi chú ngay cả ở độ rộng tối thiểu
- Bố cục Standard cung cấp chế độ xem mặc định cân bằng giữa nguồn, chat và ghi chú
- Reading + Chat là cấu hình tối ưu cho tạo phản hồi dựa trên trích dẫn, giúp tăng cường luồng trình bày căn cứ
Panel States
- Trạng thái panel tối đa hóa hiệu quả không gian bằng cách giữ lại biểu tượng của các thành phần thiết yếu và tái cấu trúc theo từng mức độ rộng
- Dù nội dung trong panel thay đổi, nguyên tắc cấu trúc vẫn cố định, cho phép thích ứng linh hoạt khi thêm công cụ và workflow mới trong tương lai
- Các nguyên tắc thiết kế có thể được tóm gọn là khả năng tăng trưởng và tính bền bỉ phục hồi
Source Panel
- Đây là điểm tập kết của mọi nguồn (đầu vào) do người dùng cung cấp, đóng vai trò điểm khởi đầu của hành trình làm việc
- Việc tổ chức, xem và chuyển đổi giữa các nguồn diễn ra nhanh chóng, đồng thời thúc đẩy tương tác với Chat ở trung tâm
- Ngay cả ở độ rộng tối thiểu, panel vẫn duy trì các gợi ý thị giác để tránh mất ngữ cảnh
Studio Panel
- Đây là không gian nơi đầu vào được chuyển hóa thành đầu ra, phụ trách tạo mới, tinh chỉnh và ghi lại
- Nó được thiết kế như một container view có thể chứa nhiều kiểu đầu ra như ghi chú, báo cáo, study guide
- Ở bản phát hành mới nhất, các ví dụ mở rộng như flashcards, quizzes, professional reports cũng được giới thiệu
Chat Panel
- Đây là trục cốt lõi của trải nghiệm, luôn hiện diện và tự động điều chỉnh kích thước khi cần
- Thiết kế hội thoại lấy trích dẫn nguồn và trình bày căn cứ làm trung tâm để mang lại tương tác AI đáng tin cậy
- Ngay cả khi công cụ khác lên tuyến đầu, panel này vẫn giữ nguyên ngữ cảnh hội thoại, giúp giảm tối đa sự đứt đoạn trong luồng làm việc
User Journey • Annotated Overview
- Hành trình người dùng được chú thích trực quan hóa tương tác theo từng bước: thu thập đầu vào → hiểu và sắp xếp qua hội thoại → tạo đầu ra
- Bài viết giải thích cách dịch chuyển điểm tập trung giữa các panel và chuyển trạng thái được kết nối hữu cơ ở từng bước
- Mục tiêu là xây dựng một trải nghiệm end-to-end vừa giữ được ngữ cảnh vừa bảo đảm tốc độ làm việc
Audio Overviews
- Audio Overviews đưa vào những mô hình tương tác mới như interrupt pattern trong suốt quá trình từ ý tưởng, prototype đến phát hành
- Giá trị của tính năng nằm ở khả năng dựa trên nguồn (grounded) và tóm tắt/học tập chỉ với một cú nhấp, đồng thời bài viết cũng chia sẻ hậu trường rằng cái tên này tình cờ do tác giả đặt ra
- Đây là ví dụ cho việc hợp tác liên chức năng trong đội ngũ nhỏ để đạt được chu kỳ thử nghiệm và phát hành nhanh
Brand Identity
- Thông qua hợp tác chặt chẽ với Google Labs và đội thương hiệu trung tâm, nhóm đã nhanh chóng định hình bản sắc thương hiệu và hệ thống hình ảnh
- Màu sắc, typography, icon và illustration cùng các multi-asset khác được chuẩn hóa thành một ngôn ngữ thiết kế có thể mở rộng nhất quán
- Bài viết nhấn mạnh việc căn chỉnh UX và BI để trải nghiệm sản phẩm và tông thương hiệu cùng truyền tải một thông điệp thống nhất
Visual Assets
- Bài viết đưa ra ví dụ về việc sản xuất full-stack asset, từ press kit đến hình ảnh ra mắt
- Các web hero image, animation, key visual và những tài sản có độ hoàn thiện cao giúp làm rõ thông điệp và mở rộng độ phủ
- Việc bảo đảm tính nhất quán thông điệp với các kênh bên ngoài như Keyword blog cũng góp phần cho giao tiếp mở rộng
Key Takeaways from the Journey
- Những bài học từ trải nghiệm xây dựng Audio Overviews được tóm gọn ở việc xây sản phẩm cùng người dùng, công khai sớm và lặp nhanh, cùng với việc đáp ứng nhu cầu trích dẫn nội tuyến
- AI phải là sản phẩm AI-native giải quyết vấn đề theo cách Built-in, và điều cốt lõi là thiết kế để lấp khoảng cách giữa nghiên cứu và bài toán sử dụng thực tế
- UI động và nhận biết ngữ cảnh là yếu tố quan trọng; trong giai đoạn chuyển tiếp, Chat đóng vai trò mỏ neo quen thuộc đồng thời là cây cầu dẫn sang trải nghiệm mới
1 bình luận
Ý kiến trên Hacker News
Bài viết này tạo cảm giác giống như NotebookLM: về bản chất thì đơn giản nhưng lại bị thiết kế quá phức tạp. Nhu cầu thực ra chỉ là chọn tệp rồi trò chuyện hoặc nhận tóm tắt, nhưng sản phẩm lại có mật độ thông tin thấp, quá nhiều thẻ, nút, mục và biểu tượng nên khó đi thẳng vào UX cốt lõi. Tôi muốn nghe suy nghĩ của nhà thiết kế, nhưng ngược lại các yếu tố thị giác như scroll-jacking, carousel ảnh và phân cấp hình ảnh không cần thiết lại cản trở trải nghiệm sử dụng. Tôi công nhận nó có những điểm hay, nhưng vì UI mà khó tập trung vào bản chất.
Đây không hẳn là góc nhìn tiêu cực mà là một quan điểm rất dễ đồng cảm. Nếu chỉ muốn trò chuyện với tệp thì Gemini, ChatGPT và Claude cũng làm tốt. Mục tiêu của sản phẩm mang tính thử nghiệm này là suy nghĩ một cách sáng tạo xem nó có thể trở thành công cụ thực sự dựa trên nguồn gốc xác thực hay không. Chúng tôi đã nhanh chóng thử nhiều hướng theo nhu cầu người dùng và sẽ tiếp tục tiến hóa dựa trên những phản hồi như thế này. Còn với website của tôi, tôi muốn truyền tải quá trình ra quyết định tốt hơn thông qua các yếu tố trực quan.
Có lẽ phải có một từ tiếng Đức phù hợp để mô tả hiện tượng này. Tôi từng thấy kiểu đóng gói nhược điểm như thể nó đã góp phần tạo nên thành công. Điều này hay xuất hiện trong các bài công bố của Big Tech: thực ra là họ thành công bất chấp một số vấn đề, nhưng lại kể nó như một giai thoại đẹp, điều đó khá thú vị.
Thật mỉa mai khi phải cuộn bất tận chỉ để giải thích bố cục 3 khung đã tồn tại từ những năm 80.
Trông có vẻ gọn gàng, nhưng trải nghiệm người dùng thực tế của NotebookLM lại không tốt lắm. Dịch vụ quá tốt nên tôi vẫn tiếp tục dùng, nhưng UI là phần tôi không thích nhất.
Ban đầu tôi nghĩ cùng lắm thì nó sẽ bất tiện đến mức nào, nhưng khi thật sự nhìn thấy thứ được thiết kế quá tay như thế này thì lại thấy khá thú vị.
Đây là portfolio của tôi, và thật thú vị khi đọc ý kiến của nhiều người. Thiết kế vốn dĩ dựa trên lặp lại và tiến hóa. NotebookLM rồi cũng sẽ tiếp tục thay đổi. Tôi thấy mình thật may mắn khi được tham gia từ lúc sản phẩm còn ở giai đoạn đầu. Với tư cách nhà thiết kế, tôi đã cố xây dựng UI phù hợp bằng cách dự đoán tương lai của công nghệ. Tôi nghĩ đội Google Labs thực sự làm việc rất nhanh và có tầm nhìn tương lai. Trong suốt 1 năm rưỡi, chúng tôi lắng nghe phản hồi người dùng, lặp lại và phát triển sản phẩm. Đây là một trải nghiệm tuyệt vời khi được tạo ra một sản phẩm mới từ 0 đến 1 trong đời. Tôi chưa từng tưởng tượng portfolio của mình lại nổi tiếng đến vậy.
Tôi tò mò không biết có những giới hạn hay quy định nào liên quan đến IP của Google về những gì có thể công khai sử dụng hay không.
Tôi phát hiện một lỗi trên site: nó gửi tín hiệu tới trình duyệt hoặc extension như thể dark mode đang được áp dụng. Vì vậy dù thực tế không phải dark mode, mọi thứ vẫn hoạt động sai.
Cảm ơn vì công sức của bạn. Dù đôi lúc tôi có phàn nàn, đây vẫn là sản phẩm học tập hấp dẫn nhất tôi từng trải nghiệm. Mong nó tiếp tục phát triển.
Tôi rất đồng cảm với câu “trượt băng theo tương lai của công nghệ”. Rốt cuộc việc này không phải một môn khoa học luôn diễn ra đúng kế hoạch mà là một nghệ thuật, một lĩnh vực cần được điều chỉnh liên tục. Tôi nghĩ dự án hẳn đã tiến hóa dựa trên nhiều vai trò khác nhau và phản hồi của người dùng. NotebookLM đã tạo tác động lớn lên thị trường, và tôi tin nó sẽ còn tốt lên như Bard hay Gemini thời kỳ đầu, đặc biệt là ở khía cạnh UI/UX.
Tôi dùng NotebookLM mỗi ngày. Tôi biết ơn sự đơn giản trong thiết kế, nhưng khi tính năng được thêm dần thì xuất hiện vấn đề trong việc mở rộng mà vẫn giữ được UI. Gần đây flashcard và quiz được thêm vào, khiến
Artifacts Button Containertrở thành 6 nút lớn với chiều cao 328px. Người dùng màn hình nhỏ ở Ấn Độ không thể xem ghi chú của họ nên đã xin trợ giúp trên diễn đàn Discord. Vì thế tôi viết script Tampermonkey để có thể thu gọn nó [script thu gọn]. Tôi nghe nói đội ngũ sắp sửa nó, nhưng đáng ra cần kiểm chứng nhiều hơn trước khi phát hành. Những vấn đề như vậy tôi đã tự sửa bằng script, và điều kỳ lạ nhất là phầnnotes: nó bắt bạn đọc một bài luận 2000 ký tự trong thanh bên rộng 360px. Vì vậy tôi cũng tạo script để xem toàn màn hình [script toàn màn hình]. Ô nhập chat cũng có vấn đề: câu hỏi tiếp theo không hoạt động đúng và sau khi chọn thì vẫn thiếu ổn định. Tôi có thể nói cả ngày về những chuyện này, nhưng tôi nghĩ sửa chúng còn hơn.Tôi không thích UX của NotebookLM. Bố cục gây rối và các khái niệm mà UI truyền đạt không trực quan. Sức mạnh của backend chưa được chuyển tải đúng mức sang frontend. Tuy vậy, bản thân bài viết rất gọn gàng và cho thấy rõ tác giả đã suy nghĩ nhiều. Tôi không đồng ý với kết luận và kết quả, nhưng vẫn mong sẽ có thêm những thử nghiệm thận trọng như vậy. Trong bối cảnh thị trường thay đổi nhanh, thiết kế giàu tinh thần thủ công không hề dễ.
Tôi nghĩ NotebookLM là trường hợp thành công không phải nhờ giao diện mà là bất chấp giao diện đó. Thành thật mà nói UX rất tệ. Công lớn thuộc về các kỹ sư backend. Ngay cả việc tìm chỗ để copy/paste văn bản đơn giản cũng mất rất lâu. Việc chỉnh sửa văn bản cũng không tốt. Tôi không hiểu vì sao lại không có một khu vực ghi chú Markdown chuyên dụng. Đa số người dùng quen dán văn bản hơn là dùng PDF, nên cũng cần cấu trúc thư mục và tệp. UI của ứng dụng Notes không phù hợp để chỉnh sửa và duy trì ghi chú.
Tôi chưa từng dùng NotebookLM nên khá tò mò. Nó có điểm gì tốt hơn hẳn so với việc tải tệp lên Claude Projects rồi chat ở đó không? Tôi biết tính năng podcast là điểm độc đáo, nhưng muốn nghe so sánh từ những người đã dùng cả hai dịch vụ.
Tôi thích NLM vì tính năng podcast. Gần đây sáng nào tôi cũng mở podcast học tập để bắt đầu ngày mới, và điều đó thực sự rất hay.
Tôi cũng nghĩ vậy. Giờ tôi chỉ bỏ tài liệu vào thư mục trong Claude Code và Codex CLI rồi làm việc trực tiếp trong đó.
Có nhiều điểm tốt, chẳng hạn cấu trúc 3 khung và trình xem nguồn ở bên trái. Nhưng tôi thấy bất tiện ở những điểm sau. Thứ nhất, bố cục 3 khung nên có thể chuyển bằng biểu tượng trên thanh trên cùng; nếu không dùng chat và ghi chú cùng lúc thì đó là lãng phí không gian. Thứ hai, vùng lớn ở giữa nhất định phải tập trung vào đầu ra. Chat không phải tính năng đặc biệt đến mức như audio overview, nên có thể đưa sang bên. Thứ ba, mật độ thông tin quá thấp, các nút và biểu tượng quá lớn và nặng nề. AI xử lý lượng thông tin khổng lồ nên không gian màn hình rất quan trọng, và điều này là một bất lợi. Sức hấp dẫn của NBLM nằm ở audio overview. Hỏi đáp dựa trên chat thì ngoài việc có trích dẫn ra, các LLM lớn đều mặc định cung cấp. Ngoài ra, nó chỉ dùng Gemini Flash, nên mang cảm giác giống mô hình thiên về tìm kiếm; có lẽ sẽ tốt hơn nếu kết hợp với một mô hình thiên về suy luận.
Tôi đã tải lên một cuốn sách và trò chuyện với NotebookLM, có được nhiều nội dung hữu ích, nhưng vì lý do nào đó cuộc trò chuyện đó không được lưu nên tôi không thể quay lại tìm hay tiếp tục nó. Không giống các dịch vụ AI khác như Gemini hay GPT, tôi không hiểu vì sao UX/UI của NotebookLM lại đi ngược như vậy. Ngoài ra, NotebookLM cũng không thể giúp tôi viết bài luận dựa trên tài liệu.
Kích thước ngữ cảnh và podcast thì tốt, nhưng UX thì tôi không hiểu nổi. Khái niệm “ghi chú” rất mơ hồ. Tôi không biết ghi chú của tôi khác gì với ghi chú của AI. Có thể là vì nó không hợp với cách tôi làm nghiên cứu học thuật (PhD ngành Tâm lý học), hoặc vì tôi đã quen với elicit.
Ghi chú hữu ích khi bạn chia sẻ notebook với người khác. Qua các snippet, bạn có thể cung cấp ngay những điểm trao đổi cốt lõi.
Là một nhà nghiên cứu tự kỷ, tôi cũng không hiểu khái niệm “ghi chú”. Không rõ có phải dùng nó như một ứng dụng ghi chú kiểu OneNote không. Khi tương tác với bài báo qua LLM để học thì đúng là nhanh hơn hẳn. Tôi cũng đã dùng audio overview khi lái xe, nhưng thật sự khó để nó đào sâu tới mức nội dung khoa học chuyên sâu.
Tôi muốn hỏi những người dùng thường xuyên: chủ yếu các bạn dùng nó vào việc gì? Ngoài audio overview, nó có điểm gì tốt hơn chat thông thường hoặc việc gom tài liệu lại không?
Tôi biến các bài báo arXiv, bình luận Hacker News và nhiều văn bản dài khác thành podcast để nghe lúc đi làm và về nhà.
Tôi là tư vấn kỹ thuật, thường gặp khách hàng lần đầu sau khi ký hợp đồng. Tôi đưa bản ghi cuộc họp trước đó và các điều khoản hợp đồng vào NotebookLM rồi hỏi các câu ở mức high-level như mục tiêu, rủi ro hay cách xác định ưu tiên. Dựa trên đó tôi soạn slide cho buổi gặp đầu tiên, rồi sau này lại đưa thêm bản ghi của các buổi discovery session. Từ đó tôi còn rút ra được cả bản nháp báo cáo đánh giá phương thức quản lý. Tuy nhiên tôi không bao giờ đưa nguyên văn những gì LLM viết cho khách hàng mà luôn viết lại theo phong cách của mình. Công ty tôi chính thức dùng GSuite, và ưu điểm của NotebookLM là nó làm rất tốt phần tuyển chọn nguồn.
Nó cực kỳ hữu ích để học các board game có luật phức tạp, vì bạn chỉ cần hỏi thay vì phải lục từng chỗ trong rulebook, lại còn có cả trích dẫn kèm theo câu trả lời.
Tôi thấy phần giải thích bằng video còn hay hơn audio.
Bạn tôi dùng nó để tạo quiz và flashcard khi ôn thi đại học.