User Experience: Merancang Formulir Validasi dengan Cara Tepat

Hari ini, kita akan memeriksa formulir validasi apa dan mengapa Anda, Joe Webdesigner, harus peduli tentang hal itu.  Inilah pengusik: ini adalah salah satu cara termudah untuk meningkatkan kegunaan desain Anda dan kebanyakan perancang web melupakannya sepanjang waktu!  Kami juga akan menampilkan beberapa contoh desain formulir validasi yang bagus.  Bacalah murid muda ... pengetahuan menanti.Lebih lanjut

Apa itu Formulir Validasi?

Dalam konteks hubungan manusia, validasi adalah saat Anda merasa perlu diberi tahu bahwa Anda benar; Dalam konteks formulir web, validasi adalah saat formulir memberitahu Anda bahwa Anda salah.  Untuk lebih spesifik, formulir validasi adalah proses dimana formulir web memeriksa untuk melihat apakah informasi yang telah dimasukkan ke dalamnya sudah benar.

Sebagai contoh:

• Jika sebuah bidang ditandai "Alamat Email", formulir mungkin memeriksa untuk melihat apakah teks yang telah dimasukkan adalah alamat Email yang valid.
• Jika bidang ditandai "Nomor Telepon", formulir mungkin memeriksa format tertentu (atau sejumlah digit tertentu)

Anda mendapatkan idenya ... validasi hanya memastikan bahwa pengguna tidak melakukan kesalahan.

Ini adalah sifat manusia untuk membuat kesalahan, dan sayangnya, bentuk web Anda mungkin tidak dikecualikan dengan kesalahan manusia.  Di sinilah validasi memainkannya dalam bentuk yang user-friendly.  Pengingat visual sederhana bagi pengguna bahwa ada sesuatu yang tidak terisi dengan benar dapat membuat semua perbedaan antara kegembiraan dengan formulir yang terisi penuh dengan sukses dan rasa frustrasi yang intens karena harus menebak apa yang salah.

Mengapa Anda Perlu Merancang Ini?

Prinsip utama formulir validasi yang baik adalah: "Berbicara dengan pengguna!  Katakan pada mereka sesuatu yang salah!"

Mengintegrasikan validasi ke dalam desain web Anda tidaklah sulit ... namun sebagian besar desainer tidak pernah menyertakan desain untuk itu.  Mengapa?  Karena validasi sering kali ditinggalkan pengembang untuk sesuatu yang mengkhawatirkan pada tahap akhir sebuah proyek.

Ini menciptakan skenario di mana Anda, Joe Webdesigner, mempercayakan salah satu aspek paling penting dari pengalaman pengguna kepada pengembang yang mungkin tidak mengetahui atau peduli bagaimana validasi harus dirancang.  Heck, dalam banyak kasus, pengembang bahkan tidak akan repot-repot dengan apa pun selain validasi formulir untuk perbaikan... yang dapat membuat pengguna frustrasi.

Ini bukan penggalian pada pengembang atau apapun (dan ada banyak devs hebat yang akan menangani ini dengan flying colors), tapi anggap saja dev tidak memperhatikan dikarenakan hanya sebatas argumen.

Periksa grafik berikut ini:

Ada yang salah dalam formulir ini ... tapi pengguna terpaksa menebaknya.

Apa yang salah dengan formulir ini?  Tentu - bentuknya adalah "me-validasi" dirinya sendiri dengan memberi tahu pengguna bahwa ada sesuatu yang salah ... namun pengguna dibiarkan menebaknya.

Prinsip utama formulir validasi yang baik adalah: "Berbicara dengan pengguna!  Katakan pada mereka sesuatu yang salah!"

Mari kita periksa grafik berikutnya:

Eureka!

Jauh lebih baik kan?  Sekarang pengguna diberi informasi yang mereka butuhkan untuk memperbaiki masalah.  Ini adalah contoh yang disederhanakan, namun perhatikan bagaimana mengintegrasikan sistem respons dasar meningkatkan kegunaan dengan pesat.

3 Jenis Umum Kesalahan Formulir

Sekarang setelah Anda memahami validasi apa, semoga Anda ingin menerapkannya pada formulir web Anda.  Biasanya ada tiga kesalahan yang dapat dialami pengguna dalam formulir Anda:

Formatting Errors

Ini mungkin masalah terbesar yang akan dihadapi pengguna.  Pernahkah Anda mengisi formulir hanya untuk mengetahui bahwa Anda menempatkan karakter ilegal di kolom nama pengguna, atau menggunakan spasi di alamat web?  Di situlah pengaturan validasi mulai dimainkan.

Sebagian besar bidang dalam formulir web hanya alfanumerik, namun, jika Anda memiliki alamat Email, alamat web, nomor telepon atau kata sandi, Anda mungkin memiliki format tertentu yang diperlukan.  Anda mungkin bisa menebak syntax dari masing-masing bidang.  Jadi pengaturan validasi efektif jika Anda memiliki informasi spesifik yang diinginkan.

Required Fields Errors

Kesalahan ini terjadi saat pengguna lupa / mengabaikan mengisi bidang yang telah Anda tentukan sebagai " required atau wajib terisi".

Match Errors

Hal ini terjadi ketika Anda perlu memeriksa apakah satu nilai sama dengan nilai lainnya.  Ini sangat penting terutama dalam formulir masuk, karena Anda tidak ingin mengizinkan pengguna masuk jika kata sandinya tidak sesuai dengan yang benar.

Hal ini juga dapat digunakan untuk membuat pengguna mengetik ulang Email atau kata sandi mereka bila sangat penting bahwa mereka tidak melakukan kesalahan.

Merancang Solusi

Meskipun Anda dapat memberi gaya pada formulir Anda seribu cara yang berbeda, umumnya ada tiga langkah dasar untuk membantu pengguna memperbaiki masalah validasi:

1. Informasikan kepada pengguna bahwa ada kesalahan di suatu tempat pada formulir.
2. Sorot bidang yang salah
3. Tunjukkan kepada mereka contoh dari apa yang Anda harapkan.  (Contoh: email@email.com)

Warna adalah salah satu alat terbaik untuk digunakan saat merancang validasi.  Karena bekerja pada tingkat instinctual, menambahkan pesan merah ke pesan kesalahan, atau pesan hijau ke pesan sukses sangat luar biasa.

Kedekatan adalah alat penting lainnya - menyimpan pemberitahuan spesifik di dekat bidang masalah dan menyimpan pesan tentang keseluruhan formulir dari setiap bidang individual.  Jika Anda dapat membuat solusi "kulit" khusus yang membuat strategi ini lebih jelas (seperti membuat pemberitahuan terlihat seperti dilekatkan secara fisik ke bidang tertentu), Anda akan melakukannya dengan lebih baik.

Ini juga merupakan praktik yang baik untuk memberi tahu pengguna Anda sebelumnya di mana mereka dapat menciptakan kesalahan.  Banyak situs web menyertakan kotak side-bar dengan petunjuk tentang bagaimana formulir harus diisi.  Lainnya memiliki syntax yang benar yang dijelaskan di bawah label.  Entah cara kerjanya, asalkan ada disana.

Seperti yang akan kami sebutkan di bagian "bagaimana validasi bekerja" di bawah ini, Anda juga ingin menjalankan "validasi instan" bila memungkinkan.

Contoh Formulir Validasi yang Hebat

Sekarang setelah kita melewati teori formulir validasi ... mari kita lihat beberapa contoh aksi ini!

Sementara Anda melihat ini, perhatikan bahwa solusinya selalu sederhana: sebuah tooltip, sebuah kotak di notifikasi, atau sepotong teks biasa.  Selama Anda menyimpan notifikasi dekat dengan problem-field, Anda dapat merancang, skin, atau gaya dengan cara apa pun yang Anda inginkan.  Satu-satunya hal yang perlu diingat adalah Anda benar-benar memberi saran kepada beberapa pengguna.

Mari kita gali:

ThemeForest

ThemeForest segera menampilkan pesan kesalahan di bawah kolom.  Entri yang berhasil bahkan mendapatkan pesan "sukses"  yang berwarna hijau.

Frexy

Frexy menggunakan pendekatan yang sederhana namun efektif: Warna bidang yang salah, dan penambahan teks pemberitahuan dengan kesan terang di bawah ini.  Edit: Seperti yang dicatat Boba dalam komentar, warna hijau bisa menyesatkan beberapa pengguna, namun Anda harus menyeimbangkan branding dan kegunaan untuk selera Anda sendiri.

Twitter

Twitter menambahkan pesan ke kanan ruang untuk menunjukkan kesalahan. Hal itu terjadi secara langsung... dan mereka bahkan menambahkan warna pada sistem respon untuk menekankan pesan!

Mint

Mint tidak hanya melakukan validasi bidang formulir dengan segera, mereka juga memberi umpan balik positif dan negatif ... hampir seolah-olah Anda sedang bercakap-cakap dengan formulir!

FancyForm

FancyForm adalah form-tool yang menunjukkan betapa bergunanya untuk benar-benar memberikan umpan balik in-line dalam bentuk ikon.

Virb

Virb menambahkan pesan yang terang saat Anda melakukan kesalahan.  Bonus Points: Virb bahkan tidak akan membiarkan Anda mengetik karakter yang tidak diizinkan!  Coba saja .... mereka menantang Anda.

Wordpress

WordPress akan memberi Anda pesan dasar ... tapi yang spesial adalah formulir itu sebenarnya bergetar saat Anda memasukkan informasi yang salah.

InvoiceMachine

InvoiceMachine menggunakan pendekatan yang paling sederhana.  Alih-alih bantuan tekstual, warna latar belakang berwarna merah menandakan sebuah masalah.  Ingatlah bahwa text-tooltip saat pengguna berselancar pada suatu formulir, akan memperbaiki ini lebih baik lagi.

WPCoder

WPCoder menunjukkan bahwa popup Javascript sederhana bisa bekerja dengan baik juga.

Yahoo

Yahoo menggunakan pendekatan lucu ... daripada mengembalikan kesalahan mendasar saat ulang tahun tidak benar, mereka memberi Anda sedikit sikap.

Bagaimana Validasi Sebenarnya Bekerja

Dari sudut pandang teknologi, ada dua cara berbeda untuk mengintegrasikan validasi dalam formulis:

• Validasi Server-side adalah tempat pengguna mengirimkan formulir, dan skrip formulir kontak akan menganalisis konten dan menimbulkan kesalahan jika kriteria tidak sesuai.
• Validasi Client-side adalah jenis validasi JavaScript yang mungkin Anda lihat pada beberapa formulir modern.  Di sinilah umpan balik yang cepat dihasilkan berdasarkan dasar field-to-field tanpa pengajuan.

Validasi Client-side menawarkan alternatif yang paling mudah digunakan karena dapat menunjukkan umpan balik secara langsung dan cepat sehingga pengguna dapat segera memperbaiki kesalahannya. Namun, kerugian utama untuk validasi Client-side adalah bahwa hal itu umumnya bergantung pada semacam JavaScript.  Oleh karena itu, jika pengguna mematikan JavaScript, mereka tidak akan melihat validasi langsung. Jadi, pastikan masih bisa mundur pada validasi side validation

Anda dapat membaca lebih banyak tentang sisi validasi teknologi di situs jaringan kami, Nettuts!

Gagasan Terakhir

Formulir terbaik adalah yang mengantisipasi perilaku pengguna.  Penting untuk merencanakan formulir dan memahami bagaimana pengguna bisa melakukan kesalahan sebelum mulai dibangun.  Mengapa? Karena jika Anda bisa mengantisipasi masalah, sangat mudah merancang solusi untuk membantu pengguna melewatinya.  Namun, meninggalkan desain validasi sampai menit terakhir bisa mahal untuk diperbaiki begitu pengkodean selesai.  Mengambil beberapa waktu tambahan untuk merancang strategi dan gaya untuk formulir Anda akan menghemat waktu, uang, dan frustrasi dalam jangka panjang.