it-swarm.asia

Apa cara terbaik untuk menyorot bidang yang Diperlukan pada formulir web sebelum pengiriman?

Ini tampaknya subyektif, dan itu adalah; seorang klien saya ingin saya menyoroti bidang yang diperlukan pada formulir web dalam aplikasi mereka dengan tanda bintang merah, dan saya sedang mencari alternatif karena tanda bintang merah biasanya berarti ada kesalahan pada saya.

Bagaimana cara memberi tahu pengguna bidang mana yang diperlukan? (Tolong satu per jawaban.)

PEMBARUAN: Ini untuk menunjukkan bidang mana yang diperlukan sebelum validasi/postback terjadi.

46
Ryan Shripat

Karena 95% dari semua bidang diperlukan di techinsurance.com, keputusan saya adalah cukup menggunakan huruf tebal untuk menunjukkan bahwa suatu bidang diperlukan dan tulis kata (opsional) di sebelah kolom opsional untuk mengurangi kekacauan.

misalnya.

Nama Depan

Nama Belakang

Nomor Telepon Bisnis

Nomor Ponsel (opsional)

Dan mungkin sama pentingnya adalah pesan kesalahan itu sendiri. Saya membuat mereka sejelas mungkin ...

bidang wajib diisi ...

alt text

dengan kesalahan ...

alt text

Keputusan ini dibuat setelah bertahun-tahun memiliki situs web dengan tanda bintang merah semi-tradisional untuk menunjukkan bidang yang diperlukan. Tanda bintang ini bekerja sebagian besar waktu. Masalahnya adalah ketika ada kesalahan validasi. Beberapa halaman kami bisa sangat panjang dan kesalahan validasi merah tidak akan cukup menonjol pada halaman ketika sudah penuh dengan tanda bintang merah. Saya tahu ini karena kadang-kadang orang akan cukup frustrasi untuk menghubungi kami tentang hal itu. Tetapi semua indikasi menunjukkan bahwa desain baru (di atas) memperbaiki masalah.

57
Steve Wortham

Saya merasa bahwa cara terbaik untuk melakukan ini sebenarnya adalah mengeja kata "wajib" setelah kolom input. Sentimen ini juga tercermin dalam Desain Formulir Web oleh Luke Wroblewski: http://www.lukew.com/ff/entry.asp?725

Sementara tautan contoh berbicara tentang bidang opsional dan bukan bidang wajib, saya yakin prinsipnya tetap sama - pengguna lebih memilih untuk menuliskannya untuk mereka daripada memasukkan indikator visual.

Selain itu, sesuatu untuk dilihat mungkin menunjukkan bidang yang merupakan pilihan alih-alih bidang yang diperlukan. Bagi saya, pengecualian mana yang harus dicatat. Misalnya, jika Anda memiliki 10 bidang, dan 8 di antaranya diperlukan, alih-alih menulis "Wajib" untuk 8 bidang, tulis "Opsional" untuk 2 pengecualian. Tetapi jika hanya 2 yang diperlukan, tulis "Diperlukan" oleh 2 itu, karena mereka adalah pengecualian.

9
RussellUresti

Pertanyaan ini bisa lebih bermasalah dari yang Anda bayangkan.

Misalnya, beberapa poster menyarankan penggunaan tanda bintang untuk menandakan "wajib", masalahnya adalah beberapa situs web menggunakan pembalikan dan meletakkan tanda bintang di sebelah bidang yang opsional. Pengguna tidak secara eksplisit tahu apakah tanda bintang adalah bidang "wajib" atau bidang opsional dengan melirik, dan harus menyelidiki lebih lanjut, memutus aliran mereka, membuat mereka frustrasi tentang proses formulir dan dalam beberapa kasus dapat menyebabkan ditinggalkannya formulir semua bersama.

RussellUresti membalas mengulangi penelitian Luke Wroblewski di "Web Form Design" untuk hanya menulis "wajib" di sebelah bidang wajib juga (dalam pengalaman 10 tahun saya) pendekatan yang telah menghasilkan throughput tertinggi pada formulir dan mengarah pada kebingungan paling sedikit.

Terkait dan hal lain yang perlu dipertimbangkan, jika bidang formulir opsional, dapatkah Anda menggunakan logika sendiri untuk mendapatkan jawaban tanpa meminta pengguna?

Misalnya, jika Anda perlu tahu apakah pengguna adalah Pria atau Wanita, Anda dapat menyimpulkan jawaban dalam beberapa kasus dengan judul yang mereka pilih untuk nama mereka (miss, mrs dll menyiratkan wanita) dan menghapus pertanyaan dari pengguna.

Hal lain yang perlu dipertimbangkan adalah untuk hal-hal seperti bidang alamat, jika Anda dapat meminta kode pos dan melakukan pencarian kode pos, hanya menampilkan bidang alamat jika pengguna memilih untuk memasukkan alamat secara manual atau jika pencarian kode pos gagal, Anda dapat menghindari banyak data opsional yang dapat membuat formulir terlihat lebih panjang dari yang sebenarnya dan menyebabkan pengguna pergi.

Dalam pengalaman saya banyak waktu jika suatu bidang adalah opsional, ada kasus besar untuk menghapus bidang sama sekali. Jelas ini tidak praktis sepanjang waktu, tetapi beberapa kasus mungkin dan akan membantu mengurangi kekacauan visual, untuk pendekatan apa pun yang Anda putuskan untuk diambil.

4

Solusi lain adalah dengan membagi formulir menjadi dua bagian, menyatukan semua bidang yang diperlukan, dan kemudian memberi label seluruh bagian "Diperlukan".

3
Chase Seibert

Cara terbaik yang saya temukan adalah dengan meletakkan tanda bintang di dalam dan selaras kanan.

Example of UX

3
Nijikokun

Ini tentu saja merupakan tempat yang salah untuk memposting ini, tetapi jangan mengabaikan definisi "keharusan" yang diperluas - yaitu, ketika keharusan suatu elemen tergantung pada penggunaan (pemilihan, pengisian, dll.) Elemen lain.

Contoh, bidang A adalah opsional. Namun, jika bidang A memang diisi oleh pengguna akhir, maka bidang B diperlukan.

Bagaimana kita menjelaskan atau mengelompokkan bidang elemen untuk menunjukkan itu? Haruskah kita?

PS. Ingatlah bahwa warna saja merupakan saluran yang tidak dapat diandalkan untuk menyampaikan informasi. Beberapa dari kita tidak dapat dengan mudah membedakan antara merah dan hijau, dan merah dapat menyampaikan hal-hal yang berbeda kepada orang-orang dari budaya yang berbeda.

3
CSSian

Tanda bintang merah sering digunakan sesuai kebutuhan, sehingga klien Anda benar-benar tidak salah. Jika Anda memilih warna lain, seperti oranye atau sesuatu yang sesuai dengan desain situs, itu akan baik-baik saja.

2
James Buckley

Saya sebagian dengan filosofi asterisk sederhana.

Pada catatan yang berhubungan secara tangensial, berikut adalah postingan yang saya tulis beberapa waktu lalu dengan contoh membuat marker kesalahan khusus untuk bidang yang diperlukan dan tidak diisi. Ini agak spesifik teknologi (Rails, Formtastic, jQuery), tetapi konsepnya mudah diadaptasi.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-er--ror-markers

1
blackant

Pertama, karena saya anggap Anda adalah pakar UX, klien Anda seharusnya tidak memberi tahu Anda cara mengatasi masalah UX, mereka harus datang kepada Anda dengan masalah yang harus dipecahkan, bukan solusinya.

Memikirkannya dari sudut pandang pengguna, kami tidak dapat berasumsi bahwa pengguna tahu apa arti tanda bintang. Jika ragu, jelaskan sejelas mungkin menggunakan bahasa tertulis. Saya telah melihat asterisk semakin jarang digunakan di web dan biasanya diikuti dengan penjelasan di bagian bawah halaman saat digunakan. Penjelasan yang lebih sederhana adalah dengan menggunakan 'Diperlukan'. Pembaca layar juga akan mengambil ini dan itu akan membuat situs Anda lebih mudah diakses.

Sudahkah Anda juga berpikir untuk menerapkan prinsip pengungkapan progresif dalam skenario ini? Haruskah bidang yang tidak diharuskan bahkan ada di layar - dapatkah mereka disembunyikan atau ditampilkan kepada pengguna di tahap selanjutnya? Dengan cara ini, ada kelebihan informasi yang lebih sedikit dan semua bidang yang dibutuhkan disajikan, sehingga menghilangkan kebutuhan untuk 'diperlukan' sama sekali. Beberapa informasi lebih lanjut tentang psikologi di balik penjelasan ini: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

Saya telah melihat stadard kegunaan yang menentukan oposite - bahwa semua bidang diperlukan, kecuali ditandai dengan teks (optional). Jika bidang yang diperlukan tidak diisi setelah upaya untuk sumbit, mereka harus ditandai dengan teks yang menjelaskan apa yang salah.

0
awe

Seperti kebanyakan topik kegunaan, ini sangat tergantung - terutama pada berapa banyak bidang yang disertakan dalam formulir Anda dan frekuensi bidang yang diperlukan dalam formulir Anda

Saya biasanya lebih suka tanda bintang merah sederhana yang berdekatan dengan setiap bidang yang diperlukan dan kemudian catatan kaki "* - bidang wajib".

Selain itu, saya ingin menyorot batas bidang berwarna merah jika bidang tetap kosong atau tidak valid setelah acara onBlur(). Menyoroti sama jika pengguna mencoba mengirimkan formulir tanpa mengisi semua bidang yang diperlukan. Penandaan perbatasan menghilang pada acara javascript onFocus().

0
wnathanlee