Tujuan Pembelajaran

Memahami kategori UI patterns untuk produk AI
Mampu memilih dan mengimplementasikan UI pattern yang tepat
Mengerti kapan pakai off-the-shelf components vs custom implementation

Analogi

Diagram


      UI Patterns = Jenis Bangunan:
Chat UI       = Kafe (obrolan bolak-balik)
Copilot Panel = Asisten di meja kerja (samping workspace)
Playground    = Laboratorium (eksperimen, kontrol parameter)
Diff/Review   = Ruang edit (bandingkan before/after)
Inline Suggest = Sticky notes (saran di konteks, di tempat)

Setiap UI pattern seperti jenis bangunan berbeda — pilih berdasarkan aktivitas pengguna, bukan karena kelihatan keren.

Penjelasan Konsep

Lima UI patterns untuk produk AI: (1) Chat/Conversational UI — input text, streaming response, follow-up. Cocok: chatbot, AI assistant, Q&A. Contoh: ChatGPT. (2) Copilot/Sidebar Panel — AI assistance di samping workspace utama, context-aware. Cocok: productivity tools. Contoh: GitHub Copilot Chat. (3) Playground/Parameter Controls — parameter sliders, multiple output columns, side-by-side comparison. Cocok: developer tools, fine-tuning. Contoh: OpenAI Playground. (4) Diff/Review/Comparison UI — split view before/after, accept/reject, version history. Cocok: AI editing/review content. Contoh: GitHub Copilot code review. (5) Inline Suggestions — highlight, popover suggestion, ghost text. Cocok: writing/editing tools. Contoh: Notion AI inline.

Pilih pattern berdasarkan aktivitas pengguna, bukan tren. Pattern yang salah = user frustrasi.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami kategori UI patterns untuk produk AI., mampu memilih dan mengimplementasikan UI pattern yang tepat., dan mengerti kapan pakai off-the-shelf components vs custom implementation. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca UI Patterns untuk Produk AI, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Setiap UI pattern seperti jenis bangunan berbeda — pilih berdasarkan aktivitas pengguna, bukan karena kelihatan keren. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Prompt AI

Untuk produk 'AI code reviewer' yang beri feedback pada pull request, pilih dan justifikasi UI pattern paling tepat. Minta AI beri contoh implementasi.

Pertanyaan Reflektif

Observasi 5 produk AI. Kategorikan UI pattern masing-masing. Ada yang pakai pattern 'salah' untuk use case-nya?