![4 Pola Desain Bentuk Inspirasional [GRATIS]](/cdn-cgi/image/width=1024,quality=83,format=auto/api/_files/skUfFRwsVbubAsUUd7xwq7/download/)
Sebuah studi yang dilakukan oleh HubSpot menemukan bahwa 82% responden melaporkan telah meninggalkan corong pembelian situs web karena formulir yang buruk atau tidak lengkap dan bahwa 93% dari orang-orang tersebut pertama kali menemukan formulir tersebut di komputer desktop.
Formulir adalah bagian penting dari situs web dan bisnis Anda, baik saat Anda mengadakan polling, menawarkan cara kepada calon klien untuk menghubungi Anda, atau mendorong pendaftaran buletin. Ada banyak cara untuk membuat formulir web yang tampak hebat dan efektif, tetapi selalu ada ruang untuk perbaikan. Formulir tidak harus suram.
4 Pola Desain Bentuk Inspirasional [GRATIS]
Bentuk yang dirancang dengan baik menambah nilai pada keseluruhan desain tanpa mengurangi kegunaannya. Selain itu, formulir seperti itu berkinerja jauh lebih baik. Dalam kerangka desain UI baru Salesforce, Lightning, perubahan desain formulir kecil dapat meningkatkan konversi formulir. Mari selami ini.
Formulir tanpa kotak
Formulir web tanpa kotak adalah formulir web yang tidak memiliki kotak atau batas yang terlihat. Itu membuat formulir web tampak lebih kontemporer dan modern karena tidak memiliki tampilan tradisional formulir web dengan kotak-kotak di sekitarnya. Formulir web tradisional dengan kotak di sekelilingnya dapat dianggap kuno.
Formulir web berbasis kurva memanfaatkan penggunaan garis lengkung dan sudut untuk menciptakan minat. Kurva dapat ditemukan dalam bentuk dan tata letak. Kotak melengkung yang dirancang dengan baik tidak harus mengikuti desain kotak tradisional. Jika dilakukan dengan benar, kurva bahkan dapat mengarahkan pandangan ke seluruh bentuk web, menambah ketegangan antara ruang negatif dan positif. Ini menambahkan banyak daya tarik visual dan dapat membantu membuat formulir web yang tampak menjemukan menjadi lebih menarik dan menarik.
Bentuk animasi
Desain formulir animasi dirancang dengan beberapa animasi di dalam formulir itu sendiri. Ini dapat dilakukan pada berbagai tingkatan, mulai dari animasi sederhana yang membantu menciptakan minat dan menarik perhatian (seperti panah dan tombol yang memantul) hingga desain yang lebih kompleks dan rumit yang menghadirkan desain web animasi terbaik seperti animasi latar belakang atau transisi antar halaman. Tujuan utama menggunakan efek animasi seperti itu adalah untuk membuat pengalaman pengguna Anda semenarik mungkin — sesuatu yang kita semua tahu bahwa pengguna berjuang dengan formulir situs web yang membosankan itu!
Geser dari bawah atau samping
Templat alur web ini memungkinkan pengguna mengirimkan formulir kontak kapan saja tanpa mengurangi tampilan keseluruhan. Anda dapat mengizinkan konsumen untuk menghubungi Anda kapan pun mereka siap dengan menambahkan tombol kontak di bagian bawah situs.
Anda juga dapat menggunakan menu slide-out untuk memungkinkan orang mengakses formulir Anda. Alih-alih mengirim pengunjung ke halaman kontak, tarik formulir dari sisi layar. Ini adalah pola yang sangat baik untuk contoh ketika seseorang mungkin ingin mencari informasi di situs sambil membantu.
Formulir layar penuh
Teknik yang bagus untuk menarik perhatian pada formulir Anda adalah dengan menghilangkan gangguan. Daripada menjejalkan formulir Anda ke lokasi yang sudah diinjak-injak di situs web Anda (seperti footer), cobalah memasukkan titik keterlibatan untuk menjadikannya layar penuh. Ini membantu pengguna Anda memasukkan informasi yang mereka inginkan dengan cara yang mudah dan terfokus, sehingga memudahkan mereka untuk menyelesaikannya.
Bentuk bahasa alami
Jika formulir web dapat berbicara, mereka mungkin terdengar seperti ini: "Anda akan mengirimkan informasi Anda. Apakah Anda yakin? Diperlukan." Formulir di web tidak selalu semudah yang kita inginkan. Hari ini kami mengharapkan pengalaman web dan antarmuka pengguna menjadi lebih manusiawi dan akrab; misalnya, berinteraksi dengan halaman web harus terasa lebih seperti berbicara daripada mengetik. Masukan bahasa alami adalah salah satu cara kami dapat membuat formulir web terasa lebih percakapan — yaitu, bukan hanya teks tertulis lain yang perlu diisi. Antarmuka bahasa alami membantu pengguna dengan mengajukan pertanyaan sehingga manusia mengajukan pertanyaan. Ini memungkinkan Anda untuk membuat konteks percakapan sekaligus mengurangi kesalahpahaman dengan memanfaatkan label formulir konvensional dan pola kotak masukan. Ini memiliki nuansa yang unik dan dirancang dengan baik.
Desain formulir langkah-demi-langkah (prosedural)
Desain formulir web selangkah demi selangkah memungkinkan Anda memecah bagian informasi menjadi bagian yang mudah dicerna dan mudah diikuti. Di sini, pengguna diberikan isyarat visual untuk mengisi setiap bidang.
Halaman web ini memiliki jalur yang jelas bagi pengguna untuk mengambil langkah-langkah formulir webnya, dengan judul dan isyarat visual yang memandu mereka di sepanjang jalan. Menggunakan pola formulir ini memudahkan individu yang mungkin ragu untuk memberikan informasi mereka secara online.
Membiarkan orang menambahkan informasi dalam potongan yang mudah dipahami mendorong momentum ke depan dan memberikan pengalaman yang lebih terfokus daripada sekadar menampilkan semua bidang sekaligus.
Satu klik tombol mungkin cukup dalam beberapa kasus. Namun terkadang, Anda ingin menampilkan berapa banyak langkah yang diperlukan untuk mengisi formulir, sehingga pengguna tidak tersesat selama prosedur.
Kesimpulan
Web adalah jalan dua arah, dan kita harus membuat konten web yang berharga bagi pengguna dan membuat mereka tetap terlibat dengan desain formulir web yang menarik. Formulir merupakan bagian integral dari pengalaman menjelajah web, jadi mengapa tidak meluangkan waktu ekstra untuk memikirkan cara membuat formulir web Anda semenarik mungkin? Dengan memikirkan pola-pola ini dan menambahkan sentuhan yang lebih manusiawi ke desain formulir web kami, kami dapat membantu mengurangi tingkat penurunan sambil mendorong keterlibatan yang lebih baik dengan lebih sedikit kebingungan.
