Panduan UI/UX Design: Dari Figma ke Studi Kasus Pertama

Latihan pertama seorang pembelajar UI/UX bisa dikerjakan tanpa membuka Figma sama sekali. Ambil satu aplikasi yang dipakai setiap hari, misalnya aplikasi pesan antar makanan atau dompet digital, lalu selesaikan satu tugas kecil di dalamnya: mendaftar akun, mengubah alamat, atau mencari riwayat transaksi. Hitung jumlah langkahnya dan tandai setiap momen ketika jari berhenti karena ragu harus menekan apa.

Sesudah itu, pilah catatan tadi ke dalam dua kolom. Keluhan seperti langkah yang berbelit, fitur yang tersembunyi di menu yang tak terduga, atau konfirmasi yang tidak muncul masuk ke kolom UX, karena semuanya menyangkut urutan dan logika. Keluhan seperti huruf yang terlalu kecil, tombol utama yang warnanya sama dengan tombol lain, atau ikon yang maknanya kabur masuk ke kolom UI, karena semuanya menyangkut rupa layar. Istilah user experience sendiri dipopulerkan Don Norman pada 1993 ketika ia bekerja di Apple, dan sejak itu UX dipahami sebagai seluruh pengalaman memakai produk, dengan UI sebagai bagian yang terlihat dan tersentuh.

Latihan memilah ini terdengar sederhana, padahal di sinilah cara pandang desainer mulai terbentuk. Pembelajar yang terbiasa memilah akan tahu sedang mengerjakan lapisan mana ketika nanti menyusun user flow atau memilih palet warna. Ulangi latihan ini di tiga aplikasi berbeda selama seminggu pertama, dan bandingkan catatannya.

Riset pengguna terdengar seperti pekerjaan tim besar, padahal versi pemulanya bisa dijalankan satu orang dalam satu minggu. Pilih satu masalah yang dekat dengan keseharian, misalnya kesulitan mahasiswa mengatur jadwal kerja kelompok, lalu cari tiga sampai lima orang yang mengalaminya. Jumlah lima ini mengikuti pengalaman banyak praktisi: setelah orang kelima, keluhan yang muncul cenderung mengulang keluhan sebelumnya.

Kunci wawancara ada di bentuk pertanyaannya. Pertanyaan terbuka seperti "Ceritakan terakhir kali kamu mengatur jadwal kelompok, apa yang terjadi?" menghasilkan cerita yang bisa dibedah. Pertanyaan yang menggiring seperti "Kamu pasti butuh aplikasi pengingat, kan?" hanya menghasilkan persetujuan sopan. Selama wawancara, catat kalimat persis narasumber dan tahan dorongan untuk menyimpulkan saat masih mendengar. Kutipan asli itu kelak sangat berharga di studi kasus.

Sesudah lima wawancara, kelompokkan catatan berdasarkan kemiripan keluhan, lalu tulis satu persona ringkas: nama rekaan, kebiasaan, tujuan, dan hambatan utamanya. Tutup dengan satu pernyataan masalah yang tajam, misalnya "Mahasiswa yang bekerja paruh waktu kesulitan menemukan jam kosong bersama karena jadwal anggota kelompok tersebar di beberapa aplikasi." Pernyataan sejelas ini menjadi kompas untuk semua keputusan sesudahnya. Kalau di tengah jalan muncul ide fitur baru, pembelajar cukup bertanya apakah fitur itu menjawab pernyataan masalah tadi. Bila jawabannya ragu, ide itu dicatat di daftar terpisah untuk proyek berikutnya.

Wireframe adalah kerangka layar yang dibuat dengan kotak, garis, dan teks abu-abu, tanpa warna merek, foto, atau ikon akhir. Kesederhanaannya disengaja. Selama warna belum ada, mata pembelajar dan orang yang diajak menilai hanya fokus pada penempatan: informasi apa yang paling atas, tombol mana yang membawa ke langkah berikutnya, dan berapa banyak yang terlihat tanpa menggulir.

Kebiasaan paling berguna di tahap ini adalah membuat tiga versi untuk satu layar penting. Versi pertama biasanya mengikuti pola aplikasi yang sudah dikenal. Versi kedua mencoba menyederhanakan, misalnya menggabungkan dua langkah menjadi satu. Versi ketiga mencoba susunan yang sama sekali lain, seperti daftar diganti kartu atau tab diganti satu halaman panjang. Ketiganya lalu ditunjukkan ke satu atau dua orang dengan pertanyaan "Apa yang kamu pahami dari layar ini, dan apa yang akan kamu tekan dulu?"

Masukan di tahap kerangka sangat murah diperbaiki, cukup memindahkan beberapa kotak. Masukan yang sama di tahap tampilan akhir bisa berarti membongkar komponen, mengubah warna, dan menyusun ulang belasan layar. Itulah sebabnya pembelajar dianjurkan menahan diri dari estetika sampai alurnya terasa logis bagi orang lain.

Begitu jumlah layar bertambah, menggambar ulang tombol yang sama di setiap layar mulai memakan waktu dan memunculkan ketidakseragaman. Solusinya adalah komponen. Di Figma, tombol, kolom isian, kartu, dan bilah navigasi dibuat sekali sebagai komponen utama, lalu dipakai sebagai salinan di semua layar. Mengubah komponen utama otomatis mengubah seluruh salinannya.

Komponen kemudian diberi variant untuk setiap keadaannya. Satu tombol bisa punya variant normal, ditekan, nonaktif, dan sedang memuat. Satu kolom isian bisa punya variant kosong, sedang diisi, berisi, dan galat. Latihan menyusun variant ini melatih pembelajar memikirkan keadaan yang sering terlupa, terutama keadaan galat dan keadaan kosong. Kumpulan komponen, warna, skala tipografi, dan aturan jarak inilah yang disebut design system, dan untuk proyek belajar, design system kecil berisi sepuluh sampai lima belas komponen sudah memadai.

Handoff adalah tahap menyerahkan rancangan ke developer. Mode Dev di Figma, yang tersedia di paket berbayar, memperlihatkan ukuran, jarak, warna, dan teks dari setiap elemen. Bagian yang menjadi tugas pembelajar adalah memberi nama komponen dan warna secara konsisten, menandai interaksi yang tidak terlihat dari gambar diam, dan menuliskan catatan untuk keadaan khusus. Kebiasaan ini membuat rancangan bisa dibangun tanpa banyak pertanyaan bolak-balik.

Perekrut produk membaca portofolio untuk melihat cara pembelajar berpikir, dan cara berpikir hanya terlihat lewat cerita proses. Studi kasus yang kuat menjawab empat pertanyaan secara berurutan: masalah apa yang ditemukan, riset apa yang dilakukan untuk memahaminya, keputusan desain apa yang diambil beserta alasannya, dan apa yang berubah sesudah rancangan diuji. Satu sampai dua studi kasus yang menjawab keempatnya sudah cukup untuk melamar peran junior.

Kerangka cerita sebaiknya ditulis dulu di Notion atau Google Docs sebelum satu gambar pun ditempel. Susunan yang mudah diikuti dimulai dari ringkasan satu kalimat dan peran pembelajar, lalu masalah dan konteks, riset dan temuan, proses desain dari wireframe ke UI, hasil pengujian, dan refleksi. Di bagian riset, satu kutipan asli narasumber sering lebih meyakinkan daripada rangkuman panjang. Di bagian keputusan, pasangan gambar sebelum dan sesudah memperlihatkan perkembangan rancangan dengan cepat.

Refleksi di akhir adalah bagian yang sering dilewati pemula. Tuliskan apa yang berjalan baik, apa yang akan diubah bila proyek diulang, dan satu pelajaran yang paling berguna. Studi kasus lalu diterbitkan di Behance, Dribbble, Notion, atau situs pribadi, dan diperiksa tampilannya di layar ponsel karena banyak perekrut membukanya dari perangkat kecil. Proyek latihan mandiri sah dipakai selama prosesnya benar-benar dijalani.