Information Architecture (IA) untuk Konversi Penjualan UMKM
Materi Pembelajaran — Sub CPMK: Menerapkan prinsip Information Architecture (IA) untuk menyusun alur navigasi yang memudahkan konversi penjualan
Infografis: 5 tahapan penerapan Information Architecture — dari analisis pengguna hingga pengujian & evaluasi alur navigasi.
Information Architecture Sitemap User Flow Konversi Penjualan
1. Apa itu Information Architecture (IA)
Information Architecture (IA) adalah disiplin dalam UX yang berfokus pada bagaimana informasi disusun, dikelompokkan, diberi label, dan dihubungkan satu sama lain di dalam sebuah produk digital, sehingga pengguna dapat menemukan apa yang mereka cari dengan cepat dan tanpa kebingungan. IA menjadi kerangka "peta" yang menentukan ke mana pengguna bisa pergi dan bagaimana mereka sampai ke sana.
Bagi UMKM yang berjualan lewat website atau aplikasi, IA yang baik berdampak langsung pada konversi penjualan — semakin mudah calon pembeli menemukan produk dan menyelesaikan transaksi, semakin besar peluang mereka benar-benar membeli, bukan meninggalkan halaman karena bingung harus klik ke mana.
| Komponen IA | Penjelasan |
|---|---|
| Sitemap | Peta struktur seluruh halaman dalam platform & hubungan hierarkinya |
| Navigasi | Menu & jalur yang memungkinkan pengguna berpindah antar halaman |
| Labeling | Penamaan menu/kategori agar mudah dipahami (mis. "Keranjang" bukan "Cart_v2") |
| User Flow | Urutan langkah pengguna untuk mencapai satu tujuan tertentu, misalnya membeli produk |
2. Menyusun Sitemap untuk Platform UMKM
Sitemap disusun dengan mengelompokkan seluruh konten/halaman berdasarkan kedekatan fungsinya (content inventory), lalu menyusunnya dalam struktur hierarki dari halaman utama ke halaman turunannya. Untuk platform UMKM sederhana, sitemap biasanya tidak perlu terlalu dalam (idealnya maksimal 3 tingkat) agar pengguna tidak perlu banyak klik untuk sampai ke tujuan (prinsip "3-click rule").
Contoh Sitemap Platform Toko UMKM
- Halaman Utama (Home)
- Katalog Produk
- Kategori Makanan
- Kategori Minuman
- Kategori Kerajinan
- Detail Produk
- Keranjang Belanja
- Checkout
- Konfirmasi Pembayaran
- Tentang Kami
- Akun Saya
- Riwayat Pesanan
- Alamat Tersimpan
- Hubungi Kami
- Katalog Produk
3. Merancang Alur Navigasi (User Flow) untuk Transaksi Pembelian
Jika sitemap menjelaskan struktur keseluruhan platform, user flow menjelaskan urutan langkah yang dilalui pengguna untuk menyelesaikan satu tujuan spesifik — dalam konteks UMKM, tujuan yang paling penting adalah menyelesaikan transaksi pembelian.
Contoh User Flow Transaksi Pembelian pada Platform UMKM
(Landing Page)
Kategori Produk
Belanja
(Isi Data & Bayar)
Terima Kasih
Setiap langkah dalam user flow sebaiknya diminimalkan jumlah kliknya dan diberi umpan balik yang jelas (lihat kembali prinsip Visibility of System Status pada materi Heuristic Evaluation). Berikut beberapa prinsip penting saat merancang user flow transaksi:
| Prinsip | Penerapan pada User Flow UMKM |
|---|---|
| Minimalkan Langkah | Gabungkan langkah yang tidak esensial, misal biarkan checkout sebagai tamu (guest checkout) tanpa wajib registrasi akun |
| Beri Panduan Jelas | Tampilkan indikator progres (1/3, 2/3, 3/3) selama proses checkout |
| Sediakan Jalan Kembali | Pengguna harus bisa kembali ke halaman sebelumnya tanpa kehilangan data yang sudah diisi |
| Konfirmasi di Akhir | Tampilkan ringkasan pesanan sebelum tombol "Bayar" ditekan untuk mencegah kesalahan |
4. Studi Kasus: Penerapan IA pada UMKM "Batik Asri Nusantara"
Batik Asri Nusantara adalah UMKM produsen batik tulis di Pekalongan yang mulai berjualan melalui website sendiri sejak 2 tahun lalu. Meski produk berkualitas dan harga bersaing, pemilik usaha mengeluhkan banyak pengunjung website yang masuk namun jarang menyelesaikan pembelian. Studi kasus berikut mensimulasikan bagaimana prinsip IA diterapkan untuk mendiagnosis dan memperbaiki masalah tersebut.
4.1 Kondisi Awal — Website Tanpa Struktur IA yang Jelas
Struktur halaman sebelum perbaikan: seluruh 40+ produk batik ditampilkan dalam satu halaman panjang tanpa kategori, menu navigasi hanya berisi "Home" dan "Kontak", serta tombol beli langsung mengarahkan pembeli ke chat WhatsApp tanpa keterangan harga final maupun opsi pengiriman.
Dampak yang dikeluhkan pemilik usaha: pengunjung kesulitan mencari motif/ukuran tertentu karena harus scroll panjang, banyak chat WhatsApp masuk hanya untuk menanyakan hal yang seharusnya sudah tertulis di halaman produk (ukuran, bahan, ongkos kirim), dan cukup banyak calon pembeli yang berhenti di tengah percakapan chat tanpa melanjutkan transaksi.
4.2 Langkah 1 — Content Inventory & Penyusunan Sitemap Baru
Tim melakukan pendataan seluruh konten yang ada (content inventory), lalu mengelompokkannya berdasarkan kemiripan kategori produk (motif klasik, motif kontemporer, seragam batik) dan kebutuhan transaksi (keranjang, checkout, riwayat pesanan). Hasilnya adalah sitemap baru dengan struktur maksimal 3 tingkat, mengikuti pola pada bagian 2 di atas, sehingga produk dapat ditemukan lewat kategori alih-alih scroll manual.
4.3 Langkah 2 — Merancang Ulang User Flow Transaksi
| Aspek | Sebelum Perbaikan | Sesudah Perbaikan |
|---|---|---|
| Menemukan produk | Scroll manual di antara 40+ produk tanpa filter | Filter berdasarkan kategori & ukuran, pencarian nama motif |
| Melihat harga & info produk | Harga hanya disebutkan setelah chat WhatsApp | Harga, bahan, ukuran, & estimasi ongkir tertera di halaman detail produk |
| Proses pemesanan | Loncat langsung ke chat WhatsApp tanpa keranjang | Alur keranjang → checkout → konfirmasi otomatis, WhatsApp hanya untuk follow-up |
| Kepastian status pesanan | Pembeli harus bertanya manual soal status | Notifikasi status pesanan otomatis (diterima/diproses/dikirim) |
4.4 Langkah 3 — Hasil yang Diharapkan
| Indikator | Perkiraan Sebelum | Perkiraan Sesudah |
|---|---|---|
| Rata-rata klik untuk temukan produk | 8–10 klik/scroll | 2–3 klik |
| Pertanyaan repetitif di chat WhatsApp | Tinggi (harga, ukuran, ongkir) | Menurun signifikan karena info sudah tersedia di halaman |
| Kejelasan status pesanan | Tidak ada, pembeli harus bertanya manual | Otomatis melalui notifikasi status |
Studi kasus ini menunjukkan bahwa perbaikan pada level struktur informasi (sitemap) dan alur langkah transaksi (user flow) — tanpa perlu mengganti produk atau harga sama sekali — berpotensi memberi dampak nyata terhadap kemudahan pembeli menyelesaikan transaksi, yang pada akhirnya mendukung peningkatan konversi penjualan UMKM.
5. Referensi Jurnal Penelitian Terkait
Berikut beberapa penelitian nasional yang menerapkan prinsip information architecture, sitemap, dan user flow dalam perancangan platform digital UMKM:
- Susanti, W. F., Ana Wati, S. F., & Indayanti Sugata, T. L. (2025). UI/UX Design of the "PrintOn!" Printing Services Marketplace for UMKM Photocopying and Printing Businesses Using the User Centered Design Method. Jurnal Teknologi dan Open Source, 8(2), 495–505. Merancang solusi melalui user flow mapping & information architecture. Baca selengkapnya
- Information Architecture Pada Aplikasi E-Commerce. Membahas penerapan prinsip IA dalam desain user interface aplikasi e-commerce untuk UMKM. Baca selengkapnya
- THE DESIGN THINKING METHOD APPLICATION ON THE KIRIHUCI MSME WEBSITE DESIGN. Visualita: Jurnal Online Desain Komunikasi Visual. Merancang struktur navigasi website UMKM Kirihuci untuk memperluas jangkauan pemasaran. Baca selengkapnya
- Perancangan Sistem Informasi Penjualan E-Commerce Rempeyek Ilhamum-Taza Berbasis Web. Merancang alur data & struktur halaman menggunakan model DFD untuk UMKM oleh-oleh khas Jambi. Baca selengkapnya
- Pengembangan Sistem E-Commerce Berbasis Web untuk Meningkatkan Daya Saing UMKM di Pasar Digital. Switch: Jurnal Sains dan Teknologi Informasi. Baca selengkapnya
- Analisis dan Perancangan Sistem Informasi Penjualan Online untuk Meningkatkan Pemasaran Produk UMKM Kunci Berkah, Sidareja Berbasis Mobile. Factory: Jurnal Industri, Manajemen dan Rekayasa Sistem Industri. Baca selengkapnya
6. Kesimpulan
Information Architecture menjadi fondasi struktural sebelum sebuah platform digital UMKM dirancang secara visual. Dengan menyusun sitemap yang logis dan tidak terlalu dalam, serta merancang user flow transaksi yang ringkas dan jelas di setiap langkahnya, pelaku UMKM dapat mengurangi hambatan yang membuat calon pembeli membatalkan transaksi — pada akhirnya meningkatkan konversi penjualan dari sekadar pengunjung menjadi pembeli yang benar-benar menyelesaikan pembayaran.
Disusun sebagai materi pembelajaran mata kuliah UX/HCI — Sub-CPMK: Information Architecture (IA) untuk Konversi Penjualan UMKM.
Post a Comment