Porto - Demo Blog 5

(A/B Testing) Membuat Keputusan Desain Berbasis Data

HOOK

Pernahkah Anda merasa frustrasi karena tidak tahu cara melakukan sesuatu yang seharusnya sederhana di smartphone? Anda sudah menekan berbagai bagian layar, namun aplikasi tidak memberikan respon yang Anda harapkan. Anda tidak sendirian. Rasa "tersesat" ini bukanlah kesalahan Anda sebagai pengguna, melainkan tanda adanya hambatan komunikasi antara manusia dan desain yang disebut dengan Gulf of Execution.

SUB-HEADING 1: Penjelasan Konsep

Gulf of Execution adalah kesenjangan atau perbedaan antara apa yang ingin dilakukan oleh pengguna (tujuan atau niat) dengan pilihan tindakan yang tersedia di dalam sistem, serta bagaimana sistem tersebut direpresentasikan. Sederhananya, ini adalah pertanyaan: "Bagaimana cara saya melakukan apa yang ingin saya lakukan dengan aplikasi ini?"

Jika pengguna harus berpikir terlalu keras untuk mencari tahu cara berinteraksi dengan suatu fitur, berarti Gulf of Execution pada produk tersebut besar. Desain yang baik berusaha untuk memperkecil Gulf of Execution ini, membuat interaksi terasa alami dan otomatis.

Konsep ini sangat berkaitan dengan:

• Affordance: Kualitas suatu objek yang menunjukkan bagaimana objek tersebut dapat digunakan (misalnya, pegangan cangkir "mengizinkan" untuk digenggam).

• Signifiers: Indikasi visual atau audio yang jelas tentang tindakan yang mungkin dilakukan dan lokasi tindakan tersebut (misalnya, tulisan "Klik Di Sini" atau ikon panah).

SUB-HEADING 2: Contoh Nyata

Mari kita lihat contoh konkret bagaimana Gulf of Execution muncul di aplikasi yang kita gunakan sehari-hari, dan bagaimana Usability Testing mengungkapnya:

• Navigasi Game (Kasus Jurnal Hananto dkk., 2022):

  • Niat Pengguna: Ingin memulai permainan baru.

  • Desain Awal: Tombol "Mulai" berukuran kecil, warnanya pudar, dan letaknya tersembunyi di antara elemen lain.

  • Gulf of Execution: Pengguna kesulitan menemukan tombol "Mulai", bahkan tidak yakin apakah itu tombol. Mereka mencari-cari, bingung, dan mungkin menyerah.

  • Temuan (dari A/B Testing): Dalam jurnal Hananto dkk., pengujian dua versi visual (A/B Testing) membuktikan bahwa desain tombol yang lebih dominan, jelas, dan strategis akan mengurangi waktu yang dibutuhkan pengguna untuk bertindak.

• Proses Registrasi Aplikasi Mobile:

  • Niat Pengguna: Ingin membuat akun dengan cepat.

  • Desain Awal: Formulir registrasi panjang dengan banyak kolom yang tidak relevan, tanpa opsi login via media sosial, dan tidak ada indikator progres.

  • Gulf of Execution: Pengguna merasa prosesnya rumit dan memakan waktu, sehingga banyak yang batal mendaftar (drop-off).

  • Solusi: Menyediakan "Social Login" (Google/Apple) atau membuat formulir bertahap dengan indikator progres yang jelas.

• Situs E-Commerce:

  • Niat Pengguna: Ingin mencari produk tertentu.

  • Desain Awal: Kolom pencarian kecil, tidak ada fitur auto-complete, dan filter produk tidak tersedia.

  • Gulf of Execution: Pengguna kesulitan menemukan produk yang relevan, harus scroll berulang kali, atau salah memasukkan kata kunci.

  • Solusi: Memperbesar kolom pencarian, menambahkan saran pencarian otomatis, dan menyediakan filter produk yang detail.

 

Berikut adalah infografis yang menggambarkan konsep Gulf of Execution, beserta contoh visualnya.

 

Infografis: Memahami Gulf of Execution

Visualisasi "Before & After" (Contoh Solusi Desain)

 

Desainer dapat menjembatani Gulf of Execution ini dengan beberapa teknik yang telah terbukti efektif dan divalidasi melalui Usability Testing serta A/B Testing:

1. Penerapan Signifiers yang Jelas dan Kuat:

   • Pastikan tombol aksi (CTA seperti "Beli Sekarang", "Daftar", "Kirim") menonjol dengan warna kontras, ukuran yang proporsional, dan teks yang lugas.

   • Gunakan ikon yang universal dan mudah dikenali (misalnya, ikon keranjang untuk belanja, ikon kaca pembesar untuk pencarian).

2. Mapping yang Logis dan Konsisten:

   • Letakkan elemen penting di tempat yang sudah menjadi kebiasaan mental pengguna (misalnya, menu navigasi utama di bagian bawah untuk aplikasi mobile, atau di bagian atas/samping untuk website).

   • Pastikan alur tugas (misalnya, proses checkout) mengikuti urutan yang logis dan jelas, hindari lompatan yang membingungkan.

3. Memanfaatkan A/B Testing:

   • Sebagaimana disarankan dalam jurnal Hananto dkk. (2022), jangan mengandalkan asumsi. Ujilah dua atau lebih opsi desain (misalnya, dua tata letak tombol "Mulai", atau dua alur checkout) kepada kelompok pengguna nyata.

   • Data kuantitatif dari A/B Testing akan menunjukkan secara objektif desain mana yang paling efektif dalam meminimalkan Gulf of Execution (misalnya, waktu penyelesaian tugas lebih cepat, tingkat drop-off lebih rendah).

4. Feedback Visual yang Instan:

   • Sistem harus memberikan respon segera setelah pengguna melakukan tindakan. Misalnya, tombol berubah warna saat diklik, ada loading spinner saat proses sedang berjalan, atau pesan error yang jelas jika ada kesalahan input. Ini menjembatani Gulf of Evaluation (kesenjangan evaluasi) yang seringkali menyertai Gulf of Execution.

KESIMPULAN + CTA

Kesimpulannya, menjembatani Gulf of Execution bukan hanya tentang membuat desain yang estetis, tetapi tentang menciptakan pengalaman yang mulus, intuitif, dan efisien. Desain yang hebat adalah desain yang "tidak terlihat" karena ia bekerja selaras dengan pikiran pengguna, memungkinkan mereka mencapai tujuan tanpa hambatan. Dengan memahami dan mengatasi kesenjangan ini melalui metode penelitian seperti Usability Testing dan A/B Testing, kita dapat membangun produk digital yang benar-benar memberdayakan penggunanya.

BRANDING UMRI
Artikel ini ditulis sebagai bagian dari pembelajaran mata kuliah Interaksi Manusia dan 
Komputer di Program Studi Teknik Informatika, Universitas Muhammadiyah Riau. 
Untuk informasi lebih lanjut tentang program studi kami, kunjungi www.umri.ac.id 

Referensi :

1. Referensi Utama (Sesuai File Jurnal yang Diunggah):

• Hananto, B. A., Melini, E., Zulkarnain, A., & Kotandi, J. (2022). Uji Coba Metode A/B Testing dalam Proses Desain (Objek Eksperimen: Visual Tampilan Permainan Digital Acaraki). Gestalt: Jurnal Desain Komunikasi Visual, 4(1), 1–13. https://doi.org/10.33005/gestalt.v4i1.92

2. Referensi Teori Fundamental (UX & Gulf of Execution):

• Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books. (Sumber asli teori Gulf of Execution dan Gulf of Evaluation).

• Nielsen, J. (1993). Usability Engineering. Morgan Kaufmann Publishers Inc.

3. Referensi Prinsip Desain (Affordance & Signifiers):

• Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.

• Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd ed.). New Riders.

4. Referensi Metodologi & Standar:

• Sudaryono. (2019). Metodologi Penelitian: Kuantitatif, Kualitatif, dan Mix Method (2nd ed.). Rajawali Pers.

• International Organization for Standardization. (2018). Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems (ISO Standard No. 9241-210:2018).