UI (User Interface) adalah semua yang kamu lihat dan sentuh di layar: teks, warna, tombol, foto, ikon, dan susunannya. UX (User Experience) adalah pengalaman memakainya: apakah orang bisa menyelesaikan tujuannya dengan mudah, cepat, dan tanpa bingung. Bayangin sebuah restoran. Dekorasi, tata meja, desain menu, dan cara makanan disajikan adalah UI-nya. UX-nya adalah seluruh pengalaman dari masuk, pesan, nunggu, makan, sampai bayar. Restoran yang cantik tapi pesanannya lama dan sering salah tetap bikin kecewa.
🧪 Tebakan cepat: Halaman pesan kamar dengan foto bagus dan warna rapi, tapi total harganya gak ditulis di mana pun. Masalahnya di UI atau UX? Jawabannya ada di bagian "UI bagus belum tentu UX bagus".
UI: yang kamu lihat dan sentuh
UI adalah bagian yang bisa kamu tunjuk dengan jari:
- Teks: font, ukuran, tebal tipisnya.
- Warna: latar, teks, tombol.
- Komponen: tombol, form, kartu, ikon, foto.
- Layout dan jarak: apa di sebelah apa, seberapa rapat.
Pertanyaan yang dijawab UI: "Enak dilihat gak? Kelihatan gak mana yang tombol?"
UX: apakah tujuannya tercapai
UX selalu dimulai dari tugas (task): hal yang mau diselesaikan orang itu, misalnya "pesan kamar untuk dua malam". UX yang baik bikin tugas itu selesai dengan sedikit langkah, sedikit salah, dan tanpa harus bertanya ke orang lain. Jadi UX bisa dihitung:
- berapa langkah sampai tugasnya selesai,
- berapa kali orang salah atau mundur,
- berapa pertanyaan yang masih tersisa di kepalanya.
Steve Krug merangkumnya jadi judul bukunya, Don't Make Me Think (terbit pertama tahun 2000): orang gak boleh perlu mikir keras cuma untuk memakai sebuah halaman.
Contoh sepanjang jalur ini: halaman pesan Homestay Kabut
Bu Sri punya homestay kecil di Dieng bernama Homestay Kabut. Tamunya pesan lewat satu halaman: pilih berapa malam, lalu tekan tombol. Halaman ini akan terus kita perbaiki di pelajaran-pelajaran berikutnya.
Tugas tamunya: pesan Kamar Teras untuk 2 malam, check-in 12 Des. Harganya Rp 350.000 per malam. Ini bagian bawah halamannya, dua versi:
<!-- Versi awal -->
<p class="price">Rp 350.000 / malam</p>
<button class="book">Submit</button>
<!-- Versi dengan UX diperbaiki -->
<p class="price">Rp 350.000 / malam</p>
<p class="total">2 malam × Rp 350.000 = <b>Rp 700.000</b></p>
<button class="book">Pesan kamar, bayar di tempat</button>
<p class="note">Gratis batal sampai 3 hari sebelum check-in.</p>
.totalmenuliskan hitungannya, jadi tamu gak perlu menghitung 2 × 350.000 sendiri.- Tulisan di tombol bilang apa yang terjadi kalau ditekan. "Submit" gak bilang apa-apa: langsung bayar? cuma pesan?
.notemenjawab "kalau batal gimana?" tepat di bawah tombol, sebelum tamu sempat ragu.
Sekarang hitung langkah tamunya:
| Langkah tamu | Versi awal | UX diperbaiki |
|---|---|---|
| Pilih 2 malam | perlu | perlu |
| Hitung totalnya sendiri | perlu | gak perlu |
| Chat Bu Sri: "Submit itu langsung bayar?" | perlu | gak perlu |
| Chat Bu Sri: "Kalau batal, uangnya kembali?" | perlu | gak perlu |
| Tekan tombol pesan | perlu | perlu |
| Jumlah | 5 langkah, 2 chat | 2 langkah, 0 chat |
Gak ada warna atau font yang berubah di tabel ini. Semuanya soal isi dan alur.
UI bagus belum tentu UX bagus
Balik ke versi awal, lalu kasih UI yang cantik: font yang rapi, warna hijau, gambar kebun berkabut, sudut membulat dengan bayangan halus. Halamannya jauh lebih enak dilihat, tapi tamu tetap butuh 5 langkah dan 2 chat. UI-nya bagus, UX-nya buruk.
Jadi jawaban tebakannya: UX. Fotonya bagus dan warnanya rapi (UI bagus), tapi tamu harus menghitung sendiri atau bertanya dulu sebelum berani pesan (UX buruk). Sama seperti website yang cantik tapi alur checkout-nya membingungkan.
Kebalikannya juga bisa: halaman polos hitam putih, tapi totalnya jelas dan tombolnya bilang apa yang terjadi. UI-nya seadanya, UX-nya bagus. Tujuannya tentu dua-duanya bagus. Ingat juga, UI adalah bagian dari UX: tombol yang terlalu kecil di HP itu soal tampilan, tapi akibatnya orang salah pencet.
Kenapa developer perlu paham UI/UX
Banyak keputusan UX justru jatuh ke tangan developer: tulisan di tombol, pesan error, apa yang muncul waktu loading, apakah total dihitung otomatis. Developer yang paham UI/UX bisa:
- menemukan masalah UX sebelum halaman sampai ke pengguna,
- ngobrol dengan designer pakai bahasa yang sama,
- bikin keputusan kecil yang benar tanpa harus bertanya tiap kali.
Kode yang rapi dengan UX yang buruk tetap jadi produk yang buruk.
⚠️ Jebakan yang sering ketemu
- Menganggap UI cantik pasti UX bagus. Cek dengan menghitung langkah pengguna untuk satu tugas, bukan dengan menilai warnanya.
- Menilai pakai perasaan sendiri. Kamu sudah tahu cara kerja halamanmu, tamu belum. Minta satu orang lain mencoba tugasnya, lalu catat di mana dia berhenti atau bertanya.
- Menambah fitur biar kelihatan lengkap. Tiap kolom form dan tombol tambahan berarti satu keputusan lagi buat pengguna.
- Lupa pengguna dengan disabilitas. WHO (2023) memperkirakan 1,3 miliar orang, sekitar 1 dari 6 orang di dunia, hidup dengan disabilitas yang signifikan. Halaman yang cuma bisa dipakai dengan mata tajam dan mouse menutup pintu buat mereka.
TL;DR: UI (User Interface) adalah yang dilihat dan disentuh: teks, warna, tombol, foto, layout. UX (User Experience) adalah apakah tugas pengguna selesai dengan mudah, dan bisa dihitung dari jumlah langkah, kesalahan, dan pertanyaan yang tersisa. Dalam analogi restoran, dekorasi dan penyajian makanan itu UI, seluruh pengalaman dari masuk sampai bayar itu UX. Website cantik dengan checkout yang membingungkan berarti UI bagus, UX buruk. Contoh sepanjang jalur ini, halaman pesan Homestay Kabut, turun dari 5 langkah ke 2 langkah tanpa mengubah satu warna pun.
