5 Tips Merancang Formulir Mobile Friendly

Formulir kontak adalah komponen kunci dari banyak situs web. Meskipun fungsinya biasanya sederhana, Anda tetap perlu memastikannya mudah digunakan jika Anda ingin mengumpulkan prospek dan tetap berhubungan dengan pengguna Anda. Ini biasanya bukan masalah dengan lalu lintas desktop, tetapi menggunakan formulir bisa menjadi rumit jika Anda menggunakan perangkat seluler.

Pada artikel ini, kita akan berbicara sedikit tentang pentingnya mendesain formulir yang ramah seluler. Kemudian kami akan memandu Anda melalui lima tips untuk memastikan formulir Anda berfungsi dengan baik di perangkat seluler.

Ayo bekerja!

Mengapa Penting agar Formulir Anda Ramah Seluler

Bentuk datang dalam segala bentuk dan ukuran. Paling umum, Anda akan berurusan dengan formulir kontak:

Formulir pendaftaran (atau keikutsertaan) juga sangat populer karena memungkinkan Anda mengumpulkan email dan menargetkannya selama kampanye:

Namun, formulir dapat digunakan untuk semua jenis tujuan lain. Misalnya, Anda mungkin ingin mengumpulkan informasi menggunakan polling atau kuis online, dalam hal ini Anda memerlukan formulir bagi pengguna untuk memasukkan respons.

Dengan kata lain, formulir sangat fleksibel dan hampir setiap situs menggunakan formulir dalam satu atau lain cara. Oleh karena itu, memastikan formulir Anda mudah digunakan sangat penting (kecuali jika Anda ingin memberikan pengalaman yang membuat frustrasi bagi pengunjung Anda).

Menggunakan formulir dari komputer desktop atau laptop biasanya sangat sederhana. Anda memiliki mouse dan keyboard lengkap, jadi memilih bidang yang ingin Anda gunakan dan memasukkan data seharusnya tidak menjadi masalah. Namun, menjelajahi web dari ponsel cerdas Anda atau perangkat berukuran kecil lainnya memberikan komplikasi.

Saat Anda bekerja dengan jari-jari Anda di layar kecil, berinteraksi dengan formulir terkadang bisa menyusahkan karena keputusan desain yang buruk. Ini adalah sesuatu yang perlu Anda hindari dalam desain Anda sendiri. Lagi pula, jika pengguna seluler tidak dapat berinteraksi dengan formulir Anda, Anda mungkin kehilangan konversi, prospek, atau hanya mengganggu pengunjung sama sekali.

Penting juga untuk dipahami bahwa lalu lintas seluler sekarang sama – jika tidak lebih – penting daripada sumber desktop. Faktanya, lalu lintas seluler telah melampaui yang terakhir dalam beberapa tahun terakhir. Ini berarti merancang situs web yang ramah seluler harus menjadi tujuan utama Anda saat meluncurkan proyek baru.

5 Tips Merancang Formulir Mobile Friendly

Untungnya, mendesain formulir ramah seluler tidak sesulit yang Anda bayangkan. Dalam kebanyakan kasus, yang diperlukan hanyalah mengingat beberapa dasar dan menguji formulir Anda secara menyeluruh sebelum ditayangkan. Mari kita bicara tentang bagaimana melakukannya!

1. Hapus Bagian yang Tidak Perlu

Semakin banyak bidang yang disertakan dalam formulir Anda, semakin sulit untuk digunakan di seluler. Itu karena, meskipun dirancang dengan baik, menggunakan formulir di ponsel jauh lebih rumit. Dengan mengurangi jumlah bidang atau bagian yang disertakan dalam formulir, Anda dapat memaksimalkan peluang pengunjung untuk mengisinya.

Berikut adalah contoh cepat formulir kontak dengan beberapa bidang tambahan yang dapat dilakukan tanpanya:

Dalam kebanyakan kasus, semua yang Anda butuhkan untuk formulir kontak yang sangat baik adalah nama, email, dan isi pesan yang ingin Anda terima. Segala sesuatu yang lain tergantung pada jenis situs web yang Anda jalankan dan jika Anda mencoba mengumpulkan prospek.

Pada akhirnya, semakin sedikit bidang yang disertakan dalam formulir Anda, semakin mudah bagi pengunjung seluler untuk menggunakannya. Lagi pula, memilih bidang menggunakan layar sentuh bisa jadi sulit, meskipun dirancang dengan baik, jadi Anda ingin meminimalkan jumlah 'lompatan' yang harus dilakukan pengguna.

Tujuan Anda pada tahap ini adalah untuk melihat formulir yang ada di situs Anda. Periksa setiap bagiannya dan pertimbangkan apakah Anda benar-benar membutuhkan bidang tambahan selain yang telah kami sebutkan sebelumnya. Jika ada bidang yang berlebihan, cukup potong saja.

2. Gunakan Daftar Drop-Down Jika Memungkinkan

Sebagian besar dari kita merasa nyaman mengetik di perangkat seluler dan menggunakan layar sentuh. Namun, mengirim SMS ke teman dan mengisi formulir kontak adalah dua pengalaman yang sangat berbeda. Dengan yang terakhir, kemungkinan Anda akan frustrasi jika harus mengetik banyak informasi.

Salah satu cara Anda dapat membuat kehidupan pengunjung seluler Anda lebih mudah adalah dengan menyederhanakan pilihan yang mereka perlukan terkait elemen situs Anda. Untuk memberi Anda gambaran tentang apa yang sedang kita bicarakan, mari kita membangun contoh reservasi restoran kami sebelumnya:

Untuk membuat reservasi, Anda mungkin perlu meninggalkan nama, email, telepon, dan menunjukkan waktu, serta berapa banyak orang yang akan hadir. Ada dua cara Anda dapat membuat bidang formulir untuk memvalidasi waktu reservasi:

1. Siapkan bidang yang hanya menerima input numerik.
2. Rancang daftar tarik-turun termasuk semua waktu yang tersedia untuk reservasi.

Seperti yang Anda bayangkan, yang terakhir lebih ramah pengguna untuk pengguna seluler. Dengan pendekatan ini, mereka tidak perlu mengetikkan angka dan mereka dapat memilih yang paling cocok untuk mereka dari opsi yang Anda sertakan.

Gagasan bagi Anda untuk melihat formulir Anda dan melihat apakah formulir tersebut menyertakan bidang apa pun yang dapat Anda ganti dengan menu tarik-turun. Ini tidak akan selalu terjadi karena Anda tidak dapat menggunakan menu tarik-turun untuk mengumpulkan nama atau email, tetapi ada opsi lain yang mungkin berfungsi.

Terlepas dari apa kasus penggunaannya, Anda ingin memastikan menu tarik-turun Anda menyertakan opsi yang mudah dipilih dari perangkat seluler. Dengan kata lain, buat menu cukup besar sehingga seseorang tidak perlu membolak-balik untuk memilih opsi yang tepat.

3. Pastikan Tombol Kirim Anda Mudah Disentuh

Tip ini cukup mudah, tetapi masih layak disebut. Setiap formulir yang Anda desain harus menyertakan cara bagi pengguna untuk mengonfirmasi bahwa mereka ingin mengirimkan data yang telah mereka masukkan. Dalam kebanyakan kasus, ini berarti membuat tombol pengiriman:

Saat Anda menggunakan komputer biasa, mengklik tombol pengiriman adalah hal yang paling alami di dunia. Namun, kami telah menemukan beberapa formulir di ponsel di mana menekan tombol jauh lebih sulit dari yang seharusnya.

Jika pengunjung Anda tidak dapat mengirimkan informasi yang mereka masukkan ke dalam formulir Anda, semua upaya Anda akan sia-sia. Plus, tidak ada yang terlihat tidak profesional seperti tombol Kirim yang tidak berfungsi sebagaimana mestinya.

Untuk mendesain tombol pengiriman yang lebih baik untuk seluler, berikut adalah tiga tip cepat yang perlu Anda ingat:

1. Pastikan ukurannya cukup besar untuk ditekan dengan mudah saat menggunakan perangkat seluler.
2. Jangan letakkan tombol Anda terlalu dekat dengan elemen lain, sehingga pengguna tidak akan salah menekan tombol.
3. Sorot tombol Anda dalam beberapa cara, seperti menggunakan warna kontras atau tipografi kreatif.

Selain semua ini, Anda juga ingin menguji tombol Anda secara menyeluruh sebelum situs web Anda ditayangkan. Kami akan membahas lebih dalam tentang bagaimana melakukannya dalam satu menit. Untuk saat ini, mari kita bicara tentang kinerja.

4. Pastikan Formulir Anda Dimuat dengan Cepat

Kami banyak berbicara tentang kinerja situs web di beberapa artikel kami, dan itu bukan karena kami membutuhkan kecepatan. Faktanya adalah, kebanyakan orang tidak menyukai situs web yang lambat, yang sangat masuk akal.

Dengan kecepatan internet yang semakin cepat, menunggu terlalu lama untuk memuat situs web bisa menjadi tugas. Plus, kecepatan internet seluler cenderung jauh lebih bervariasi daripada koneksi rumah biasa. Ini berarti situs web Anda harus sangat dioptimalkan untuk perangkat seluler jika Anda ingin membuat para pengguna senang, karena tidak semua dari mereka akan memiliki akses internet yang sesuai (yaitu cepat).

Tip khusus ini dapat berlaku untuk seluruh situs web Anda secara umum, tetapi juga penting untuk halaman seluler yang menampilkan formulir Anda. Jika bagian situs Anda membutuhkan waktu terlalu lama untuk dimuat, Anda akan kehilangan prospek dan peluang untuk menjalin kontak dengan pengunjung Anda. Sebagai aturan praktis, situs web tidak boleh memakan waktu lebih dari dua detik untuk dimuat. Setelah Anda melewati garis itu, rasio pentalan cenderung meningkat secara dramatis, yang merupakan berita buruk bagi Anda.

Mengingat sifat penjelajahan di ponsel, menurunkan waktu sejauh mungkin adalah keuntungan. Dengan mengingat hal ini, ada banyak cara untuk meningkatkan kinerja situs Anda secara keseluruhan. Misalnya, Anda dapat meningkatkan ke paket hosting yang lebih baik, menggunakan tema responsif yang dioptimalkan untuk kecepatan, dan mengompres gambar Anda. Tentu saja, ini akan membantu semua pengguna, tetapi akan sangat bermanfaat bagi mereka yang menggunakan perangkat yang lebih kecil.

5. Uji Formulir Anda Sebelum Memublikasikannya

Mengingat formulir adalah elemen kunci untuk sebagian besar situs web, masuk akal Anda harus menguji milik Anda secara menyeluruh sebelum menerbitkannya. Dengan WordPress, proses ini cukup sederhana. Anda dapat melanjutkan dan mendesain halaman tertentu untuk menampilkan formulir Anda, dan tidak menerbitkannya sampai Anda benar-benar mengujinya.

Tentu saja, plugin atau tema yang ingin Anda gunakan terserah Anda (asalkan dapat membantu mengembangkan situs seluler). Namun, sejauh fase pengujian berjalan, kami sarankan Anda tetap sederhana dan menggunakan sesuatu seperti Chrome Dev Tools untuk menyelesaikan pekerjaan.

Mari kita pergi ke contoh cepat. Jika Anda menggunakan Chrome, lanjutkan dan pratinjau halaman yang menyertakan formulir yang ingin Anda uji. Selanjutnya, klik kanan di mana saja pada halaman itu dan pilih opsi Inspect . Chrome akan menunjukkan kepada Anda seperangkat alat yang dapat Anda gunakan untuk meninjau dan mengedit kode sumber halaman ke kanan dan ke kiri, Anda dapat melihat pratinjau tampilannya dari perangkat seluler:

Di bagian atas layar, ada menu yang dapat Anda gunakan untuk beralih di antara resolusi yang berbeda. Chrome menyertakan setelan untuk beberapa perangkat seluler populer, tetapi Anda juga dapat memasukkan resolusi khusus.

Pada titik ini, Anda harus memeriksa bagaimana formulir kontak Anda terlihat dan berperilaku di beberapa perangkat. Ambil contoh di bawah ini – formulir bekerja dengan sempurna, tetapi Anda dapat melihatnya tidak berskala sebagaimana mestinya. Perhatikan baik-baik teks dan ikon khususnya, yang terlalu dekat dengan batas layar:

Salah satu cara untuk mencegah masalah ini adalah dengan membuat formulir Anda tetap sederhana, seperti yang kami uraikan pada tip pertama. Pada contoh di bawah, formulir menggunakan beberapa daftar drop-down dan hanya membutuhkan tiga bidang. Itu membuatnya mudah digunakan dan, yang lebih penting, formulirnya sangat sederhana sehingga harus diskalakan dengan sempurna di setiap perangkat:

Jika Anda mengalami masalah dengan salah satu formulir Anda, Anda harus segera memperbaikinya. Jika tidak, Anda berisiko mengasingkan audiens seluler Anda, yang kami coba hindari sejak awal!

Kesimpulan

Memastikan situs web Anda ramah seluler sangat penting untuk menjaga lalu lintas, dan tidak membuat pengunjung Anda frustrasi. Secara khusus, formulir Anda harus mudah digunakan di perangkat seluler jika Anda tidak ingin ketinggalan menerima pesan atau mengumpulkan prospek yang berharga.

Dalam hal mendesain formulir yang ramah seluler, berikut adalah lima tip cepat untuk membuat hidup Anda lebih mudah:

1. Hapus bagian yang tidak perlu.
2. Gunakan daftar drop-down jika memungkinkan.
3. Pastikan tombol kiriman Anda mudah ditekan.
4. Pastikan formulir Anda dimuat dengan cepat.
5. Uji formulir Anda sebelum Anda mempublikasikannya.

Apakah Anda memiliki pertanyaan tentang cara membuat formulir ramah seluler menggunakan Divi? Tanyakan di bagian komentar di bawah!

Gambar thumbnail artikel oleh Irina Adamovich / shutterstock.com.