it-swarm.asia

Apa pengalaman pengguna yang lebih baik: menyoroti kesalahan, atau memblokir penekanan tombol yang salah?

Saya memiliki beberapa informasi untuk dimasukkan dalam kotak teks. Data terstruktur dan hanya beberapa urutan yang valid. Untuk nomor telepon, misalnya, huruf seperti A tidak valid.

Jadi, haruskah saya mencegat acara keyboard dan mencegah huruf yang diketik mencapai kotak teks, atau haruskah saya menggambar beberapa garis berlekuk merah (atau isyarat visual lainnya) untuk memberi tahu pengguna bahwa surat itu tidak dapat diterima? Manakah pengalaman pengguna yang lebih baik?

20
louisgab

Mengesampingkan kontrol pengguna terhadap komputernya akan selalu menjadi gangguan, dan sering dianggap sebagai invasi, terhadap alur kerja pengguna tersebut. Situs web "tidak seharusnya" memiliki kendali atas komputer kita, jadi menggunakan kontrol semacam itu setidaknya akan sedikit mengkhawatirkan.

Karena itu, Anda memulai topik yang sangat penting, karena pentingnya memberi tahu pengguna bahwa entri mereka tidak valid sebelum mereka mengisi seluruh rangkaian bidang dan mengirimkannya.

Pendekatan yang saya temukan sebagai yang paling tidak mengganggu tetapi memberikan respon putaran tercepat adalah aliran di bawah ini.

alt text

Pada dasarnya, tunggu mereka untuk mengisi bidang pertama mereka, lalu ketika mereka mengklik/tab di sekitar bidang baru (atau bidang yang telah dibatalkan), periksa bidang yang baru saja selesai. Jika bidang yang baru saja selesai valid, cetak ikon "baik" yang tidak mencolok di sebelahnya (hijau, tanda centang, wajah senang, Anda mendapatkan ide). Jika gagal dalam aturan validasi, cetak dengan hati-hati ikon "buruk" (merah, "X", dll.) Dan baris pendek tentang apa yang gagal.

Tapi ingat, jangan hentikan alur kerja mereka:

  • Tidak ada pop-up
  • tidak ada overlay

Ketika mereka selesai dengan bidang yang mereka pindahkan, mereka akan kembali ke bidang yang tidak valid atau pindah dan kembali lagi nanti. Bagaimanapun, mereka akan melihat bahwa mereka memiliki suntingan untuk dibuat tetapi dapat melakukannya pada waktu mereka sendiri.

Pada akhirnya, mereka akan memiliki formulir yang benar-benar valid sebelum mengirimkan, yang berarti

  1. Mereka hanya perlu mengirimkan satu kali
  2. Mereka tidak menghabiskan waktu menjadi marah atau frustrasi ketika pengajuan mereka "gagal"
  3. Mereka akan lebih menyukai situs Anda
  4. Setiap orang akan memiliki kue
17
Matt

Berada di kedua ujung menggunakan formulir, berikut adalah beberapa pedoman yang saya sukai:

  • Input pengguna hampir tidak pernah dapat dicegah. Berarti jika saya mengetik huruf 'A' di bidang nomor telepon, saya akan berharap untuk melihat bahwa 'A'.
  • Saya memulai validasi bidang teks pada acara onBlur(), dan tidak lebih dari itu. Ini memberi pengguna kesempatan untuk memperbaikinya yang salah ketik 'A' sebelum saya menampilkan pesan kesalahan. Mengizinkan pengguna untuk memperbaiki kesalahan saat masih di bidang input memberikan satu kesempatan lebih sedikit untuk jenis pesan "hei, Anda kacau, Bung".
8
wnathanlee

Jika Anda mencegah karakter yang tidak valid saat mereka mengetik, mereka berpotensi berpikir bahwa keyboard mereka tidak berfungsi. Hal-hal seperti pengguna berfungsi seperti yang mereka harapkan. Jika Anda akan mencegah karakter tertentu pada tombol tekan, paling tidak Anda juga harus menampilkan pesan kesalahan di dekat input pada saat yang sama. Dengan cara ini mereka tahu mengapa tidak mengetik.

Hal lain yang dapat mengganggu adalah ketika Anda baru saja selesai mengisi formulir yang panjang dan situs menggunakan validasi sisi server sehingga Anda harus kembali melalui formulir untuk menemukan apa yang salah. Saya suka menggunakan validasi sisi klien terutama tetapi kembali ke sisi server. Saya akan menampilkan kesalahan saat mengetik atau ketika input kehilangan fokus. Dengan cara itu pengguna langsung tahu bahwa ada masalah dan tahu persis apa masalahnya.

5
LoganGoesPlaces

Saya menemukan bahwa mencegah pengguna membuat kesalahan selalu 10x lebih sulit daripada yang saya pikir sebelumnya. Contoh: Nomor telepon seseorang mungkin memiliki ekstensi, seperti x2333. Saya telah menggunakan plugin masker input jQuery untuk kartu kredit dan itu bekerja dengan baik. Saya menggunakan Saran Otomatis bila memungkinkan.

Dalam sistem yang kompleks, Anda akan memiliki keadaan yang mahal untuk mendeteksi inline dan Anda harus memberi tahu mereka setelah fakta. Bagi saya, jawabannya adalah kasus per kasus dan pastikan Anda menutupi setiap kasus Edge.

3
Glen Lipka

Saya akan menyarankan hibrida dari kedua pendekatan, tetapi hanya untuk bidang yang divalidasi secara ketat seperti nomor telepon (SSN, kode pos, dll ... segala sesuatu yang harus menjadi numerik dengan definisi).

Lacak setiap penekanan tombol dan, saat pengguna mengetik karakter yang tidak valid, perlihatkan ... tapi segera beri tanda bahwa ada sesuatu yang salah. Mungkin mengubah bidang input merah dan menampilkan "Silakan masukkan karakter numerik" di sebelah kanan bidang.

Memblokir input adalah tidak-tidak karena dapat disalahtafsirkan oleh pengguna. Mereka mungkin menganggap ada masalah dengan mesin atau perangkat input mereka, bukan karena mereka tidak seharusnya mengetikkan huruf dalam kotak entri numerik.

Memvalidasi setelah input selesai dapat mengganggu. Terutama dengan bidang-bidang seperti yang digunakan dalam pembuatan kata sandi. Beberapa situs memerlukan kata sandi 6 karakter dengan hanya karakter alfanumerik. Yang lain membutuhkan kata sandi 9 karakter dan mengizinkan karakter apa pun (termasuk! @ # $% Dan semacamnya). Mengetik kata sandi dan hanya mencari tahu setelah Saya telah mengetiknya adalah jenis formulir yang paling menjengkelkan yang saya temukan dan telah benar-benar membuat saya menjauh dari beberapa layanan .

Memberikan umpan balik dinamis karena pengguna memasukkan data membantu mereka

  1. Ketahui bidang mana yang memiliki kesalahan saat masih berada di bidang tersebut
  2. Memperbaiki kesalahan input secara proaktif sebelum mengirim data
  3. Belajarlah dari pengalaman saat mereka pergi

Input pemblokiran gagal pada ketiga akun. Menyoroti kesalahan validasi setelah kotak teks gagal juga terjadi pada ketiga.

2
EAMann

Tergantung kasusnya. Jika mungkin gunakan Saran otomatis. Jika Anda menyadap input pengguna, umpan balik langsung sangat penting. Salah satu solusi yang mungkin adalah "kotak petunjuk" yang muncul segera setelah kunci dicegat. Anda dapat melihatnya di layar login Windows, muncul jika Anda menekan $ sign misalnya.

1
Janko

Seperti kebanyakan hal..tergantung pada konteks. Saya memiliki pandangan yang lebih khusus tentang topik ini. Sebagian besar aplikasi yang saya, atau kelompok saya, kerjakan bersifat teknis dan hanya digunakan oleh yang cukup terlatih. Dengan demikian kami dapat menempatkan lebih banyak tanggung jawab dan kebebasan di tangan para pengguna daripada yang Anda bisa lakukan dengan masyarakat umum. Secara singkat, beberapa pedoman yang kami gunakan ...

  • Abaikan entri yang tidak valid .... blokir penekanan tombol yang tidak valid.
  • Tunjukkan bidang yang tidak valid, keadaan yang seharusnya tidak mungkin dilakukan, dengan kontras dan warna *.
  • Fokus selalu di bawah kendali pengguna. Jangan menjebak pengguna atau mencegah perubahan fokus.
  • Jangan sekali-kali melemparkan kotak peringatan/kesalahan modal. Pernah.
  • Jangan pernah bertanya pertanyaan pengguna. Perangkat lunak adalah alat, bukan orang. Ya saya yakin.
  • Tombol Enter/Return selalu berarti: Terima perubahan dan teruskan. Jangan ubah ini dengan menggunakan fokus pada tombol batal/keluar sebagai default pada Enter.
  • Kunci Escape selalu berarti: Buang dan keluar.
  • Berikan penyelesaian otomatis bila memungkinkan.
  • Berikan entri pintasan untuk angka yang memiliki batas min/maks. misalnya Jika nilai yang valid adalah antara 0,12 dan 100,377 maka entri lebih besar dari 100,377, seperti 999, diambil sebagai 100,377, dll.
  • Tetapkan aturan hitam dan putih yang sangat jelas tentang perilaku..rule yang dapat dimengerti pengguna. Jika ini menjadi terlalu rumit ... pikirkan kembali.

Hampir semua contoh adalah permintaan pengguna dan, ya ... implementasi kadang-kadang beruang nyata/mimpi buruk/pembunuh tetapi jarang mustahil.

Peringatan: Sekali lagi, contoh-contoh ini diberikan dalam konteks sistem vertikal dengan basis pengguna teknis .... bukan formulir publik web umum, dll. Jarak tempuh saya beragam.

* Kecuali merah. Dalam bisnis kami merah berarti: Bahaya Anda bisa terbunuh ... atau lebih buruk.

1
Rusty