Panduan Pemula untuk Mengubah Pengguna Seluler

Pikirkan saat Anda berada di kereta, duduk di bandara, atau hanya berbaring di sofa, dan Anda harus mengisi formulir online di ponsel cerdas Anda. Apakah Anda pernah memperhatikan desain formulir seluler?

Kemungkinan Anda belum menyadarinya. Itulah tujuannya — untuk memberi pengguna pengalaman intuitif yang membuat mereka mengisi formulir dengan mulus dan melanjutkan hari mereka.

Dalam panduan ini, kami akan meninjau cara paling efektif untuk melakukannya. Di sini, Anda akan mempelajari cara mendesain formulir seluler yang tidak kikuk atau tidak selaras, tetapi membantu meningkatkan konversi dan menciptakan pengalaman pengguna yang luar biasa.

Daftar isi

Desain Formulir Seluler vs. Desktop

Hari ini, pengunjung situs web Anda tidak hanya menjelajahi situs Anda, melihat konten Anda, dan melengkapi formulir Anda dari komputer desktop mereka. Mereka juga menyelesaikan tugas ini dari perangkat seluler.

Seluler bertanggung jawab atas hampir 60% lalu lintas situs web global dari bulan April hingga Juni 2022. Artinya, formulir Anda harus mudah ditinjau, dilengkapi, dan dikirim melalui perangkat seluler.

Mengapa desain formulir seluler penting?

Desain formulir seluler terbaik memungkinkan pengalaman pengguna yang positif, yang memastikan pengunjung situs web senang yang lebih mungkin untuk berkonversi menjadi pelanggan dan menjadi pengguna kembali.

Desain, tata letak, dan fungsionalitas formulir seluler Anda berperan besar dalam keseluruhan pengalaman pengguna situs web Anda.

Jika formulir Anda tidak sesuai untuk seluler, Anda mungkin mengalami lebih sedikit konversi, kehilangan lalu lintas situs seluler, dan peningkatan pelanggan yang tidak puas dan frustrasi. Dan siapa yang menginginkan itu?

Mengapa desain formulir seluler berbeda dari desain desktop?

“Semuanya bekerja secara berbeda di seluler, jadi pemasar perlu memastikan setiap elemen situs web mereka selalu dioptimalkan untuk seluler,” kata Lilach Bullock, seorang influencer dan ahli strategi pemasaran pemenang penghargaan.

“Dan itu, tentu saja, termasuk formulir — terutama karena rasanya Anda harus terus-menerus mengisi formulir saat menggunakan perangkat seluler.”

Secara khusus, pikirkan tentang perbedaan tampilan atau ukuran layar antara perangkat seluler, seperti Apple iPhone, yang biasanya berukuran antara 4,7″ hingga 6,7″; dan laptop atau desktop Mac, yang biasanya berukuran antara 13” hingga 24”. Aman untuk menganggap bentuk yang sesuai dengan layar iPhone tidak akan pas dengan layar desktop dengan sempurna.

Jika pengunjung seluler Anda tidak dapat dengan mudah membaca, melengkapi, dan mengirimkan formulir Anda, Anda dapat kehilangan bisnis mereka. Jadi, membuat formulir ramah seluler yang sesuai dengan layar perangkat seluler apa pun sangat penting untuk menciptakan pengalaman pengguna yang luar biasa guna meninggalkan kesan abadi pada pengunjung Anda dan membantu Anda meningkatkan konversi.

Apa itu desain web responsif?

Jika Anda ingin mengambil desain formulir seluler selangkah lebih maju dan memastikan seluruh situs web Anda berfungsi di semua jenis perangkat, Anda dapat menerapkan desain situs web yang responsif.

Desain web responsif mempertimbangkan ukuran layar, platform, orientasi, dan lingkungan pengguna. Ini adalah cara sederhana dan efektif untuk menciptakan pengalaman pengguna yang luar biasa karena begitu banyak orang terus-menerus mengunjungi dan menjelajahi berbagai situs web di berbagai perangkat.

Ada beberapa cara untuk memastikan situs Anda memiliki desain yang responsif. Misalnya, jika Anda adalah pengguna WordPress, ada beberapa tema WordPress responsif yang dapat Anda instal dan gunakan untuk mendesain situs Anda.

Selain itu, jika Anda sedang membangun, atau telah membangun, situs Anda dengan perangkat lunak seperti Squarespace, situs Anda dapat secara otomatis hadir dengan desain web yang responsif.

Saat ini, desain web responsif adalah pilihan populer untuk bisnis karena banyaknya orang yang mengunjungi situs web melalui berbagai perangkat seluler yang berbeda. Namun untuk saat ini, mari kembali membahas desain formulir seluler.

Desain Formulir Seluler: 11 Panduan UX

“Saat mendesain formulir seluler Anda,” jelas Bullock, “penting untuk membuat semuanya tetap sederhana dan membuatnya secepat mungkin. [Formulir] lebih sulit untuk diselesaikan di perangkat seluler dan semuanya terasa lebih lama dari yang seharusnya.”

Dengan kata lain, yang terpenting adalah kesederhanaan bagi pengguna akhir. Saat membuat formulir ramah seluler, ada beberapa langkah yang dapat Anda ambil untuk memberikan pengalaman pengguna terbaik bagi pengunjung Anda. Mari tinjau 11 praktik terbaik desain formulir seluler yang dapat Anda mulai terapkan hari ini.

1. Minimalkan jumlah bidang formulir.

Pernah mendengar pepatah, "less is more"? Nah, itulah tepatnya yang harus Anda pikirkan saat membuat formulir seluler Anda.

Antara ukuran layar perangkat seluler dan jumlah konten yang perlu Anda tempatkan di formulir Anda, mudah untuk secara tidak sengaja membuat formulir Anda terasa berantakan. Ingatlah untuk menghapus bulu yang tidak perlu. Simpan kolom formulir hanya untuk informasi yang benar-benar Anda perlukan .

Untuk merampingkan proses, Anda juga ingin memberi label bidang formulir Anda dengan jelas dan ringkas, dan tandai bidang opsional sebagai "opsional" atau sertakan tanda bintang di sebelah bidang yang diperlukan.

Sumber Gambar

Tujuannya adalah membuat formulir semudah mungkin untuk diisi sehingga peluang orang yang mengisi formulir meningkat.

2. Mengotomatiskan input jika memungkinkan.

Jika Anda secara tidak sengaja salah mengetik alamat jalan dan formulir mengoreksi ejaannya untuk Anda, formulir akan mengoreksi jawaban Anda secara otomatis.

Jika Anda mulai mengetik alamat pengiriman dan sebuah kotak muncul dengan sisa alamat Anda yang menanyakan apakah Anda ingin "mengisi otomatis" sisa bidang formulir dengan alamat tersimpan Anda, maka formulir Anda melengkapi respons secara otomatis untuk Anda.

Dengan menerapkan fitur koreksi otomatis dan isi otomatis pada formulir seluler, Anda akan meningkatkan pengalaman pengguna dengan membuatnya cepat, sederhana, dan mudah bagi pengguna untuk memasukkan detailnya.

Dalam contoh di bawah ini, seseorang dapat dengan mudah mengisi otomatis informasinya dengan mengeklik pop-up kecil yang muncul.

Sumber Gambar

3. Gunakan tata letak satu kolom.

Saat Anda membuat formulir panjang atau multi-langkah, daftarkan semua konten Anda dalam tata letak satu kolom.

Sumber Gambar

Tata letak formulir satu kolom adalah:

sebuah. Lebih mudah dibaca.

Menempatkan semua bidang formulir Anda dalam format satu kolom memungkinkan pengunjung Anda untuk fokus hanya pada satu item pada satu waktu, membuat formulir Anda lebih mudah dibaca.

b. Kurang menakutkan.

Jika Anda melihat formulir, terutama di ruang sempit seperti yang Anda lakukan pada perangkat seluler, dan melihat sejumlah besar konten digabungkan, Anda mungkin merasa kewalahan. Itu sebabnya memisahkan konten Anda dengan baris dan menempatkan bidang formulir Anda dalam format satu kolom membuat konten Anda terlihat dan terasa kurang menakutkan.

c. Lebih cepat selesai.

Saat Anda menempatkan formulir multi-langkah dalam satu kolom, prospek dapat menyelesaikannya lebih cepat daripada formulir multi-kolom. Itu karena format membuat formulir lebih mudah dibaca dan dikerjakan langkah demi langkah.

Lihatlah formulir pendaftaran ini di situs web HubSpot jika dilihat dari desktop atau laptop.

Sumber Gambar

Tata letak dua kolom masuk akal di sini, karena ada banyak ruang di layar yang lebih lebar untuk digunakan. Sekarang periksa formulir yang sama jika dilihat dari perangkat seluler.

Sumber Gambar

Tata letak satu kolom ini memungkinkan mata mengalir secara alami sambil mencegah kekacauan pada layar ponsel yang ringkas.

4. Konsistensi itu penting (dan begitu juga dengan penampilan).

Bagaimana Anda menutup folder atau tab yang terbuka di laptop Anda?

Dengan mengklik tombol 'x' di pojok kanan atas.

Namun bagaimana jika tombol tersebut tidak muncul saat berada di aplikasi tertentu? Bagaimana perasaan Anda ketika Anda pergi untuk menutup jendela?

Bingung atau kesal, mungkin. Anda mungkin menghabiskan satu atau dua menit mencari tahu cara menutup aplikasi.

Ini hanyalah contoh luas tetapi berfungsi dengan baik untuk menggambarkan pentingnya konsistensi. Tonton video ini untuk mempelajari lebih lanjut.

Konsistensi dalam desain bentuk berlaku tidak hanya untuk gaya (warna, tipografi, logo, dll.) tetapi untuk konvensi yang diterima secara umum yang biasa dilakukan orang.

Berikut adalah beberapa tips untuk memastikan pengalaman yang konsisten:

• Cocokkan tampilan dan nuansa formulir Anda dengan merek dan situs web Anda.
• Pastikan gaya dan pemformatan formulir Anda konsisten dan saling melengkapi (tidak ada yang terlihat menggelegar atau tidak pada tempatnya).
• Sejajarkan input bidang formulir Anda ke kiri.
• Tempelkan setiap label di atas kotak input yang sesuai dan ratakan ke kiri.
• Gunakan tanda bintang untuk menunjukkan pertanyaan wajib.

Sumber Gambar

Kesan pertama meninggalkan kesan abadi (dalam kehidupan dan bisnis). Itu berlaku untuk formulir seluler Anda. Tidak ada yang ingin menyelesaikan bentuk yang gelap, sulit dibaca, berantakan, dan tidak menarik.

Bentuk seluler Anda harus sangat fungsional dan menyenangkan secara estetika. Penampilannya harus berkontribusi pada keterbacaan dan pengalaman pengguna yang positif. Untuk mencapainya, gunakan gaya dan ukuran font yang sederhana dan mudah dibaca, palet warna yang tidak terasa berlebihan, dan bidang formulir minimal.

5. Ingatlah pengalaman sentuhan.

Pikirkan tentang bagaimana Anda memegang ponsel saat mengirim SMS.

Kemungkinan besar, mencengkeram ponsel dengan dua tangan sambil menggunakan ibu jari untuk berinteraksi dengan layar. Atau Anda bahkan mungkin melakukannya sendiri atau mengetik dengan menggunakan jari telunjuk Anda.

Kami berinteraksi dengan ponsel cerdas jauh berbeda dari laptop atau desktop (isyarat jempol teks), dan desain formulir seluler harus mencerminkan hal itu.

Berikut adalah beberapa saran yang perlu diingat:

• Sediakan ruang putih yang memadai untuk menjaga agar formulir tidak berantakan dan menghindari penekanan tombol yang tidak disengaja.
• Pastikan tombol diposisikan secara logis (misalnya, tombol kirim di dekat bagian bawah formulir, sehingga pengguna tidak perlu menggulir ke atas untuk menemukannya).
• Periksa apakah teks (ukuran dan gaya font) dapat dibaca di layar ponsel kecil (tidak ada yang mau mencubit layarnya dan memperbesar untuk dapat membaca teks).
• Pastikan bidang formulir dan tombol cukup besar untuk diketuk dengan nyaman menggunakan jari.
• Buat formulir pop-up ke bagian bawah layar (jika memungkinkan) agar mudah dijangkau.

Sumber Gambar

6. Memanfaatkan kendala input.

Batasan input membatasi jenis respons yang dapat dimasukkan seseorang dalam bidang formulir. Ini dapat mencakup batas kata (katakanlah, saat mengisi formulir lamaran kerja) atau hanya dapat memasukkan digit (dalam hal nomor telepon).

Ini terlihat pada formulir di bawah ini, di mana keyboard numerik muncul ketika seseorang memasukkan nomor teleponnya.

Sumber Gambar

Kendala input memaksimalkan efisiensi bentuk dengan membatasi kesalahan, penundaan, atau kebingungan yang tidak disengaja. Misalnya, jika seseorang mencoba membuat reservasi untuk meja di restoran dan secara tidak sengaja memilih tanggal di masa lalu, kendala tersebut akan mencegah mereka untuk benar-benar dapat memilih dan mengonfirmasi tanggal tersebut.

Ini sangat penting saat mendesain untuk seluler karena layar yang lebih kecil mempersulit untuk memasukkan informasi secara akurat. Dengan menetapkan batasan input, Anda akan menghemat waktu orang saat mengisi kolom formulir Anda, dan mencegah diri Anda menerima jawaban yang bertele-tele atau tidak valid.

Berikut contoh lain dari batasan input.

Sumber Gambar

7. Buat tombol aksi yang jelas.

Tombol adalah aspek desain formulir seluler yang diremehkan. Coba pikirkan: Anda mendapatkan pengiriman formulir atau konversi hanya setelah tombol kanan ditekan. Jadi Anda benar-benar tidak bisa mengabaikan elemen ini.

Lembar contekan UI dan blog UX Planet ini adalah sumber yang bagus untuk mendesain tombol yang efektif. Berikut adalah ikhtisar singkat dari beberapa prinsip yang disebutkan yang dapat Anda terapkan pada formulir seluler Anda.

• Terlalu banyak tombol merusak kaldu (seperti bidang formulir, simpan hanya tombol yang penting).
• Beri gaya dan beri label pada tombol Anda secara konsisten (kapitalisasi, pemformatan, perataan, dll.).
• Biarkan fokus bersinar pada tombol utama (tindakan utama yang Anda ingin pengguna lakukan) dengan menonjolkannya berdasarkan ukuran atau warna.
• Kanan adalah benar — aturan praktis umum untuk ponsel adalah memposisikan tombol utama di sisi kanan dan tombol kedua di kiri (walaupun ini dapat bervariasi sesuai dengan kebutuhan masing-masing).
• Label tertentu hampir selalu merupakan jawabannya ("Edit halaman ini" di atas "Edit").

Sumber Gambar

8. Menyediakan pemindai kartu untuk pembayaran.

Mencoba memasukkan detail kartu kredit Anda dalam formulir melalui ponsel cerdas Anda? Mengetik banyak angka di layar kecil dengan keyboard kecil bisa menjadi proses yang membosankan.

Aplikasi pemindaian kartu, seperti Microblink, menjadi semakin populer karena alasan yang tepat. Saat melakukan pembelian, pengunjung Anda dapat mengeklik tombol yang membawa mereka ke layar tempat mereka dapat menggunakan kamera perangkat seluler mereka untuk mengambil foto bagian depan dan belakang kartu mereka dengan aman, baik itu lisensi atau kartu kredit mereka.

Sumber Gambar

Hanya dengan beberapa gambar, prospek Anda akan selesai dengan salah satu bagian yang paling memakan waktu dari proses penyelesaian formulir seluler — menjaga pengunjung Anda tetap efisien serta frustrasi dan bebas kesalahan.

9. Jelaskan perlunya informasi spesifik.

Saat mengisi pendaftaran email sederhana atau formulir pendaftaran, pernahkah Anda diminta untuk memberikan informasi pribadi yang tidak ada hubungannya dengan formulir pendaftaran itu sendiri?

Ini adalah kejadian umum di semua jenis formulir (tidak hanya seluler). Meminta seseorang untuk informasi pribadi atau informasi sensitif lainnya tanpa menjelaskan kebutuhan Anda akan hal itu bisa tampak samar.

Saat mengajukan pertanyaan yang tidak berhubungan langsung dengan alasan pengunjung Anda mengisi formulir, penting untuk membuat kotak ringkasan (dengan informasi tambahan) yang dapat diklik orang tersebut untuk memahami mengapa Anda meminta informasi ini.

Indikator semacam itu juga dapat membantu memberikan panduan tambahan untuk mengisi kolom formulir saat instruksi tidak segera terlihat. Pada gambar di bawah, kotak ringkasan muncul saat seseorang mengarahkan kursor ke ikon.

Sumber Gambar

Detail kecil ini akan membuat formulir Anda terasa profesional dan bijaksana sekaligus mengurangi kemungkinan pengguna keluar di tengah jalan.

10. Kumpulkan validasi dan umpan balik.

Pengalaman pengguna adalah inti dari desain formulir seluler yang baik. Dan validasi serta umpan balik memainkan peran penting dalam menyediakan UX yang hebat.

Validasi memberi tahu orang-orang apakah informasi yang mereka masukkan benar (atau tidak). Perhatikan tanda centang hijau di kolom formulir di bawah ini.

Sumber Gambar

Saat mengisi formulir seluler, pengunjung Anda pasti membuat kesalahan di sana-sini. Formulir tersebut harus menandai kesalahan ini secara real-time sehingga pengguna dapat segera memperbaikinya.

Misalnya, jika seseorang menambahkan kode pos yang salah di samping alamat jalan mereka, formulir seluler akan menampilkan pesan kesalahan. Ini harus menunjukkan — dalam bahasa yang mudah dipahami — lokasi kesalahan dan bagaimana orang tersebut dapat memperbaikinya (seperti yang terlihat pada gambar di bawah).

Sumber Gambar

Penting juga untuk memberi umpan balik kepada orang-orang saat mereka membaca formulir. Misalnya, bilah kemajuan pada formulir multi-langkah yang panjang dapat membuat proses pengisian formulir lebih menarik dengan menunjukkan kepada pengguna seberapa jauh mereka telah mencapai dan berapa lama waktu yang tersisa untuk menyelesaikannya.

Sumber Gambar

Pertimbangkan seseorang yang mengisi formulir di atas tanpa bilah kemajuan. Mereka akan mengklik tombol 'selanjutnya' tanpa tahu kapan formulir berakhir, dan bahkan mungkin meninggalkannya tepat sebelum langkah terakhir karena frustrasi.

Setelah orang mengirimkan formulir mereka, Anda harus mengarahkan mereka ke layar atau halaman lain yang mengatakan sesuatu seperti, "Sukses!" atau "Terima kasih" agar mereka tahu kiriman mereka berhasil.

Berikut adalah contoh halaman sukses di HubSpot yang muncul setelah pengguna mendaftar untuk menerima kit Google Ads gratis.

Sumber Gambar

11. Membuat formulir dapat diakses.

Aksesibilitas sangat penting untuk kegunaan formulir Anda. Formulir yang dirancang dengan mempertimbangkan aksesibilitas dapat digunakan oleh lebih banyak orang, termasuk mereka yang memiliki disabilitas visual, fisik, sensorik, dan kognitif.

Berikut beberapa rekomendasi khusus untuk membuat formulir yang dapat diakses dari World Wide Web Consortium Web Accessibility Initiative, WebAIM, dan The A11Y Project Checklist).

• Pastikan teks tidak berpiksel atau kabur saat memperbesar formulir Anda (untuk visualisasi yang lebih baik).
• Beri label elemen formulir Anda dengan cara yang dapat dipahami dengan jelas saat dibaca oleh pembaca layar.
• Pastikan formulir Anda dapat diakses dalam mode potret dan lanskap.
• Hindari penggunaan batas waktu (jika memungkinkan) untuk memberi orang waktu yang cukup untuk merespons.
• Sertakan keterangan atau transkrip untuk komponen video atau audio apa pun di formulir Anda.
• Ingat kontras warna. Berikut adalah alat gratis yang dapat membantu dengan itu.
• Pastikan formulir Anda dapat digunakan sepenuhnya hanya dengan keyboard.

Cara terbaik untuk memastikan bahwa semua strategi desain formulir seluler di atas tetap ada adalah dengan menjelajahi apa yang tidak boleh Anda lakukan dalam desain formulir. Video di bawah melihat beberapa contoh tentang apa yang tidak boleh dilakukan saat mendesain formulir di perangkat seluler dan desktop.

Kembali kepada Anda

Bukan rahasia lagi bahwa pengunjung situs web Anda mengisi dan mengirimkan formulir web Anda melalui perangkat seluler mereka. Itu karena nyaman dan efisien, karena kebanyakan orang membawa beberapa jenis perangkat seluler ke mana-mana, sehingga formulir Anda harus mobile-friendly.

Jika tidak, formulir Anda akan sulit dibaca, diisi, dan dikirim, yang dapat membuat prospek Anda frustrasi atau menyebabkan Anda kehilangan bisnis mereka sama sekali.

Dengan mempertimbangkan desain formulir seluler Anda dan menerapkan pedoman ini, Anda akan menyempurnakan pengalaman pengguna formulir seluler Anda, membangun hubungan positif dengan prospek dan pelanggan Anda, serta meningkatkan konversi Anda.

Catatan Editor: Posting ini awalnya diterbitkan pada Desember 2018 dan telah diperbarui untuk kelengkapannya.