Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Pengalaman Pengguna: Merangka Borang Pengesahan Cara Yang Benar

by
Length:MediumLanguages:

Malay (Melayu) translation by Hasan Albasr (you can also view the original English article)

Hari ini, kami akan menyemak borang pengesahan dan mengapa anda , Joe Webdesigner, perlu mengambil berat tentangnya.  Inilah artis: ini adalah salah satu cara paling mudah untuk meningkatkan kegunaan reka bentuk anda dan kebanyakan pereka laman web melupakannya sepanjang masa!  Kami juga akan menunjukkan beberapa contoh yang baik bagi reka bentuk pengesahan bentuk yang baik.  Bacalah pelajar muda ... ilmu menanti


Apakah Borang Pengesahan?

Dalam konteks hubungan manusia, pengesahan ialah apabila anda merasa perlu diberitahu bahawa anda betul; Dalam konteks borang web, pengesahan adalah apabila borang memberitahu anda bahawa anda salah.  Untuk menjadi lebih spesifik, borang pengesahan adalah proses yang mana bentuk web memeriksa untuk mengetahui apakah maklumat telah dimasukkan dengan betul .

Sebagai contoh:

  • Jika medan ditandai sebagai "Alamat E-mel", borang itu mungkin semak untuk melihat apakah teks yang telah dimasukkan adalah alamat E-mel yang sah.
  • Jika medan itu ditandai sebagai "Nombor Telefon", borang itu boleh menyemak format tertentu (atau bilangan digit tertentu)

Anda mendapat idea ... pengesahan hanya memastikan bahawa pengguna tidak membuat kesilapan.

Ia adalah sifat manusia untuk membuat kesilapan, dan malangnya, borang web anda mungkin tidak dikecualikan dengan kesilapan manusia.  Di sinilah pengesahan memainkannya dalam bentuk mesra pengguna.  Peringatan peringatan mudah untuk pengguna bahawa sesuatu yang tidak diisi dengan betul dapat membuat semua perbezaan antara keseronokan dengan bentuk penuh dan kekecewaan yang kuat untuk meneka apa yang salah.


Kenapa Anda Perlu Merancang Ia?

Prinsip utama borang pengesahan yang baik ialah: "Bercakap kepada pengguna!  Beritahu mereka ada yang salah!"

Mengintegrasikan pengesahan ke dalam reka bentuk web anda tidaklah sukar ... tetapi kebanyakan pereka tidak pernah menyertakan reka bentuk untuknya. Mengapa?  Kerana pengesahan sering ditinggalkan oleh pemaju untuk sesuatu yang membimbangkan di peringkat akhir sesuatu projek.

Ini mencipta senario di mana anda, Joe Webdesigner, mempercayakan salah satu aspek yang paling penting dari pengalaman pengguna kepada pemaju yang mungkin tidak tahu atau peduli bagaimana pengesahan harus dirancang. Heck, dalam banyak kes, pemaju tidak akan peduli dengan apa-apa selain daripada pengesahan bentuk pembaikan ... yang boleh menggagalkan pengguna.

Ia bukan penggalian kepada pemaju atau apa-apa (dan terdapat banyak dev dev hebat yang akan mengendalikan ini dengan warna terbang), tapi mari kita katakan dev tidak memberi perhatian kerana ia hanya satu hujah.

Semak graf berikut:


Ada yang tidak kena pada borang ini ... tetapi pengguna terpaksa meneka.

Apa yang salah dengan borang ini?  Sudah tentu - bentuknya adalah "mengesahkan" sendiri dengan memberitahu pengguna bahawa ada sesuatu yang salah ... tetapi pengguna dibiarkan meneka.

Prinsip utama borang pengesahan yang baik ialah: "Bercakap kepada pengguna!  Beritahu mereka ada yang salah!"

Mari periksa carta seterusnya:


Eureka!

Lebih baik bukan?  Kini pengguna diberi maklumat yang mereka perlukan untuk membetulkan masalah.  Ini adalah contoh mudah, tetapi perhatikan bagaimana mengintegrasikan sistem tindak balas asas meningkatkan kebolehgunaan dengan cepat.


3 Jenis Biasa Kesilapan Borang

Sekarang anda memahami apa pengesahan, semoga anda mahu memohonnya ke borang web anda.  Selalunya terdapat tiga kesilapan pengguna boleh mengalami dalam bentuk anda:

Memformat Kesilapan

Ini mungkin merupakan masalah terbesar yang dihadapi pengguna.  Adakah anda pernah mengisi borang hanya untuk mengetahui bahawa anda meletakkan watak haram dalam bidang nama pengguna, atau menggunakan ruang dalam alamat web?  Itulah di mana tetapan pengesahan bermula.

Kebanyakan medan dalam bentuk web adalah hanya angka abjad, bagaimanapun, jika anda mempunyai alamat E-mel, alamat web, nombor telefon atau kata laluan, anda mungkin mempunyai format tertentu yang diperlukan.  Anda mungkin dapat meneka sintaks setiap bidang.  Jadi tetapan pengesahan adalah berkesan jika anda mempunyai maklumat khusus yang anda mahukan.

Ralat Field yang Dikehendaki

Kesilapan ini berlaku apabila pengguna melupakan / mengabaikan pengisian bidang yang telah anda tetapkan sebagai "diperlukan atau dikehendaki untuk mengisi".

Kesilapan Perlawanan

Ini berlaku apabila anda perlu menyemak sama ada satu nilai sama dengan nilai yang lain.  Ini amat penting dalam borang login, kerana anda tidak mahu membenarkan pengguna melog masuk jika kata laluan mereka tidak sepadan dengan yang betul.

Ia juga boleh digunakan untuk membolehkan pengguna mengecup semula E-mel atau kata laluan mereka apabila penting bahawa mereka tidak membuat kesilapan.


Merancang Penyelesaian

Walaupun anda boleh gaya bentuk anda dengan seribu cara yang berbeza, biasanya terdapat tiga langkah asas untuk membantu pengguna menyelesaikan masalah pengesahan:

  1. Beritahu pengguna bahawa terdapat ralat di suatu tempat pada borang.
  2. Sorot bidang yang salah
  3. Tunjukkan mereka contoh apa yang anda harapkan.  (Contoh: email@email.com)

Warna adalah salah satu alat terbaik untuk digunakan semasa merekabentuk pengesahan.  Kerana bekerja pada tahap naluri, menambah mesej merah ke mesej ralat, atau mesej hijau ke mesej sukses adalah luar biasa.

Kedekatan adalah alat penting lain - menyimpan pemberitahuan khusus berhampiran kawasan masalah dan menyimpan mesej mengenai keseluruhan borang dari setiap bidang individu.  Sekiranya anda boleh membuat penyelesaian "kulit" khusus yang menjadikan strategi ini lebih jelas (seperti membuat notis kelihatan seperti diletakkan secara fizikal ke dalam bidang tertentu), anda akan menjadi lebih baik.

Ia juga amalan yang baik untuk membolehkan pengguna mengetahui terlebih dahulu di mana mereka boleh membuat kesilapan.  Banyak laman web termasuk kotak sampingan dengan arahan mengenai cara borang diisi.  Orang lain mempunyai sintaks yang betul yang digambarkan di bawah label.  Sama ada ia berfungsi, selagi ia berada di sana.

Seperti yang akan kita sebutkan dalam bahagian "bagaimana kerja pengesahan" di bawah, anda juga mahu menjalankan "pengesahan segera" apabila mungkin.


Contoh Borang Pengesahan Besar

Sekarang kita telah lulus teori bentuk pengesahan ... mari kita lihat beberapa contoh tindakan ini!

Semasa anda melihat ini, ambil perhatian bahawa penyelesaiannya sentiasa mudah: tooltip, kotak pemberitahuan, atau sekeping teks kosong.  Selagi anda menyimpan pemberitahuan yang dekat dengan bidang masalah, anda boleh merekabentuk, kulit, atau gaya dalam apa jua cara yang anda mahukan.  Satu-satunya perkara yang perlu diingat adalah bahawa anda sebenarnya memberi nasihat kepada beberapa pengguna.

Mari kita terokai:

WorldWideThemes.net

WorldWideThemes.net segera memaparkan mesej ralat di bawah lajur. Penyertaan yang berjaya bahkan mendapat mesej "kejayaan" hijau. .


Freeks

Freeks menggunakan pendekatan yang sederhana namun berkesan: Bidang warna salah, dan penambahan teks pemberitahuan dengan tanggapan di bawah.  Edit: Seperti yang diceritakan Boba dalam komen, warna hijau mungkin menyesatkan beberapa pengguna, tetapi anda perlu mengimbangi penjenamaan dan kegunaan untuk rasa anda sendiri.


Twitter

Twitter menambah mesej di sebelah kanan ruang untuk menunjukkan ralat.  Ia berlaku secara langsung ... dan mereka juga menambah warna kepada sistem tindak balas untuk menekankan mesej!


Mint

Mint bukan sahaja pengesahan medan borang dengan segera, mereka juga memberi maklum balas positif dan negatif ... hampir seolah-olah anda sedang berbual dengan satu borang!


FancyForm

FancyForm adalah satu bentuk yang menunjukkan betapa berguna untuk benar-benar memberikan maklum balas dalam bentuk dalam bentuk ikon.


Virb

Virb menambah mesej yang terang apabila anda membuat kesilapan.  Mata Bonus: Virb tidak akan membiarkan anda menaip watak yang tidak dibenarkan! Cuba .... mereka mencabar anda.


WordPress

WordPress akan memberi anda mesej asas ... tetapi perkara yang istimewa adalah bahawa bentuk sebenarnya bergetar apabila anda memasukkan maklumat yang salah.


InvoisMachine

InvoiceMachine menggunakan pendekatan yang paling mudah .  Daripada bantuan teks, warna latar belakang merah menandakan masalah.  Ingat bahawa petua alat teks apabila pengguna melayari borang, akan memperbaikinya dengan lebih baik.


WPCoder

WPCoder menunjukkan bahawa pop timbul Javascript mudah juga berfungsi dengan baik.


Yahoo

Yahoo menggunakan pendekatan lucu ... daripada memulihkan kesilapan asas apabila hari lahir tidak benar, mereka memberi anda sedikit sikap.


Bagaimana Pengesahan Sebenarnya Berfungsi

Dari segi teknologi, terdapat dua cara untuk mengintegrasikan pengesahan dalam formula:

  • Pengesahan sisi server adalah di mana pengguna menyerahkan borang, dan skrip borang kenalan akan menganalisis kandungan dan menyebabkan ralat jika kriteria tidak sepadan.
  • Pengesahan pihak klien adalah sejenis pengesahan JavaScript yang mungkin anda lihat pada beberapa bentuk moden.  Di sinilah maklum balas yang pantas dijana secara bidang ke lapangan tanpa penyerahan.

Pengesahan pihak klien menawarkan alternatif yang paling mudah untuk digunakan kerana ia dapat menunjukkan maklum balas serta-merta dan cepat supaya pengguna boleh membetulkan kesilapan mereka serta-merta.  Walau bagaimanapun, kelemahan utama kepada pengesahan pihak Klien adalah bahawa ia umumnya bergantung pada beberapa jenis JavaScript.  Oleh itu, jika pengguna mematikan JavaScript, mereka tidak akan melihat pengesahan segera.  Jadi pastikan anda masih boleh mundur pada validasi sampingan pengesahan

Anda boleh membaca lebih lanjut mengenai sisi pengesahan teknologi laman rangkaian kami, Nettuts !


Pemikiran Akhir

Bentuk terbaik adalah untuk menjangkakan tingkah laku pengguna.  Adalah penting untuk merancang bentuk dan memahami bagaimana pengguna boleh membuat kesilapan sebelum mereka mula membina.  Mengapa?  Kerana jika anda boleh menjangka masalah itu, sangat mudah untuk merancang penyelesaian untuk membantu pengguna menerusinya.  Walau bagaimanapun, meninggalkan reka bentuk pengesahan sehingga minit terakhir boleh mahal untuk diperbaiki sebaik sahaja pengekodan selesai.  Mengambil masa tambahan untuk mencipta strategi dan gaya untuk borang anda akan menjimatkan masa, wang, dan kekecewaan dalam jangka panjang.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.