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 600.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 membuat situs web yang akan mengarahkan pengunjung ke konversi. Saat mempelajari analitik, Anda senang mengetahui bahwa jalur pengguna yang Anda buat diurus oleh pengunjungnya berkali-kali. Namun, ada sesuatu yang mencegah mereka bertobat.

Formulir kontak adalah bagian penting dari perjalanan pengunjung Anda. Bahkan jika Anda benar-benar memiliki hampir semua yang ditawarkan oleh sebuah 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 menempatkan 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 dalam 2014 telah menunjukkan bahwa mengikuti pedoman penggunaan paling dasar untuk desain formulir akan secara dramatis meningkatkan pengalaman pengguna. Khususnya, ketika formulir kontak mengikuti semua aturan, 78% pengguna dapat mengisinya dan mengirimkannya dalam satu percobaan. Namun, ketika formulir kontak melanggar aturan ini, hanya 42% yang dapat melakukannya dalam satu upaya.

Penasaran ingin tahu apa saja aturannya? Jadi, teruslah membaca.

Aturan # 1: Fokus pada Alignment

Seperti yang akan Anda lihat dalam aturan lain di sini, orang sering khawatir tentang panjang formulir kontak, yang sering mengarah pada pilihan desain yang buruk. Ambil pertanyaan tentang perataan, misalnya.

Anda bisa melihat formulir seperti ini di situs web BrainTraffic dan berpikir: Hmmm ... tapi bukankah ini terlalu lama untuk diisi?

isi form.png

Salah satu cara berpikir untuk menyelesaikan "masalah" ini adalah dengan memindahkan label ke kiri dan menempatkan bidang respons di sebelah kanan. Namun, para ahli UX akan memberi tahu Anda bahwa ini adalah no-no major karena itu mengkompromikan kemampuan untuk memindai formulir. Hal yang sama berlaku jika Anda berpikir untuk menempatkan bidang di sebelah satu sama lain secara horizontal.

Jika Anda ingin formulir kontak Anda memenuhi standar penyelarasan, 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]

  • Sejajarkan semua label, bidang formulir, dan tombol ajakan bertindak utama ke kiri.
  • Jangan pernah menyelaraskan 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

Ketika datang untuk merancang formulir kontak, Anda mungkin berpikir bahwa semakin pendek, semakin baik? Ini tidak selalu terjadi. Yang paling penting adalah Anda memberikan semua bidang yang perlu dan relevan kepada pengguna.

Michael Aagaard, Pengoptimal Konversi Senior untuk Unbounce, dibuat sebuah presentasi di 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 bidang yang dianggap tidak berguna untuk mempersingkat proses pengisian formulir. Namun, pada akhir tes, mereka menemukan penurunan konversi 14% dengan bentuk terpendek.

Aturan # 3: Sederhanakan Bidang

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

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]

Inilah beberapa teknik yang harus Anda ketahui:

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

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

bidang format html.png

Google Pelengkapan Otomatis
Daripada mengkode setiap bidang untuk terbentuk secara otomatis sesuai dengan standar yang harus dihormati, aktifkan pengisian otomatis menggunakan plugin untuk mengisi alamat secara otomatis. Tidak hanya itu akan menyelamatkan Anda dari keharusan berurusan dengan kesalahan ejaan dan alamat yang salah diisi, tetapi juga akan mencegah pengunjung Anda mengetik sebagian besar informasi ini.

Aturan # 4: Keluar dari Semua

Meskipun saya menyadari bahwa aturan ini akan bertentangan dengan prinsip-prinsip dasar minimalis, ini adalah aturan yang harus Anda perhatikan secara khusus untuk menghindari frustrasi pengunjung Anda yang tidak perlu.

Biarkan saya jelaskan: Anda memiliki formulir kontak yang tampaknya cukup sederhana. Pengguna Anda mengisinya sesuai dengan apa yang disarankan label dan mereka mengklik tombol kirim. Kemudian mereka menerima pesan merah yang mengerikan ini: "Kamu tidak melakukannya dengan benar! Kembali, perbaiki formulir dan kirim kembali! "

Anda mungkin bertemu dengannya sebagai pengguna dan Anda tahu betapa frustrasinya itu, terutama jika beberapa informasi yang Anda masukkan dihapus ketika kesalahan diangkat. Jadi, daripada membiarkan pengguna menebak apa yang perlu diperbaiki dan bagaimana, jangan biarkan sampai ke titik itu. 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 kolom secara otomatis.
  • Secara eksplisit menunjukkan kapan bidang "Opsional" (gunakan kata, bukan tanda bintang merah).
  • Berikan pengguna kemampuan untuk menampilkan atau menyembunyikan bidang kata sandi saat mereka mengetiknya.
  • Tampilkan pesan kesalahan segera setelah pengguna memasukkan bidang. Jangan menunggu sampai selesai.

bentuk kesalahan wordpress.png

Aturan # 5: Jangan Sembunyikan Nasihat

Teks papan dalam formulir kontak terlihat seperti ini:

lapangan dengan tips.png

Buat Toko Online Anda dengan mudah

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

Lihat bagaimana Target menempatkan label di bidang? Dalam beberapa formulir kontak, label / indikasi ini hilang begitu saja ketika pengguna mengklik suatu 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 multitasking, terganggu atau terlalu cepat pengguna di bidang selanjutnya. Ketika indeks menghilang, 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 yang lebih terang yang digunakan untuk petunjuk pengganti tidak ideal untuk dibaca dengan mudah.
  • Bidang dengan teks petunjuk dapat dikacaukan dengan bidang yang telah diisi data, membiarkan pengguna mengabaikannya, mengirimkan formulir, dan menerima pesan kesalahan.
  • Beberapa alat baca layar tidak dapat membaca teks petunjuk.

Menurut NNG, pengguna menemukan bidang kosong lebih menarik daripada yang berisi teks indeks. Bahkan jika formulir Anda tampak lebih panjang untuk menempatkan tag 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
14 saham
saham8
menciak1
Register5