Bayangkan aplikasi pemesanan tiket dengan warna menarik dan ikon yang konsisten. Pengguna memilih tujuan, tetapi baru di langkah terakhir mengetahui bahwa jadwal sudah penuh. Tampilannya mungkin bagus, namun pengalamannya mengecewakan. Di sinilah perbedaan UI dan UX menjadi nyata.
User Interface (UI) berfokus pada permukaan interaksi: tipografi, warna, komponen, ikon, jarak, state, dan konsistensi visual. User Experience (UX) mencakup perjalanan yang lebih luas: apakah kebutuhan dipahami, informasi muncul pada saat yang tepat, tugas dapat selesai, kesalahan dapat dipulihkan, dan hasil memberi nilai. Keduanya berhubungan erat, tetapi tidak saling menggantikan.
Tiga anggapan yang perlu diluruskan
“UX sama dengan membuat wireframe”
Wireframe hanya artefak. UX mencakup riset, sintesis, alur, prioritas, pengujian, dan evaluasi setelah produk digunakan.
“Desainer harus selalu mengikuti tren”
Tren bisa menginspirasi, tetapi keputusan harus melayani konteks, aksesibilitas, perangkat, dan kebiasaan pengguna.
“Riset memerlukan ratusan orang”
Jumlah peserta bergantung pada pertanyaan. Beberapa wawancara yang tepat dapat mengungkap pola untuk diuji lebih lanjut.
“Figma adalah keterampilan utama”
Alat mempercepat produksi. Kemampuan memahami masalah dan menjelaskan keputusan tetap menjadi inti.
Proses desain dalam satu studi kasus
Anggap sebuah perpustakaan komunitas ingin memudahkan anggota memesan ruang belajar. Keluhan awal berbunyi “aplikasinya sulit”. Kalimat ini belum cukup menjadi masalah desain. Kita perlu mengetahui siapa yang kesulitan, tugas apa yang dicoba, kapan hambatan muncul, dan dampaknya.
1. Temukan konteks melalui riset
Wawancarai anggota, petugas, dan pengelola. Amati bagaimana pemesanan berlangsung saat ini. Tinjau data pertanyaan dukungan. Hindari pertanyaan yang menggiring seperti “Apakah Anda suka fitur kalender?” Tanyakan kejadian terakhir: “Ceritakan saat Anda terakhir memesan ruang. Apa yang dilakukan dari awal sampai selesai?”
Catatan riset harus memisahkan ucapan, pengamatan, dan interpretasi. Jangan mengumpulkan data sensitif yang tidak relevan. Minta izin, jelaskan tujuan, dan anonimisasi kutipan saat dibagikan.
2. Rumuskan masalah dan ukuran keberhasilan
Hasil riset mungkin menunjukkan bahwa anggota tidak tahu kapasitas ruang dan harus menelepon petugas. Rumusan yang lebih berguna adalah: “Anggota yang merencanakan belajar kelompok perlu melihat ketersediaan dan kapasitas sebelum datang, karena konfirmasi manual menyebabkan perjalanan sia-sia.”
Tentukan ukuran seperti persentase tugas pemesanan yang selesai, waktu penyelesaian, kesalahan jadwal, dan jumlah permintaan bantuan. Ukuran memberi cara untuk menilai desain selain preferensi visual.
3. Susun alur sebelum layar
Petakan titik masuk, keputusan, informasi, kondisi kosong, kegagalan, dan pemulihan. Alur ideal dapat berupa pilih tanggal, lihat ruang tersedia, periksa detail, konfirmasi, lalu menerima bukti. Namun desain juga harus menangani jaringan putus, jadwal berubah, atau pengguna ingin membatalkan.
Buat sketsa kasar beberapa alternatif. Pada tahap ini biaya perubahan masih rendah. Diskusikan prioritas konten sebelum memilih warna atau ilustrasi.
4. Bangun wireframe dan prototipe
Wireframe membantu menguji hierarki: apa yang terlihat pertama, bagaimana pengguna berpindah, dan apakah tindakan utama jelas. Setelah alur stabil, terapkan sistem visual. Gunakan skala tipografi, token warna, grid, dan komponen dengan state default, hover, focus, disabled, loading, error, dan success.
Kontras, ukuran teks, label formulir, fokus keyboard, bahasa yang jelas, dan target sentuh perlu dipikirkan sejak struktur awal.
5. Uji tugas, bukan selera
Berikan skenario: “Kamu membutuhkan ruang untuk empat orang Selasa sore. Tunjukkan bagaimana kamu memesannya.” Amati apa yang dilakukan peserta tanpa mengajari. Catat tempat mereka berhenti, tafsiran yang berbeda, dan komentar spontan. Setelah tugas, tanyakan alasan dan tingkat keyakinan.
Satu temuan bukan perintah otomatis. Cari pola, nilai dampak, dan hubungkan dengan tujuan. Perbaiki masalah terbesar, lalu uji kembali. Desain yang baik lahir dari iterasi, bukan satu presentasi sempurna.
Membangun portofolio UI/UX
Studi kasus portofolio harus menunjukkan pemikiran. Jelaskan konteks, peranmu, batasan, metode, bukti, alternatif, keputusan, pengujian, hasil, dan refleksi. Hindari klaim seperti “meningkatkan konversi 40%” jika desain tidak pernah dirilis atau datanya tidak dapat diverifikasi.
Sertakan visual secukupnya untuk mendukung cerita. Puluhan mockup tanpa konteks membuat reviewer harus menebak masalah. Sebaliknya, satu diagram alur, cuplikan temuan, dua alternatif, dan alasan pemilihan dapat menunjukkan kedalaman.
Keterampilan yang perlu dilatih
- Riset: wawancara, observasi, survei yang tepat, sintesis, dan etika data.
- Arsitektur informasi: pengelompokan, hierarki, navigasi, label, dan pencarian.
- Interaksi: alur, feedback, pencegahan kesalahan, dan pemulihan.
- Visual: tipografi, komposisi, warna, ikon, dan sistem komponen.
- Kolaborasi: menulis rationale, menerima kritik, memahami batas teknis, dan handoff.
- Evaluasi: usability testing, metrik perilaku, dan iterasi setelah rilis.
Mulailah dari satu masalah yang dapat kamu akses—misalnya pengalaman mendaftar kegiatan komunitas. Jangan berpura-pura memiliki riset jika tidak dilakukan. Kamu boleh membuat proyek konseptual selama konteks dan keterbatasannya dijelaskan secara jujur.