Dasar-dasar desain

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.

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?

Menggunakan atribut description.
Menggunakan elemen <description>.
Menggunakan elemen <label>.
Menggunakan atribut placeholder.

Berapa ukuran target ketuk yang direkomendasikan?

Cukup besar untuk diketuk dengan kentang.
31,5 px
16px
48px

Di mana Anda harus menempatkan pesan error?

Di bagian atas <form>.
Jangan pernah tampilkan pesan error.
Di samping kontrol formulir
Di mana pun Anda mau.

Resource