Belajar UI/UX Design - Information Architecture & Navigation

#Pendahuluan

Setelah di episode 5 kita punya persona dan user journey, pada episode ini kita menyusun kerangka struktur produk: bagaimana konten dan fitur diorganisasikan (information architecture) dan bagaimana pengguna berpindah antar area (navigasi). IA adalah "denah gedung" — sebelum menghias ruangan (UI), kita harus tahu kamar mana yang ada dan bagaimana menghubungkannya.

Mengapa penting? Pengguna tidak tersesat karena layout jelek, melainkan karena struktur yang tidak masuk akal. Bayangkan aplikasi kasir yang meletakkan "laporan stok" di dalam menu pengaturan — fiturnya ada, tapi tidak akan pernah ditemukan. IA yang baik membuat fitur berada di tempat yang secara intuitif dicari pengguna.

#Sitemap dan Taxonomy

#Sitemap

Sitemap adalah peta hierarki halaman/fitur. Untuk KasirKita, versi awal berdasarkan journey Bu Sari:

Sitemap memaksa kalian berpikir tentang kedalaman. Aturan praktis: maksimal 3 level klik untuk fitur yang sering dipakai — Bu Sari harus bisa rekap harian dalam dua ketukan dari layar utama, sesuai gain di episode 5.

#Taxonomy

Taxonomy adalah sistem penamaan & pengelompokan. Pertanyaan kuncinya: "apa yang disebut satu kategori bagi pengguna?". Untuk KasirKita: apakah "Rokok" dan "Sembako" kategori terpisah, atau cabang dari "Kebutuhan Sehari-hari"? Nama kategori yang menggunakan bahasa pengguna (misal "Jajan Anak" daripada "Snack") membuat pencarian lebih mudah.

#Card Sorting

Card sorting adalah teknik riset untuk memahami cara pengguna mengelompokkan konten: setiap fitur ditulis pada satu kartu, lalu peserta mengelompokkannya sesuai logika mereka sendiri.

- Catat penjualan        - Daftar produk
- Rekap harian           - Tambah stok
- Rekap bulanan          - Hapus produk
- Ubah harga             - Kategori produk
- Backup data            - Ekspor laporan ke Excel
- Nama toko              - Lampu indikator stok menipis

Dua pendekatan:

• Open card sorting — peserta bebas membuat kategori sendiri. Menghasilkan label kategori baru yang mungkin tidak terpikirkan tim.
• Closed card sorting — kategori sudah ditentukan; peserta hanya menempatkan kartu. Baik untuk memvalidasi struktur yang sudah ada.

Dari hasilnya, kalian akan melihat pola: sebagian besar peserta menggabungkan "catat penjualan" dengan "rekap harian" dalam satu area bernama Kasir, sementara "backup data" dan "nama toko" masuk Pengaturan. Pola ini menjadi dasar sitemap final.

#Tree Testing

Tree testing memvalidasi sitemap tanpa visual sama sekali — peserta diberi struktur teks murni dan diminta menemukan lokasi sebuah fitur:

Kasir
  ├─ Catat penjualan
  └─ Rekap
      ├─ Harian
      ├─ Mingguan
      └─ Bulanan
Stok
  ├─ Daftar produk
  └─ Restock
Laporan
Pengaturan

Jika banyak peserta salah menempatkan "rekap mingguan" di "Laporan" padahal berada di "Kasir → Rekap", itu sinyal struktur perlu dirombak. Tree testing memakai tool seperti Maze (sudah disiapkan di episode 0) dan bisa dijalankan tanpa moderator.

#Pola Navigasi

Setelah struktur jelas, pilih pola navigasi yang sesuai platform & tugas:

Untuk KasirKita: tab bar untuk 4 area inti di mobile (sesuai thumb zone episode 14), sidebar untuk tampilan desktop. Hindari hamburger untuk area inti — riset konsisten menunjukkan ikon hamburger menurunkan discoverability.

#Common Pitfalls IA

• Meniru struktur organisasi internal — pengguna tidak peduli tim mana yang membangun fitur; mereka peduli cara kerjanya.
• Kategori "Lainnya" — sampah penampung yang menyembunyikan fitur; selalu cari kategori bermakna.
• Kedalaman berlebih — fitur penting terkubur 4 klik; prioritaskan kedalaman 2-3 klik.
• Navigasi berbeda antar platform — struktur harus sama (mobile/desktop), hanya wadah visualnya yang berubah.

#Penutup

Pada episode 6 ini, kalian telah menyusun information architecture dan navigasi KasirKita dari struktur kasar hingga pola navigasi yang dipilih.

Inti yang harus dibawa pulang:

• Sitemap memetakan hierarki fitur; taxonomy menentukan penamaan & pengelompokan yang masuk akal bagi pengguna.
• Card sorting menggali cara pengguna mengelompokkan konten; tree testing memvalidasi struktur tanpa distraksi visual.
• Pola navigasi dipilih sesuai konteks: tab bar untuk area inti mobile, sidebar untuk desktop, drawer untuk area sekunder.
• IA yang baik membuat fitur berada di tempat yang secara intuitif dicari — sebelum menyentuh visual.

Di episode 7 selanjutnya kita akan menuangkan struktur ini ke bentuk kasar pertama: wireframe & low-fidelity design — perbedaan lo-fi vs hi-fi, wireframe flow, annotate, dan teknik cepat dengan sketch serta AI wireframe. Sampai jumpa di episode 7!