Apa yang bisa dipelajari dari tombol Batal di kanan bawah yang menjengkelkan
Saat mencoba antarmuka mirip kasir, ada tindakan pembatalan di area kanan bawah.
Sesaat, posisi itu terasa seperti tempat tombol maju atau konfirmasi biasanya berada. Satu salah tekan saja cukup membuat antarmuka terasa menyebalkan.
Pelajarannya bukan “Batal tidak boleh berada di kanan.” Setiap platform dan produk punya konvensi berbeda.
Masalah sebenarnya muncul ketika prediksi seseorang berdasarkan pengalaman sebelumnya tidak cocok dengan perilaku antarmuka.
Orang tidak menghadapi setiap layar sebagai kertas kosong. Kita membawa pengalaman dari ponsel, situs web, kasir, mesin tiket, remote, dan lift. Jika desain melawan ekspektasi itu, antarmuka bisa mudah dipahami setelah dipikirkan tetapi tetap mudah salah pada detik pertama.
Banyak kesalahan sehari-hari bukan keputusan salah setelah berpikir panjang. Kesalahan itu adalah slip: terburu-buru, kebiasaan, lelah, atau dua kontrol yang terlalu mirip dan terlalu berdekatan.
Pertanyaan utama artikel ini:
Seperti apa UI/UX yang benar-benar ramah manusia?
Jawabannya bukan menambah instruksi.
Jawabannya adalah prediktif, sulit salah tekan, mudah pulih, dan tidak memaksa orang memproses pilihan yang belum diperlukan.
0. Versi 30 detik: jangan hanya bertanya mengapa pengguna salah
- Label yang sama seharusnya menghasilkan jenis hasil yang sama.
- Tindakan umum sebaiknya mengikuti posisi dan konvensi yang familiar.
- Tindakan dengan konsekuensi sangat berbeda jangan dibuat mirip dan berdempetan.
- Tindakan berbiaya tinggi sebaiknya dapat dibatalkan atau menjelaskan akibatnya sebelum dijalankan.
- Target sentuh perlu cukup besar dan cukup berjarak.
- Fitur lanjutan boleh tetap ada, tetapi tidak harus tampil semua sejak awal.
- Jangan hanya menghitung jumlah pilihan; lihat juga sulitnya membandingkan.
- Amati koreksi langsung seperti segera kembali atau langsung membalik tindakan.
Antarmuka bukan ujian.
Tujuannya adalah membuat orang biasanya berhasil tanpa harus berhenti dan memecahkan cara kerja layar.
1. “Intuitif” biasanya berarti memakai kembali pengalaman lama
Orang membentuk gagasan tentang bagaimana sebuah produk seharusnya bekerja. Dalam UX, ini disebut model mental.[1][2]
Kaca pembesar terasa seperti pencarian. Panah kiri berarti kembali. Tempat sampah berarti hapus. Segitiga berarti putar.
Kita tidak menalar semua arti itu dari nol; kita meminjam tata bahasa dari produk sebelumnya.
Karena itu, kebaruan bisa mahal. Ikon pencarian yang asing mungkin terlihat kreatif bagi pembuatnya dan berubah menjadi teka-teki bagi pengguna.
Heuristik NN/g menekankan kesesuaian dengan dunia nyata dan konsistensi dengan konvensi platform serta industri.[1]
Kesesuaian spasial juga penting. Penelitian tentang kompatibilitas stimulus-respons menemukan lebih banyak kesalahan ketika petunjuk spasial dan respons yang diminta tidak selaras.[3]
Prinsipnya:
Jangan paksa orang menghapus pengalaman yang sudah mereka pelajari.
2. Salah paham dan slip bukan masalah yang sama
Seseorang bisa salah memahami sistem lalu memilih tindakan yang salah.
Atau dia bisa memahami dengan benar tetapi tetap menekan kontrol yang salah.
NN/g secara umum membedakan mistake dan slip.[1]
Jika seseorang mengira tombol menyimpan padahal menghapus, itu masalah pemahaman.
Jika dia tahu itu menghapus tetapi salah tekan karena tombolnya menempel pada Simpan, itu lebih mirip slip.
Mengatakan “baca lebih teliti” adalah desain yang lemah.
Risiko tinggi muncul ketika tindakan dengan konsekuensi berbeda diletakkan berdekatan: Simpan dan Buang, Kirim dan Batal, maju 10 detik dan pindah artikel.
NN/g juga memperingatkan kedekatan tindakan destruktif dan konfirmasi.[4]
Konsekuensi berbeda membutuhkan perlakuan visual dan spasial berbeda.
3. Sebelum menambah konfirmasi, tanyakan apakah tindakan bisa dibatalkan
Hapus, berhenti berlangganan, hapus semua, buang perubahan.
Reaksi desain yang umum adalah menambah dialog “Yakin?”
Tetapi jika semua hal meminta konfirmasi, orang belajar menekan setuju tanpa membaca.
NN/g menyarankan konfirmasi untuk konsekuensi serius dan sulit dibatalkan, menjelaskan dampak konkret, dan menyediakan Undo jika memungkinkan.[5]
“Yakin? Ya / Tidak” lebih lemah daripada:
“3 item akan dihapus. Dapat dipulihkan selama 30 hari” “Hapus 3 item” “Simpan”
Desain ramah tidak menjanjikan manusia tak pernah salah.
Desain itu menurunkan biaya kesalahan.
4. Ukuran tombol hanya setengah masalah; jarak juga penting
WCAG 2.2 Target Size (Minimum) pada umumnya meminta target setidaknya 24×24 piksel CSS atau menyediakan jarak yang cukup.[6]
Contoh W3C sendiri menyebut seseorang ingin menekan Submit tetapi malah menekan Cancel.
Kriteria Enhanced memakai 44×44 piksel CSS, dan Apple umumnya menyarankan area hit minimal 44×44 poin.[7][8]
Namun membuat semua tombol besar belum cukup.
Perlu mempertimbangkan ukuran, jarak, tingkat konsekuensi, frekuensi, tepi layar, dan kemiripan kontrol di sebelahnya.
Dua tombol besar Simpan dan Hapus tetap bisa menjadi jebakan jika tampak sama dan berdempetan.
5. “Fiturnya ada” berbeda dengan “fiturnya harus terlihat sekarang”
Produk kuat mengumpulkan fitur.
Dengarkan, baca cepat, bookmark, daftar putar, bagian sebelumnya, artikel berikutnya, mode belajar, pengaturan, offline.
Semua bisa berguna.
Semua terlihat sekaligus bisa menjadi pameran fitur.
Progressive disclosure menampilkan fungsi inti terlebih dulu dan menyimpan fungsi lanjutan di lapisan berikutnya. NN/g mengaitkannya dengan kemudahan belajar, efisiensi, dan pengurangan kesalahan.[9]
Aturannya:
Jangan hapus. Lipat dulu.
6. Apakah lebih banyak pilihan selalu lebih buruk? Tidak
Hick's law menghubungkan waktu reaksi dengan jumlah alternatif atau ketidakpastian dan tetap penting dalam HCI.[10]
Namun ulasan modern juga membahas pengaruh kompatibilitas stimulus-respons, latihan, dan set pilihan yang sangat besar.[10]
Choice overload juga bergantung pada kondisi.
Meta-analisis 2010 menemukan efek rata-rata hampir nol dengan variasi besar antarstudi.[11]
Meta-analisis 2015 menemukan moderator seperti kompleksitas pilihan, kesulitan tugas, ketidakpastian preferensi, dan tujuan meminimalkan usaha.[12]
Jadi sepuluh pilihan tidak otomatis buruk.
Sepuluh pilihan yang sulit dibedakan, diberikan kepada orang lelah yang harus memutuskan sekarang, lebih mungkin bermasalah.
Inventaris besar di belakang, permukaan keputusan kecil di depan.
7. Audit mandiri situs konten menemukan jebakan yang sama
7-1. Satu kata di judul memicu tindakan lanjutan yang salah
Artikel tentang pengembangan AI kebetulan menyebut pindah rumah dan sistem menampilkan tindakan terkait pindahan sebelum isi. Cocok secara kata, salah secara makna.
7-2. Lompat 10 detik, pindah bagian, dan pindah artikel berada di satu baris
Ikonnya sama-sama terasa navigasional, tetapi konsekuensinya sangat berbeda. Navigasi lokal dan perpindahan halaman sebaiknya dipisah.
7-3. Label “Cari artikel” yang sama menuju tempat berbeda
Label yang sama dengan perilaku berbeda memaksa pengguna belajar ulang.
7-4. Daftar isi panjang muncul sebelum isi
Daftar isi berguna, tetapi 17 item sebelum paragraf pertama menciptakan tugas perbandingan sebelum membaca.
7-5. “Dengarkan semua hasil” menjadi tombol paling dominan
Ini fitur lanjutan yang bagus, tetapi belum tentu tugas utama pencari.
7-6. Akhir artikel menumpuk rekomendasi, peringkat, pencarian, newsletter, dan penulis
Semua boleh ada tanpa harus punya prioritas sama pada detik yang sama.
7-7. Langganan dan berhenti notifikasi terlalu berdekatan
Tindakan berlawanan membutuhkan jarak dan hierarki berbeda.
Hal lucunya: produk yang peduli UX pun tetap bisa membuat ranjaunya sendiri.
8. Iklan tidak otomatis berarti UX buruk; mengambil alih tugas membaca yang bermasalah
Iklan dapat membiayai situs.
Masalahnya adalah persaingan perhatian.
Penelitian eye-tracking tentang iklan web menemukan bahwa jarak dan animasi banner memengaruhi perilaku visual dan dapat mengganggu khususnya saat membaca untuk memahami isi.[13]
Untuk halaman artikel, buat anggaran perhatian:
- jangan tumpuk iklan, player, TOC besar, dan CTA daftar sebelum isi utama
- jauhkan iklan dari kontrol dan tautan
- lipat ruang iklan kosong
- berikan jarak agar tidak terjadi salah klik
Pertanyaannya:
Apa yang ingin dilakukan orang ketika datang ke halaman ini?
9. Checklist QC UI/UX ramah manusia
Prediktabilitas
- Label sama, hasil sama?
- Ikon memakai makna familiar?
- Konvensi platform dibalik tanpa alasan?
- Pengguna baru bisa menebak hasil sebelum klik?
Pencegahan kesalahan
- Tindakan berlawanan berdempetan?
- Tindakan destruktif sama kuat dengan tindakan utama?
- Bisa dibatalkan?
- Konfirmasi menjelaskan konsekuensi nyata?
Jari dan pointer
- Target penting cukup besar?
- Target kecil terlalu rapat?
- Kontrol di tepi layar sulit dijangkau?
Beban informasi
- Tugas utama terlihat?
- Fitur lanjutan muncul terlalu cepat?
- TOC, filter, rekomendasi bisa dibuka bertahap?
Konsistensi
- Produk menggunakan tata bahasa interaksi yang sama?
- Ekspektasi berguna dari produk lain dipertahankan?
10. Data UX yang menarik sering muncul tepat setelah klik
CTR hanya menunjukkan sesuatu diklik.
Perhatikan juga:
- kembali dalam beberapa detik
- menyalakan lalu langsung mematikan
- pindah halaman lalu langsung kembali
- klik berulang di area sama
- keluar setelah kesalahan
- berhasil di percobaan kedua
- terlalu lama mencapai konten utama
Ini petunjuk, bukan diagnosis.
Amati secara agregat dan menjaga privasi.
hipotesis → perubahan kecil → lihat koreksi → pertahankan jika membaik → kembalikan jika memburuk
11. Kesimpulan: ramah bukan berarti lebih banyak penjelasan; artinya lebih sedikit jebakan
UI yang bagus sering tidak terlihat.
Tombol bekerja. Kembali bekerja. Hal yang diharapkan ada di tempat yang masuk akal.
UI buruk bisa menjadi tokoh utama hanya dengan satu salah tekan:
“Kenapa Batal ada di sana?”
Jangan paksa manusia menghafal logika pribadi mesin. Dekatkan mesin pada ekspektasi yang sudah dipelajari manusia.
Fitur lanjutan boleh tetap ada. Perpustakaan konten boleh besar. Monetisasi boleh ada.
Tetapi tampilkan yang penting lebih dulu, pisahkan tindakan berlawanan, gunakan hierarki visual sesuai konsekuensi, dan berikan jalur pemulihan.
UI/UX ramah manusia bukan desain yang menuntut pengguna lebih pintar. Ia membuat manusia biasa tetap aman saat bertindak seperti manusia biasa.
- Nielsen Norman Group nngroup.com
- Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Application-Design Mistakes nngroup.com
- Confirmation dialogs nngroup.com
- W3C Target Size (Minimum) w3.org
- W3C Target Size (Enhanced) w3.org
- Apple Buttons developer.apple.com
- Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne et al. (2010) doi.org
- Chernev et al. (2015) doi.org
- Online advertising and visual attention pmc.ncbi.nlm.nih.gov
