4 İlham Verici Form Tasarım Modeli [ÜCRETSİZ]

HubSpot tarafından yürütülen bir araştırma, ankete katılanların %82'sinin zayıf veya eksik formlar nedeniyle bir web sitesi satın alma hunisini terk ettiğini ve bu kişilerin %93'ünün bu formlarla ilk kez masaüstü bilgisayarlarda karşılaştığını bildirdi.

İster anket yapıyor olun, ister potansiyel müşterilere sizinle iletişim kurmaları için bir yol sunuyor olun, ister bülten kayıtlarını teşvik edin, formlar web sitenizin ve işinizin önemli bir parçasıdır. Harika görünen ve etkili bir web formu oluşturmanın birçok yolu vardır, ancak her zaman iyileştirmeye yer vardır. Formların sıkıcı olması gerekmez.

4 İlham Verici Form Tasarım Modeli [ÜCRETSİZ]

İyi tasarlanmış bir form, kullanışlılığından ödün vermeden tüm tasarıma değer katar. Ayrıca, bu tür formlar çok daha iyi performans gösterir. Salesforce'un yeni UI tasarım çerçevesi olan Lightning'de, küçük form tasarımı değişiklikleri form dönüştürmeyi iyileştirebilir. Hadi buna dalalım.

Kutusuz formlar

Kutusuz web formları, görünür kutu veya kenarlıkları olmayan web formlarıdır. Etrafında kutular bulunan web formlarının geleneksel görünümüne sahip olmadıkları için web formlarının daha çağdaş ve modern görünmesini sağlar. Etrafında kutular bulunan geleneksel web formları tarihli olarak görülebilir.

Eğri tabanlı web formları, ilgi yaratmak için eğri çizgiler ve köşeler kullanmanın avantajlarından yararlanır. Eğriler şekillerde ve düzenlerde bulunabilir. İyi tasarlanmış kavisli kutular, geleneksel kutulu tasarımları takip etmek zorunda değildir. Doğru yapılırsa, eğriler, negatif ve pozitif alan arasında gerilim ekleyerek, kişinin tüm web formunun etrafından dolaşmasına bile neden olabilir. Çok fazla görsel çekicilik katar ve sıkıcı görünen bir web formunu daha heyecan verici ve ilgi çekici hale getirmeye yardımcı olabilir.

animasyonlu formlar

Animasyonlu form tasarımı, formun kendi içinde bazı animasyonlarla tasarlanmıştır. İlgi çekmeye ve dikkat çekmeye yardımcı olan basit animasyonlardan (sıçrayan oklar ve düğmeler gibi) arka plan animasyonları veya sayfalar arasındaki geçişler gibi en iyi animasyonlu web tasarımını ortaya çıkaran daha karmaşık ve ayrıntılı tasarımlara kadar birçok farklı düzeyde yapılabilir. Bu tür animasyon efektlerini kullanmanın temel amacı, kullanıcı deneyiminizi olabildiğince çekici kılmaktır - hepimizin bildiği gibi, kullanıcıların bu sıkıcı web sitesi formlarıyla mücadele ettiğini biliyoruz!

Alttan veya yandan kaydırın

Bu web akışı şablonu, kullanıcıların genel görünümden ödün vermeden herhangi bir anda bir iletişim formu göndermelerini sağlar. Sitenin altına bir iletişim düğmesi ekleyerek tüketicilerin hazır olduklarında sizinle iletişime geçmesine izin verebilirsiniz.

İnsanların formunuza erişmesine izin vermek için bir kayar menü de kullanabilirsiniz. Ziyaretçileri bir iletişim sayfasına göndermek yerine, formu ekranın yanından çekin. Birinin yardım ederken sitede bilgi aramak isteyebileceği durumlar için mükemmel bir kalıptır.

Tam ekran formu

Formunuza dikkat çekmek için harika bir teknik, dikkat dağıtıcı unsurları ortadan kaldırmaktır. Formunuzu web sitenizdeki (altbilgi gibi) zaten engellenmiş bir yere sıkıştırmak yerine, tam ekran yapmak için bir etkileşim noktası eklemeyi deneyin. Kullanıcınızın istediği bilgileri kolay ve odaklanmış bir şekilde girmesine yardımcı olarak tamamlamasını kolaylaştırır.

Doğal dil formları

Web formları konuşabiliyorsa, kulağa şöyle gelebilir: "Bilgilerinizi göndermek üzeresiniz. Emin misiniz? Gerekli." Web'deki formlar her zaman olmasını istediğimiz kadar basit değildir. Bugün web deneyimlerinin ve kullanıcı arayüzlerinin daha insani ve tanıdık olmasını bekliyoruz; örneğin, bir web sayfasıyla etkileşim kurmak, yazmaktan çok konuşmak gibi hissettirmelidir. Doğal dil girdisi, web formlarının daha fazla konuşma hissi uyandırmasını sağlamanın yollarından biridir - yani, doldurulması gereken başka bir yazılı metin parçası değil. Doğal bir dil arayüzü, insanların soru sorması için sorular sorarak kullanıcılara yardımcı olur. Geleneksel form etiketini ve giriş kutusu modelini kullanarak yanlış anlaşılmayı azaltırken bir konuşma bağlamı oluşturmanıza olanak tanır. Kendine özgü, iyi tasarlanmış bir hissi de var.

Adım adım (prosedürel) form tasarımı

Adım adım web formu tasarımı, bilgi bölümlerini takip etmesi kolay sindirilebilir bölümlere ayırmanıza olanak tanır. Burada, kullanıcıya her alanı doldurması için görsel ipuçları verilir.

Bu web sayfası, kullanıcıların web formu adımlarını atmaları için açık bir yola sahiptir ve hem başlıklar hem de yol boyunca onlara rehberlik eden görsel ipuçları vardır. Bu form kalıbını kullanmak, bilgilerini çevrim içi olarak vermekte tereddüt edebilecek bireyler için daha kolay hale getirir.

İnsanların anlaşılması kolay parçalar halinde bilgi eklemesine izin vermek, ileriye doğru ivmeyi teşvik eder ve tüm alanları aynı anda görüntülemekten daha odaklı bir deneyim sağlar.

Bazı durumlarda tek bir düğme tıklaması yeterli olabilir. Ancak bazen, bir kullanıcının prosedür boyunca kaybolmaması için formu doldurmak için kaç adımın gerekli olduğunu görüntülemek isteyebilirsiniz.

Sonuçlar

Web iki yönlü bir caddedir ve kullanıcılar için değerli web içeriği oluşturmalı ve onları heyecan verici web formu tasarımıyla meşgul tutmalıyız. Formlar, web'de gezinme deneyiminin ayrılmaz bir parçasıdır, öyleyse neden web formlarınızı olabildiğince ilgi çekici hale getirebileceğinizi düşünmek için fazladan zaman harcamayasınız? Bu kalıpları düşünerek ve web formu tasarımlarımıza daha insani bir dokunuş ekleyerek, daha az kafa karışıklığıyla daha iyi etkileşimi teşvik ederken düşme oranlarını düşürmeye yardımcı olabiliriz.