Belajar UI/UX Design - Komponen UI & Pola Interaksi
Merakit elemen antarmuka yang reusable: button, input, card, modal, toast, dan dropdown beserta state-nya, lalu memahami pola interaksi empty state, loading, dan error. Praktik di episode ini membuat komponen kit dasar KasirKita yang konsisten lintas layar.
#Pendahuluan
Setelah di episode 9 kita punya palet dan type scale, pada episode ini kita merakit elemen-elemen yang membentuk antarmuka: komponen UI dan pola interaksi. Komponen adalah "kata" dari bahasa visual — konsisten, reusable, dan punya aturan mainnya sendiri.
Mengapa penting? Aplikasi kasir terdiri dari puluhan layar. Jika tombol dibuat ulang di setiap layar dengan ukuran/warna berbeda, hasilnya tampak kacau dan membebani developer. Komponen yang terstandarisasi membuat desain konsisten (bu Sari selalu tahu tombol mana yang bisa ditekan), cepat diproduksi, dan mudah dikembangkan menjadi design system di episode 12.
#Komponen Dasar dan State-nya
#Button
Tombol adalah elemen paling sering diinteraksi. Sediakan beberapa varian yang jelas perannya:
Primary → aksi utama, solid, kontras (Konfirmasi, Simpan)
Secondary → aksi alternatif, outline (Batal, Kembali)
Ghost → aksi halus dalam konten (Lihat Detail)
Danger → aksi destruktif (Hapus Produk)Setiap tombol punya state: default, hover, pressed, focused, disabled. Jangan hapus state focused — itu penting untuk navigasi keyboard (episode 13).
#Input
Input adalah tempat pengguna memberi data — salah desain di sini = frustrasi massal:
<label for="harga">Harga jual</label>
<input id="harga" type="number" inputmode="numeric" placeholder="0" aria-invalid="false" />
<p class="hint">Gunakan angka tanpa titik</p>Aturan input yang sehat: label jelas, placeholder hanya contoh (bukan pengganti label), format terbatasi (pemilik warung memakai angka, bukan desimal rumit), dan pesan error muncul di dekat input yang salah (episode 19-20).
#Card
Card mengelompokkan informasi terkait — produk, transaksi, ringkasan. Prinsipnya: judul jelas, konten ter-scan cepat, dan tindakan (CTA) konsisten di posisi yang sama. Untuk produk KasirKita: foto/gambar, nama, harga, tombol tambah.
#Modal vs Toast vs Dropdown
| Elemen | Fungsi | Kapan dipakai | Risiko |
|---|---|---|---|
| Modal | Blokir fokus untuk tugas penting | Konfirmasi aksi destruktif, form singkat | Menutup konteks; jangan berlebihan |
| Toast | Notifikasi singkat non-blokir | "Produk ditambahkan", error ringan | Menghilang cepat; bukan untuk keputusan |
| Dropdown | Pilih 1 dari daftar | Kategori produk, metode bayar | Lambat untuk daftar panjang; hati-hati mobile |
Untuk kasir yang kecepatannya segalanya: toast untuk umpan balik ringan, modal hanya untuk aksi yang berisiko (hapus produk), dan dropdown untuk pilihan pendek. Jangan memakai modal untuk notifikasi sukses — itu memotong alur.
#Pola Interaksi: Empty, Loading, Error
Pola ini menentukan bagaimana aplikasi berperilaku saat data kosong, sedang dimuat, atau gagal:
#Empty State
Saat belum ada data — misal daftar produk masih kosong. Empty state yang baik: jelaskan situasi, beri alasan, dan tawarkan aksi.
┌──────────────────────────────┐
│ [ 📦 icon ] │
│ Belum ada produk │ judul jelas
│ Tambahkan produk pertamamu │ penjelasan singkat
│ agar stok bisa dipantau. │
│ [ Tambah Produk ] │ CTA memulai
└──────────────────────────────┘#Loading State
Pengguna perlu tahu sistem bekerja. Hindari layar kosong saat data dimuat:
- Skeleton — placeholder bentuk konten (paling modern & mengurangi rasa lambat).
- Spinner — untuk aksi singkat di tombol.
- Selalu beri indikasi progres untuk operasi yang bisa lama (sync data).
#Error State
Error bukan sekadar "terjadi masalah" — ia harus menjelaskan apa yang salah dan memberi jalan keluar:
- Jelaskan apa yang gagal dengan bahasa manusia (bukan kode error).
- Tawarkan aksi perbaikan: "Coba lagi", atau langkah alternatif.
- Jika transaksi gagal karena offline, beri tahu pengguna transaksinya tersimpan & akan dikirim nanti.
Warning
Jangan pernah menampilkan error teknis mentah seperti "500: Internal Server Error" kepada Bu Sari. "Koneksi bermasalah. Transaksimu sudah tersimpan dan akan dikirim otomatis saat online." jauh lebih manusiawi — dan mencegah panik. Detail copy error dibahas di episode 19-20.
#Praktik: Komponen Kit Dasar
Di frame Design System Mini episode 9, tambahkan:
- Buttons: 4 varian × 5 state (default, hover, pressed, focused, disabled).
- Inputs: normal, dengan hint, dengan error, disabled.
- Card: varian produk, transaksi, ringkasan.
- Modal + Toast + Dropdown: masing-masing satu contoh state.
- States: contoh empty, loading (skeleton), dan error.
Semua memakai palet & type scale episode 9 — jangan menambah warna baru tanpa update sistem.
Tip
Di Figma, jadikan setiap komponen sebagai Component (Cmd/Ctrl + Alt + K) dan letakkan variannya di panel Properties. Dengan begitu, episode 12 (design system) tinggal merapikan yang sudah ada — bukan membuat dari nol.
#Common Pitfalls
- Tombol tanpa state visual — pengguna tidak tahu tombol bisa ditekan atau sedang diproses.
- Modal untuk hal sepele — memotong alur kasir dengan konfirmasi yang tidak perlu.
- Toast untuk keputusan penting — notifikasi yang hilang dalam 3 detik tidak cocok untuk konfirmasi.
- Dropdown untuk daftar 2 pilihan — radio button atau segmented control lebih cepat.
- Empty state tanpa CTA — pengguna terjebak di layar kosong tanpa tahu harus berbuat apa.
#Penutup
Pada episode 10 ini, kalian telah merakit komponen dasar dan pola interaksi KasirKita yang konsisten.
Inti yang harus dibawa pulang:
- Button punya peran (primary/secondary/danger) dan state lengkap termasuk
focused. - Input butuh label jelas, format terbatasi, dan error di dekatnya.
- Modal untuk aksi berisiko, toast untuk umpan balik ringan, dropdown untuk pilihan pendek.
- Empty / loading / error adalah pola desain: jelaskan situasi, beri aksi, jangan tampilkan error mentah.
Di episode 11 selanjutnya kita akan menghidupkan komponen-komponen ini: prototyping & interaction design — prototype interaktif Figma, micro-interaction, state & flow logic, dan animasi untuk alur transaksi KasirKita. Sampai jumpa di episode 11!