Orang yang menggunakan aplikasi atau situs Anda memiliki tujuan tertentu. Seringkali satu hal yang berdiri di antara pengguna dan tujuannya adalah formulir. Karena formulir masih tetap menjadi salah satu jenis interaksi yang paling penting bagi pengguna di web dan di aplikasi. Bahkan, formulir sering dianggap sebagai langkah terakhir dari perjalanan menuju penyelesaian tujuan.
Bentuk hanyalah sarana untuk mencapai tujuan. Pengguna harus dapat mengisi formulir dengan cepat dan tanpa kebingungan.
Di artikel ini, Anda akan melihat panduan praktis yang dibuat dari pengujian kegunaan, pengujian lapangan, pelacakan mata, dan keluhan aktual yang dibuat oleh pengguna yang tidak puas.
Komponen Bentuk
Bentuk khas memiliki lima komponen berikut:
Struktur. Ini termasuk pemesanan untuk bidang, tampilan pada halaman dan koneksi logis antara beberapa bidang.
Bidang input. Mereka termasuk bidang teks, bidang kata sandi, kotak centang, tombol radio, slider dan bidang lainnya yang dirancang untuk input pengguna.
Label bidang. Mereka memberi tahu pengguna apa artinya bidang input terkait.
Tombol aksi. Ketika pengguna menekan tombol, tindakan dilakukan (seperti mengirimkan data).
Umpan balik. Pengguna memahami hasil input dengan umpan balik. Sebagian besar aplikasi atau situs menggunakan pesan sebagai bentuk umpan balik. Pesan memberi tahu pengguna tentang hasil, mereka bisa positif (menunjukkan bahwa formulir telah berhasil dikirim) atau negatif (“Nomor yang Anda berikan salah”).
Formulir juga dapat memiliki komponen berikut:
Pendampingan. Bantuan apa pun yang menjelaskan cara mengisi formulir.
Validasi. Pemeriksaan otomatis yang memastikan bahwa data pengguna valid.
Artikel ini mencakup banyak aspek yang terkait dengan struktur, bidang input, label, dan tombol aksi.
Bentuk struktur
Formulir adalah percakapan. Dan seperti percakapan apa pun, percakapan harus diwakili oleh komunikasi logis antara dua pihak – pengguna dan aplikasi Anda.
Hanya Tanyakan Yang Diperlukan
Pastikan Anda hanya bertanya apa yang benar-benar Anda butuhkan. Setiap bidang tambahan yang Anda tambahkan ke formulir akan memengaruhi tingkat konversinya. Itu sebabnya Anda harus selalu mempertanyakan mengapa dan bagaimana informasi yang Anda minta dari pengguna Anda digunakan.
Pesan formulir secara logis
Detail harus ditanyakan secara logis dari sudut pandang pengguna, bukan logika aplikasi atau basis data. Biasanya, tidak biasa untuk meminta alamat seseorang sebelum nama mereka.
Informasi Terkait Grup
Anda harus mengelompokkan informasi terkait dalam blok atau set logis. Aliran dari satu set pertanyaan ke yang berikutnya akan lebih menyerupai percakapan. Pengelompokan bidang terkait bersama-sama juga membantu pengguna memahami informasi yang harus mereka isi. Di bawah ini adalah contoh untuk Informasi Kontak.
Satu Kolom vs Beberapa Kolom
Formulir tidak boleh terdiri dari lebih dari satu kolom. Salah satu masalah dengan bidang formulir di beberapa kolom adalah bahwa pengguna Anda cenderung menafsirkan bidang tersebut secara tidak konsisten. Jika formulir memiliki bidang yang berdekatan secara horizontal, pengguna harus memindai dalam pola Z, memperlambat kecepatan pemahaman dan mengeruhkan jalur yang jelas ke penyelesaian. Tetapi jika formulir berada dalam satu kolom, jalur menuju penyelesaian adalah garis lurus ke bawah halaman.
Bidang Input
Bidang input adalah apa yang memungkinkan pengguna Anda untuk mengisi formulir Anda. Bergantung pada informasi apa yang Anda tanyakan, ada berbagai jenis bidang – bidang teks, bidang kata sandi, dropdown, kotak centang, tombol radio, pembuat data, dan lainnya.
Jumlah Fields
Cobalah untuk meminimalkan jumlah bidang sebanyak mungkin. Ini membuat formulir Anda kurang dimuat, terutama ketika Anda meminta banyak informasi dari pengguna Anda. Namun jangan terlalu sering melakukannya, tidak ada yang menyukai bentuk tiga bidang yang berubah menjadi 30 bidang interogasi.
Wajib vs Opsional
Cobalah untuk menghindari bidang opsional dalam formulir. Tetapi jika Anda menggunakannya, Anda setidaknya harus dengan jelas membedakan bidang input mana yang tidak dapat dibiarkan kosong oleh pengguna. Konvensi ini menggunakan tanda bintang (*) atau ‘opsional’ (yang lebih disukai untuk formulir panjang dengan beberapa bidang wajib).
Pengaturan Nilai Default
Anda harus menghindari memiliki default statis kecuali Anda yakin sebagian besar dari pengguna Anda (mis. 90%) akan memilih nilai itu. Khususnya jika itu adalah bidang wajib. Mengapa? Karena Anda cenderung membuat kesalahan karena orang memindai formulir dengan cepat secara online – jangan menganggap mereka akan meluangkan waktu untuk membaca semua pilihan. Mereka dengan mudahnya melewatkan sesuatu yang sudah memiliki nilai.
Tetapi smart default dapat membuat pengisian formulir pengguna lebih cepat dan lebih akurat. Misalnya, pra-pilih negara pengguna berdasarkan data lokasi geografis mereka. Tapi tetap saja Anda harus menggunakan ini dengan hati-hati, karena pengguna cenderung meninggalkan bidang yang sudah dipilih sebelumnya.
Khusus desktop: Buat Formulir Ramah Keyboard
Pengguna harus dapat memicu dan mengedit setiap bidang hanya menggunakan keyboard. Pengguna yang kuat, yang cenderung menggunakan keyboard dengan berat, harus dapat dengan mudah menabrak bidang dan melakukan pengeditan yang diperlukan, semua tanpa mengangkat jari mereka dari keyboard. Anda dapat menemukan persyaratan terperinci untuk pola interaksi keyboard di W3C’s Authoring Practices for Design
Patterns.
Khusus desktop: Fokus Otomatis untuk Bidang Input
Bidang fokus otomatis memberi pengguna indikasi dan titik awal untuk dengan cepat mulai mengisi formulir. Anda harus memberikan ‘pemberitahuan’ visual yang jelas bahwa fokus telah pindah ke sana – ubah warna, pudar dalam kotak, flash panah, apa pun. Formulir pendaftaran Amazon memiliki autofokus dan pemberitahuan visual untuk pengguna.
Khusus seluler: Cocokkan Keyboard dengan Input Teks yang Diperlukan
Pengguna aplikasi menghargai aplikasi yang menyediakan keyboard yang sesuai untuk entri teks. Pastikan ini diterapkan secara konsisten di seluruh aplikasi, bukan hanya untuk tugas-tugas tertentu tetapi tidak untuk yang lain.
Label
Hapus label teks adalah salah satu cara utama untuk membuat UI lebih mudah diakses. Label memberi tahu pengguna tujuan bidang, mempertahankan kegunaannya saat fokus ditempatkan di dalam bidang dan harus tetap ada bahkan setelah menyelesaikan bidang.
Jumlah kata
Label bukan teks bantuan. Anda harus menggunakan label yang ringkas, pendek dan deskriptif (satu atau dua kata) agar pengguna dapat dengan cepat memindai formulir Anda. Versi sebelumnya dari formulir pendaftaran Amazon berisi banyak kata-kata tambahan yang mengakibatkan tingkat penyelesaian yang lambat.
Versi saat ini jauh lebih baik dan memiliki label pendek.
Kasus Kalimat vs Kasus Judul
Haruskah itu “Nama Lengkap” atau “Nama lengkap”? Huruf kalimat sedikit lebih mudah (dan karenanya lebih cepat) untuk dibaca daripada huruf besar. Tapi satu hal yang pasti – Anda tidak boleh menggunakan semua huruf besar, atau bentuknya akan sulit dibaca dan jauh lebih sulit untuk dipindai dengan cepat, karena tidak ada perbedaan ketinggian karakter lagi.
Alignment of Labels: Left vs Right Aligned vs Top
Artikel Matteo Penzo 2006 tentang penempatan label menyiratkan bahwa formulir diisi lebih cepat jika labelnya berada di atas bidang. Mereka bagus jika Anda ingin pengguna memindai formulir secepat mungkin.
Namun penelitian lebih lanjut disebutkan tidak menemukan perbedaan antara label di atas bidang dan label kanan-rata.
Label selaras teratas. Keuntungan terbesar untuk label yang selaras teratas – label ini memudahkan label dengan ukuran berbeda dan versi yang dilokalisasi agar lebih mudah dalam UI (ini sangat baik untuk layar ponsel dengan lahan terbatas).
Label rata kiri. Kerugian terbesar dari label rata kiri adalah waktu penyelesaian paling lambat. Ini mungkin karena jarak visual antara label dan bidang input. Semakin pendek label, semakin jauh dari input. Tetapi tingkat penyelesaian yang lambat tidak selalu merupakan hal yang buruk, terutama jika formulir tersebut membutuhkan data penting. Jika Anda meminta hal-hal seperti SIM atau Nomor Jaminan Sosial, Anda mungkin secara implisit ingin memperlambat pengguna sedikit dan memastikan mereka memasukkan sesuatu dengan benar.
Label rata kanan. Keuntungan besar untuk label rata kanan adalah koneksi visual yang kuat antara label dan input. Karena barang yang saling berdekatan tampak terkait. Prinsip menempatkan item terkait ini lebih dekat satu sama lain bukanlah hal baru; sebenarnya Hukum Kedekatan dari psikologi Gestalt. Untuk formulir yang lebih pendek, label rata-rata dapat memiliki waktu penyelesaian yang sangat baik. Kerugian label kanan-selaras berasal dari kenyamanan. Bentuk seperti itu akan kekurangan sisi kiri yang keras, yang membuatnya kurang nyaman untuk dilihat dan sulit dibaca.
Takeaway: Jika Anda ingin pengguna memindai formulir dengan cepat, letakkan label Anda di atas setiap bidang. Tata letak ini lebih mudah untuk dipindai karena mata bergerak lurus ke bawah halaman. Namun jika Anda ingin pengguna membaca dengan cermat, letakkan label di sebelah kiri bidang. Tata letak ini dibaca dengan gerakan lambat dan kanan (bentuk Z).
Label Inline (Teks Penampung)
Teks Placeholder berfungsi baik untuk formulir nama pengguna dan kata sandi yang sederhana.
Tetapi itu adalah pengganti yang buruk untuk label visual ketika ada lebih banyak informasi. Ya mereka sangat populer, dan ya mereka memang terlihat bagus. Tetapi begitu pengguna mengklik pada kotak teks, label menghilang dan dengan demikian pengguna tidak dapat memeriksa ulang bahwa apa yang telah ditulisnya memang apa yang dimaksudkan untuk ditulis. Hal lain adalah bahwa ketika pengguna melihat sesuatu yang ditulis di dalam kotak teks, mereka mungkin menganggap bahwa itu sudah diisi sebelumnya dan karenanya dapat mengabaikannya.
Solusi yang bagus untuk teks placeholder adalah label mengambang. Teks placeholder ditampilkan secara default, tetapi begitu bidang input diketuk dan teks dimasukkan, teks placeholder memudar dan label berjajar teratas dianimasikan.
Takeaway: Jangan hanya mengandalkan placeholder, sertakan juga label. Saat satu bidang telah diisi, placeholder tidak lagi terlihat. Anda dapat menggunakan label mengambang yang memastikan pengguna bahwa mereka mengisi bidang yang benar.
Tombol Aksi
Ketika diklik, tombol-tombol ini memicu tindakan seperti mengirimkan formulir.
Tindakan Primer vs Sekunder
Kurangnya perbedaan visual antara tindakan primer dan sekunder dapat dengan mudah menyebabkan kegagalan. Mengurangi keunggulan visual dari tindakan sekunder meminimalkan risiko kesalahan potensial dan selanjutnya mengarahkan orang menuju hasil yang sukses.
Lokasi Tombol
Bentuk-bentuk kompleks biasanya membutuhkan tombol kembali. Jika tombol tersebut terletak tepat di bawah bidang input (seperti pada bidikan pertama) pengguna dapat mengkliknya secara tidak sengaja. Karena tombol kembali adalah tindakan sekunder, tombol tersebut harus diletakkan di tempat yang tidak terlihat (bentuk kedua memiliki lokasi yang tepat untuk tombol).
Konvensi Penamaan
Hindari kata-kata umum seperti “Kirim” untuk tindakan, karena memberi kesan bahwa bentuk itu sendiri adalah generik. Alih-alih nyatakan tindakan apa yang dilakukan tombol ketika diklik, seperti ‘Buat akun GRATIS saya’ atau ‘Kirimi saya tawaran mingguan’.
Beberapa Tombol Tindakan
Hindari beberapa tombol tindakan karena dapat mengalihkan pengguna dari sasaran (mengirimkan formulir).
Tombol ‘Reset’ Benar-Benar Jahat
Jangan gunakan tombol ‘reset’. Web akan menjadi tempat yang lebih bahagia jika hampir semua tombol Reset dihapus. Tombol ini hampir tidak pernah membantu pengguna, tetapi sering kali menyakiti mereka.
Penampilan Visual
Pastikan tombol tindakan terlihat seperti tombol. Gaya mereka dengan cara yang mereka angkat (dengan demikian, menunjukkan bahwa mungkin untuk mengklik). Untuk informasi lebih lanjut tentang tombol Anda dapat membaca artikel Desain Tombol UX: Praktik Terbaik, Jenis dan Negara
Umpan Balik Visual
Anda harus mendesain tombol ‘kirim’ dengan cara yang seharusnya menunjukkan dengan jelas bahwa formulir sedang diproses setelah tindakan pengguna. Ini memberikan umpan balik kepada pengguna sementara juga menghindari posting ganda.
Kesimpulan
Pengguna dapat ragu untuk mengisi formulir, jadi Anda harus membuat proses ini semudah mungkin. Perubahan kecil – seperti bidang terkait grup dan menunjukkan informasi apa yang masuk di setiap bidang – dapat secara signifikan meningkatkan kegunaan bentuk. Pengujian kegunaan hanya diperlukan dalam desain formulir. Sangat sering, hanya melakukan beberapa tes atau hanya meminta seorang rekan untuk pergi melalui prototipe formulir dapat memberi Anda wawasan yang baik tentang bagaimana formulir dapat digunakan.
Anda dapat membaca tentang bantuan dan validasi dalam artikel Merancang Formulir yang Lebih Efisien: Bantuan dan Validasi
Terima kasih!
sumber:babich.biz uxplanet.org
