Dasar-dasar desain

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, tetapi tidak harus demikian. Untuk membangun pengalaman pengguna yang luar biasa, pastikan antarmukanya intuitif. Pastikan Anda memberikan struktur formulir dan desain grafis yang optimal (tata letak, ruang spasi, ukuran dan warna font), serta UI yang logis (seperti susunan kata label dan jenis input yang sesuai). Lihat cara Anda dapat meningkatkan kualitas formulir dan membuatnya lebih 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.

Gunakan label untuk setiap kontrol formulir

Ingin menambahkan kontrol formulir baru ke formulir Anda? Mulai dengan menambahkan label untuk kolom baru. Dengan cara ini, Anda tidak lupa untuk menambahkannya.

Menambahkan label terlebih dahulu juga membantu Anda berfokus pada sasaran formulir–data apa yang saya butuhkan di sini? Setelah hal ini jelas, Anda dapat berfokus untuk membantu pengguna memasukkan data dan menyelesaikan formulir.

Kata-kata label

Katakan bahwa Anda ingin mendeskripsikan kolom email. Anda dapat melakukannya sebagai berikut:

<label for="email">Enter your email address</label>

Atau Anda dapat mendeskripsikannya seperti ini:

<label for="email">Email address</label>

Deskripsi mana yang Anda pilih?

Untuk contoh kita, kata-kata 'Alamat email' lebih disukai, karena label pendek lebih mudah dipindai, mengurangi kekacauan visual, dan membantu pengguna memahami data yang diperlukan dengan lebih cepat.

Posisi label

Dengan CSS, Anda dapat memosisikan label di atas, bawah, kiri, dan kanan kontrol formulir. Di mana Anda menempatkannya?

Riset menunjukkan bahwa praktik terbaik adalah memosisikan label di atas kontrol formulir, sehingga pengguna dapat memindai formulir dengan cepat dan melihat label mana yang termasuk dalam kontrol formulir mana.

Mendesain formulir

Desain formulir 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 harus mengisi beberapa baris teks, gunakan elemen <textarea>. Jika pengguna harus menyetujui persyaratan dan ketentuan situs Anda, gunakan <input type="checkbox">.

Anda juga harus membedakan secara visual berbagai jenis kontrol formulir. Tombol harus terlihat seperti tombol. Input seperti input. Memudahkan pengguna mengenali tujuan kontrol formulir. Misalnya, jika sesuatu terlihat seperti link, mengkliknya akan membuka halaman baru, dan tidak mengirimkan formulir.

Membantu pengguna menavigasi formulir

Tata letak yang mewah memang menyenangkan, tetapi dapat menghalangi penyelesaian formulir.

Khususnya, penelitian menunjukkan bahwa sebaiknya hanya menggunakan satu kolom. Pengguna tidak ingin menghabiskan waktu untuk mencari kontrol formulir berikutnya. 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 Anda, buat tombol yang cukup besar. Ukuran target ketuk tombol yang direkomendasikan adalah minimal 48 piksel. Anda juga harus menambahkan jarak yang cukup di antara kontrol formulir menggunakan properti CSS margin untuk membantu menghindari interaksi yang tidak disengaja.

Ukuran default kontrol formulir terlalu kecil untuk benar-benar dapat digunakan. Anda harus memperbesar ukuran menggunakan padding dan mengubah font-size default.

Anda dapat menentukan ukuran yang berbeda untuk perangkat penunjuk yang berbeda, 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 lebih lanjut pointer fitur media CSS.

Menampilkan error di tempat terjadinya

Agar pengguna dapat dengan mudah mengetahui kontrol formulir mana yang memerlukan perhatian mereka, tampilkan pesan error di samping kontrol formulir yang dimaksud. Saat menampilkan error pada pengiriman formulir, pastikan untuk membuka kontrol formulir tidak valid pertama.

Jelaskan kepada pengguna data apa yang harus dimasukkan

Pastikan pengguna memahami cara memasukkan data yang valid. Apakah mereka perlu memasukkan minimal delapan karakter untuk sandi? 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 kolom wajib diisi, buatlah kolom tersebut terlihat jelas. Anatomi Formulir yang Dapat Diakses menjelaskan alternatif untuk menunjukkan kolom wajib diisi. Jika sebagian besar kolom dalam formulir wajib diisi, sebaiknya tunjukkan kolom opsional.

Bagaimana cara menghubungkan pesan error ke kontrol formulir agar dapat diakses oleh pembaca layar? Anda dapat mempelajarinya di modul Aksesibilitas.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang mendesain formulir

Resource

• Membuat Formulir yang Menarik
• Praktik Terbaik Untuk Desain Formulir Seluler
• Baymard Institute: Riset UX E-Commerce
• Jangan Buat Saya Berpikir