Di bagian pertama, Anda telah mempelajari cara membuat formulir dasar. Bagian ini membahas praktik terbaik. Dalam modul ini, pelajari tentang pengalaman pengguna (UX), dan mengapa antarmuka pengguna (UI) yang diterapkan dengan baik dapat membuat perbedaan besar.
Membuat antarmuka yang mudah digunakan
Mengisi formulir dapat memakan waktu dan membuat frustrasi. Tidak harus seperti itu. Untuk menjamin UX yang bagus, pastikan UI-nya intuitif. Pastikan Anda memberikan struktur formulir dan desain grafis yang optimal (tata letak, spasi, ukuran font, dan warna), dan UI logis (seperti susunan 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 untuk fokus pada tujuan formulir–data apa yang saya perlukan di sini? Setelah jelas, Anda dapat fokus untuk membantu pengguna memasukkan data dan mengisi formulir.
Susunan kata label
Misalnya Anda ingin mendeskripsikan kolom email. Anda dapat melakukannya seperti berikut:
<label for="email">Enter your email address</label>
Atau Anda bisa menggambarkannya seperti ini:
<label for="email">Email address</label>
Deskripsi mana yang Anda pilih?
Untuk contoh kami, kata-kata 'Alamat email' lebih disukai, karena label yang pendek lebih mudah dipindai, mengurangi kekacauan visual, dan membantu pengguna memahami data apa yang dibutuhkan dengan lebih cepat.
Posisi label
Dengan CSS, Anda dapat memosisikan label di bagian atas, bawah, kiri, dan kanan kontrol formulir. Di mana Anda meletakkannya?
Riset menunjukkan bahwa praktik terbaik adalah dengan memosisikan label di atas kontrol formulir, agar pengguna dapat memindai formulir dengan cepat dan melihat label mana yang termasuk dalam kontrol formulir.
Mendesain formulir
Desain bentuk yang baik dapat
mengurangi rasio pengabaian formulir secara signifikan.
Membantu pengguna memasukkan data dengan 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 untuk kasus penggunaan Anda.
Jika pengguna perlu mengisi beberapa baris teks, gunakan elemen <textarea>.
Jika mereka harus menyetujui persyaratan dan ketentuan situs Anda, gunakan <input type="checkbox">.
Anda juga harus secara visual membedakan berbagai jenis kontrol formulir. Tombol akan terlihat seperti tombol. Input seperti input. Memudahkan pengguna memahami tujuan kontrol formulir. Misalnya, jika sesuatu terlihat seperti tautan, mengekliknya akan membuka laman baru, dan tidak mengirimkan formulir.
Membantu pengguna membuka formulir
Tata letak yang berlebihan bisa menyenangkan, tetapi bisa menghalangi pengisian formulir.
Secara khusus, kita akan membuat riset menunjukkan sebaiknya hanya gunakan satu kolom. Pengguna tidak ingin menghabiskan waktu untuk menelusuri tempat 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,
dan membantu pengguna berinteraksi
dengan formulir Anda, buat tombol Anda cukup besar.
Rekomendasi
ukuran target ketuk tombol setidaknya 48 piksel.
Anda juga harus menambahkan spasi yang cukup di antara kontrol formulir menggunakan margin
Properti CSS untuk membantu menghindari interaksi yang tidak disengaja.
Ukuran default kontrol formulir terlalu kecil untuk benar-benar digunakan. Anda harus meningkatkan ukuran dengan 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 kebijakan
pointer Fitur media CSS.
Tampilkan error tempat terjadinya error
Untuk memudahkan pengguna mengetahui kontrol formulir mana yang perlu diperhatikan, menampilkan pesan error di samping kontrol formulir yang dirujuk. Saat menampilkan error pada pengiriman formulir, pastikan Anda membuka kontrol formulir pertama yang tidak valid.
Jelaskan kepada pengguna data apa yang harus dimasukkan
Pastikan pengguna memahami cara memasukkan data yang valid. Apakah mereka perlu memasukkan setidaknya delapan karakter untuk sebuah {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 suatu kolom bersifat wajib, tunjukkan dengan jelas. Anatomi Formulir yang Dapat Diakses menjelaskan alternatif untuk menunjukkan kolom yang wajib diisi. Jika sebagian besar {i>field<i} dalam formulir diperlukan, mungkin lebih baik untuk menunjukkan kolom opsional.
Bagaimana cara 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 menempatkan pesan error?
<form>.