Panduan Langkah demi Langkah Membuat Prototipe Interaktif Sederhana
Anda punya ide perbaikan alur pendaftaran, tapi takut salah paham dengan pengguna. Cara membuat prototipe interaktif memungkinkan Anda menguji apakah alur tersebut masuk akal sebelum menyentuh kode produksi. Panduan ini memandu Anda dari sketsa kasar hingga simulasi klik yang bisa diuji ke beberapa orang.
Mulai dari Tujuan Pengujian
Sebelum membuka alat desain, tentukan satu pertanyaan yang ingin dijawab. Misalnya, “Apakah pengguna menemukan tombol konfirmasi tanpa ragu?” atau “Apakah mereka menyadari ada dua langkah pengiriman?” Tuliskan pertanyaan itu di catatan terpisah. Satu prototipe sebaiknya menguji satu alur utama, bukan seluruh aplikasi.
Batasi cakupan pada tiga sampai lima layar. Lebih dari itu, pengguna akan lelah dan temuan jadi kabur. Pilih layar yang paling sering dilalui atau paling berisiko membingungkan.
Sketsa Alur di Atas Kertas
Gambar kotak-kotak layar dengan pena. Tandai panah dari satu layar ke layar lain untuk setiap aksi: klik tombol, isi kolom, pilih opsi. Sketsa ini membantu Anda melihat celah, misalnya layar yang tidak punya jalan kembali.
Jika alur terasa berbelit, sederhanakan. Buang langkah yang tidak memberi nilai tambah. Setelah kertasnya rapi, barulah pindahkan ke alat digital. Anda bisa meminjam prinsip tata letak dari tips praktis merancang antarmuka untuk pemula agar tampilan prototipe tidak mengalihkan perhatian dari alurnya.
Membangun Layar di Alat Prototipe
Pilih alat yang Anda kuasai. Figma, Penpot, dan Axure sama-sama bisa membuat tautan antar layar. Untuk latihan pertama, Figma atau Penpot sudah cukup. Buat frame untuk setiap layar sesuai sketsa, lalu isi dengan elemen penting: judul, kolom isian, tombol, dan teks bantuan.
Gunakan komponen untuk elemen yang berulang, seperti tombol dan kolom. Dengan begitu, mengubah satu tombol akan memperbarui semua layar. Jangan terjebak memilih warna gradien atau ikon kustom. Fokus pada keterbacaan dan posisi elemen.
Menghubungkan Antar Layar
Masuk ke mode prototipe, lalu tarik garis dari tombol ke layar tujuan. Atur pemicunya menjadi on click. Ulangi untuk setiap aksi yang ada di sketsa. Jika ada kolom isian, Anda bisa menambahkan interaksi sederhana seperti menampilkan pesan error saat kolom kosong dikirim. Pesan error yang jelas akan membantu pengguna memahami kesalahan, seperti dijelaskan di cara menulis pesan error yang membantu pengguna.
Uji dulu prototipe Anda sendiri. Klik setiap tombol dan pastikan tidak ada tautan yang mati. Periksa juga apakah pengguna bisa kembali ke layar sebelumnya tanpa jalan buntu.
Jika Anda membangun prototipe dengan HTML dan JavaScript, menambahkan elemen baru ke DOM bisa dilakukan dengan berbagai metode. Panduan memilih metode untuk menambahkan elemen baru ke DOM dengan jQuery membahas pilihan seperti append, prepend, dan after, yang berguna saat menyimulasikan konten dinamis. Untuk aplikasi PHP, pastikan endpoint yang dipanggil prototipe tidak menghasilkan error tak terduga; cara menangani error 500 di PHP bisa menjadi bekal saat menguji integrasi.
Menyiapkan Skenario Pengujian
Tulis tiga tugas singkat yang akan diberikan ke penguji. Contoh: “Daftarkan akun baru dengan email Anda” atau “Ubah alamat pengiriman setelah menambahkan barang ke keranjang.” Beri konteks secukupnya, tanpa mengarahkan ke tombol tertentu.
Siapkan catatan untuk mengamati: di mana pengguna ragu, di mana mereka salah klik, dan apakah mereka menyadari umpan balik setelah aksi. Rekam layar jika memungkinkan, tetapi minta izin terlebih dahulu.
Menjalankan Uji Coba dan Mencatat Temuan
Ajak dua atau tiga orang yang belum pernah melihat desain Anda. Minta mereka berpikir keras sambil mencoba tugas. Jangan membantu kecuali mereka benar-benar macet. Catat momen kebingungan, bukan pendapat pribadi mereka tentang warna.
Setelah sesi selesai, kelompokkan temuan. Jika dua orang atau lebih mengalami masalah yang sama, itu prioritas perbaikan. Jika hanya satu, catat sebagai catatan pinggir. Anda bisa membandingkan pendekatan ini dengan metode riset lain di perbandingan tiga metode riset pengguna.
Untuk mengukur keberhasilan, hitung berapa persen pengguna menyelesaikan tugas tanpa bantuan. Angka ini memberi gambaran awal, meski bukan patokan mutlak.
Memperbaiki dan Mengulang
Perbaiki satu masalah utama, lalu uji lagi dengan orang baru. Satu putaran perbaikan biasanya cukup untuk menemukan hambatan besar. Jangan menambah fitur baru di tengah proses; simpan untuk iterasi berikutnya.
Setelah alur terasa lancar, barulah pertimbangkan untuk menambahkan transisi atau animasi halus. Animasi yang berlebihan justru bisa mengalihkan perhatian dari tugas, seperti yang sering terjadi pada kebiasaan desain antarmuka yang membuat pengguna menyerah.
Saat butuh hiburan sejenak setelah sesi pengujian yang melelahkan, Anda bisa menonton pertandingan basket, sepakbola, atau UFC secara gratis di tarkamlive yang dipandu host dengan gaya kocak. Sesi menonton bersama seperti ini bisa jadi cara santai melepas penat sebelum kembali memperbaiki prototipe.
Ringkasan
Membuat prototipe interaktif menguji alur dengan cepat tanpa alat canggih. Mulai dari tujuan, sketsa, sambungkan layar, uji ke beberapa orang, lalu perbaiki. Dengan begitu, Anda menghindari perbaikan mahal setelah kode ditulis.
Pertanyaan yang Sering Diajukan
Berapa lama waktu yang dibutuhkan untuk membuat prototipe interaktif sederhana?
Untuk tiga sampai lima layar, waktu pembuatan bisa berkisar satu hingga tiga jam jika aset sudah siap. Pengujian dan perbaikan bisa memakan waktu tambahan, tergantung jumlah temuan.
Apakah harus menggunakan alat berbayar?
Tidak. Figma dan Penpot memiliki versi gratis yang cukup untuk prototipe dasar. Yang lebih penting adalah kejelasan alur dan konsistensi elemen.
Bagaimana jika penguji memberikan masukan yang bertentangan?
Fokus pada perilaku, bukan preferensi. Jika satu penguji suka tombol di kiri dan yang lain di kanan, lihat mana yang lebih cepat mereka temukan saat diberi tugas. Data perilaku lebih dapat diandalkan daripada selera.