10 aturan untuk membuat formulir web yang ramah pengguna

Sep 16, 2025
Bagaimana caranya
Illustration of web forms on an iMac and tablet

Meskipun evolusi interaksi manusia-komputer, formulir masih tetap menjadi salah satu jenis interaksi paling penting bagi pengguna. Orang yang menggunakan aplikasi atau situs web Anda memiliki tujuan tertentu, dan seringkali satu hal yang berdiri di antara pengguna dan tujuannya adalah suatu bentuk. Setiap hari, kami menggunakannya untuk kegiatan penting kami - untuk menyelesaikan pembelian, untuk mendaftar untuk jejaring sosial, untuk memberikan umpan balik pada produk yang kami beli, dan banyak lagi - mereka adalah bagian besar dari pengalaman pengguna .

Akibatnya, sangat penting bagi kita untuk dapat menyelesaikan formulir online dengan cepat dan tanpa kebingungan. Semakin sedikit usaha yang harus kita habiskan, kita lebih bahagia. Sebagai desainer dan pengembang, kami harus berusaha untuk menghasilkan pengalaman bentuk yang lebih cepat, lebih mudah dan lebih produktif untuk pengguna kami.

Dalam dua artikel saya yang mengeksplorasi cara membangun bentuk yang lebih baik ( temukan yang pertama di sini ), Berikut ini 10 tips saya untuk merancang formulir yang ramah pengguna. Tidak apa-apa yang Anda cari? Anda mungkin membutuhkan panduan kami ke atas Pembangun Situs Web atau penyimpanan awan layanan.

01. Hanya tanyakan apa yang diperlukan

Memotong jumlah informasi yang diperlukan membuat formulir lebih mudah diisi. Anda harus selalu mempertanyakan mengapa dan bagaimana informasi yang Anda minta sedang digunakan. Cobalah untuk meminimalkan jumlah bidang sebanyak mungkin, karena setiap bidang yang Anda tambahkan ke formulir akan mempengaruhi tingkat konversi. Membatasi jumlah pertanyaan dan bidang membuat formulir Anda kurang dimuat, terutama ketika Anda meminta banyak informasi dari pengguna Anda.

02. Pesan bidang secara logis

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically

Pikirkan formulir Anda seperti percakapan; Anda ingin mengelompokkan dan memesan bidang dalam urutan yang masuk akal bagi pengguna

Sangat membantu untuk memikirkan bentuk yang mirip dengan percakapan. Seperti percakapan normal, itu harus diwakili oleh komunikasi logis antara dua pihak: seseorang dan aplikasi Anda. Rincian harus diminta dalam urutan yang logis dari perspektif pengguna, bukan dari aplikasi atau basis data. Misalnya, tidak biasa untuk meminta alamat seseorang sebelum nama mereka.

Ini juga sangat penting untuk mengelompokkan pertanyaan terkait dalam blok, sehingga aliran dari satu set pertanyaan ke selanjutnya akan lebih menyerupai percakapan. Bidang terkait pengelompokan juga membantu pengguna memahami informasi yang harus mereka isi.

Gambar di atas adalah contoh dari dua formulir pendaftaran. Bentuk-bentuk panjang dapat merasa luar biasa jika Anda tidak mengelompokkan bidang terkait - bandingkan formulir di sebelah kiri ke versi yang ditingkatkan di sebelah kanan.

Pengelompokan perlu dilakukan secara visual maupun dalam kode. Misalnya, Anda bisa menggunakan & lt; fieldset & gt; dan & legenda & gt; Elemen untuk mengaitkan kontrol formulir terkait: 

 & lt; Fieldset & GT;
  & legend & gt; informasi pribadi: & lt; / legenda & gt;
  & lt; div & gt;
    & lt; label untuk = "first_name" & gt; nama depan & lt; / label & gt;
    & lt; input type = "text" name = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; label untuk = "last_name" & gt; nama belakang & lt; / label & gt;
    & lt; input type = "text" name = "last_name" id =ame "& gt;
  & lt; / div & gt;
    & lt; label untuk = "gender" & gt; profesi & lt; / label & gt;
    & lt; input type = "Text" name = "profesi" id = "profesi" & gt;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. SINGKAT LABEL SINGKAT

Label lapangan memberi tahu pengguna apa arti bidang input yang sesuai. Teks label yang jelas adalah salah satu cara utama untuk membuat UI lebih mudah diakses. Label memberi tahu pengguna tujuan bidang, tetapi mereka tidak membantu teks. Oleh karena itu, memastikan mereka memindai dengan mudah adalah prioritas - Anda harus merancang label ringkas, pendek dan deskriptif (menjaga atau dua kata).

04. Jangan duplikat bidang

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password

Jangan membuat pengguna Anda mengetik informasi dua kali - Anda hanya akan membuat mereka frustrasi dengan membuang-buang waktu mereka

Masalah ini sangat umum untuk formulir pendaftaran: Hampir setiap orang telah menemukan formulir yang mengharuskan Anda mengetik alamat email atau kata sandi dua kali. Secara historis, ini dirancang untuk mencegah kesalahan salah ketik. Namun, sebagian besar pengguna hanya menyalin-menempelkan bidang yang diperlukan setiap kali aplikasi memungkinkannya. Dan jika data bidang asli berisi kesalahan, itu digandakan.

05. Sorot bidang opsional

Idealnya, yang terbaik adalah tidak memiliki bidang opsional. Sejalan dengan aturan nomor 1, jika sepotong informasi tidak diperlukan, tidak ada gunanya membuang-buang waktu pengguna. Tetapi jika Anda menggunakannya, Anda harus dengan jelas membedakan bidang input mana yang tidak dapat dibiarkan kosong. Biasanya tanda kecil seperti tanda bintang (*) atau 'opsional' sudah cukup.

06. Hati-hati dengan default

Hindari termasuk default statis kecuali Anda percaya sebagian besar pengguna Anda (mis. 90 persen) akan memilih nilai itu - terutama jika itu adalah bidang yang diperlukan. Mengapa? Dengan pendekatan ini Anda cenderung memperkenalkan kesalahan karena orang memindai formulir secara online. Jangan berasumsi mereka akan meluangkan waktu untuk mengurai semua pilihan. Mereka mungkin gagal dengan sesuatu yang sudah memiliki nilai.

Satu-satunya pengecualian untuk titik ini adalah default cerdas - seperti yang mengatur negara pengguna berdasarkan data geolokasi mereka - yang dapat menyelesaikan formulir yang lebih cepat dan lebih akurat. Tetapi Anda masih harus menggunakan ini dengan hati-hati, karena pengguna cenderung meninggalkan bidang yang telah dipilih sebelumnya.

07. Minimalkan kebutuhan untuk mengetik

Mengetik adalah proses yang lambat dan rentan kesalahan, dan sangat menyakitkan pada ponsel, di mana pengguna menghadapi kendala dari tanah layar terbatas. Dan dengan semakin banyak orang menggunakan layar kecil, apa pun yang dapat dilakukan untuk mencegah pengetikan yang tidak perlu akan meningkatkan pengalaman pengguna. Jika perlu, Anda dapat menggunakan fitur-fitur seperti Autocomplete dan Preville untuk data, sehingga pengguna hanya perlu mengetikkan jumlah informasi minimum yang telanjang.

Mengisi informasi alamat Anda seringkali merupakan bagian paling rumit dari formulir pendaftaran online, berkat beberapa bidang, nama panjang, dan sebagainya. Simpan pengguna Anda dari harus mengetikkan seluruh alamat mereka dengan menerapkan prefille untuk bidang ini. Perpustakaan seperti Google Maps Tawarkan API JavaScript sederhana untuk mencapai ini. Kamu bisa Temukan solusi yang berfungsi di sini .

08. Gunakan validasi waktu nyata

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it

Peringatan pengguna segera jika mereka membuat kesalahan - jangan membuatnya menunggu sampai mereka menyelesaikan seluruh formulir

Di dunia yang ideal, pengguna mengisi formulir dengan informasi yang diperlukan dan menyelesaikan pekerjaan mereka dengan sukses, tetapi di dunia nyata, orang sering melakukan kesalahan. Sangat membuat frustrasi melalui proses mengisi seluruh formulir hanya untuk mencari tahu pada titik pengajuan yang Anda buat kesalahan.

Waktu yang tepat untuk memberi tahu seseorang tentang keberhasilan atau kegagalan data yang mereka berikan tepat setelah mereka mengirimkan informasi. Di sinilah validasi real-time berperan. Ini memperingatkan pengguna untuk melakukan kesalahan langsung dan memungkinkan mereka untuk memperbaikinya lebih cepat, tanpa harus menunggu sampai mereka menekan tombol 'Kirim'.

Dan ingat, validasi seharusnya tidak hanya memberi tahu pengguna apa yang mereka lakukan salah; Ini juga harus memberi tahu mereka apa yang mereka lakukan dengan benar. Ini memberi pengguna lebih percaya diri untuk bergerak melalui formulir.

Peterseli adalah perpustakaan validasi formulir JavaScript yang sangat baik. Ini adalah sumber terbuka dan fokus UX, sehingga Anda dapat menimpa hampir setiap perilaku default agar sesuai dengan kebutuhan Anda. Dalam kode berikut adalah contoh validasi peterseli sederhana untuk bidang 'pesan'. Lapangan harus setidaknya 20 karakter, tetapi tidak lebih dari 100. 

 & lt; label untuk = "pesan" & gt; pesan (20 karakter min, 100 maks): & lt; / label & gt;
& lt; textarea id = "Pesan" Kelas = "Form-Control" nama = "pesan" Data-parsley-trigger = "kunci" data-parsley-minlength = "20" data-parsley-maxlength = "100" peterseli data -MinLength-message = "Ayo! Anda harus memasukkan setidaknya 20 komentar karakter." Data-peterseli-validasi-ambang = "10" & gt; & lt; / textarea & gt;

Kamu bisa Temukan sampel kode lengkap di sini .

09. Hindari format input tetap

Alasan paling umum untuk memaksa format tetap adalah batasan skrip validasi (bagian belakang tidak dapat menentukan format yang dibutuhkannya), yang dalam banyak kasus adalah masalah implementasi. Alih-alih memaksakan format sesuatu seperti nomor telepon selama input pengguna, Anda harus memungkinkan untuk mengubah apa pun yang dimasuki pengguna ke dalam format yang ingin Anda tampilkan atau disimpan.

10. Jangan gunakan tombol reset

Illustration shows Reset button next to a Save button below a form, with a red cross through it

Sedikit baik yang datang dari memasukkan tombol reset tepat di sebelah opsi kirim

Tombol reset hampir tidak pernah membantu pengguna. Sulit membayangkan bahwa seseorang menginginkan tombol yang membatalkan semua pekerjaan mereka, apalagi mereka ingin tombol itu duduk di sebelah tombol yang menyelamatkannya. Web akan menjadi tempat yang lebih bahagia jika hampir semua tombol reset dihapus.

Ingin tahu bagaimana pengguna Anda merespons situs web Anda? Layak hosting web. Layanan akan memberi Anda analitik yang Anda butuhkan.

Artikel ini awalnya muncul di bersih , majalah untuk desainer dan pengembang web profesional. Berlangganan bersih di sini .

Artikel terkait:

  • 29 alat desain web untuk mempercepat alur kerja Anda
  • 41 font web gratis terbaik
  • 13 Best Potongan Perangkat Lunak Pengujian Pengguna

Bagaimana caranya - Artikel Terpopuler

Bangun blog dengan grid dan flexbox

Bagaimana caranya Sep 16, 2025

Dua hingga tiga tahun terakhir telah melihat tata letak bergerak maju dalam lompatan dan batas. Sekarang, teknik modern ini memil..

Cara membuat efek cair dengan WebGL

Bagaimana caranya Sep 16, 2025

Banyak desainer web mencari cara untuk menambahkan dampak besar pada desain situs mereka, sehingga mereka akan menarik perhatian ..

Buat finishing cetak khusus di Indesign

Bagaimana caranya Sep 16, 2025

Halaman 1 dari 4: Foil memblokir Foil memblokir ..

Cara menggunakan font web

Bagaimana caranya Sep 16, 2025

Berikut ini adalah kutipan yang diambil dari Buku Pegangan Webfont Bram Stein. Beli di sini ..

Cara memasang karya seni Anda

Bagaimana caranya Sep 16, 2025

Gunung yang dieksekusi dengan baik lebih dari sekedar Teknik Seni untuk menambah sabuk alat Anda. Ini akan menamba..

Bangun komponen responsif yang dapat diskalakan

Bagaimana caranya Sep 16, 2025

Setiap kali kita berbicara tentang membangun situs web yang dapat dipertahankan dan dapat diskalakan, kita mau tidak mau menemuka..

10 Aturan Emas untuk SVG Responsif

Bagaimana caranya Sep 16, 2025

Banyak keunggulan SVG - termasuk gambar vektor yang tak terbatas, ukuran file kecil dan integrasi langsung dengan DOM - membuatny..

Memodelkan spaceship untuk desain gameplay

Bagaimana caranya Sep 16, 2025

Dengan Ruang patah Menjadi apa itu - permainan tempur tim gratis untuk bermain - kapal dan kemampuan mereka adalah..

Kategori