Hiç bir web sitesinde bir form doldurmayı denediniz ve bunu yaparken kafanızın karıştığını veya kaybolduğunuzu hissettiniz mi? Form alanı etiketlerinin yerleşimi ve alanların kendileri bir anlam ifade etmedi mi? Formun başlığı ve gönderme düğmesi kolayca fark edebileceğiniz yerlerde değil miydi?
Diğerlerinin yanı sıra bu faktörler, bir web formunun kullanıcı deneyimini (UX) geliştirme veya azaltma potansiyeline sahip olan düzeninin önemli yönleridir. Başarılı bir düzen uygulayarak, ziyaretçileriniz için harika bir deneyim yaratmanın yanı sıra onlar ve markanız arasında olumlu ve umarız uzun süreli bir ilişki başlatmış olursunuz.
Bu kılavuzda, başlamanıza yardımcı olmak için en iyi altı web formu düzeni uygulamasını ve her uygulamanın örneklerini inceleyeceğiz. Ama önce, web formu düzeninin gerçekte ne olduğunu ve neden bu kadar önemli olduğunu gözden geçirelim.
Web formu düzeni neden önemlidir?
Hemen hemen her web sitesinin bir tür web formu vardır. Web formu düzeniniz, formunuzun ne kadar iyi dönüştürüldüğü konusunda büyük bir rol oynar. Bunun nedeni, harika bir form düzeninin, formun sorunsuz bir şekilde tamamlanmasını sağlaması ve ziyaretçileriniz için gönderim sürecini iyileştirmesidir. Zahmetsiz ve hem profesyonel hem de düşünceli hissettiren bir web formu oluşturduğunuz için ziyaretçiler kolayca dönüşüm gerçekleştirecektir.
Önerilen makale: digital marketing nedir hakkında bilgi almak ve güncel pazarlama haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
Buna karşılık, kötü planlanmış bir düzen, kafa karıştırıcı ve üzerinde çalışılması zor bir forma yol açar, bu da ziyaretçilerinizi hayal kırıklığına uğratabilir ve hatta sitenizi tamamen terk etmelerine neden olarak dönüşümlerinizi azaltabilir.
Artık web formunuzun düzenini doğru yapmanın neden bu kadar önemli olduğunu anladığımıza göre, web formunuz için en uygun düzeni nasıl oluşturacağınıza geçelim. Aşağıda, içeriğinizi düzenlerken izlenecek en iyi altı uygulama yer almaktadır.
Form Düzenleri: 6 En İyi Uygulama ve İzlenecek Harika Örnekler
Neredeyse her tür web formuna uygulamak için bu en iyi uygulamalar listesini derledik. Ayrıca, kavramları kendi formlarınıza daha iyi uygulamanıza yardımcı olmak için her uygulamanın harika örneklerini de ekledik.
1. Tek sütunlu bir düzen kullanın
Düzeniniz söz konusu olduğunda, tüm alanlarınızın konumunu ve sırasını olabildiğince basit tutmalısınız. Bu, tek sütunlu bir düzen kullanmanız gerektiği anlamına gelir. Alanlarınızı bu şekilde düzenleyerek, ziyaretçileriniz hiçbir alanı kaçırmaz, alanları en mantıklı sırayla doldurur ve çoklu kullandığınızdan daha hızlı formunuzu gönderebilirler. -sütun formu.
Bu örnek size tek sütunlu bir formatın nasıl görünmesi gerektiğini gösterir. Düzen, olabildiğince aerodinamik, basit ve minimalist, ki bu tam olarak istediğiniz şey. Bu şekilde, ziyaretçilerinizin formunuz üzerinde çalışması için gereken süreyi azaltırsınız ve olası bir hata veya karışıklık nedeni olmaz.
2. Kopyayı sola hizalayın
Tüm form alanlarınızı web sayfasının sol tarafına hizalayın. Formunuzu düzenlemenin en doğal yolu budur çünkü insanların büyük çoğunluğu içeriği okumayı bu şekilde öğrenir — sağdan sola hareket ederek. Satır içi form alanı etiketleri kullanmıyorsanız (doğrudan form alanlarının kendisinde bulunur), etiketlerinizi de sola hizalamalısınız. Yine bu doğal akış, ziyaretçilerinizin hangi etiketin hangi alana ait olduğu konusunda kafa karışıklığı yaşamadan formunuzu daha verimli bir şekilde tamamlamasına yardımcı olacaktır.
Harika örnek:
Bu fotoğraf, hem formun alanları hem de etiketleri için sol taraf hizalamasını göstermektedir. Form, ziyaretçilerin anlayabileceği şekilde düzenlendiği için hızlı doldurma ve gönderme işlemlerine olanak sağlar. Hangi etiketlerin hangi alanlara ait olduğu konusunda hiçbir şüphe yok ve formda sağdan sola çalışmak hem doğal hem de sorunsuz.
3. Tek sayfalık bir düzen kullanın
Formlarınızı oluştururken, her sayfada yalnızca bir form olacak şekilde tek sayfalık bir düzen kullanmalısınız. Kısa bir formunuz varsa, her şey kolayca tek bir sayfaya sığmalıdır, bu da bunu uygulaması kolay bir düzen haline getirir.
Çok sayıda form alanınız varsa, bunları çok adımlı bir forma ayırmalısınız. Bunu yaptığınızda, formun ayrı bölümlerine sahip birden çok web sayfası olacak ve ziyaretçinizin tamamlaması gereken iş miktarını daha yönetilebilir hale getirecektir. (Çok adımlı bir formunuz varsa, sayfanın üst kısmına bir ilerleme çubuğu da ekleyebilirsiniz, böylece ziyaretçileriniz üzerinde daha ne kadar çalışacaklarını bilirler.)
Harika örnek:
Ziyaretçilerin doldurması gereken çok sayıda form alanı nedeniyle bu, üç ayrı web sayfasına yayılmış çok adımlı bir formdur. Formu bu şekilde düzenleyerek, gözden geçirmek ve tamamlamak, uzun ve sıkıcı bir süreç olacakmış gibi hissettirmez.
Doldurulması gereken uzun bir form alanları listesine bakmak yerine, bir seferde yalnızca birkaç alan görmek formun daha az bunaltıcı olmasını sağlar. (Sayfanın üst kısmındaki ilerleme çubuğu da, özellikle ziyaretçinin üzerinde çalışması gereken web sayfalarının adlarını açıkça etiketlediğinden, bu konuda yardımcı olur.)
4. Mobil uyumlu bir düzen oluşturun
Bu günlerde neredeyse herkes her zaman yanlarında bir tür mobil cihaz taşıyor. Hareket halindeyken, seyahat ederken, işe gidip gelirken veya sadece kendi evlerinin rahatlığında otururken olsun, insanların bülteninize kaydoldukları, bir hesap için kaydoldukları ve ürünlerinizi kendi siteleri aracılığıyla satın aldıkları bir sır değil. akıllı telefonlar ve tabletler. Bu nedenle sitenizin mobil uyumlu formlar içermesi çok önemlidir.
Harika örnek:
Bu örnek, başarılı bir mobil form düzeninin birçok önemli yönünü göstermektedir. Formun küçük ekranın üst kısmında net bir başlığı, kredi kartı bilgilerini eklemek (veya taramak) için net ve basitleştirilmiş bir seçeneği vardır; , tek sütunlu ve çok adımlı düzen, minimalist tasarım ve daha fazlası. Bu form, kullanıcıların bir mobil cihaz aracılığıyla kolayca anlayabileceği ve doldurabileceği şekilde düzenlenmiştir.
5. Satır içi form alanı etiketleri ekleyin
Satır içi alan etiketleri ve metin, ziyaretçilerin yanıtlarını formlarınızda nereye yerleştirmeleri gerektiğini anlamalarını son derece kolaylaştırır. Hangi etiketin hangi alana ait olduğunu tahmin ederek ziyaretçilerin formda tereddüt etmeden hareket etmesini kolaylaştırırlar. Ayrıca formunuzun temiz, minimalist, düzenli ve şık görünmesini sağlarlar.
Harika örnek:
Bu alan etiketleri satır içi olduğundan, form basit görünür ve etiketlerin giriş alanlarının dışında yer alması durumunda olduğundan daha kısa görünür. Ziyaretçiler, bilgilerini nereye girmeleri gerektiğini belirleme konusunda hiçbir sorun yaşamazlar. Bazen alan etiketleri, alanların üstünde, altında veya yanında yer aldığında, hangi etiketin hangi alana ait olduğunu belirlemek zordur.
6. Satır içi hata mesajlarını kullanın
Web formlarında satır içi hata mesajları kullanmak, birisinin tamamlamaya çalıştığı bir alanla ilgili bir sorun olduğunu anlamasını sağlamanın etkili bir yoludur. Ayrıca, ziyaretçiyi hatanın tam olarak bulunduğu yere yönlendirirler, böylece sorunun nerede olduğunu belirlemek için zaman kaybetmezler.
Satır içi mesajlarınızı oluşturduktan sonra, hatanın neden var olduğu ve ziyaretçilerinizin bunu nasıl düzeltebileceği hakkında biraz bağlam eklediğinizden emin olun. Bu, ziyaretçilerinizin hataları düzeltirken zaman kazanmasını sağlamakla kalmaz, aynı zamanda sizi ve iş arkadaşlarınızı form gönderildikten sonra geçersiz yanıtlar üzerinde çalışmak zorunda kalmaktan da kurtarır.
Harika örnek:
Bu formda, hata mesajı satır içinde görünür, yani geçersiz alan kırmızıyla vurgulanır. Form, bir sorun olduğunu ve sorunun nerede olduğunu daha fazla vurgulamak için alanın yanında bir hata simgesi içerir. Son olarak mesaj, hatanın neden var olduğunu ve nasıl düzeltileceğini açıklar.
sana geri dön
Başarılı bir web formu düzeniyle, ziyaretçileriniz için onlar üzerinde olumlu ve kalıcı bir izlenim bırakacak harika bir kullanıcı deneyimi yaratacaksınız. Düzeniniz, formun kendisiyle ilgili herhangi bir kafa karışıklığı veya belirsizlik olmaması için ziyaretçileriniz için form tamamlama ve gönderme süreçlerini kolaylaştırmalıdır. Bu uygulamaları ve UX’i geliştirmek ve dönüşümlerinizi artırmak için bunları kendi formlarınıza nasıl dahil edebileceğinizi düşünerek formunuzun düzenini geliştirmeye bugün başlayın.
Pazarlama ve İnovasyon 