Usability Testing, Iterasi Desain & Dokumen Spesifikasi untuk UMKM
Materi Pembelajaran — Sub CPMK: Mengembangkan High-Fidelity Prototype yang Interaktif untuk Memvisualisasikan Solusi Desain kepada Pemilik UMKM (Tools: Figma)
Ilustrasi: sesi menguji & mempresentasikan prototype secara langsung kepada pemilik UMKM menggunakan laptop & tablet.
Usability Testing Iterasi Desain Dokumen Spesifikasi Figma
1. Apa itu Usability Testing pada Prototype
Usability testing (uji kegunaan) adalah proses mengamati pengguna nyata saat mencoba menyelesaikan tugas tertentu menggunakan prototype, untuk mengetahui seberapa mudah, cepat, dan bebas kesalahan produk tersebut digunakan. Berbeda dari heuristic evaluation yang dilakukan oleh evaluator/ahli, usability testing melibatkan calon pengguna asli — misalnya pelanggan UMKM — sehingga hasilnya mencerminkan pengalaman pemakaian yang sesungguhnya.
Pada tahap high-fidelity prototype yang sudah interaktif (bisa diklik antar halaman), usability testing menjadi langkah krusial sebelum desain diserahkan ke tim pengembang, karena kesalahan yang ditemukan sekarang jauh lebih murah diperbaiki dibanding setelah aplikasi selesai dibangun.
2. Melaksanakan Uji Kegunaan Sederhana
Uji kegunaan sederhana tidak memerlukan puluhan responden atau laboratorium khusus — untuk kebutuhan pembelajaran maupun validasi awal desain UMKM, 5–8 partisipan sudah cukup untuk menemukan sebagian besar masalah utama (berdasarkan riset Jakob Nielsen, 5 pengguna dapat menemukan hingga 85% masalah usability).
| Langkah | Penjelasan |
|---|---|
| 1. Tentukan skenario tugas | Buat 3–5 tugas konkret, misal "Carilah produk kopi arabika dan selesaikan hingga pembayaran" |
| 2. Rekrut partisipan | Pilih orang yang mewakili calon pelanggan UMKM (bukan tim internal yang sudah familiar dengan desain) |
| 3. Jalankan sesi via prototype Figma | Bagikan link prototype interaktif, minta partisipan menyelesaikan tugas sambil berpikir keras (think-aloud) |
| 4. Catat data selama sesi | Rekam waktu penyelesaian, jumlah kesalahan klik, serta komentar/ekspresi partisipan |
| 5. Berikan kuesioner akhir | Gunakan System Usability Scale (SUS) — 10 pertanyaan standar untuk menghasilkan skor usability 0–100 |
Metrik Umum dalam Usability Testing
3. Menganalisis Temuan & Melakukan Iterasi Perbaikan Desain
Setelah sesi pengujian selesai, seluruh temuan dikumpulkan dan dikelompokkan berdasarkan tingkat keparahan (severity), mirip dengan pendekatan pada audit UX, agar tim dapat memprioritaskan perbaikan yang paling berdampak terlebih dahulu.
| Temuan dari Usability Testing | Severity | Iterasi Perbaikan |
|---|---|---|
| 3 dari 5 partisipan gagal menemukan tombol filter kategori | Kritis | Pindahkan tombol filter ke posisi lebih menonjol tepat di bawah kolom pencarian |
| Partisipan ragu-ragu sebelum menekan tombol checkout karena tidak yakin harga sudah termasuk ongkir | Tinggi | Tambahkan rincian estimasi ongkos kirim sebelum tombol pembayaran |
| Beberapa partisipan tidak menyadari status pesanan berubah setelah checkout | Sedang | Tambahkan notifikasi visual (badge/warna) saat status pesanan berubah |
| Satu partisipan mengomentari ukuran font deskripsi produk agak kecil | Rendah | Naikkan ukuran font deskripsi produk sedikit pada iterasi berikutnya |
Iterasi dilakukan langsung pada file Figma yang sama (bukan membuat file baru), lalu — jika waktu memungkinkan — diuji ulang secara singkat (re-test) pada 1–2 partisipan untuk memastikan masalah yang ditemukan benar-benar teratasi, sebelum desain dianggap siap dipresentasikan secara final.
4. Menyusun Dokumen Spesifikasi Desain & Materi Presentasi untuk UMKM
Setelah desain final disepakati, dua dokumen perlu disiapkan: dokumen spesifikasi desain (untuk tim developer) dan materi presentasi (untuk pemilik UMKM yang umumnya bukan berlatar belakang teknis).
4.1 Dokumen Spesifikasi Desain (Design Specification)
1. Design System — palet warna (kode HEX), jenis & ukuran tipografi, style tombol dan komponen yang dipakai berulang.
2. Anotasi Interaksi — penjelasan setiap elemen interaktif: apa yang terjadi saat tombol/ikon tertentu ditekan.
3. Spesifikasi Ukuran & Jarak — dimensi elemen (padding, margin, ukuran gambar) agar hasil pengembangan sesuai desain asli.
4. Referensi Alur (User Flow & Sitemap) — menyertakan kembali sitemap & user flow yang menjadi dasar prototype.
5. Catatan Hasil Usability Testing — ringkasan temuan & perubahan yang sudah diiterasi, sebagai jejak keputusan desain.
4.2 Materi Presentasi untuk Pemilik UMKM
Berbeda dari dokumen spesifikasi yang teknis, materi presentasi untuk pemilik UMKM harus disampaikan dengan bahasa sederhana dan fokus pada manfaat bisnis, bukan istilah desain yang rumit.
| Bagian Presentasi | Isi yang Disampaikan |
|---|---|
| Ringkasan Masalah | Masalah nyata yang dialami pemilik usaha sebelum solusi ini dibuat (bahasa sehari-hari, bukan istilah UX) |
| Demo Prototype Interaktif | Jalankan prototype secara langsung (mode Present di Figma), biarkan pemilik usaha mencoba mengklik sendiri |
| Hasil Uji Kegunaan | Sampaikan hasil dalam angka yang mudah dipahami, misal "9 dari 10 orang berhasil menyelesaikan pemesanan tanpa dibantu" |
| Rencana Tindak Lanjut | Perkiraan waktu pengembangan & hal yang perlu disiapkan pemilik usaha (foto produk, deskripsi, dsb.) |
5. Studi Kasus: Warung Kopi Mbak Ani
Warung Kopi Mbak Ani adalah UMKM lokal di Yogyakarta yang sedang mengembangkan aplikasi pemesanan online. Setelah high-fidelity prototype selesai dibuat, tim melakukan usability testing sederhana sebelum mempresentasikan hasil akhir kepada pemilik usaha.
5.1 Pelaksanaan Uji Kegunaan
Partisipan: 6 orang pelanggan warung kopi yang biasa memesan lewat WhatsApp, direkrut langsung di lokasi warung.
Tugas yang diberikan: "Pesan 1 gelas Kopi Susu Gula Aren dan selesaikan hingga konfirmasi pesanan" menggunakan prototype interaktif di Figma yang dibuka lewat tablet.
Hasil pengamatan: 5 dari 6 partisipan berhasil menyelesaikan tugas tanpa bantuan (Task Success Rate 83%), dengan rata-rata waktu penyelesaian 48 detik, namun 4 dari 6 partisipan sempat kebingungan mencari menu "Level Gula" karena posisinya tersembunyi di bagian bawah halaman.
5.2 Analisis Temuan & Iterasi
| Temuan | Severity | Perbaikan yang Dilakukan |
|---|---|---|
| Menu "Level Gula" tersembunyi & sulit ditemukan | Tinggi | Dipindahkan tepat di bawah nama menu, sebelum tombol "Tambah ke Keranjang" |
| Partisipan tidak yakin pesanan sudah terkirim ke warung | Sedang | Ditambahkan halaman konfirmasi dengan nomor pesanan & estimasi waktu tunggu |
5.3 Menyusun Dokumen & Presentasi ke Pemilik Usaha
Tim menyusun dokumen spesifikasi desain (warna coklat-krem khas warung, komponen tombol, anotasi interaksi) untuk diserahkan ke developer, sekaligus menyiapkan materi presentasi sederhana untuk Mbak Ani selaku pemilik usaha — menampilkan prototype yang sudah diperbaiki secara langsung di laptop & tablet (lihat foto pada bagian atas), disertai kalimat hasil yang mudah dipahami: "5 dari 6 pelanggan berhasil memesan sendiri tanpa dibantu, dan setelah menu gula dipindah, semuanya berhasil menemukan pilihan level gula dengan mudah."
6. Referensi Jurnal Penelitian Terkait
Berikut beberapa penelitian nasional yang menerapkan usability testing, iterasi desain, dan pengukuran System Usability Scale (SUS) pada prototype UI/UX berbasis Figma untuk platform UMKM maupun sejenisnya:
- Analisa dan Desain Kembali UI/UX Aplikasi Marketplace UMKM Digidesa Menggunakan Metode Design Thinking. Prototype diuji pada 9 responden menggunakan System Usability Scale (SUS) dengan skor 80,71. Baca selengkapnya
- Perancangan Prototipe UI/UX Layanan Pemesanan Berbasis Mobile Website pada UMKM Letra Studio Menggunakan Metode Design Thinking. Jurnal Riset Multidisiplin Edukasi. Sistem manual awal bernilai SUS 45,4 ("Poor"); setelah prototype Hi-Fi diuji pada 12 partisipan, tercapai Completion Rate 100% dengan rata-rata waktu pemesanan 127,5 detik. Baca selengkapnya
- Bakti, A. M. & Marshandi, F. Desain UI/UX Aplikasi E-commerce Berbasis Mobile untuk Bengkel Roda Mas Palembang. Jurnal JTIK, 10(2), 616–632. Prototype diuji menggunakan Maze untuk mengukur task success rate, time on task, dan error rate, dilengkapi kuesioner SUS. Baca selengkapnya
- Desain UI/UX Aplikasi Edukasi FIDEXA-SD Menggunakan Design Thinking dan Figma. METIK Jurnal. Usability testing melibatkan 5 siswa & 3 guru; masalah navigasi kuis & posisi tombol unggah materi berhasil diperbaiki melalui iterasi desain. Baca selengkapnya
- Redesign UI/UX dengan Metode SUS dan UCD pada Website Akademik UHAMKA. METIK Jurnal. Evaluasi menggunakan observasi, kuesioner, dan wawancara dengan 35 mahasiswa aktif. Baca selengkapnya
- Perancangan UI/UX pada CV Kahla Global Persada. JATI (Jurnal Mahasiswa Teknik Informatika). Prototype dirancang di Figma dan diuji dengan SUS, menghasilkan skor di atas 80. Baca selengkapnya
7. Kesimpulan
Usability testing sederhana memungkinkan tim desain memvalidasi high-fidelity prototype menggunakan pengalaman calon pengguna asli, bukan sekadar asumsi tim internal. Dengan menganalisis temuan berdasarkan tingkat keparahan dan melakukan iterasi yang terarah, desain dapat terus disempurnakan sebelum diserahkan ke tahap pengembangan. Terakhir, menyusun dokumen spesifikasi desain yang detail untuk tim developer serta materi presentasi yang sederhana dan berorientasi manfaat bisnis untuk pemilik UMKM memastikan solusi desain benar-benar dipahami dan dapat diimplementasikan dengan tepat.
Disusun sebagai materi pembelajaran mata kuliah UX/HCI — Sub-CPMK: Usability Testing, Iterasi Desain & Dokumen Spesifikasi untuk UMKM.
Post a Comment