- Perancang NotebookLM merangkum seluruh proses dari tahap eksperimen hingga peluncuran dalam merancang pengalaman pengguna inti dan sistem merek
- Tujuan NotebookLM adalah membangun struktur 3 panel dan sistem panel responsif yang menghubungkan aktivitas membaca, berdialog, dan membuat dalam satu ruang untuk mengatasi kelebihan tab (tab overwhelm)
- Alur informasi dirapikan ke dalam model mental eksplisit berupa Inputs → Chat → Outputs untuk mewujudkan UX berorientasi konteks agar pengguna tidak kehilangan orientasi
- Fitur seperti Audio Overviews mengintegrasikan interaksi native AI ke dalam alur kerja yang realistis, termasuk kutipan sumber dan pola interupsi
- Pada akhirnya, poin pentingnya adalah tim kecil yang lincah berhasil membangun kerangka desain produk AI-first yang dapat diperluas secara konsisten, dari identitas merek hingga aset visual
Architecture
- Proyek ini membagikan proses evolusi arsitektur UI dari tahap eksperimen menjadi sistem setingkat peluncuran, dengan tujuan menggabungkan membaca, berdialog, dan membuat
- Gambar UI Evolution memvisualisasikan perubahan antarmuka eksperimen awal yang secara bertahap mengerucut ke struktur 3 panel
- Secara keseluruhan, desain memprioritaskan skalabilitas dan adaptabilitas, dengan mengadopsi prinsip grid/panel agar struktur tidak rusak meski alat dan mode baru ditambahkan
Early Prototype & Notes-driven UI
- Diperkenalkan upaya awal untuk menempatkan overlay chat eksploratif di atas kanvas yang berpusat pada catatan pada fase awal bergabung ke proyek
- Banyak eksperimen berulang dilakukan untuk menemukan tata letak yang mengurangi beban kognitif, sambil membiarkan catatan dan percakapan hidup berdampingan dalam satu layar
- Hasilnya, chat naik kelas dari sekadar alat menjadi salah satu sumbu tampilan, dan kemudian menjadi sumbu inti dari sistem panel
3-Panel Structure
- Struktur akhirnya berupa panel Source / Chat / Studio(Notes) yang terbagi tiga, dengan panel responsif yang tetap menjaga aksesibilitas seperti mempertahankan ikon inti bahkan pada lebar sempit
- Preset tata letak seperti Standard dan Reading + Chat menyediakan konfigurasi optimal sesuai situasi untuk mendukung pekerjaan yang berpusat pada kutipan dan referensi
- Lebar panel disesuaikan secara dinamis mengikuti fokus pengguna untuk meminimalkan friksi saat berpindah antaralat
Problem + Requirements
- Masalah utamanya adalah kelebihan tab akibat pengalaman yang terfragmentasi karena harus berpindah-pindah alat, sehingga dibutuhkan integrasi input, percakapan, dan keluaran dalam satu ruang
- Di sisi input ada Source list / Open Source(wide), di sisi output ada Notes list / Open Note(wide), dan di tengah ditempatkan Chat dan Citations
- Aktivitas pembuatan dirancang dengan banyak titik masuk agar pengguna dapat langsung melanjutkan ke penulisan keluaran tanpa memutus alur
Early Sketches
- Struktur saat ini mungkin terlihat jelas, tetapi sebenarnya merupakan hasil dari iterasi yang tak terhitung jumlahnya
- Dibagikan catatan eksplorasi tentang bagaimana solusi akhir ditemukan lewat sketsa di serbet setelah kertas jatuh saat berada di pesawat
- Tujuannya adalah membangun cara menggabungkan blok yang sekaligus memenuhi model mental yang jelas dan UI yang mudah dicerna
Mental Model
- Model mental ini berpusat pada alur linear namun fleksibel: Inputs → Chat → Outputs
- Pengguna membawa dokumen, catatan, dan referensi; lalu melalui proses bertanya, merangkum, dan mensintesis untuk menghasilkan keluaran terstruktur seperti catatan, panduan belajar, dan Audio Overviews
- Model ini membuat kompleksitas interaksi AI yang baru menjadi lebih mudah dipahami melalui rasa posisi dan rasa tahapan
Solution • 3 Panel Structure Detail
- Sistem panel responsif dapat berskala secara fleksibel sesuai kebutuhan pengguna, sambil mempertahankan aksesibilitas sumber dan catatan bahkan pada lebar minimum
- Tata letak Standard menyediakan tampilan dasar yang seimbang untuk sumber, chat, dan catatan
- Reading + Chat adalah konfigurasi yang dioptimalkan untuk menghasilkan jawaban berbasis kutipan, sehingga memperkuat alur penyajian dasar rujukan
Panel States
- Status panel memaksimalkan efisiensi ruang dengan mempertahankan ikon elemen penting dan menyusun ulang berdasarkan tingkat lebar
- Meski konten di dalam panel berubah, prinsip strukturnya tetap, sehingga dapat merespons secara lentur terhadap penambahan alat dan workflow baru di masa depan
- Prinsip desainnya diringkas sebagai kemampuan untuk tumbuh dan ketahanan
Source Panel
- Berfungsi sebagai pusat semua sumber (input) yang diberikan pengguna, sekaligus menjadi titik awal perjalanan kerja
- Pengorganisasian, peninjauan, dan perpindahan sumber berlangsung cepat dan mendorong interaksi dengan Chat di tengah
- Bahkan pada lebar minimum, petunjuk visual tetap dipertahankan agar konteks tidak hilang
Studio Panel
- Ini adalah ruang tempat input diubah menjadi keluaran, yang menangani pembuatan, pemurnian, dan pencatatan
- Dirancang sebagai tampilan berbentuk kontainer yang menampung berbagai tipe output seperti catatan, laporan, dan panduan belajar
- Pada rilis terbaru, diperkenalkan contoh perluasan ke flashcards, quizzes, professional reports
Chat Panel
- Sebagai sumbu inti dari pengalaman, panel ini selalu ada dan akan menyesuaikan ukuran secara otomatis sesuai kebutuhan
- Melalui desain percakapan yang berfokus pada kutipan sumber dan penyajian dasar rujukan, panel ini menghadirkan interaksi AI yang tepercaya
- Bahkan ketika alat lain tampil dominan, konteks percakapan tetap dipertahankan untuk meminimalkan putusnya alur
User Journey • Annotated Overview
- Perjalanan pengguna beranotasi memvisualisasikan interaksi bertahap dari mengumpulkan input → memahami dan merapikan lewat percakapan → membuat keluaran
- Dijelaskan bagaimana perpindahan fokus antarpanel dan transisi status saling terhubung secara organik di setiap tahap
- Tujuannya adalah membangun pengalaman end-to-end yang sekaligus menjaga konteks dan kecepatan kerja
Audio Overviews
- Audio Overviews memperkenalkan paradigma interaksi baru seperti pola interupsi dalam proses dari ide, prototipe, hingga peluncuran
- Nilai guna fitur ini terletak pada ringkasan/pembelajaran sekali klik yang berbasis sumber (grounded), dan dibagikan juga cerita di balik layar bahwa namanya kebetulan diberi oleh penulis
- Ini menjadi contoh pencapaian siklus eksperimen-peluncuran yang cepat melalui kolaborasi tim lintas fungsi berskala kecil
Brand Identity
- Melalui kolaborasi erat dengan Google Labs dan tim merek pusat, identitas merek dan sistem visual didefinisikan dengan cepat
- Bahasa desain dibangun agar dapat memperluas beragam aset seperti warna, tipografi, ikon, dan ilustrasi secara konsisten
- Ditekankan penyelarasan UX dan BI agar pengalaman produk dan tone merek menyampaikan pesan yang sama
Visual Assets
- Diperlihatkan contoh pembuatan aset full-stack mulai dari press kit hingga visual peluncuran
- Gambar hero web, animasi, dan key visual sebagai aset berfidelitas tinggi membantu memperjelas pesan dan memperluas jangkauan
- Dengan menjaga konsistensi pesan bersama kanal eksternal seperti Keyword blog, upaya ini berkontribusi pada komunikasi yang dapat diskalakan
Key Takeaways from the Journey
- Pelajaran dari pengalaman membangun Audio Overviews dirangkum sebagai pentingnya membangun produk bersama pengguna, merilis cepat dan beriterasi, serta merespons kebutuhan kutipan inline
- AI harus menjadi bagian bawaan (Built-in) dalam produk yang memecahkan masalah secara AI-native, dan kuncinya adalah desain yang menjembatani kesenjangan antara riset dan tugas penggunaan nyata
- UI yang dinamis dan sadar konteks itu penting, dan pada masa transisi Chat berperan sebagai jangkar yang familier sekaligus jembatan menuju pengalaman baru
1 komentar
Komentar Hacker News
Postingan ini terasa seperti NotebookLM: pada dasarnya sederhana, tetapi didesain terlalu rumit; kebutuhan intinya cuma ingin memilih file lalu mengobrol atau mendapat ringkasan, tetapi kenyataannya densitas informasinya rendah dan ada terlalu banyak kartu, tombol, seksi, serta ikon sehingga sulit masuk ke UX inti. Tadinya ingin mendengar pemikiran desainer, tetapi justru elemen visual seperti scroll-jacking, image carousel, dan hierarki visual yang tidak perlu malah mengganggu pengalaman penggunaan. Saya akui ada hal-hal keren di sini, tetapi UI membuat sulit fokus pada esensinya.
Ini bukan pandangan yang negatif, justru cukup bisa dipahami. Kalau ingin mengobrol dengan file, Gemini, ChatGPT, dan Claude juga sudah bekerja dengan baik. Tujuan produk eksperimental ini adalah berpikir kreatif apakah ia bisa menjadi alat yang benar-benar berbasis sumber nyata. Kami cepat mencoba banyak hal sesuai kebutuhan pengguna, dan ke depannya juga akan terus berevolusi berdasarkan masukan seperti ini. Untuk situs saya sendiri, saya ingin menyampaikan proses pengambilan keputusan dengan lebih baik lewat elemen visual.
Rasanya pasti ada istilah bahasa Jerman yang pas untuk menjelaskan fenomena ini. Kadang saya melihat kekurangan dibingkai seolah-olah ikut berkontribusi pada kesuksesan. Ini sering terlihat di presentasi big tech; padahal sebenarnya itu sukses terlepas dari masalah yang ada, tetapi diceritakan seperti kisah inspiratif, dan itu terasa lucu.
Ada ironi ketika harus melakukan scroll tanpa akhir hanya untuk menjelaskan layout 3 panel yang sudah ada sejak era 80-an.
Kelihatan rapi, tetapi pengalaman pengguna NotebookLM sebenarnya kurang bagus. Layanannya begitu bagus sampai saya tetap memakainya, tetapi UI adalah bagian yang paling tidak saya sukai.
Awalnya saya berpikir, seberapa tidak nyamannya sih, tetapi setelah melihat desain yang berlebihan seperti ini secara langsung, malah terasa lucu.
Situs ini adalah portofolio saya, dan menarik melihat pendapat banyak orang. Desain pada dasarnya mengandaikan iterasi dan evolusi. NotebookLM juga akan terus berubah ke depan. Saya merasa sangat beruntung bisa ikut terlibat sejak produk ini masih tahap awal. Sebagai desainer, saya mencoba membangun UI yang sesuai sambil memprediksi masa depan teknologi. Menurut saya tim Google Labs bergerak sangat cepat dan visioner. Selama satu setengah tahun kami mendengarkan umpan balik pengguna, melakukan iterasi, dan menumbuhkan produknya. Ini pengalaman luar biasa bisa membuat produk baru dari 0 ke 1 dalam hidup saya. Saya sama sekali tidak menyangka portofolio saya akan menjadi seterkenal ini.
Saya penasaran apakah ada batasan atau aturan terkait IP Google untuk hal-hal yang boleh dipublikasikan secara terbuka.
Saya menemukan bug di situsnya: ada masalah yang membuat sinyal dikirim ke browser atau extension seolah dark mode sedang diterapkan. Akibatnya, meski sebenarnya bukan dark mode, beberapa hal jadi tidak berfungsi dengan benar.
Terima kasih atas kerja kerasnya. Meski saya kadang mengeluh, ini tetap produk belajar paling menarik yang pernah saya pakai sejauh ini. Semoga terus berkembang.
Ungkapan “skating to where the technology is going” sangat mengena buat saya. Pada akhirnya pekerjaan seperti ini bukan sains yang berjalan persis sesuai rencana, melainkan seni. Ini wilayah yang butuh penyesuaian terus-menerus. Saya rasa proyek ini pasti berevolusi berdasarkan berbagai peran dan umpan balik pengguna. NotebookLM sudah mengguncang pasar, dan saya yakin akan jadi lebih baik lagi seperti Bard atau Gemini pada masa awalnya, terutama dari sisi UI/UX.
Saya memakai NotebookLM setiap hari. Saya menghargai kesederhanaan desainnya, tetapi saat fitur terus bertambah, muncul masalah dalam mempertahankan UI sambil memperluasnya. Baru-baru ini flashcard dan kuis ditambahkan, dan 'Artifacts Button Container' menjadi setinggi 328px dengan 6 tombol besar. Pengguna layar kecil di India sampai meminta bantuan di forum Discord karena tidak bisa melihat catatan mereka sendiri. Jadi saya membuat skrip Tampermonkey agar bisa dilipat [skrip lipat]. Katanya tim akan segera memperbaikinya, tetapi seharusnya perlu validasi lebih banyak sebelum dirilis. Masalah seperti ini saya perbaiki sendiri dengan skrip, dan yang paling aneh adalah 'notes', karena pengguna dipaksa membaca esai 2000 karakter di sidebar selebar 360px. Jadi saya juga membuat skrip untuk melihatnya dalam mode layar penuh [skrip layar penuh]. Kotak input chat juga bermasalah: pertanyaan lanjutan tidak bekerja dengan baik dan tetap tidak stabil bahkan setelah dipilih. Saya bisa membicarakan ini seharian, tetapi rasanya lebih baik langsung memperbaikinya.
Saya tidak suka UX NotebookLM. Layout-nya membingungkan, dan konsep yang disampaikan UI-nya tidak intuitif. Kekuatan backend-nya tidak benar-benar tersalur ke frontend. Tetapi tulisannya sendiri rapi dan terasa jelas bahwa penulis benar-benar memikirkannya. Saya tidak setuju dengan kesimpulan dan hasilnya, tetapi saya berharap akan terus muncul upaya yang lebih hati-hati. Di tengah perubahan pasar yang cepat, desain dengan craftsmanship memang tidak mudah.
Menurut saya NotebookLM adalah kasus yang sukses bukan karena antarmukanya, tetapi terlepas dari itu. Sejujurnya UX-nya sangat buruk. Kredit besar harus diberikan kepada engineer backend. Bahkan untuk menemukan fungsi copy/paste teks yang sederhana saja butuh waktu lama. Pengeditan teks juga kurang bagus. Saya tidak mengerti kenapa tidak ada area catatan Markdown khusus. Kebanyakan orang lebih terbiasa menempel teks daripada PDF, jadi struktur folder dan file juga dibutuhkan. UI aplikasi Notes tidak cocok untuk mengedit dan memelihara catatan.
Saya belum pernah memakai NotebookLM, jadi penasaran apakah ada hal yang secara khusus lebih baik dibanding mengunggah file ke Claude Projects lalu mengobrol di sana. Saya tahu fitur podcast-nya unik, tetapi saya ingin mendengar perbandingan dari orang yang pernah memakai keduanya.
Saya suka NLM karena fitur podcast-nya. Belakangan ini saya memulai hari dengan memutar podcast untuk belajar setiap pagi, dan itu benar-benar bagus.
Saya juga berpikir begitu. Sekarang saya memasukkan bahan ke folder di Claude Code dan Codex CLI lalu langsung bekerja dari sana.
Ada banyak bagian yang bagus, misalnya struktur 3 panel dan source viewer di sebelah kiri. Tetapi ada beberapa hal yang terasa tidak nyaman. Pertama, 3 panel seharusnya bisa diganti lewat ikon di top bar, dan jika chat dan notes tidak dipakai bersamaan, itu hanya membuang ruang. Kedua, area besar di tengah seharusnya benar-benar fokus pada output. Chat bukan fitur yang seistimewa audio overview, jadi bisa dipindah ke samping. Ketiga, densitas informasinya terlalu rendah, dan tombol serta ikonnya besar dan terasa berat. AI menangani informasi dalam jumlah besar, jadi ruang layar itu penting, dan ini justru merugikan di situ. Daya tarik NBLM ada pada audio overview. Q&A berbasis chat, selain kutipan, pada dasarnya sudah tersedia di semua LLM besar. Selain itu, ia hanya memakai Gemini Flash, dan kesannya seperti model untuk pencarian, jadi sepertinya akan lebih bagus jika dipadukan dengan model penalaran.
Saya pernah mengunggah file buku dan berdialog dengan NotebookLM sambil membahas hal-hal yang bermanfaat, tetapi entah kenapa percakapan itu tidak tersimpan sehingga saya tidak bisa masuk lagi atau melanjutkannya nanti. Berbeda dengan layanan AI lain (Gemini, GPT), saya tidak mengerti kenapa UX/UI-nya justru dibuat terbalik. Dan NotebookLM juga tidak bisa membantu menulis esai dari materi yang diberikan.
Ukuran konteks dan fitur podcast-nya bagus, tetapi UX-nya sulit dipahami. Konsep note juga tidak jelas. Saya tidak mengerti sebenarnya apa bedanya catatan saya dan catatan AI. Mungkin karena tidak cocok dengan cara kerja riset saya (PhD in Psy), atau mungkin karena saya sudah terbiasa dengan elicit.
Notes membantu saat Anda membagikan notebook kepada orang lain. Melalui snippet, Anda bisa langsung memberi titik awal percakapan yang penting.
Sebagai peneliti autisme, saya juga tidak paham konsep 'notes' ini. Apakah ini seharusnya dipakai seperti aplikasi catatan semacam OneNote? Kalau belajar dengan berinteraksi dengan paper melalui LLM memang jelas jadi lebih cepat. Saya juga pernah mencoba audio overview saat menyetir, tetapi rasanya sulit membuatnya benar-benar masuk ke topik sains yang mendalam.
Untuk yang memakainya secara rutin, saya penasaran biasanya dipakai untuk apa. Selain audio overview, apa yang membuatnya lebih baik daripada chat biasa atau integrasi dokumen umum?
Saya membuat podcast dari paper arXiv, komentar Hacker News, dan berbagai teks panjang lainnya untuk didengarkan saat perjalanan berangkat-pulang kerja.
Saya seorang konsultan teknis yang pertama kali bertemu klien setelah kontrak ditandatangani. Saya memasukkan transkrip meeting sebelumnya dan syarat kontrak ke NotebookLM, lalu menanyakan pertanyaan tingkat tinggi seperti tujuan, risiko, atau penentuan prioritas. Berdasarkan itu saya menyusun slide untuk meeting pertama, lalu nanti saya masukkan juga transkrip sesi discovery. Dari sana saya bahkan bisa menghasilkan draf awal laporan penilaian model pengelolaan. Tetapi saya tidak pernah menunjukkan langsung isi yang ditulis LLM ke klien; saya selalu menulis ulang dengan gaya saya sendiri. Di perusahaan, kami secara resmi memakai GSuite, dan keunggulan NotebookLM adalah ia sangat baik dalam mengurasi sumber.
Sangat berguna untuk mempelajari aturan board game yang rumit, karena saya tinggal bertanya tanpa harus mencari satu per satu di rulebook, dan ia menjawab dengan kutipan juga.
Dibanding audio, penjelasan dalam bentuk video terasa lebih baik.
Teman saya memakainya untuk membuat kuis dan flashcard saat belajar untuk ujian kampus.