Neyi değiştireceğinizi bilmiyorsanız, web sitenizin renklerini değiştirmeyi deneyin.

Web sitenizin performansını artırmaya gelince en büyük sorunlardan biri, hangi değişiklikleri yapacağınızı bilmemektir. Bu, zaman içinde hepimizin başına gelmiştir. Bu gibi durumlarda yapılacak doğru şey, web'in en kritik bölümlerine odaklanmaktır. Bununla sayfanızın en çok dikkat çeken veya iş modeliniz için en önemli olan bölümlerini kastediyorum.

Örneğin, amacınız web sitenizi ziyaret edenlerin bir form doldurmasıysa, formun kendisine odaklanın: formu daha belirgin hale getirin ve doldurması ve göndermesi kolay olacak şekilde mümkün olduğunca basitleştirin. Daha önce de söylediğim gibi, ilk önce değiştirildiğinde ziyaretçileriniz üzerinde daha büyük bir etkisi olabilecek unsurlara bakın, çünkü bu daha hızlı ilginç sonuçlar elde edersiniz.

Hala neyi değiştireceğinizi bilmiyorsanız, asla hayal kırıklığına uğratmayan ve denemesi çok kolay olan bir şey, değişiklikleri web sayfanızın renklerine uygulamaktır. Görme engellileri bir kenara bırakmak gibi bir niyetimiz olmadan, web sitenizin renklerinin çok önemli olduğu açıktır. Hayal edebileceğinizden çok daha fazlası.

Renk teorisi ve biz insanların onu nasıl algıladığı üzerine birkaç çalışma var. Görme sistemimiz (gözler, optik sinir ve beyin) tarafından yakalanan farklı dalga boylarının bir yorumu gibi görünen şey, büyük bir psikolojik arka planı gizler.

Bu nedenle, web sayfanızın (veya içindeki bazı yüksek etkili öğelerin) renklerini değiştirmeyi denemenizi ve bu değişiklikler karşısında ziyaretçilerinizin etkileşiminin nasıl geliştiğini incelemenizi öneririm. Bugün size bu web sitesinde test ettiğimiz eksiksiz ve gerçek bir örnekle açıklayacağım şey bu.

A/B testinin tanımı

Web sitenizdeki değişiklikleri test etmek için bir A/B testi kullanmalısınız. Bunu yaparak, gerçek verilerle ve bilimsel yöntemi takip ederek, uygulanan değişikliklerin mevcut sürümünüzden daha iyi (ya da değil) çalışacağını garanti edebilirsiniz.

Bugünkü örnekte, Nelio A/B Testing'in fiyatlandırma sayfasının ilk katının renklerindeki bir değişikliği test edeceğiz. Bu ilk sayfa, ziyaretçilerimizin eklentiyi satın alırken müşteri haline geldiği fiyat tablosunu görüntülemekten sorumlu olduğu için işimiz üzerinde büyük bir etkiye sahiptir.

Aşağıdaki karşılaştırmada, ilk katın orijinal versiyonunu (solda) ve alternatif versiyonu (sağda) farklı renk düğmeleri ve kenar boşlukları ve yeni bir arka plan görüntüsü ile görebilirsiniz:

Değişiklikleri test etmek için referans A/B testi eklentimiz olarak Nelio A/B Testini kullandık. Yapacağımız ilk şey, test edeceğimiz öğe olan yeni bir A/B sayfa testi oluşturmak.

Bunu yapıyoruz çünkü renkleri WordPress sayfa düzenleyicisinin kendisi aracılığıyla değiştirebiliyoruz. Renkler bir tema şablonundan veya daha az ortodoks başka bir yoldan geldiği için bunu yapamazsak – deneyim bize renk stillerinin WordPress'te çeşitli şekillerde tanımlanabileceğini söylüyor–, her zaman işe yarayacak başka bir seçenek de şu olurdu: varyantta yeni CSS stil kuralları ekleyerek yeni renkleri uygulayabileceğimiz bir CSS stilleri A/B testi kullanın.

A/B testinin düzenleme ekranında, test etmek istediğimiz temel sayfayı (fiyatlandırma sayfamız) seçiyoruz ve daha sonra düzenleyeceğimiz yeni bir varyant oluşturuyoruz:

Vurgulanması gereken bir diğer önemli husus da, daha sonra iki sürümden hangisinin daha iyi çalıştığını bulmak için A/B test aracının hangi metrikleri izlemesini istediğimizi tanımlamaktır. Bunu, yukarıdaki ekran görüntüsünde de görebileceğiniz gibi, dönüşüm hedefleri ve eylemleri bölümünde tanımlıyoruz.

Bizim durumumuzda, aynı A/B testi için bize beş farklı sonuç verecek beş hedef tanımladık. Öncelikle fiyat tablosunda yer alan planlardan herhangi birinin satın alma butonlarına tıklama miktarını ölçen hedefi tanımlıyoruz. Ardından, her plan için ayrı ayrı tıklamaları ölçen 3 ek hedefimiz var. Son olarak, test edilen sayfanın her bir sürümünü gördükten sonra yapılan gerçek satın alma sayısını ölçen bir hedefimiz var.

Son olarak sayfanın alternatif versiyonunu düzenliyoruz. Bu bizi, aşağıdaki ekran görüntüsünde görebileceğiniz gibi, kullandığımız WordPress sayfa düzenleyicisine (bizim durumumuzda blok düzenleyici) götürür:

Burada yalnızca üç sütunun her birinin ve üst kenar boşluğunu oluşturmak için kullandığımız öğenin eylem düğmelerinin renklerini değiştirmemiz gerekiyor. Ayrıca WordPress medya kitaplığımıza yüklediğimiz bir diğerinin arka plan resmini değiştirdik.

Test etmek istediğimiz değişiklikleri içeren alternatif sayfa hazır olduğunda, A/B testi düzenleme ekranına geri dönme ve başlatma zamanı. Bu, fiyatlandırma sayfamıza gelen trafiği otomatik olarak ikiye bölecektir. Ziyaretçilerimizin yarısı orijinal sürümle etkileşime girecek, diğer yarısı ise varyantı görecek.

Bu şekilde, beş dönüşüm hedefine karşı sayfanın hangi sürümünün daha iyi çalıştığını kontrol edebiliriz. Şimdi sadece sonuçların aradığımız bilgiyi bize vermesini beklememiz gerekiyor.

Test sonuçlarının analizi

Sonunda, bir değişken diğerinden daha iyiyse, A/B test aracının kendisi bize bunu söyleyecektir. Daha önce anlattığımız A/B testinde sonuçlar netleşmiştir. Yeni renklere sahip sürüm, zaten sahip olduğumuzdan daha kötü. Testte tanımlanan beş hedefin her biri için sonuçların ayrıntılarını aşağıdaki galeride görebilirsiniz:

Varyant yalnızca işlem düğmelerine daha az tıklama almakla kalmadı, aynı zamanda daha az satışla sonuçlandı (neredeyse %22 daha az).

Bu aptalca görünebilir, ancak değişiklikleri bir A/B testi ile test etmek yerine, daha önce test etmeden doğrudan web sitenizde değiştirirseniz, daha kötü sonuç verebilecek değişiklikler yapma riskiniz vardır. Bu bizim durumumuz olabilirdi, çünkü yapmak istediğimiz değişiklikler düşündüğümüz kadar işe yaramadı.

Renkleri herhangi bir zamanda değiştirmenin iyi bir çözüm olduğunu görebilirsiniz çünkü yenilerini daha çok seviyorsunuz. Stil açısından çok daha iyi olduğunu düşündüğünüz yeni bir renk paleti buldunuz ve doğrudan kullanmayı seçtiniz. Ama bu büyük bir hatadır. Bir rengi diğerinden daha çok sevmeniz önemli değil. Önemli olan, hedef kitleniz ve ziyaretçileriniz için durumun gerçekten böyle olup olmadığını dikkatlice kontrol etmektir. Ve bunu bir A/B testi aracılığıyla kontrollü bir ortamda yapabilirsiniz.

Unsplash'ta Jeremy Thomas tarafından öne çıkan görsel.