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.

U

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.

U

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.

U

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.

T

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.

W

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.

P

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.

D

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.

C

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.

V

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.

T

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.

A

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.

U

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.

P

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'.

J

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'.

H

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.

C

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.

A

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.

R

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.

C

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.

F

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.

I

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.