Ödeme düğmelerinde farklı stilleri test etme

Bugün size birkaç aydır yürüttüğümüz başka bir A/B testi getiriyorum. Her zaman olduğu gibi, bu aylık yazı dizisinde, yaptığımız iyileştirme hipotezini, web sitemizde bir sayfanın varyasyonlarını oluşturarak uygulamasını ve elde ettiğimiz sonuçları ayrıntılı olarak göreceğiz.

Bir süre önce Nelio İçeriğinin ana sayfasındaki işlem düğmelerinin rengini inceliyorduk. CSS stillerinin A/B testi sayesinde, o sayfanın İngilizce konuşan ziyaretçileri için yeşil rengin en iyi nasıl çalıştığını görebildik.

Bunun herhangi bir sayfa için geçerli olacağını varsayamayız. Bu nedenle bugün, Nelio A/B Testi satın alma sayfasında görünen fiyatlandırma tablosundan ödeme düğmelerinin rengini ve boyutunu test edeceğiz.

A/B testinin tanımı

İyileştirme için hipotezimiz, Nelio A/B Testi fiyatlandırma tablosundaki ödeme düğmelerinin rengini ve boyutunu değiştirmenin bu düğmelere daha fazla tıklama alacağı ve bunun sonucunda daha fazla satışımız olacağıdır.

Nelio A/B Testi fiyatlandırma tablosunun orijinal sürümü, sattığımız üç planı, her birinin fiyatı, ayrıntıları ve hizmete abone olmak için bir düğme ile gösterir. Aşağıdaki ekran görüntüsünde görebilirsiniz:

Düğmeler, diğer ikisine kıyasla bu plana daha fazla vurgu yapmak için koyu mavi bir düğmeye sahip olan profesyonel plan dışında çok az göze çarpan gri renktedir.

Kontrol edeceğimiz ilk şey, bu düğmelerin rengini daha çarpıcı hale getirmek için değiştirmenin daha iyi olup olmadığıdır. Bunun için önerdiğimiz alternatif sürüm, aşağıda görebileceğiniz gibi, yeni renklerle CSS stillerinde bir değişiklik içeriyor:

Profesyonel planı ön planda tuttuk, ancak şimdi diğer planlar lacivert ve bu ara planın daha belirgin bir turuncu rengi var. Renk psikolojisi üzerine yapılan araştırmalara göre turuncu aksiyon butonları için iyi bir seçim, biz de bir önceki görselde görmüş olduğunuz bu portakalı profesyonel plan için tercih etmeye karar verdik.

Hipotezimiz, düğmelerin boyutunun performanslarını da etkilemesi gerektiğini belirttiğinden, önceki varyasyonda önerilen renklerde yapılan değişiklikleri, düğmelerin boyutlarının artırıldığı yeni bir tane oluşturmak için koruduk. Bu değişikliği aşağıdaki ekran görüntüsünde görebilirsiniz:

Bu nedenle, Nelio A/B Testi fiyatlandırma tablosunun CSS stillerinin üç farklı versiyonuna sahibiz:

• Stillerde değişiklik olmadan orijinal.
• Düğmelerde daha belirgin renklere sahip ilk varyant.
• Belirgin renklere ve daha büyük düğme boyutuna sahip ikinci bir varyant.

Tüm bu çalışmalar yapıldıktan sonra, bunu CSS stillerinin A/B testine çevirebiliriz. Bunun için Nelio A/B Testi, WordPress'teki stil değişikliklerini kolayca test edebileceğiniz farklı CSS stillerinden oluşan bir A/B testi oluşturmanıza olanak tanır.

Yeni CSS A/B testini ve içindeki üç alternatifi oluşturuyoruz. Aslında, varyasyonlardan daha önce gördüğünüz ekran görüntüleri, alternatifleri oluşturmak için Nelio A/B Testinin içerdiği CSS stil düzenleyicisinin ekran görüntüleridir.

Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, testin kapsamını Nelio A/B Testi fiyatlandırma sayfasıyla sınırlandırdık ve ayrıca testte ölçülecek beş hedef tanımladık:

• Herhangi bir planın düğmelerine tıklar.
• Temel planın düğmelerine tıklar.
• Profesyonel planın düğmelerine tıklar.
• Kurumsal planın düğmelerine tıklar.
• Satın alma miktarı.

Tüm bunlar oluşturulduğunda, sizi 10 dakikadan fazla sürmeyecek bir şeyle teste başlıyoruz ve sonuçların gelmesini bekliyoruz. Şimdi işi yapma sırası Nelio A/B Testing'de. Eklentimiz, gelen trafiği farklı varyasyonlar arasında bölmekten ve A/B testinde tanımlanan her bir hedefteki dönüşümleri saymaktan sorumludur.

A/B testinin sonuçlarının analizi

Bu A/B testi web sitemizde üç ay boyunca çalıştırılır. Sonuçlar aşağıda görülebilir. Bu testten çıkardığımız sonuçları anlamak için her hedefi ayrıntılı olarak analiz edeceğiz.

İlk hedef, fiyatlandırma tablosundaki planların herhangi bir butonuna yapılan tıklamaları ölçmekti. Bu durumda sonuçlar, değişen renklere sahip varyantın %17,2 daha fazla tıklama elde ettiğini gösteriyor. Öte yandan, renk ve boyut değişen varyant, sayfanın orijinal versiyonundan %15 daha kötü.

Bununla birlikte, bu sayıların hiçbiri, bu hedef için kazanan bir versiyonu açıkça belirlemek için yeterli bir istatistiksel güven düzeyine ulaşmadı.

İkinci hedef, yalnızca temel planın düğmelerine yapılan tıklamaları sayıyordu. Bu durumda, sonuçlar önceki hedefe benzer. Üçünün en iyisi olarak değiştirilmiş renkleri olan versiyonumuz ve en kötüsü olarak renk ve boyutları olan versiyonumuz var.

Benzer şekilde, istatistikler yeni renklere sahip sürümü yeterince güvenle net bir kazanan olarak tanımlayamıyor.

Profesyonel planda tıklamaları ölçtüğümüz üçüncü hedefin durumu ise biraz daha farklı. Daha önce olduğu gibi, renkleri olan versiyon daha iyi ve renkleri ve boyutları birleştiren versiyon daha kötü. Ancak, şimdi istatistikler bize açıkça kazanan versiyonun yeterli güvene sahip olduğunu söylüyor.

Daha belirgin renkler kullanarak daha fazla tıklama aldığımızı söyleyebiliriz. Turuncu düğme, daha önce sahip olduğumuz mavi düğmeden daha iyi çalışıyor.

Kurumsal plandaki tıklamalar durumunda, burada ilk iki hedefle aynı duruma dönüyoruz. Ancak burada orijinal varyant ile değişen renklere sahip varyant arasındaki farklar ihmal edilebilir. Çok daha kötü görünen sürüm, renk ve boyutta değişiklikler içeren sürümdür.

Tüm bu tıklama işleri iyi. Ancak sadece önceki sonuçlara bakarsak, kısmi bir gerçeklik vizyonuna sahip olacağız.

Bu nedenle, her bir varyant tarafından gerçekleştirilen satın alma sayısını ölçtüğümüz son hedefi ekledim. Daha fazla tıklama alan bir varyant elde edebilirsiniz, ancak aynı zamanda daha fazla satış alamıyorsa, yanlış bir kazanan seçeceksiniz.

Aşağıdaki sonuçlarda bunun tam olarak böyle olduğunu görüyoruz. Yeni renklere sahip sürüm %24,5 daha az satış elde ederken, renk ve bedenleri birleştiren sürüm sayfamızın mevcut sürümüne (değişiklik olmayan) göre %16,6 daha az satıyor.

Bu sonuçlarla, görmemiz gereken şey, dönüşüm hunisinin karmaşık olduğu ve sık sık onu aşamalara ayırmamıza ve mikro dönüşümleri saymamıza rağmen, tüm resmi gözden kaçırmamamız gerektiğidir.

Çok amaçlı A/B testleri oluşturmanın avantajı, web sitemizin ne kadar iyi (veya kötü) performans gösterdiğinin tam resmini elde etmek için istediğimiz tüm bakış açılarına sahip olabilmemizdir. Ancak bunu yaparak, A/B test sonuçlarının verilerine bakarak tam bir gönül rahatlığıyla bir kazanan seçme güvenine sahip olabileceğiz.

Unsplash'ta Grooveland Designs tarafından öne çıkan görsel.