Di bagian pertama, Anda telah mempelajari cara membuat formulir dasar. Bagian ini membahas praktik terbaik. Dalam modul ini, pelajari pengalaman pengguna (UX), dan mengapa antarmuka pengguna (UI) yang diterapkan dengan baik dapat membuat perbedaan besar.
Membuat antarmuka yang mudah digunakan
Mengisi formulir bisa memakan waktu dan membuat frustrasi. Tidak seharusnya demikian. Untuk menjamin UX yang bagus, pastikan UI-nya intuitif. Pastikan Anda memberikan struktur bentuk dan desain grafis yang optimal (tata letak, spasi, ukuran dan warna font), serta UI yang logis (seperti kata-kata label dan jenis input yang sesuai). Mari kita lihat cara meningkatkan kualitas formulir dan membuatnya mudah digunakan.
Label
Apakah Anda ingat fungsi elemen <label>?
Label menjelaskan kontrol formulir.
Label yang terlihat dan ditulis dengan baik membantu pengguna memahami tujuan kontrol formulir.
Menggunakan label untuk setiap kontrol formulir
Ingin menambahkan kontrol formulir baru ke formulir Anda? Mulai dengan menambahkan label untuk kolom baru. Dengan begitu, Anda tidak lupa untuk menambahkannya.
Menambahkan label terlebih dahulu juga membantu Anda berfokus pada sasaran formulir. Data apa yang saya perlukan di sini? Setelah menjadi jelas, Anda dapat fokus untuk membantu pengguna memasukkan data dan melengkapi formulir.
Kata-kata label
Misalnya Anda ingin mendeskripsikan kolom email. Anda dapat melakukannya sebagai berikut:
<label for="email">Enter your email address</label>
Atau Anda dapat menggambarkannya seperti ini:
<label for="email">Email address</label>
Deskripsi mana yang Anda pilih?
Misalnya, kata-kata 'Alamat email' lebih disukai, karena label yang pendek lebih mudah dipindai, mengurangi kekacauan visualisasi, dan membantu pengguna memahami data apa yang dibutuhkan dengan lebih cepat.
Posisi label
Dengan CSS, Anda dapat menempatkan label di bagian atas, bawah, kiri, dan kanan kontrol formulir. Di mana Anda meletakkannya?
Riset menunjukkan bahwa praktik terbaiknya adalah memosisikan label di atas kontrol formulir, sehingga pengguna dapat memindai formulir dengan cepat dan melihat label mana yang termasuk dalam kontrol formulir.
Mendesain formulir
Desain formulir yang baik dapat
mengurangi rasio pengabaian formulir secara signifikan.
Bantu pengguna memasukkan data menggunakan elemen dan jenis input yang sesuai
Ada berbagai
elemen formulir dan jenis input yang dapat Anda pilih.
Untuk menawarkan UX terbaik, gunakan elemen dan jenis input yang paling sesuai dengan kasus penggunaan Anda.
Jika pengguna harus mengisi beberapa baris teks, gunakan elemen <textarea>.
Jika mereka harus menyetujui persyaratan dan ketentuan situs Anda, gunakan <input type="checkbox">.
Anda juga harus membedakan secara visual antara berbagai jenis kontrol formulir. Tombol harus terlihat seperti tombol. Input seperti input. Permudah pengguna untuk mengenali tujuan kontrol formulir. Misalnya, jika sesuatu terlihat seperti link, mengkliknya akan membuka halaman baru, dan tidak mengirimkan formulir.
Membantu pengguna membuka formulir
Tata letak yang berlebihan bisa jadi menyenangkan, tetapi juga dapat menghalangi penyelesaian formulir.
Secara khusus, penelitian menunjukkan bahwa sebaiknya hanya gunakan satu kolom. Pengguna tidak ingin menghabiskan waktu untuk menelusuri di mana kontrol formulir berikutnya berada. Dengan menggunakan satu kolom, hanya ada satu arah yang harus diikuti.
Membantu pengguna berinteraksi dengan formulir
Untuk menghindari ketukan dan klik yang tidak disengaja,
serta membantu pengguna berinteraksi dengan formulir, buat tombol cukup besar.
Ukuran target ketuk
yang direkomendasikan untuk tombol minimal 48 piksel.
Anda juga harus menambahkan spasi yang cukup di antara kontrol formulir menggunakan properti CSS margin untuk membantu menghindari interaksi yang tidak disengaja.
Ukuran default kontrol formulir terlalu kecil untuk dapat digunakan. Anda harus meningkatkan ukurannya menggunakan padding dan mengubah font-size default.
Anda dapat menentukan ukuran yang berbeda untuk berbagai perangkat penunjuk, misalnya mouse, menggunakan fitur media CSS pointer.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Pelajari
fitur media CSS pointer lebih lanjut.
Menunjukkan error yang terjadi
Untuk memudahkan pengguna mengetahui kontrol formulir mana yang memerlukan perhatian mereka, tampilkan pesan error di samping kontrol formulir yang mereka rujuk. Saat menampilkan error saat pengiriman formulir, pastikan Anda membuka kontrol formulir tidak valid pertama.
Jelaskan kepada pengguna data apa yang harus dimasukkan
Pastikan pengguna memahami cara memasukkan data yang valid. Apakah mereka harus memasukkan setidaknya delapan karakter untuk {i>password<i}? Beri tahu mereka.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Jelaskan kepada pengguna kolom mana yang wajib diisi
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Jika sebuah kolom bersifat wajib, jelaskan! Anatomi Formulir yang Dapat Diakses menjelaskan alternatif untuk menunjukkan kolom wajib diisi. Jika sebagian besar kolom dalam formulir bersifat wajib, sebaiknya tunjukkan kolom opsional.
Bagaimana Anda dapat menghubungkan pesan error ke kontrol formulir agar dapat diakses oleh pembaca layar? Anda dapat mempelajari hal ini di modul berikutnya.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang mendesain formulir
Bagaimana Anda menjelaskan kontrol formulir?
<description>.<label>.description.placeholder.Berapa ukuran target ketuk yang direkomendasikan?
Di mana Anda harus meletakkan pesan error?
<form>.