Anda melakukan semua yang Anda bisa untuk buat situs web yang akan mengarahkan pengunjung ke konversi. Saat mempelajari analitik, Anda senang melihat bahwa perjalanan pengguna yang Anda buat didukung oleh pengunjungnya, berulang kali. Namun, ada sesuatu yang mencegah mereka untuk dikonversi.

Le formulir kontak adalah bagian penting dari perjalanan pengunjung Anda. Bahkan jika Anda benar-benar memiliki hampir semua yang dapat ditawarkan situs web, a formulir kontak dapat merusak pengalaman jika tidak digunakan dengan benar. Tombol “rusak”, kolom membingungkan, terlalu banyak langkah, antarmuka tidak teratur… bahkan penempatannya formulir kontak dapat mengganggu pengalaman pengguna.

Ada banyak hal yang bisa salah.

Aturan 5 untuk membangun formulir kontak yang sempurna

Sebuah studi pelacakan mata Google yang diterbitkan pada tahun 2014 menunjukkan bahwa mengikuti pedoman penggunaan paling dasar untuk mendesain bentuk secara signifikan akan meningkatkan pengalaman pengguna. Secara khusus, ketika formulir kontak memenuhi semua aturan, 78% pengguna dapat mengisinya dan mengirimkannya dalam sekali percobaan. Namun, ketika formulir kontak melanggar aturan ini, hanya 42% yang dapat melakukannya dalam satu upaya.

Penasaran tentang apa saja aturan tersebut? Jadi teruslah membaca.

Aturan # 1: Fokus pada kesejajaran

Seperti yang akan Anda lihat di aturan lain di sini, orang sering kali mengkhawatirkan panjangnya bentuk kontak, yang sering mengarah pada pilihan desain yang buruk. Ambil masalah keselarasan, misalnya.

Anda mungkin melihat formulir seperti ini di situs BrainTraffic dan berpikir: Hmmm… tapi bukankah itu terlalu panjang untuk diselesaikan?

isi form.png

Salah satu cara untuk berpikir tentang menyelesaikan "masalah" ini adalah dengan memindahkan label ke kiri dan menempatkan kolom jawaban ke kanan. Namun, para ahli UX akan memberi tahu Anda bahwa ini adalah larangan utama karena mengganggu kemampuan untuk memindai formulir. Hal yang sama berlaku jika Anda berpikir untuk menempatkan bidang di samping satu sama lain secara horizontal.

Jika Anda ingin Anda bentuk kontak memenuhi standar penyelarasan, inilah yang perlu Anda lakukan:

  • Rata kiri semua label, bidang formulir, dan tombol ajakan bertindak utama.
  • Jangan pernah meratakan bidang terkait secara horizontal. Anda dapat menyusun formulir secara logis, tetapi setiap pertanyaan atau bidang harus ditumpuk secara vertikal.
  • Bidang apa pun dengan pertanyaan pilihan ganda (dengan pilihan kurang dari enam) harus ditampilkan dalam daftar titik atau kotak centang vertikal, bukan dalam menu drop-down.

Aturan 2: Sertakan semua bidang yang relevan

Saat mendesain formulir kontak, Anda mungkin berpikir semakin pendek semakin baik, bukan? Tidak selalu demikian. Yang paling penting adalah Anda memberikan semua bidang yang diperlukan dan relevan kepada pengguna.

Michael Aagaard, Pengoptimal Konversi Senior untuk Unbounce, melakukannya sebuah presentasi pada tahun 2015 yang membahas masalah ini. Dia dan timnya ingin tahu apa yang akan terjadi jika mereka mempersingkat formulir kontak ini:

contoh formulir kontak court.png

Seperti yang Anda lihat, mereka menghapus apa yang mereka yakini sebagai bidang yang tidak perlu untuk menyederhanakan proses pengisian formulir. Namun, setelah pengujian selesai, mereka menemukan penurunan konversi sebesar 14% dengan bentuk yang lebih pendek.

Aturan # 3: Sederhanakan Bidang

Tidak masalah jika pengguna Anda berinteraksi dengan formulir kontak Anda menggunakan desktop atau perangkat seluler, atau jika mereka membutuhkan teknologi pendukung untuk membantu mereka, formulir harus dilengkapi. untuk menyederhanakan proses entri.

Inilah beberapa teknik yang harus Anda ketahui:

Tabulasi
Untuk pengguna desktop dan mereka yang memiliki masalah aksesibilitas, pastikan formulir kontak Anda mengaktifkan pengurutan tab logis.

Masukan masker
Daripada memaksa pengguna untuk menebak bagaimana Anda ingin bidang tertentu diformat, Anda bisa menambahkannya dengan masker input yang secara otomatis memformatnya.

bidang format html.png

Google Pelengkapan Otomatis
Daripada mengkodekan setiap bidang sehingga itu terbentuk secara otomatis sesuai dengan standar yang harus dipatuhi, aktifkan isiotomatis menggunakan plugin isi otomatis alamat Google. Ini tidak hanya akan menyelamatkan Anda dari keharusan berurusan dengan kesalahan ejaan dan alamat yang salah diisi, ini akan menyelamatkan pengunjung Anda dari mengetik di sebagian besar informasi ini.

Aturan # 4: Keluar dari Semua

Meskipun saya menyadari bahwa aturan ini akan bertentangan dengan dasar-dasar minimalis, itu adalah aturan yang harus Anda perhatikan dengan seksama untuk menghindari membuat pengunjung Anda frustrasi.

Izinkan saya menjelaskan: Anda memiliki formulir kontak yang terlihat cukup mudah. Pengguna Anda mengisinya berdasarkan saran label dan mereka mengklik tombol kirim. Kemudian mereka mendapatkan pesan merah yang mengerikan ini: “Kamu tidak melakukannya dengan benar! Kembali, perbaiki formulir dan kirimkan kembali! " 

Anda mungkin pernah menjumpainya sebagai pengguna dan Anda tahu betapa menjengkelkannya hal itu, terutama jika beberapa informasi yang Anda masukkan terhapus saat kesalahan terjadi. Jadi, daripada membiarkan pengguna menebak-nebak apa yang perlu diperbaiki dan bagaimana, jangan biarkan sampai ke titik ini. Eja semuanya di jalan:

  • Berikan fokus di bidang (terutama pada ponsel) sehingga pengguna tahu persis di mana mereka mengisi formulir.
  • Tuliskan semua persyaratan pemformatan jika Anda tidak menggunakan masker input untuk memformat bidang secara otomatis.
  • Tunjukkan secara eksplisit saat sebuah bidang adalah "Opsional" (gunakan kata, bukan tanda bintang merah).
  • Beri pengguna opsi untuk menampilkan atau menyembunyikan bidang kata sandi saat mereka memasukkannya.
  • Tampilkan pesan kesalahan segera setelah pengguna terlibat dalam suatu bidang. Jangan menunggu sampai akhir untuk melakukannya.

bentuk kesalahan wordpress.png

Aturan # 5: Jangan Sembunyikan Nasihat

Teks papan dalam formulir kontak terlihat seperti ini:

lapangan dengan tips.png

Lihat bagaimana Target menempatkan label di bidang? Dalam beberapa formulir kontak, label / indikasi ini menghilang begitu saja saat pengguna mengklik bidang. Target menangani ini sedikit berbeda dan memindahkan label ke bagian atas kotak bidang (lihat "alamat email").

Terlepas dari bagaimana ini ditangani, para ahli kegunaan, seperti grup Nielsen Norman, akan memberi tahu Anda bahwa ini adalah praktik desain yang buruk karena:

  • Ini bermasalah untuk pengguna multitasking, bingung, atau terlalu cepat di bidang berikutnya. Ketika petunjuk hilang, pengguna harus meninggalkan lapangan untuk menemukan kembali apa yang mereka butuhkan.
  • Kiat yang hilang juga mencegah pengguna kembali ke formulir untuk memeriksa pekerjaan mereka atau memperbaiki kesalahan tanpa sepenuhnya menghapus respons untuk melihat apa yang ada di bawah.
  • Teks abu-abu terang yang digunakan untuk tip placeholder tidak ideal agar mudah dibaca.
  • Bidang dengan teks petunjuk dapat dikacaukan dengan bidang yang telah mengisi data, membuat pengguna mengabaikannya, mengirimkan formulir, dan menerima pesan kesalahan.
  • Beberapa alat pembaca layar tidak dapat membaca teks petunjuk.

Menurut NNG, pengguna menemukan bidang kosong lebih menarik daripada yang berisi teks petunjuk. Meskipun formulir Anda tampak lebih panjang untuk menempatkan label atau deskriptor ini di atas bidang, itu akan meningkatkan kegunaan.

Itu saja untuk tips ini. Saya harap mereka akan membantu Anda membangun formulir kontak yang lebih baik.