Webflow'da A/B testi: En çok düzeni bulmak için test kılavuzu.

Hiç böyle hissettin mi? Hem fiziksel güce adanmıştır hem de web akışı, güzel, modern, bilgi ile dolu bir B2B web sitesi oluşturursunuz. Ama ... neden "kurşun" veya "temas" içeri giriyor, bir şansı kaybeden trafiğin biraz karşısında. Oturmaya ve yürümeye başlıyorsun ... "Yoksa başlığımızın beğenmediğini mi?" "Bu CTA düğmesi çok taze mi?" "Böyle bir düzen, çok karmaşık mı?" Sonunda sona erdi. Karanlıkta yürümekten farklı olmayan "duyguya göre ayarlayın".

Eğer devreye sıkışmışsanız "Gizli ayarlanabilir ve sonra hayal kırıklığına uğratın." Bu makale tünelin sonundaki ışıktır. Bir bağımlılıkta çalışmayı bırakacağız, ardından ziyaretçiyi webflow'daki işiniz için yüksek kaliteli olası satışa dönüştürmek için en iyi "çalışma" olan düzen, başlık veya CTA'nın gerçek cevabını bulmak için "A/B testi" adı verilen bilimsel yöntemleri kullanmaya döneceğiz.

Hayattaki gerçek sorunlar: Webflow web sitesi güzeldir, ancak ipucu yaratmaz.

Bir B2B yazılım şirketinin pazarlama ekibisiniz. Web akışınızla oluşturulan web sitesi CEO ve tasarım ekibinin gözünde çok iyi görünüyor. Her şey düzenli görünüyor. Modern özellikler, ancak sorun, ayda on binlerce baht için Google reklamlarına yatırım yapmasına rağmen, neredeyse hiç hareket etmesine rağmen "bir demo talep" veya "indirme vaka çalışması". Trafik her gün web sitesine çalışır. Ancak bir müşteri gibi, sadece "geç" ve "uzaklaş" kimse formu dolduramaz, bilgileri bırakmaz, iletişime geçmez. Kafada dolaşan soru "Ne yanlış yapıyoruz?" Bu sorun sadece güzellikle ilgili değil. Ancak bu gerçek bir veriye dayalı karardır. Müşterilerin cevap bulmak için "test" yerine ne istediğini "tahmin ediyoruz".

İllüstrasyonlar istemi: pazarlamacı resimleri veya işletme sahipleri, güzel bir webflow web sitesi açan bilgisayar ekranının önünde oturuyor, ancak ekranda yüksek trafik grafiği var, ancak dönüşüm/kurşun grafiği var. Düz bir çizgide sorunsuz bir şekilde geri dönme çatışmaları ve stresi aktarır

Bu sorun neden meydana geldi: "Duygulara Göre Tasarım" tuzağı

Webflow'daki birçok güzel web sitesinin olması gerektiği gibi olası satış yapamamasının ana nedeni. Platformun yeteneğinden değil, kendi "düşüncemizden" bu önemli tuzaklara bağlı kalıyoruz:

• En iyi bildiğimizi düşünüyoruz: Hedef grubun bizden tamamen farklı bir perspektif ve anlayışa sahip olabileceğini unutarak "kişisel tercih" veya "deneyimimiz" ile tasarlandık.
• Teknik karmaşıklık korkusu: "A/B testi" kelimesi bazı insanlar için korkutucu gelebilir. Bir programcı veya istatistiksel gibi hissetmemi sağlıyor, sadece gerçekte, web akışındaki testin beklenenden daha kolay yardımcı olan araçlar var.
• "Güzellik" e odaklanarak "netlikten" daha fazla odaklanmak: Çoğu zaman, yeni olan fark edilir veya düzen olan animasyona odaklanıyoruz, asıl amacın kullanıcıların "anlamasını" ve en çok .
• Sistematik bir süreç yoktur: Web revizyonu bir vinyettir. Bugün, yarın düğmeyi düzeltin, net bir varsayım ve ölçüm olmadan fotoğrafları düzenleyin ve hangi gerçekten iyi veya kötü olan değişikliklerin hangi değişiklikleri bilmemize neden oldu

İllüstrasyonlar istemi: Sol yarımküre (mantık, veri, A/B testi) ve sağ beyin (yaratıcılık, tasarım) arasındaki karşılaştırma, bir okla yanlış kararların genellikle yandan geldiğini gösterir. Destekleyecek bilgi olmadan

Eğer kalırsa, nasıl etkilenecek?: Sadece fırsatları kaybetmekten daha fazlası.

Webflow web sitenizin bilgi ile test edilmeden ve gelişmeden çalışmasına izin vermek. Teknenin denizde sızmasına izin vermek gibi, sadece hedefinize gitmenizi sağlamakla kalmaz. Ancak beklenmedik felakete yol açabilir:

• Reklam bütçeleri için yanma: ödediğiniz her tıklama, ancak bir ipucu değil "yakma parası". Sızıntının nerede olduğunu daha fazla bilmiyorsanız. Daha da etkili olacaksınız.
• Rakipler için iş fırsatlarını kaybedin: Rakipleriniz "Test" olabilir ve müşterilerle daha iyi tanışmak için web sitelerini geliştirebilir. Senin olması gereken liderliği almalarına izin vermek
• Yanlış İş Kararları: Müşterileri en iyi şekilde çekeceğiniz hakkında gerçek bir bilgi olmadığında, hem paraya hem de zamana yol açan bir sonraki pazarlama kampanyasını "Yanlış Hipotez" e göre oluşturabilirsiniz.
• Markanın güvenilirliğini azaltın: Kullanımı zor veya belirsiz iletişim olan web sitesi. Müşterilerin markanızın profesyonel ve güvenilmez olmadığını hissettirebilir. Uzun vadede görüntüyü olumsuz etkiler

İllüstrasyonlar istemi: Yüksek tıklamalı bir ekran kampanyası olarak bir arka planla yırtılmış veya yanan gümüş görüntüler, ancak bütçelerin kaybını iletmek için bir dönüşüm yok

Herhangi bir çözüm var mı? Ve nereden başlamalı: İlkelerle "denemeye" başlayın

En doğrudan çözüm "A/B testini" durdurmak ve başlatmaktır. A/B testi, kullanıcıların gerçek bilgilerini kullanarak, hangi sürümün daha iyi (burada lider) olduğunu görmek için web sayfasının 2 sürümündeki karşılaştırma işlemidir (A sürümü, yeni güncellenen geleneksel ve yeni güncellenen sürüm B'dir). , açılış sayfası verimliliğinizi artırmak için doğru başlangıç noktasıdır

Ne test etmeye başlamalısınız?
Kullanıcının kararını en çok etkileyen kompozisyondan başlar. "Düşük asılı meyve" olarak da bilinir:

• Başlık ve alt-başlık: Bu, kullanıcıların ilk gördüğü şeydir. Daha net iletişim kuran mesajı test etmeye çalışın. önde gelen B2B'lerin bir örneğini izlemek yerine ilgiyi teşvik etmek iyi fikirler verecektir.
• Çağrı (CTA): Düğmede "Metin" i test edin ("" VS "Teklifi Talep, Paket Fiyatı", Düğmenin "Rengi" ve hatta "Pozisyon" gibi.
• Resimler veya Videolar (Kahraman Bölümü): Çok fazla duygu ve anlayışa sahip olan görüntüler. Müşterilerin alacağı sonuçları ileten resimleri değiştirmeyi deneyin. Güzel bir ürün veya ofis yerine
• Düzen Formu: Orijinal formla daha kısa form sırasında test (daha az bilgi istemek) veya formun tasarımını daha fazla doldurmak için değiştirme
• Sosyal Kanıt: Güvenilirlik oluşturmaya yardımcı olup olmadığını ve olası satış yapıp eklemediğini görmek için referansların konumlandırılmasını veya bir müşteri logosu eklemeyi deneyin.

Hangi araçları kullanmanız gerekiyor?
WebFlow'un yerleşik A/B testi özelliğine sahip olmamasına rağmen, optimize edici veya Webflow web sitenize kısa bir kod aracılığıyla kolayca bağlanabilen VWO'dan Sadece birkaç satır

İllüstrasyonlar istemi: Basit Infographic A/B Test İşlemi: Web Sayfası A (Orijinal) ve Web Sayfası B (Varyasyon) Kullanıcı Grubuna gönderildi. Bundan sonra, veriler bir ipucu yaratan daha fazla "kazanan" bulmak için analiz etmek için gönderilecektir.

Eskiden elde edilen gerçek şeyden örnekler: Normal B2B web sitesini bir kurşun üretim makinesine dönüştürün.

Şirket "Innovate Solutions" (kurgusal isim) proje yönetimi için SaaS yazılım hizmetleri sunmaktadır. Modern bir webflow web sitesi var, ancak "Bir Demo İstek" sayfasında yalnızca% 1,5 dönüşüm oranı var, bu yüzden A/B testi yapmaya karar verdiler.

Orijinal Sorun (sürüm A):

• Başlık: "Proje Yönetim Yazılımımız" (Proje Yönetim Yazılımımız)
• CTA düğmesi: "Gönder" (bilgi gönder)
• Form: 7 kanal var (isim, soyadı, e -posta, şirket, telefon numarası, personel sayısı)

Test edilen (B versiyonu):

• Başlık: "Bitir projelerini% 30 daha hızlı. Nasıl görün." (Projeyi kapatın,% 30 daha hızlı, burada nasıl görünün) → Sonuçlara odaklanın. (Fayda odaklı)
• CTA Button: "Ücretsiz Demo Al" (Ücretsiz Demo Al) → Özel ve netleştirin.
• Form: 4 kanala indirgenmiş (isim, e -posta, şirket, telefon numarası) → Sürtünmeyi azaltın

Bulgular : Testi 4 hafta

İllüstrasyonlar istemi: Şirketin isteğinin görüntülerini, başlık, CTA ve formdaki değişiklikleri göstererek "Innovat Solutions" un bir demo sayfasını karşılaştırın ve yükselen net bir dönüşüm oranıyla karşılaştırın.

Takip etmek istiyorsanız, ne yapmalı? (Hemen kullanılabilir): Webflow'daki A/B testine katılmak için 5 adım

Webflow web sitenizi kurşun makine olarak değiştirmeye hazır mısınız? Bu 5 basit adımı takip edebilir:

1. Hedefleri ve varsayımları belirleyin (Hedef ve Hipotezi Tanımla): Ne istiyorsunuz? "Tıklamayı Tıklamayı Ekle Demo%20" Hedef. Daha sonra, "CTA düğmesindeki metni 'gönder' 'den' ücretsiz demoya 'olarak değiştirmenin tıklamayı artıracağına inanıyoruz.
2. Bir web sayfası oluşturun B (Varyasyon Oluştur): En kolay yol "kopya" dır. Webflow tasarımcısında test etmek istiyorsunuz.
3. A/B testi (bir araç ayarlayın) aracını yükleyin: Optimizly veya VWO gibi araçları uygulayın, ardından aracın sağladığı snippet kodunu kopyalayın. Ardından Webflow'un Özel Kodunu koyun (Site Ayarları> Özel Kod> Kafa Kodu)
4. Testinizi yapılandırın: A/B test aracının gösterge tablosunda, web akışında oluşturduğunuz B sürümünün (Varyasyon) url'sini ve URL'sini belirleyerek yeni bir kampanya ayarladınız.
5. Testi ve analiz çalıştırın (Run ve Analiz): Kampanyayı çalıştırmaya başlayın! Araçlar, web sayfanızı otomatik olarak A ve B sürümüne giren trafiğe ayrılacaktır. İstatistiksel önem kazanana kadar test edilmelidir. Araç size söyleyecektir. Kazanan (kazanan) bir kez, web sitenizdeki sürümü kullanmanın zamanı geldi! A/B testi hakkında tam bir kılavuz istiyorsanız burada daha fazla bilgi edinebilirsiniz.

İllüstrasyonlar istemi: 5 -infox, oluşturun, ayarlayın, konfektif, çalıştırın) her adımda kolayca anlaşılacağı simgelerle. Bir kontrol listesi gibi görünmeyi kolaylaştırır

İnsanların merak ettiği sorular ve temizlenen cevaplar

Soru: Web sitesinin A/B testi yapmak için ne kadar trafiği var? Cevap: Sabit sayı yoktur, ancak daha fazla trafik sonuçları daha hızlı ve daha güvenilir görür. Genel olarak, web sitenizin ayda en az 1.000-2.000 ziyaretçisi varsa, başlayabilir, ancak trafik doğru bilgileri almak için daha uzun bir test alabilirse : Web akışında/getirme becerileri yoksa? Cevap: Kesinlikle! Tek zorluk, snippet kodunu, webflow'un özel kodunu koymak için A/B test aracından kopyalamaktır. Varyasyon sayfasının oluşturulması ve görsel düzenleyicide kullanımı kolay olacak şekilde tasarlanmış çeşitli araçlardaki kampanya ayarları. Karmaşık ayarlarda yardımcı olmak istiyorsanız , gelişmiş webflow geliştirme iyi bir seçimdir. Soru: Ne kadar süre test etmelisiniz? Cevap: Süre trafik içeriğinize bağlıdır, ancak iyi kural en az 1-2 haftayı test etmektir. Haftanın her günü kullanıcı davranışının dalgalanmalarının etkisini azaltmak için (Pazartesi davranışı Cumartesi günü aynı olmayabilir) ve en önemlisi, sonucun "istatistiksel önemi" (istatistiksel anlamlılık)%95'ten fazla olana kadar beklemelidir. Soru: A/B testi. Çok değişkenli testlerden nasıl farklı? Cevap: A/B testi, web sayfasının (veya daha fazla) 2 sürümünün, hangi sürümün çok değişkenli testten daha iyi olduğunu öğrenmek için "bir" veya "birden fazla paket" i karşılaştırmasıdır. Hangi "kombinasyon" setlerini görmek için "çoklu" öğelerdir .

İllüstrasyonlar istemi: Büyük soru işareti simgesi (?) Ve net ve kolay bir mesaj kutusu. Çözümü iletmek için

Anlaması kolay olmak için özet + yapmaya çalışmak istiyorum

Güzel bir webflow web sitesi oluşturmak iyi bir başlangıç noktasıdır. Ancak bu web sitesini "güçlü kurşun" aracı haline getirmek, duygudan daha fazla yaşamalıdır. Sistematik olarak "bilgi" ve "test" gerekir. A/B testi, sizi başarılı dijital pazarlamanın kalbi olan "bilgi ile karar" dünyasına "tahmin" dünyasına götürecek bir köprüdür

Belirsizliğin artık iş büyümeniz için bir engel olmasına izin vermeyin. Küçük bir şeyle başlayalım. Açılış sayfanızdaki en önemli öğeyi seçin. Doğru bilgilerden gelen küçük bir değişiklik, hayal edebileceğiniz çok büyük iş sonuçları yaratabilir.

Ziyaretçileri kaliteli lider olarak değiştirme zamanı! Webflow web sitenizi değiştirme konusunda uzman bir ortağın tam ve dönüşüm makinesi olmasını istiyorsanız. Ekibimiz, tam oranı optimizasyonu (CRO)

İllüstrasyonlar istemi: Küçük bir roketle gökyüzüne koşan grafikler, etiket sürücü olarak "A/B testi" dir. Test ve iyileştirmeden gelen sıçrayan bir büyüme aktarır

‍