Glosarium UI/UX
Kamus Istilah Penting
Dua puluh satu istilah inti yang akan kamu temui terus selama berkarier. Pahami artinya agar bisa berbicara seperti designer profesional.
UI
User Interface — tampilan yang dilihat dan disentuh user.
UI (User Interface) adalah lapisan visual dan interaktif tempat user berinteraksi dengan produk: tombol, teks, warna, ikon, dan layout. UI yang baik terlihat rapi dan jelas.
Contoh
Susunan tombol, kartu, dan tipografi pada halaman dashboard.
UX
User Experience — keseluruhan rasa saat memakai produk.
UX (User Experience) adalah pengalaman menyeluruh user saat mencapai tujuannya: apakah mudah, cepat, dan tidak membingungkan. UX mencakup alur, struktur, dan emosi, bukan hanya tampilan.
Contoh
Seberapa mudah user menyelesaikan checkout dari awal sampai sukses.
User Flow
Peta semua jalur user mencapai tujuan, termasuk error.
User flow menggambarkan keseluruhan langkah dan percabangan yang mungkin dilalui user, termasuk jalur sukses dan jalur gagal. Berguna untuk memastikan tidak ada kondisi yang terlupa.
Contoh
Diagram dari halaman produk, keranjang, pembayaran, sampai sukses/gagal.
Task Flow
Satu jalur ideal untuk menyelesaikan satu tugas.
Task flow fokus pada satu rute terbaik menyelesaikan satu tugas tanpa percabangan kompleks. Cocok untuk merancang dan menjelaskan satu skenario inti.
Contoh
Langkah login: buka app, isi email, isi password, masuk.
Wireframe
Kerangka layout tanpa detail visual.
Wireframe adalah sketsa struktur halaman yang menampilkan tata letak dan hierarki tanpa warna atau detail final. Low-fidelity untuk cepat menguji ide, high-fidelity mendekati final.
Contoh
Kotak abu-abu menandai posisi header, konten, dan tombol.
Prototype
Versi yang bisa diklik untuk menguji interaksi.
Prototype adalah simulasi produk yang bisa diklik untuk menguji alur dan interaksi sebelum dibangun. Mulai dari klik antar layar sampai interaksi mendetail.
Contoh
Klik antar 5 layar onboarding di Figma untuk diuji ke user.
Design System
Satu sumber kebenaran komponen dan aturan desain.
Design system adalah kumpulan token, komponen, pola, dan dokumentasi yang menjaga produk konsisten dan scalable. Memudahkan tim bekerja cepat tanpa kehilangan kualitas.
Contoh
Library berisi button, input, dan token warna yang dipakai seluruh produk.
Component
Elemen UI yang bisa dipakai ulang.
Component adalah bagian UI yang dirancang sekali lalu dipakai berulang (button, card, input). Mengubah master komponen akan memperbarui semua salinannya.
Contoh
Satu komponen button dipakai di puluhan layar.
Variant
Versi berbeda dari satu komponen.
Variant adalah variasi state atau tipe dari satu komponen yang disatukan lewat properti, seperti ukuran (sm/md/lg) atau state (default/hover/disabled).
Contoh
Button primary dan secondary sebagai variant dalam satu set.
Token
Nama untuk nilai desain agar konsisten dan mudah diubah.
Design token adalah penamaan untuk keputusan desain (warna, spacing, radius) sehingga bisa diubah terpusat dan dipakai konsisten di seluruh produk.
Contoh
color/brand/500 merujuk satu warna biru yang dipakai di mana-mana.
Accessibility
Membuat produk bisa dipakai lebih banyak orang.
Accessibility (a11y) memastikan produk bisa digunakan orang dengan beragam kemampuan dan konteks: kontras cukup, keyboard navigation, focus state, dan teks alternatif.
Contoh
Form yang bisa dioperasikan penuh dengan keyboard dan dibaca screen reader.
Usability Testing
Mengamati user memakai produk untuk menemukan masalah.
Usability testing memberi user tugas nyata lalu mengamati kesulitannya tanpa membantu. Lima user biasanya cukup menemukan mayoritas masalah besar.
Contoh
Meminta user menemukan tombol simpan, lalu mencatat di mana ia bingung.
Persona
Ringkasan pola user nyata berbasis data.
Persona adalah profil ringkas yang merangkum tujuan, frustrasi, dan konteks dari pola user nyata. Membantu tim punya gambaran user yang sama. Bukan tokoh karangan tanpa data.
Contoh
Profil 'Rina, manajer sibuk yang butuh laporan cepat di mobile'.
Jobs To Be Done
Pekerjaan yang ingin diselesaikan user.
Jobs To Be Done (JTBD) memandang produk sebagai sesuatu yang 'dipekerjakan' user untuk menuntaskan suatu pekerjaan, fokus pada hasil yang diinginkan, bukan fitur.
Contoh
Bukan 'butuh aplikasi catatan', tapi 'ingin tidak lupa ide saat rapat'.
Handoff
Penyerahan desain ke developer untuk dibangun.
Handoff adalah proses menyerahkan desain lengkap dengan spec: ukuran, token, perilaku responsif, dan state, agar developer bisa membangun dengan minim tebakan.
Contoh
Anotasi reflow tiap breakpoint dan daftar state komponen di Dev Mode.
Conversion
Persentase user yang melakukan aksi yang diinginkan.
Conversion adalah rasio user yang menyelesaikan tujuan tertentu (mendaftar, membeli) dibanding total yang mencoba. Meningkatkan conversion sering jadi tujuan desain bisnis.
Contoh
30% pengunjung halaman pricing akhirnya berlangganan.
Activation
Momen user pertama merasakan nilai produk.
Activation adalah 'aha moment' ketika user pertama kali merasakan manfaat inti produk. Onboarding yang baik mempercepatnya dan menentukan apakah user bertahan.
Contoh
User pertama kali berhasil membuat dan membagikan dokumen.
Retention
Seberapa banyak user kembali memakai produk.
Retention mengukur user yang terus kembali setelah pertama memakai. Produk yang sehat bertahan dari retention, bukan hanya pendaftaran baru.
Contoh
40% user masih aktif setelah 30 hari.
Churn
User yang berhenti memakai produk.
Churn adalah kebalikan retention: persentase user yang berhenti memakai atau berlangganan dalam periode tertentu. Churn tinggi menandakan masalah nilai atau pengalaman.
Contoh
5% pelanggan berhenti berlangganan setiap bulan.
Funnel
Tahapan user dari datang sampai mencapai tujuan.
Funnel adalah rangkaian tahap yang dilalui user menuju tujuan, di mana sebagian user gugur di tiap tahap. Menemukan tahap dengan kebocoran terbesar membantu prioritas perbaikan.
Contoh
Kunjungi situs, daftar, verifikasi, bayar, jadi pelanggan.
Information Architecture
Cara informasi dikelompokkan dan dinamai.
Information Architecture (IA) mengatur struktur dan penamaan konten agar user mudah menemukan yang dicari. IA yang baik membuat user menebak lokasi dengan benar.
Contoh
Struktur menu: Beranda, Produk, Harga, Bantuan.