Loncat ke Konten Utama

Aturan 5 untuk membuat bentuk kontak yang sempurna

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Anda melakukan semua yang Anda bisa untuk membangun situs web yang akan mengarahkan pengunjung ke konversi. Saat Anda mempelajari analitik, Anda senang mengetahui bahwa perjalanan pengguna yang Anda buat didukung oleh pengunjungnya, dari waktu ke waktu. Namun, ada sesuatu yang mencegah mereka untuk bertobat.

Formulir kontak adalah bagian penting dari perjalanan pengunjung Anda. Bahkan jika Anda benar-benar memiliki hampir semua yang ditawarkan situs web, formulir kontak dapat merusak pengalaman jika tidak digunakan dengan benar. Tombol "Rusak", bidang yang membingungkan, terlalu banyak langkah, antarmuka yang tidak teratur ... bahkan penempatan 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 desain formulir akan secara dramatis meningkatkan pengalaman pengguna. Secara khusus, ketika formulir kontak memenuhi semua aturan, 78% pengguna dapat menyelesaikan dan mengirimkannya dalam sekali percobaan. Namun, jika 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 mengkhawatirkan panjang formulir kontak, yang sering kali mengarah pada pilihan desain yang buruk. Ambil pertanyaan tentang kesejajaran, 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 formulir kontak Anda memenuhi standar perataan, inilah yang perlu Anda lakukan:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

  • 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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").

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
16 saham
saham8
menciak1
Register7