Yüksek Dönüşüm Sağlayan Bir Açılış Sayfası Formu İçin 17 Temel Unsur [Kanıtlanmış]

Açılış sayfası formları kârlılığınızı ne kadar etkileyebilir?

Expedia'ya bakalım: 2010'da Expedia, “Şirket” başlıklı isteğe bağlı bir form alanının kendilerine yılda 12 milyon dolara mal olduğunu keşfetti.

Ne?!

Evet.

"Şimdi rezervasyon yap" butonuna basan ziyaretçiler, isteğe bağlı olarak "Şirket" alanına banka adı ve ardından ev adresi yerine banka adresini ekleyerek yüzlerce başarısız işleme neden oluyordu.

Fazladan form alanını kaldırdıktan sonra, satışlar bir gecede fırladı.

Evet.

Açılış sayfası formları söz konusu olduğunda, küçük kazalar her zaman büyük dönüşüm isabetlerine katkıda bulunur.

Bu, açılış sayfası formlarının tüm pazarlamada en çok çalışılan unsurlardan biri olmasının nedenlerinden biridir.

İyi haber: Yıllarca süren açılış sayfası tasarımı ve dönüşüm optimizasyonundan sonra, mükemmel açılış sayfası formunu 17 veri destekli öğeye indirdik. Bu makalede, her birinin nasıl optimize edileceğini (örneklerle) inceleyeceğiz.

Onları doğru yapın ve dönüşüm altınınız var.

Onları yanlış anlarsanız, kendinizi Expedia gibi dönüşümler yaşarken bulabilirsiniz.

İlk olarak, en iyi uygulamalara ve örneklere geçmeden önce, tüm açılış sayfalarının formlara ihtiyaç duyup duymadığı konusundaki kafa karışıklığını giderelim.

Kısa cevap: Evet ve hayır.

Açıklamama izin ver…

İki tür açılış sayfası vardır: Potansiyel müşteri yakalama sayfaları ve tıklama sayfaları.

Potansiyel müşteri yakalama sayfaları (AKA müşteri adayı oluşturma sayfaları), doğrudan açılış sayfasındaki formları içerir. Sonuçta, bir form olmadan, satışların takip edebilmesi için müşteri aday bilgilerini nasıl elde edeceksiniz?

Örneğin, Blueshift'in pazarlama otomasyonu açılış sayfası, iletişim bilgilerini isteyen bir potansiyel müşteri formuna sahiptir. Potansiyel müşteriler iletişim bilgilerini gönderdikten sonra, Blueshift'in satış ekibi bir demo planlamak için müşteri adayını takip edecek. Basit.

Tıklama sayfaları ise, açılış sayfasında formları içermez . Bunun yerine, bir harekete geçirici mesaj (CTA) düğmesini tıkladığınızda, potansiyel müşterilerin dönüşüm hedefinizi hemen tamamlayabilecekleri bir dönüşüm sayfası açılır (veya tıklanır).

Örneğin, Norton, virüsten koruma yazılımlarını satmadan önce potansiyel müşterileri ısıtmak için bir tıklamalı açılış sayfası kullanır. Potansiyel müşteriler doğrudan web sitesinden satın alabileceklerinden (satış ekibine gerek yoktur), bir potansiyel müşteri formuna ihtiyaçları yoktur.

Bu nedenle, açılış sayfalarındaki formlar söz konusu olduğunda, teknik olarak yalnızca potansiyel müşteri yakalama sayfaları formları içerir.

Ancak, bir tıklama sayfası açılış sayfasında bir form içermese bile, bir hesap oluşturma sayfası, kayıt sayfası veya ödeme sayfası gibi bir sayfaya tıklama olasılığı yüksektir.

Örneğin, Norton'un tıklama sayfası bile sonunda bir ödeme formu içerir:

Çıkarım: Tüm açılış sayfalarında formlar bulunmaz, ancak bir noktada dönüşüme giden her yol bir formdan geçer. Onlardan kaçınamazsınız. Ve en azından, her web sitesinin bir iletişim formuna ihtiyacı vardır. Dinle!

Lafı fazla uzatmadan, yüksek dönüşüm sağlayan bir açılış sayfası formu tasarımının 17 öğesini (belirli bir sıra olmadan) inceleyelim:

1. Form düzeni
2. Ekmek kırıntısı tekniği (çok adımlı)
3. İlerleme göstergeleri
4. Alan sayısı
5. Alan etiketleri
6. Yer tutucu metin
7. Tıklama tetikleyicileri
8. mikrokopi
9. Harekete geçirici mesaj (CTA)
10. Form açılır penceresi ve gömme
11. otomatik doldurma
12. otomatik biçimlendirme
13. Sosyal kanıt
14. Gerekli ve isteğe bağlı
15. Mobil uyumlu
16. koşullu mantık
17. Radyo düğmeleri ve açılır menüler

Formlar söz konusu olduğunda, üç düzen seçeneğiniz vardır: tek sütun, çift sütun veya karma.

Tek sütunlu bir form, yukarıdan aşağıya doğru düz bir çizgide düzenlenen form alanlarına sahip doğrusal bir formdur. Örneğin, Hellosign'ın bu potansiyel müşteri formu tek sütunlu bir düzene sahiptir:

Öte yandan, çift sütunlu bir form, yukarıdan aşağıya sıralar halinde düzenlenmiş iki form alanı sütunu içerir. Örneğin, Hubspot'tan gelen bu potansiyel müşteri formu, çift sütunlu bir düzene sahiptir:

Ve son olarak, hibrit bir form, hem tek sütunlu hem de çift sütunlu bir formdur. Örneğin, bu Oscar formu karma bir düzene sahiptir:

Yıllar boyunca, tek sütunlu formların daha yüksek dönüşümler için en iyi form düzeni olduğu düşünülüyordu.

Örneğin, CXL'den Peep, geçmişte tek sütunlu formların çift sütunlu formlardan daha iyi performans gösterdiğini belirtmişti. Ben Labay (Speero'nun UX tasarımcısı ve pazarlama direktörü), lineer formları daha hızlı ve dolayısıyla daha iyi ilan eden bir çalışma bile yayınladı.

Ama herkes aynı fikirde değil.

Örneğin, Hubspot tek sütunlu formu teste tabi tuttu ve çift sütunlu formlarının tek sütunlu formlarından %57 daha iyi performans gösterdiğini keşfetti.

Niye ya? Daha fazla form alanı.

Hubspot'un formu 13 form alanına sahiptir; tek sütunlu bir düzen ürkütücü görünüyordu ve hissediyordu. Daha kısa, çift sütunlu formun daha yüksek dönüşmesinin nedeni bu olabilir.

Çıkarım: Form düzeni söz konusu olduğunda, bir seçenek belirlemeden önce form alanlarının sayısını göz önünde bulundurun.

Sekiz veya daha az form alanınız varsa, tek sütunlu bir form en iyi sonucu verebilir. Dikey momentumu yukarıdan aşağıya bozmadıklarından, daha kısa, tek sütunlu formların doldurulmasının daha kolay ve daha hızlı olduğunu kanıtlayan tonlarca kanıt var.

Hubspot gibi 10'dan fazla form alanınız varsa, çift sütunlu bir form muhtemelen daha iyi performans gösterecektir. Bu durumda, çift sütunlu form, form uzunluğunu daha kısa ve daha az bunaltıcı hissettirir.

Her iki dünyanın da en iyisini elde etmek için hibrit bir form deneyin: formu kısaltmak için birkaç çift sütunlu satır kullanın, ancak momentumu devam ettirmek için birkaç tek sütunlu satır kullanın.

Form dönüşümlerini gerçekten artırmak istiyorsanız, birden çok adıma bölünmüş tek sütunlu bir form düşünün. Bu da bizi bir sonraki noktaya getiriyor…

Çok adımlı bir form (AKA The Breadcrumb Technique), uzun formları birden çok adıma böler, her adımda 3-4 form alanı (tercihen tek bir sütunda) bulunur.

Ama hepsi bu değil.

Çok adımlı formlar, önce kolay sorular sorarak beklentileri bir aşamadan diğerine mikro dönüştürmek için davranışsal psikolojiyi kullanır ve korkutucu soruları sona saklar.

Ha?

Davranış psikolojisi bize insanların başladıkları şeyleri bitirmeyi sevdiklerini söyler. The Breadcrumb Technique'in büyüsü, onları önce softbol soruları sorarak başlamalarını sağlıyor.

Örneğin, kendi potansiyel müşteri formumuz, dört adıma bölünmüş çok adımlı bir form kullanır. Ancak önce bir e-posta adresi ve telefon numarası istemek yerine (çok korkutucu), en son istiyoruz. Aslında, ilk üç adımda tehdit edici olmayan sorular sorulur:

Sonuçlar? Daha fazla dönüşüm.

Verilere bakalım…

Bir müşterimizin formunu iki adıma dönüştürdük (ve en son isim, telefon, e-posta sorduk). Bunu yaparak şunları başardık:

• EBM'nin 800$+'dan 35$'a düşmesi
• 6'dan 135/ay'a dönüşüm hacmi artışı
• Dönüşüm oranı %1'den neredeyse %20'ye yükseldi

İşte form:

Ve işte sonuçlar:

Aynısını başka bir müşteriyle yaptık ve dönüşümlerde %74'lük bir artışın yanı sıra EBM'de %51'lik bir düşüş elde ettik.

Ancak çok adımlı formları kullanan sadece biz değiliz. En iyi müşteri adayı oluşturma ve SaaS açılış sayfalarının tümü de çok adımlı formlar kullanır.

Örneğin, Lytx araç takibi, açılış sayfasında çok adımlı bir form kullanır:

ADP, açılış sayfalarında çok adımlı bir form kullanır:

Çıkarım: Çok adımlı formların tek adımlı formlardan daha yüksek dönüşüm sağlamadığı tek örnek, kılavuzlar, teknik incelemeler veya e-kitaplar gibi düşük değerli, düşük talep teklifleriydi. Diğer tüm standart müşteri adayı oluşturma açılış sayfası için (yani bir demo veya ücretsiz danışmanlık isteyin), çok adımlı formlar, tek adımlı formlardan daha yüksek dönüşüm sağlar.

Çok adımlı formları tercih ederseniz, ilerleme göstergelerini unutmayın (özellikle daha uzun formlar için).

İlerleme göstergeleri (veya ilerleme çubukları), adından da anlaşılacağı gibi, ziyaretçilere formda nerede olduklarını ve tamamlanmalarına ne kadar zaman kaldığını belirtmek için görsel işaretler kullanır.

Örneğin, ADP, formlarının her adımını numaralandırarak ve mevcut adımı mavi renkle vurgulayarak ilerlemeyi gösterir:

Diğer iki ilerleme çubuğu türü, tamamlanma yüzdesi ve etiketli adımları içerir (sayısız):

Yüzde tamamlandı

Kalan adımlar (sayı yok)

Çıkarım: İlerleme göstergeleri söz konusu olduğunda bunları cömertçe kullanın. Araştırmalar, tamamlamaya giden net bir yolu görselleştirmenin form dönüşümlerini artırabileceğini ve alışveriş sepetini terk etmeyi azaltabileceğini göstermiştir. Son olarak, adımlar arasında geçiş yapmayı kolaylaştırmayı unutmayın.

Milyon dolarlık soru: Açılış sayfası formlarıma kaç tane form alanı eklemeliyim?

Hubspot'a göre, tipik müşteri adayı formu beş form alanından oluşur:

Ve yine Hubspot'a göre, form ne kadar uzun olursa, dönüşümler o kadar düşük olur:

Mantıklı görünüyor, değil mi?

Çok hızlı değil.

Evet, daha kısa form alanlarının genellikle daha yüksek dönüşüm sağladığı doğrudur, ancak her zaman değil.

Örneğin, Michael Aagaard'ın (eskiden Unbounce'ın) ünlü bir deneyinde, üç form alanını (9'dan 6'ya) kaldırmanın dönüşümleri %14 oranında azalttığını keşfetti.

Ne oldu? Michael, ortadan kaldırdığı üç alanın aslında en çok meşgul olan üç alan olduğu sonucuna vardı. Bu yüzden onları geri ekledi ve bunun yerine sürtünmeyi sınırlamak için kopyayı güncelledi ve dönüşümlerde orijinalin üzerine %19'luk bir artış yaşadı.

Başka bir örnekte, CXL, yalnızca bir e-posta isteyerek, dönüşümlerin ad, eyalet ve sürüş deneyimi sorulduğundakine göre %13,56 daha düşük olduğunu keşfetti:

Potansiyel müşteri yaratmaya gelince, tek yaptığınız form alanlarını ortadan kaldırmaksa, beklentileriniz için geriye ne kalıyor?

İsim, telefon numarası ve e-posta gibi göz korkutucu sorulardan başka bir şey değil. Bu durumda, tek başına korku, dönüşümlerinizi kaybedebilir.

Veya potansiyel müşterilere, sorularına düzgün bir şekilde cevap vereceğinizi hissettirecek kadar soru yok.

Ayrıca, daha kısa formlar, form alanlarını azaltarak dönüşümleri artırabilir, ancak aynı zamanda potansiyel müşteri kalitesini de azaltabilir. Bueno yok.

Çıkarım: Gereksiz form alanlarını (yani cevaplamanız gerekmeyen soruları) ortadan kaldırmanız gerektiği konusunda herkes hemfikirdir. Daha fazla alan eklemeniz veya alanları kaldırmanız gerekip gerekmediği bağlama bağlıdır.

• Motivasyon: Satın almaya daha yakın olan müşteriler, daha uzun formları doldurma eğilimine sahiptir, çünkü satın alma motivasyonları yüksektir (yani hiçbir şey önlerine çıkmaz). Örneğin bir konut kredisi tahmini istersem, almak için 20 form alanını dolduracağım. Ücretsiz bir e-kitap için çok fazla değil.
• Dönüşüm hedefi: Bir e-posta aboneliği veya isteğe bağlı web semineri kaydı, potansiyel müşteri oluşturma formundan çok daha az alan gerektirir. İki farklı hedef, iki farklı form boyutu. Basit bir e-posta kaydı için birden fazla adıma gerek yok.
• Müşteri adayı kalitesi: Müşteri adayı kalitesi , müşteri adayı hacminden daha önemliyse, daha fazla form alanı ekleyin ve daha fazla bilgi toplayın. Ancak, potansiyel müşteri kalitesi, potansiyel müşteri hacminden daha önemli değilse (yani, özel bir reklam kitlesi oluşturmak için birinci taraf verilerini topluyorsunuz), o zaman kazanmak için daha az form alanı.
• Yapı: Bir demo planlamak veya bir satış temsilcisiyle görüşmek gibi ciddi bir istekte bulunuyorsanız, çok adımlı bir form hile kodu gibidir. Daha küçük adımlara bölerek daha fazla soru sormaktan kurtulabilirsiniz.

Son olarak, form uzunluğu hakkında geri bildirim almak için Unbounce'ın CEO'su ve kurucusu Oli Gardner'a ulaştık. İşte söylediği:

“Çoğu insanın sahip olduğu aynı zihniyetle başladım, daha az form alanı daha iyi performans gösteriyor.

Bir dönüşüm açısından, bu hala geçerlidir. Ancak birkaç alan daha eklemenin sonuçları nasıl etkileyebileceğine şaşıracaksınız.

Bazen form uzunluğu çok fazla fark yaratmaz ve nicelikten çok kaliteyle ilgileniyorsanız, ekstra sürtünme iyi bir şey olabilir.

Ancak bu alanları dikkatli seçin, aksi takdirde sürtüşme yanlış veriler yaratacaktır.

Örneğin, yeni bir chip ve pin ödeme teknolojisi hakkında rapor sunan bir form gördüm. Form, işveren veya iş arayan olup olmadığımı soran ve hiçbiri teklifle ilgili olmayan harekete geçirici mesajın yanında bir radyo düğmesi alanı içeriyordu - ve bu zorunlu bir alandı!

Gereksiz sorular bazı insanların kaçmasına neden olacak ve geri kalanı soruyu atlamak için rastgele tıklatarak verileri kirletecek ve onu değersiz hale getirecek."

Alan etiketleri, her bir ilgili form alanının adını gösteren form alanı içinde, yukarıdaki mikrokopyaya atıfta bulunur.

Örneğin, aşağıdaki formda, iki alan etiketi "E-posta" ve "Şifre" okur (form alanlarının üstüne yerleştirilir):

Etiket yerleştirme söz konusu olduğunda, üç ana seçeneğiniz vardır:

• Üstte (sola hizalı)
• Satır içi (sola hizalı)
• Alanın solu (sağa hizalı)

Her birini gözden geçirelim.

Üstte (sola hizalı)

Etiket, form alanı kutusunun üzerine yerleştirilir ve sola yaslanır.

Örneğin, az önce (yukarıda) gösterdiğimiz SEMRush hesap oluşturma formu, form etiketlerini alanların üstüne sola hizalı olarak yerleştirir.

Dönüşümler söz konusu olduğunda, araştırmalar, form alanının üst kısmındaki sola hizalı etiketlerin en yüksek dönüşümü sağladığını gösteriyor. Niye ya? Çünkü doldurması en kolay ve en hızlısı onlar.

Örneğin, göz izleme yazılımı kullanarak, form alanının üst kısmındaki sola hizalı etiketlerin, ziyaretçinin gözlerinin form alanlarına ve sınırlı bilişsel yüke sahip etiketlere odaklanmasını sağladığını görebilirsiniz:

Satır içi veya "alan içi" (sola hizalı)

Etiket, form alanı kutusunun içine yerleştirilir ve sola yaslanır.

Örneğin, aşağıdaki Bob HR formu, alan etiketlerini alan kutusunun içine yerleştirir:

Satır içi alan etiketleri, özellikle yalnızca ad veya telefon numarası gibi temel bilgileri soruyorsanız, bunun gibi kısa formlar için iyi çalışır.

Ancak daha karmaşık form alanlarına sahip daha uzun formlar için satır içi formlar, özellikle mobil cihazlarda bir kullanıcı deneyimi kabusu yaratır.

Niye ya?

Bir kutuya tıkladığınızda etiket kaybolur. Etiketin ne dediğini unutursanız, tekrar öğrenmenin tek yolu tüm girişinizi silmek ve baştan başlamaktır. Evet.

Alanın solu (sağa hizalı)

Etiket, alan kutusunun soluna (dışına) yerleştirilir.

Form alanlarının üstüne yerleştirilen etiketler kadar verimli olmasa da (ziyaretçilerin gözlerini soldan sağa, yukarı ve aşağı kaydırmaları gerektiğinden), form alanlarının soluna yerleştirilen etiketler de sınırlı bilişsel yük gerektiriyordu.

Çıkarım: En iyi sonuçlar için alan etiketlerini form alanlarının üstüne (sola hizalı) yerleştirin. Her iki durumun da en iyisini istiyorsanız, birisi yazmaya başladığında form alanının en üstüne hareket eden satır içi form etiketlerini deneyin, şöyle:

Hangi seçeneği seçerseniz seçin, aşağıdakilere dikkat edin:

• Düz metin etiketleri kullanın: Kalın etiketler kulağa çekici gelebilir, ancak okunması daha zordur
• Beyaz boşluk: Form alanlarınızın ve etiketlerinizin aralarında yeterli boşluk olduğundan emin olun
• Metin hizalama: Bilişsel yükü azaltmak için, alan etiketlerini alanların soluna yerleştirdiğinizde metni sağa hizalayın ve alan etiketlerini üste veya satır içine yerleştirdiğinizde metni sola hizalayın
• Yakınlık: Ne yaparsanız yapın, etiketleri form alanlarına yakın tutun

Yer tutucu metin, form alanına yerleştirilmiş bir ipucu, açıklama veya örnektir (genellikle açık gri renktedir) ve biri yazmaya başladığında kaybolan bir metindir. Yer tutucu metin satır içi etiket gibidir, yalnızca etiket adı yerine gerçek bir gönderim örneğidir.

Örneğin Oscar, müşteri adayı yakalama form alanlarının her birinde yer tutucu metin kullanır:

Ardı ardına inceleme, satır içi yer tutucu metin kullanmanın kötü bir kullanıcı deneyimi yarattığını ve form dönüşümlerini azalttığını doğrular.

Niye ya? Gerçekten gereksiz bir yük.

• Satır içi etiketler gibi, yer tutucu metin, siz yazmaya başladığınızda kaybolur ve ziyaretçilerin yer tutucu ipucu metnini unuturlarsa girişlerini silmeye zorlar.
• Bir hata mesajı görünürse, ziyaretçiler sorunu nasıl çözeceklerini bilmiyor
• Satır içi yer tutucular, boş alanları daha az fark edilir hale getirir. Göz izleme yazılımı, insanların gözlerinin dolu kutulara değil, boş kutulara çekildiğini göstermiştir.
• Zayıf renk kontrastı, özellikle görme engelliler için okumayı zorlaştırır

Bunun yerine ne yapmalı?

Her form için talimat sağlama ihtiyacı hissediyorsanız (ki bu çok mantıklı olabilir), talimatları alan etiketlerinin altına , ancak form alanının üstüne yerleştirin. Örneğin:

Tıklama tetikleyicisi, şüpheyi ortadan kaldırmak ve ziyaretçileri bir dönüşüme yönlendirmek için tasarlanmış bir form CTA'sı veya gönderme düğmesinin altına veya etrafına yerleştirilmiş kısa bir cazip kopyadır.

Örneğin, bu Lusha açılış sayfası, ziyaretçilere neden "Ücretsiz başla" düğmesine basmaları gerektiğini hatırlatmak için "Kredi kartı gerekmez" ile birlikte yıldız derecelendirmesini ve toplam inceleme sayısını kullanır.

Veya ContentVerve'den alınan bu eski örnek, katılım formlarına faydayla ilgili birkaç madde işareti ekleyerek e-posta bülteni aboneliklerinde %87'lik bir artış gördü:

Çıkarım: Potansiyel müşterinizin formunuzun diğer tarafında ne olduğuna ilişkin itirazlarını tahmin etmek ve ele almak için tıklama tetikleyicilerini kullanın.

Mikrokopi, formunuzda ziyaretçileri bilgilendirmek veya bilgilendirmek için kullanılan küçük kopya parçalarını ifade eden geniş bir terimdir.

Teknik olarak, tıklama tetikleyicileri, alan etiketleri ve yer tutucuların tümü form mikrokopyasının örnekleridir, ancak bu durumda, ziyaretçilere belirli bilgilere neden ihtiyaç duyduğunuzu veya nasıl yapacağınızı söyleyerek sürtünmeyi azaltmaya yardımcı olan bir mikrokopyadan bahsediyoruz. onu kullan.

Mikrokopinin varlığı küçük olsa da, form dönüşümleri üzerinde büyük bir etkisi olabilir.

Örneğin, aşağıda ziyaretçilere e-Ticaret satın almalarını tamamlamak için neden bir telefon numarasına ihtiyaç duyduklarını söyleyen bir form mikro kopyası örneği verilmiştir (çünkü çoğu kişi bu bilgiyi gereksiz bulabilir ve vazgeçebilir):

Diğer bir yaygın mikrokopi türü, aşağıdakine benzer hata mesajlarından oluşur:

Mikrokopi dönüştürür mü? Emin ol.

Örneğin, insanların alışveriş sepetlerini terk etmelerinin 1 numaralı nedeni maliyet olduğundan, Yoast, ödeme formuna "ek maliyet olmayacak" ifadesini ekledi ve dönüşümleri %11,30 oranında artırdı.

Veya insanların yanlış adresleri girmesi nedeniyle işlemlerin tamamlanmadığını keşfeden eski bir Hubspot UX tasarımcısından alınan bu örnek. Bir satır mikroskopi ekleyerek, form dönüşümlerini önemli ölçüde artırdı (ve müşteri destek maliyetlerini azalttı).

Çıkarım: Ziyaretçiler, siz onlara söylemediğiniz sürece, bilgiye neden ihtiyaç duyduğunuzu, bilgiyi nasıl kullanacağınızı veya doğru bilgileri girmenin önemini her zaman bilemezler. Şaşkın veya endişeli beklentilere karşı korunmak için form arayüzünün bir parçası olarak mikroskopi kullanın.

Eylemi motive eden çekici ve baştan çıkarıcı bir CTA olmadan hiçbir form tamamlanmış sayılmaz.

Harekete geçirici mesaj düğmeleri oluşturmak söz konusu olduğunda, her şeyden önce iki şey önemlidir: kopyalama ve kontrast.

İlk olarak, gönderme, gönderme, başlatma, ödeme veya etkinleştirme gibi genel CTA'lar "çaba düğmeleri" olarak adlandırdığımız şeydir; ziyaretçilere önlerinde zahmetli bir şey varmış gibi hissettiriyorlar. Her ne pahasına olursa olsun kaçının.

Bunun yerine, ziyaretçileri formun diğer tarafında bekleyen bir ödül (çaba değil) gibi hissettiren alma, alma, eğlenme, görüntüleme veya keşfetme gibi değer tabanlı düğmeleri tercih edin.

Örneğin Jarvis, tıklamadan edemeyeceğiniz net, çekici, eylem odaklı bir CTA sunar:

Daha fazlası ile ilgileniyor musunuz? Değer tabanlı düğmeler için 61 ek fikrimiz var.

İkincisi, artan form dönüşümlerinin düğmenin rengiyle daha az, düğmenin ve arka planın renk kontrastıyla daha çok ilgisi vardır.

Örneğin, müşterimiz Darwin Homes'un bu vaka çalışmasında, CTA düğmesi renginin A/B testi, EBM'yi %45 oranında düşürmeye ve dönüşüm oranlarını %22 artırmaya yardımcı oldu.

Çıkarım: Form düğmesi CTA kopyanıza net bir avantaj ekleyin (ve genel CTA'lardan tamamen kaçının) ve düğmenizin arka planla kontrast oluşturarak dikkat çekmesini sağlayın.

Çok adımlı formlar hakkında konuştuğumuzu ve formun başlamasını kolaylaştırarak ziyaretçileri bir aşamadan diğerine nasıl mikro dönüştürdüklerini hatırlıyor musunuz?

Aynısı form düğmeniz için de geçerlidir.

Açılış sayfanıza bir form yerleştirmek yerine, yerine bir CTA düğmesi yerleştirmeyi, ardından formu bir açılır ışık kutusunda açmayı veya tıklandığında bir dönüşüm sayfasına trafik göndermeyi deneyin.

Bir Aweber araştırmasında, formlarını açılış sayfasına yerleştirmek yerine bir açılır düğmenin arkasına koymanın, dönüşümleri %1,375 oranında artırdığını keşfettiler.

Bir Hubspot araştırmasında, formlarını özel bir katılım sayfasına yönlendiren bir CTA düğmesiyle değiştirmenin dönüşüm oranlarını %0,4 artırdığını (%2,4'ten %2,8'e) keşfettiler. Bu kulağa çok fazla gelmeyebilir, ancak binlerce ziyaret boyunca bu, yüzlerce dönüşüm daha anlamına gelir.

Örneğin, hem Intercom hem de AllHands (aşağıda) açılış sayfası formlarını bir açılır düğmenin arkasına yerleştirir:

Paket servis : Her zaman olduğu gibi, her şeyi test edin. Ancak göz korkutucu bir formu bir düğmenin arkasına gizlemek, ziyaretçilerin ilk adımı atmasını kolaylaştıracaktır. Ve ilk adımı attığımız anda, bir sonraki adımı atma eğilimimiz daha yüksek olur.

Otomatik doldurma formları, ziyaretçileri kendi başlarına doldurmaya zorlamak yerine ad, telefon numarası, kredi kartı bilgileri ve adres gibi alanları otomatik olarak doldurmak (veya otomatik olarak tamamlamak) için ziyaretçilerinizin tarayıcı verilerini kullanan formları ifade eder.

Google'a göre, otomatik doldurma, formlarınızı %30'a kadar daha hızlı doldurmanızı sağlayarak dönüşümleri artırır.

Paket servis: Hiç kimse, özellikle mobil cihazlarda bir web formu doldurmayı sevmez. Sürtünmeyi azaltmak ve dönüşümleri artırmak için otomatik doldurmayı kullanın.

Hiç bir formu doldurduğunuzda alan kodunuzun etrafına parantez koymayı unuttuğunuzu veya kredi kartı numaraları arasına çok fazla boşluk eklediğinizi ve sonra baştan başlamak zorunda kaldığınız oldu mu?

Aynı.

Formlarınızı doldurmayı kolaylaştırmak (ve bilişsel yükü azaltmak ve biçim hatalarını sınırlamak için), potansiyel müşterilerinize tire, parantez, virgül, eğik çizgi veya hiçbirini eklemeleri gerekip gerekmediğini tahmin etmesine izin vermeyin: alanlarınızı otomatik biçimlendirin, böylece hayır ziyaretçilerin bilgileri nasıl yazdığına bakılmaksızın, format kendi kendine düzelir.

Örneğin, bu form alanı, siz daha fazla sayı ekledikçe dolar değerini otomatik olarak biçimlendirir:

Daha da iyisi, "metin maskeleme" adı verilen ve yalnızca değerleri doğru şekilde otomatik biçimlendirmekle kalmayacak, aynı zamanda size daha ne kadar giriş yapmanız gerektiğini söyleyen satır içi yer tutucular da sağlayacak bir özellik kullanabilirsiniz.

Çıkarım: Tarihler, telefon numaraları, kredi kartı numaraları veya belirli biçimlendirme gerektirebilecek diğer sayısal değerler (ör. fiyat, gelir) için otomatik biçimlendirmeyi kullanın. Yalnızca biçimlendirme hatalarını azaltmakla ve dönüşümleri artırmakla kalmaz, aynı zamanda form gönderme verilerinin hepsinin aynı görünmesini sağlar.

Sosyal kanıt, diğer kişilerin ürünleriniz veya hizmetlerinizle başarılı olduğunu gösteren üçüncü taraf incelemeleri, referansları, yıldız derecelendirmeleri veya diğer güvenilir rozetleri ifade eder.

Sosyal kanıt neden önemlidir? Müşterilerin %66'sı sosyal kanıtların varlığının satın alma olasılıklarını artırdığını söylüyor.

Sosyal kanıt neden bu kadar iyi çalışıyor? Çünkü insanlar taahhüt konusunda şüpheleri olduğunda veya seçim konusunda belirsizlik olduğunda, aynı seçimi zaten yapmış olan insanlardan ilham almaya çalışırlar. Ve çoğu zaman, başkalarının seçtiğini seçerler.

Gerçek açılış sayfanızda yalnızca sosyal kanıta ihtiyacınız olduğunu düşünüyorsanız, tekrar düşünün.

İnsanlara doğru kararı verdiklerini hatırlatmak için yıldız derecelendirmeleri, referanslar veya müşteri logoları gibi sosyal kanıtları formlarınızın yanına veya çevresine yerleştirin.

Özellikle tıklama sayfaları için (yani, ödeme sayfası veya hesap oluşturma sayfası gibi bir dönüşüm sayfasına tıklayan açılış sayfaları), formunuzun yanına sosyal kanıtı da yerleştirin.

Örneğin Jarvis, müşteri sayısını ve müşteri logolarını hesap oluşturma formunun yanına yerleştirir:

InvisionApp ayrıca formlarının yanında, bu sefer müşterilerinden birinin (Uber) bir referansı şeklinde sosyal kanıt içerir:

Paket servis: Ziyaretçilere neden devam etmeleri gerektiğini hatırlatmak için formunuzun çevresinde veya yakınında sosyal kanıt ekleyin.

Bir form alanı gerekli değilse, öncelikle kendinize gerçekten ihtiyacınız olup olmadığını sorun. Bunu yapmazsanız, gereksiz alanları tamamen ortadan kaldırın.

Ancak, isteğe bağlı alanı gerekli görüyorsanız ve bunu zorunlu alanlardan yan yana getirmeniz gerekiyorsa, aşağıdaki en iyi uygulamaları izleyin:

• Gerekli alanları kırmızı bir yıldızla etiketleyin: Kırmızı bir yıldız olması gerekiyor mu? Hayır. Ancak kırmızı yıldız işareti, zorunlu alanlar için standarttır ve kullanıcılarınız bunu bekleyecektir.
• Etiketlerin soluna yıldız işareti koyun: Etiketlerin önüne yıldız işareti koyarak, ziyaretçilerin formun sol tarafını yukarıdan aşağıya, gerekli alanlar için taramasını kolaylaştırır.
• "Gerekli" bir etiket düşünün: Yıldız işaretine ek olarak "gerekli" bir etiket eklemek istiyorsanız, metni satır içi yerine alanın dışına (yani form alanının üstüne) yerleştirmek en iyisidir.
• İsteğe bağlı alanları da etiketleyin: İsteğe bağlı alanları etiketlemek, ziyaretçilerin isteğe bağlı çıkarım yapması gerekmeyeceğinden bilişsel yükün azaltılmasına da yardımcı olabilir; bunun yerine, form onlara açıkça söyleyecektir. Gerekli değil, ama güzel bir bonus.
• Zorunlu alanları etiketlemekten kaçının: Bazı durumlarda, gerekli alanları etiketlemenin gereksiz olduğunu düşünebilirsiniz. yapma. Her zaman gerekli alanları etiketleyin.

Paket servis: Gerekli alan etiketlerinin seksi bir tarafı yoktur ve işte bu yüzden onlara şirinlik yapmamalısınız. Jakob Yasasına göre, web sitenizin ziyaretçileri zamanlarının çoğunu diğer web sitelerinde geçirdiğinden, web sitenizin diğer herkesle aynı temel kullanıcı deneyimi ilkelerini izlemesini beklerler. Herhangi bir sapma ve zihinsel modellerine bir İngiliz anahtarı atarsınız.

Bunu söylemeye gerek yok, ancak internet trafiğinin %50'den fazlası artık bir mobil cihazdan gerçekleştiğinden, formunuz daha küçük bir ekran (mobil uyumlu) için optimize edilmemişse, büyük olasılıkla dönüşümlere kanıyorsunuz.

Mobil cihazlar için optimize edilmiş bir form nasıl görünür? Bir otel rezervasyonu yapmak için dört dokunuş ve bir kaydırmaya ne dersiniz?

Mobil cihazlar için formları optimize etme söz konusu olduğunda, bu makalede az önce ana hatlarıyla belirttiğimiz aynı kurallar geçerlidir, yalnızca etkileri daha fazla büyütülür.

Örneğin, insanların masaüstüne kötü yerleştirilmiş alan etiketleri için sabrı yoktur, ancak daha büyük bir ekranda bulmak ve gezinmek kolay olduğu için size bir mola verirler.

Bununla birlikte, bir mobil cihaz söz konusu olduğunda, garip bir başparmak ve küçük bir form zaten hoş olmayan bir deneyim yarattığından, insanların kullanılabilirlik sürtünmesine karşı çok daha az toleransı vardır.

Formlarınızı mobil için tasarlarken, aşağıdakilerle birlikte bu makalede ana hatlarıyla belirttiğimiz en iyi uygulamaları uygulayın:

• Daha büyük metin
• Daha büyük CTA düğmesi
• Alanlar arasında ve düğmelerin çevresinde daha fazla boşluk (dokunmaları kolay)
• Açılır menü yok, bunun yerine radyo düğmelerini tercih edin (mobil cihazlarda açılır menülerin doldurulması en uzun sürer)
• Bir açılır pencere üzerinden gömülü bir form veya ayrı bir form sayfası seçin

Çıkarım: Tek sütunlu düzenler, çoklu adımlar, ilerleme çubukları, otomatik doldurma, alan etiketleri… bunların tümü mobil için de geçerlidir, yalnızca daha küçük bir ekranda.

Koşullu mantık, form deneyiminizi ziyaretçilerinizin yanıtlarına göre dinamik olarak özelleştirmenize olanak tanır.

Herkes forma aynı soru üzerinden başlayacak olsa da, nasıl cevapladıklarına bağlı olarak, çok farklı iki noktada bitebilirler.

Koşullu mantık, formları kısaltarak, soru başına seçenek sayısını azaltarak (yani gereksiz adımları ortadan kaldırarak) ve daha kişiselleştirilmiş bir form deneyimi oluşturarak dönüşümleri artırır.

Paket servis: Temel bir müşteri adayı formu, yeterli kişiselleştirilmiş bilgi gerektirmeyeceğinden koşullu mantıktan yararlanmayacaktır. Ancak daha uzun formlar, başvuru formları veya öncü nitelikli formlar için koşullu mantık, aksi halde bir form kâbusunu hoş bir deneyime dönüştürebilir.

Ziyaretçilerinizin formunuzu doldurmak için ne kadar az çalışması gerekiyorsa, o kadar çok kişinin formu doldurması daha olasıdır. Dönem.

CXL'e göre, radyo düğmelerinin veya açılır menülerin doldurulmasının daha kolay olup olmadığını görmek için bir test yaptıktan sonra, katılımcıların radyo düğmelerini açılır menülerden 2,5 saniye daha hızlı doldurduklarını keşfettiler.

Radyo düğmeleri gibi, onay kutularının da doldurulması daha kolaydır.

Fark ne? Radyo düğmeleri, birden fazla seçeneğin birbirini dışladığı durumlar içindir (yani yalnızca bir seçenek seçebilirsiniz), onay kutuları birden fazla seçenek seçebileceğiniz durumlar içindir.

Çok adımlı formumuzda da açılır menüler kullanırdık, sonra bunları onay kutuları ile değiştirdik. Artık formumuzu doldurmak (özellikle mobilde) daha kolay ve hızlı olmakla kalmıyor, aynı zamanda daha fazla dönüşüm alıyoruz.

Paket servis: Çoğu durumda, açılır menüler yerine radyo düğmelerini veya onay kutularını tercih edin. Ancak, sağduyulu davranın. Örneğin bir eyalet veya ülke seçmek gibi düzinelerce seçeneğiniz varsa, 50'den fazla radyo düğmesi eklemek mantıklı değildir (bu, kimsenin bilişsel yükünü azaltmaz). Bunun yerine, bir açılır menüyü seçin.

Yüksek dönüşüm sağlayan bir açılış sayfası formunun yukarıda belirtilen unsurlarını destekleyen kanıt yığınlarına rağmen, yine de bunları kendiniz için A/B testi yapmalısınız.

Hayatı kolaylaştırmak için analitik oluşturmaya da yardımcı olur.

Bu doğru, çok adımlı formunuzu geçerken kullanıcı davranışını ölçebilen gerçek analitik.

Favori form analizi araçlarımızdan bazıları:

• Fare Akışı
• Zuko
• sıcak kavanoz
• MonsterInsights (WP eklentisi)

Bu makalede özetlediğimiz en iyi uygulamaları kullanarak açılış sayfası form şablonunuzu oluşturun. Ardından, herhangi bir sızıntıyı ortaya çıkarmak için form analizlerinize güvenin. Ardından farklı yamaları test edin. işte.

Ve ne yaparsanız yapın, gerçekten ihtiyacınız olmadıkça (size bakarken, Expedia) bu isteğe bağlı alanları formunuzdan uzak tutun.