Web Siteniz İçin En İyi Harekete Geçirici Düğme Renkleri Hakkındaki Gerçek

İnternette bir web sayfasında en iyi sonucu veren renkler hakkında çok şey söylendi. Bununla ilgili binlerce makale bulacaksınız. Bir kullanıcının hangi rengin daha iyi olduğunu sorduğu ve çelişkili cevaplar aldığı (ne sürpriz, ha?), Google'ın bağlantıları için birçok mavi tonuyla yaptığı testleri açıklayan iyi bilinen makaleye kadar.

Tüm bunların arkasındaki gerçek şu ki, hiç kimse belirli bir rengin bir web sitesinde denemeden daha iyi veya daha kötü çalışacağını garanti edemez. Size aksini söylerlerse, size yalan söylüyorlar. Ve eminim ki sana yalan söylenmekten hoşlanmıyorsundur.

Ben de öyle, bu yüzden Yahoo'dan bu makaleyi okurken! Düğmelerde kullanılacak en iyi renklerin kırmızı, yeşil ve turuncu veya sarı olduğunu söyledikleri Küçük İşletme, ilk düşündüğüm şey kendi web sitemizde denemem gerektiği oldu.

A/B testi hakkında aylık olarak yazdığım makale dizisini takip ediyorsanız, web sitemizdeki en önemli sayfalardan birinin, fiyatlandırma sayfasıyla birlikte Nelio Content'in açılış sayfası olduğunu zaten biliyorsunuzdur. Her iki sayfada da sahip olduğumuz harekete geçirici mesaj butonları turuncu renktedir.

Harekete geçirici mesaj düğmeleri için web sitemizde halihazırda kullandığımız turuncu renge kıyasla kırmızı mı yoksa yeşil mi daha iyi çalışır? Kendime sorduğum ve burada ziyaretçilerimizden gelen gerçek verilerle cevaplayacağım soru bu. Sübjektif görüş değil. Gerçek veriler.

Hadi gidelim!

CSS A/B Testi Oluşturma

Bir sayfadaki düğmelerin rengini değiştirmenin en kolay yolu, yeni rengi uygulamak için birkaç ek CSS kuralı eklemektir. Düğmeye istediğiniz renkle yeni bir background-color kuralı koyarsınız ve bu kadar. Tereyağından kıl çeker gibi.

Nelio A/B Testi ile, ek CSS kurallarının farklı türevlerini test etmek için CSS stillerinin A/B testi oluşturma olanağına sahipsiniz. Yeni bir test oluşturmanız ve test türü seçicide CSS seçeneğini seçmeniz yeterlidir:

Bu sizi, yapmanız gereken ilk şeyin varyantları oluşturmak olduğu test düzenleyicisine götürecektir. Bu tür bir testte, ilk varyantın, fazladan CSS olmadan sayfayı mevcut görünümüyle gösteren varyant olduğunu unutmayın.

Ardından, bizim durumumuzda test edeceğimiz ek renklerin her biri için bir varyant yaratırsınız: biri yeşil, diğeri kırmızı için. İlk varyant zaten turuncu, yani bununla her şeye hazırız.

Her ek varyant için, düğmelerin rengini değiştiren ek CSS kurallarını eklemek için onu düzenleyebilirsiniz. İhtiyaç duyacağınız CSS kuralları, WordPress'inizde kullandığınız temaya bağlı olacaktır. Nelio A/B Testing'in sağladığı CSS düzenleyicide, yeni CSS kurallarınızın sitenizin görünümünü ve izlenimini nasıl değiştirdiğini gerçek zamanlı olarak görebilirsiniz. Bu, doğru yapıp yapmadığınızı kontrol etmenize yardımcı olacaktır.

Ayarladığımız A/B testinin her bir varyantının CSS stil düzenleyicisinden eylem düğmelerinin nasıl göründüğü aşağıda açıklanmıştır. Daha önce de belirtildiği gibi, ilk önce turuncu düğmeli orijinal versiyona sahipsiniz. Diğer iki değişken, düğmeleri sırasıyla yeşil ve kırmızıya çevirmek için CSS'yi içerir:

Varyantları hazır hale getirdikten sonra, ölçmek istediğimiz dönüşüm hedeflerini tanımlamanın zamanı geldi. Bu durumda test editörünün ekran görüntüsünde de görebileceğiniz gibi iki hedefimiz var.

İlk hedef, işlem düğmelerine yapılan tıklamaları ölçerken, ikincisinde bu tıklamaları da ölçeriz, ancak yalnızca Nelio İçeriği fiyatlandırma sayfasında gerçekleşenleri ölçeriz.

Son olarak, CSS'nin A/B testlerinin web sitenizin tüm sayfalarını etkileyeceğini unutmayın. Nelio A/B Testinde bu davranışı sınırlamak için A/B test düzenleyicisinin sağ kenar çubuğunda testin kapsamını sınırlama seçeneğiniz vardır. Bunu, yalnızca Nelio İçeriğinin ana sayfasını ve fiyatlandırma sayfasını etkileyecek şekilde yaptım.

Testi başlatmak için her şeyimiz hazır. Bunu yaptıktan sonra, Nelio A/B Testi, bu iki sayfayı ziyaret eden trafiği sizin için bölmekten ve farklı renk çeşitlerini göstermekten ve ayrıca dönüşümleri (düğmelere yapılan tıklamalar) izlemekten sorumludur.

Sonuçları görmeye başlamak için yalnızca ziyaretçilerinizin bu sayfaları incelemesini beklemeniz gerektiğini unutmayın.

Sonuçları Analiz Etme

Web sitemizde çalışan düğme renklerinin A/B testini İspanyolca web sitesinde bir buçuk ay ve İngilizce web sitesinde neredeyse bir ay geçirdik. İngilizce sürümde daha önce durdurduk çünkü istatistiksel olarak anlamlı sonuçlara daha hızlı ve yüksek bir güven değeri ile ulaştık.

Ancak web sitemizdeki testin sonuçlarıyla İspanyolca olarak başlayalım:

Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, her iki sayfadaki tıklamaları ölçmek amacıyla, düğmelerin yeşil ve kırmızı çeşitlerinin orijinal turuncu sürümden biraz daha iyi performans gösterdiği görülüyor. Ancak istatistikler bize gelişmenin önemli olmadığını söylüyor ve bu nedenle bu renklerin turuncudan daha iyi olduğunu söyleyemeyiz.

Yalnızca Nelio İçerik fiyatlandırma sayfasındaki tıklamaları ölçen ikinci hedef için de net bir kazanan renk olmadığını görüyoruz. Hatta burada yeşilin turuncudan daha kötü performans gösterdiğini bile gözlemleyebiliriz. Nelio A/B Testing'in ziyaretçilerimizden topladığı verilerden güçlü sonuçlar çıkaramasak da:

Şimdi sayfanın İngilizce versiyonunda testin sonuçlarını görmeye gidelim. Burada, Nelio İçeriğinin iki sayfasından herhangi birine yapılan tıklamaları ölçen ilk hedefte, hem yeşil hem de kırmızının daha iyi bir tıklama oranı sağlayan renkler olduğunu görüyoruz.

Ek olarak, burada yeşil rengin testin kazanan rengi olduğunu doğrulayabiliriz. Sonuçlar, %99'un üzerinde bir güven derecesi ile istatistiksel olarak anlamlıdır. Yeşil, web sitemizde Nelio İçerik sayfalarındaki düğmeler için İngilizce olarak kullanabileceğimiz en iyi renktir.

Yalnızca Nelio İçerik fiyatlandırma sayfasındaki tıklamalara bakarsak (testin ikinci hedefi), sonuçların testin ilk hedefiyle tutarlı olduğunu görürüz:

Bunu gördükten sonra, Nelio İçerik sayfalarındaki İngilizce hedef kitlemiz için en çok işe yarayan rengin yeşil olduğunu söyleyebiliriz. Ancak İspanyol izleyicilerimiz için halihazırda sahip olduğumuzdan daha iyi çalışan bir renk bulamadık.

Sonuçlar

Burada, web sitemizin en alakalı sayfalarından ikisinde gezinen ziyaretçilerin gerçek verileriyle bir A/B testinin sonuçlarını gösterdim. Ve belirli bir hedef kitle için en iyi sonucu veren şeyin farklı bir kitle için en iyi sonucu vermesi gerekmediğini de kontrol edebildiniz.

Yeşil düğmeler, İngilizce konuşan ziyaretçilerimiz için en iyi sonucu verir. Ancak bu, diğer ziyaretçiler için aynı olduğu anlamına gelmez. Bu nedenle, bu sayfaların İngilizce versiyonunda sadece Nelio İçerik sayfalarının işlem düğmelerinin rengini yeşil olarak değiştirdik. İspanyolca olanlar turuncu kalır.

Sayfanızda yeşil rengi kullanmanız gerektiğini söylesem aptallık etmiş olurum. Bunu sana kimse söylememeli. Ben değil, kimse değil. Yeşilin işinize yarayıp yaramayacağı hakkında hiçbir fikrim yok.

Bu nedenle internette bulacağınız birçok guruya dikkat etmeden önce testi kendiniz yapın. A/B testi oluşturmak çok kolaydır. Ve web sitenizde neyin daha iyi çalıştığını (veya çalışmadığını) keşfetmenin tek yolu budur. Gerçek izleyicilerinizle.

Unsplash'ta Robert Katzki'nin öne çıkan görseli.