Validasi Real-Time, UX Baik atau Buruk
Saya memiliki formulir pendaftaran di mana saya membuat validasi WAKTU NYATA ketika pengguna mulai mengetik seperti yang Anda lihat di gambar.
Saya tidak tahu apakah ini membahayakan pengalaman pengguna atau tidak, dan saya juga tidak menemukan sumber daya tentang validasi semacam ini.
Jawaban
Mengutip dari nngroup.com :
7. Jangan Validasi Fields Sebelum Input Selesai
...
Akan mengganggu melihat pesan kesalahan sebelum diberi kesempatan untuk menyelesaikan pengetikan.
Validasi tidak boleh dimulai sebelum input selesai
Saat pengguna mulai memasukkan nilai yang benar, tidak ada kesalahan yang muncul saat mengetik. Masukan dianggap selesai saat
- yang fokus masukan hilang (menavigasi ke bidang lain) atau
- yang berupa disampaikan (misalnya Autosubmit ketika menekan enter) atau bahkan
- setelah tidak menerima masukan untuk beberapa waktu (mis. 3 detik setelah peristiwa masukan terakhir).
Menampilkan kesalahan input dengan segera saat mengetik sangat mengganggu ("harus memiliki setidaknya 3 karakter" saat mulai mengetik) dan jarang membantu.
Kesalahan validasi harus dihilangkan dengan cepat
Setelah bidang divalidasi, dan menunjukkan beberapa kesalahan, pengguna ingin kesalahan itu hilang segera setelah nilai yang diedit benar, bukan ketika dia meninggalkan bidang atau mengirimkan formulir (yang mungkin akan dinonaktifkan lagi selama ada kesalahan ditampilkan).
Hal ini dapat dicapai dengan menghapus semua kesalahan dari bidang ketika menjadi kotor lagi (dan memvalidasinya kembali nanti saat mengirim atau fokus hilang), atau secara otomatis memvalidasi ulang bidang setiap kali diubah.
Daripada terus-menerus menampilkan pesan validasi merah saat pengguna belum memenuhi persyaratan bidang, alternatif yang bagus adalah (1) menampilkan tip yang memberi tahu pengguna apa yang diharapkan, dan (2) menampilkan pesan hijau "persyaratan terpenuhi" saat pengguna telah memasukkan nilai yang valid. Anda bisa menjadi hijau segera setelah inputnya OK.
Itu tergantung pada jenis Input Field.
- Untuk Bidang Email:
Anda tidak ingin terlalu gelisah. Biarkan pengguna selesai mengetik alamat emailnya. Jika bidang input berubah menjadi merah dengan teks kesalahan pada saat pengguna mulai mengetik, itu akan mengganggu pengguna.
Pendekatan yang tepat adalah membiarkan pengguna selesai mengetik dan saat pengguna mengalihkan fokus dari bidang itu, memvalidasi dan menunjukkan apakah itu terlihat bagus atau menampilkan teks pengecualian jika ada.
- Untuk Bidang Nama Pengguna & Kata Sandi:
Bidang nama pengguna dan kata sandi perlu divalidasi sebelum pengiriman karena mereka memiliki persyaratan masukan yang paling ketat. Jadi dengan jelas tunjukkan kepada pengguna apa yang diterima dan yang tidak dalam waktu nyata saat mereka mulai mengetik.
Tautan ke Artikel:
https://designmodo.com/ux-form-validation/
https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/
Validasi real-time berfungsi jika Anda menangani respons yang tidak lengkap dengan benar.
Contoh yang diberikan adalah UI yang buruk karena "reara" adalah cara yang valid untuk memulai alamat email. Contoh di mana validasi real-time dapat menolak respons yang tidak lengkap adalah "reara @@". Jika demikian, validasi waktu nyata dapat menolaknya tanpa menunggu penyelesaian.
Secara umum, Anda perlu menampilkan pesan kesalahan jika tidak ada input tambahan yang dapat membuat respons menjadi valid. Seberapa sulit untuk mendeteksi ini akan berbeda dari kasus ke kasus. Jika Anda memiliki kamus, itu cukup mudah. Dengan ekspresi reguler, kurang begitu.
Ini tentu saja membantu untuk memiliki pesan kesalahan yang baik, yang sesuai dengan konteks masukan yang tidak lengkap. Misalnya, "Sebuah alamat email harus mengandung satu tanda @".
Jika Anda tidak dapat menangani tanggapan yang tidak lengkap, misalnya karena selalu memungkinkan untuk memasukkan sufiks untuk membuat bidang tertentu legal, maka Anda harus menunggu masukan lengkap seperti yang disarankan dalam jawaban lain.
Ini bagus untuk memvalidasi siaran langsung. Namun, validasi semacam itu perlu membedakan antara dua kasus:
- masukan yang dapat dibuat valid dengan menambahkan barang di akhir, dan
- masukan yang tidak dapat dibuat valid dengan menambahkan barang di akhir.
Kasus terakhir harus memunculkan pesan kesalahan secara instan, sedangkan yang pertama harus menunggu sampai masukan selesai.
Tapi bagaimana Anda bisa membedakan satu sama lain?
Itu agak rumit mengingat alat saat ini, tetapi jika Anda menulis mesin ekspresi reguler Anda sendiri (atau jenis mesin status terbatas lainnya untuk validasi), Anda dapat melakukannya seperti ini:
- jika mesin mencapai akhir regexp (keadaan tujuan), terjadi kecocokan.
- jika mesin mencapai ujung string , mungkin ada kecocokan nanti.
- jika mesin tidak dapat mencapai keduanya, tidak akan pernah ada yang cocok.
Masalahnya, sebagian besar bahasa pemrograman tidak memberikan indikasi apa pun tentang mencapai akhir string. Selain itu, meskipun ini adalah perubahan kecil pada mesin regexp yang ada, menjalankan mesin regexp Anda sendiri sudah pasti berada di luar cakupan untuk setiap proyek desain antarmuka pengguna.
Jawaban Sederhana Saya kira itu akan menjadi bahwa jika halaman login memiliki 3-4 bidang itu benar-benar baik untuk menambahkan validasi ketika pengguna mengklik kirim
Bentuk panjang yang harus dipicu oleh pemeriksaan validasi saat input berada di bidang lain kecuali bidang yang disebutkan.
Ini bisa dilakukan di Javascript
Saya menulis artikel tentang masalah dengan validasi langsung :
Singkatnya: ini memberikan umpan balik terlalu awal dan seringkali sebelum pengguna memiliki kesempatan untuk mengetik jawaban mereka ATAU memberikannya terlalu terlambat setelah pengguna selesai mengetik jawaban mereka dan difokuskan pada bidang berikutnya untuk menjawab pertanyaan berikutnya.
Alih-alih fokus pada:
- label yang jelas dan ringkas, teks petunjuk dan pesan kesalahan
- maafkan kesalahan sepele
- biarkan pengguna mengirimkan formulir jika mereka sudah siap
Dengan cara ini pengguna akan sangat jarang melihat pesan kesalahan dan ketika mereka melakukannya, itu akan menjadi saat mereka mengharapkan untuk melihatnya.