CSS Stil Sayfalarıyla Bölünmüş Test

Bir web sitesini önemli ölçüde bölme testi yapmanın en hızlı yolu, site çapında bir denemede basamaklı stil sayfasında (CSS) cesur değişiklikler yapmaktır.

CSS Stil Sayfaları Neden Önemlidir?

Bir web sitesinin ana CSS dosyası, her web sayfasındaki tüm öğelerin ortak stillerini, konumlarını ve davranışlarını kontrol eden merkezi bir referans noktasıdır.

Ana CSS dosyasında tüm yazı tipleri, kenar boşlukları, renkler, hizalamalar ve çok daha fazlası için ayarlar bulunur. Çoğu şablonlu web sitesindeki en önemli dosyadır ve yalnızca küçük bir düzenlemeyle web sitesinin görünümünü büyük ölçüde değiştirebilir.

Her Seferinde Yapmanız Gereken Site Geniş Bölme Testleri

Bir web sitesinde, web sitesinin okunması, kullanılması, gezinmesi, harekete geçirici mesajların vurgulanması ve tüm önemli bilgileri göstermesinin ne kadar kolay olduğu konusunda büyük rol oynayan birçok ortak unsur vardır.

Bir kullanıcı bir web sitesinde iletişim kurmaya veya belki de bir satın alma işlemi yapmaya karar verdiğinde, yukarıdakilerden herhangi biri bu dönüşümü durdurmada belirleyici bir faktör olabilir. Aşağıda, site genelindeki öğeler için bazı önemli hususlar yer almaktadır:

Harekete Geçirici Mesaj Düğmeleri

Tüm çevrimiçi dönüşümler, bir harekete geçirici mesaj (CTA) düğmesi, bağlantı veya widget ile başlar. Bu CTA'ların boyutu, rengi, ifadesi ve hatta konumu, dönüşüm oranlarında büyük bir fark yaratır. Örneğin, CTA düğmelerinin belirli renkleri, arka planla çok fazla karışabilir veya olumsuz bir renk olarak algıladıkları şeye bağlı olarak, bilinçaltında kullanıcıyı bunlara tıklamaktan vazgeçebilir. Bağlantılarda ve düğmelerde kullanılan metin de fark yaratır. Örneğin, bir formun “GÖNDER” düğmesinin “GÖNDER” olarak değiştirilmesi, “gönder” zorlayıcı bir kelime olarak algılandığından daha iyi sonuçlar verir. VWO.com'da CTA'lara yönelik nihai kılavuzda bununla ilgili daha fazla bilgi edinebilirsiniz.

Yazı Boyutu

Bu nadiren test edilen öğe, birçok kullanıcı için erişilebilirlikte büyük rol oynar. Yazı tipleri genellikle bazı kullanıcılar için okuyamayacak kadar küçüktür, bu nedenle aşinalarsa yakınlaştırma işlevini kullanmaları gerekebilir, ancak bu mobil cihazlarda her zaman mümkün veya kolay değildir. Çok büyük olan yazı tipi boyutları da zararlı olabilir çünkü özellikle web sitelerinin mobil uyumlu sürümlerinde okuma hızlarını yavaşlatabilirler. Yazı tipi boyutlarının arkasındaki bilim hakkında daha fazla bilgiyi burada imarc.com'da okuyun.

Yazı tipi

Yine, yazı tipi stili birçok web sitesinde nadiren test edilir, geliştirmenin ilk tasarım aşamasında karar verilir ve daha sonra birçok web sitesinde unutulur. Farklı yazı tipi stilleri farklı okunabilirlik seviyelerine sahiptir. Ayrıca, bazı yazı tipleri yalnızca belirli cihazlarda bulunur ve bazıları Yazı Tipi Rasterleştirmesi olmadan belirli cihazlarda belirli boyutlarda gerçekten kötü görünür. Bir yazı tipi ailesini bir dizi yazı tipini kullanmak için, en sevdiğinizden başlayıp Arial gibi her cihazda bulunan daha basit yazı tiplerine kadar inerek kullanabilirsiniz. Google Yazı Tipleri. TypeWolf.com'daki bu gönderide 2016'nın en iyi on web yazı tipi hakkında daha fazlasını bulabilirsiniz.

Yazı stili

Satır yüksekliği, alt çizgi, koyuluk, renk ve kenar boşlukları gibi yazı tipi stilleri de erişilebilirliği ve okunabilirliği etkiler. Bağlantılar, mavi ve altı çizili olduklarında tıklanma olasılığı daha yüksektir; bu, Google ve eBay tarafından yıllar içinde Google ile 2016'da siyah bağlantıları test ederken bile titizlikle test edilen bir şeydir. Bağlantılar web sitenizde bağlantılar olarak net bir şekilde öne çıkmazsa , sonra test edilmelidirler ve değiştirildikten sonra genellikle daha fazla katılım gösterdiklerini göreceksiniz.

Arka Plan Renkleri

Web siteleri genellikle beyaz bir arka plan üzerinde yapılır, ancak en sevdiğiniz haber web sitesine veya sosyal medya platformuna bakarsanız, genellikle mavi veya grinin hafif bir tonudur. Arka plan renkleri, bilgi kutusu veya özel teklif afişi gibi web sayfasının belirli alanlarının öne çıkmasına yardımcı olabilir. Ayrıca, arka plan rengi gösterilen ürünün markasını veya türünü güçlendirebilir ve bu ilişki, içerik daha alakalı göründüğü için dönüşüm oranlarını artırır. Jimdo.com'daki bu makaledeki web siteleri için renk psikolojisi hakkında daha fazla bilgi edinin ve Turuncu gibi renklerin (Amazon'u düşünün) ve mavinin tarafsızlık ve teknolojiyi (Facebook veya Twitter'ı düşünün) nasıl ifade ettiğini görün.

Öğeleri Yeniden Konumlandırma veya Gizleme

CSS dosyası, web sayfalarındaki tüm ortak öğeler için kenar boşluklarını ve dolguyu kontrol eder ve ayrıca "display:none" komutunu kullanarak belirli öğeleri tamamen kaldırmanıza olanak tanır. Bunu kullanmanın bazı yolları, dikey olarak boşa harcanan alanı azaltmaya çalışmak, gereksiz bilgileri kaldırmak, önemli CTA'lar arasındaki boşlukları değiştirmek veya belirli içerik bloklarını kaldırmayı denemektir. Bazen web sayfalarında daha azı daha iyidir (basit-aptal-aptal ilkesi) ve dönüşüm oranını artırırken bir web sayfasından ne kadar kaldırılabileceğini görmek iyi bir uygulamadır.

Site Genelinde CSS Dosyalarını Bölme Testi için Platformlar

Bir web sitesindeki şablonları, sayfadan sayfaya gittiklerinde her bir kullanıcı için tutarlı tutmak gerçekten önemlidir. Diğerleri aynı kalırken yalnızca bir sayfanın A/B bölünmüş testi yapılması zararlı olabilir (ve kesinlikle kötü bir deney).

CSS dosyası değişikliklerini her bir kullanıcı için sayfadan sayfaya tutarlı tutmak için özel bölme testi yazılımı gereklidir, ne yazık ki Google Analytics'in ücretsiz “İçerik Denemeleri” bu tür bölme testlerini karşılamıyor. İşte kullanmak isteyebileceğiniz bazı araçlar:

• Visual Website Optimizer (VWO) – vwo.com – Bunun uygulanması en kolay split test yazılımı olduğunu gördük. HTML, CSS veya JavaScript üzerinde her tür bölme testini gerçekleştirir ve ayrıca gerekirse kullanıcı ısı haritaları oluşturur. Fiyat yapıları burada bulunabilir
• Optimizely – optimizely.com – Bu aynı zamanda HTML, CSS veya JavaScript üzerindeki her tür bölme testini de yönetir ve gerekirse çok gelişmiş bazı bölme testleri yapabilir. Fiyat bilgisi burada bulunabilir

Sonuç

Site çapında bir CSS bölme testi ayarlamak kolay ve etkilidir, ancak CSS'ye aşina değilseniz bir geliştiriciden 15 dakikalık yardıma ihtiyacınız olabilir.

Web sitesi doğru yazı tiplerine, stillere ve CTA'lara sahip olduğunda, web sitesinin önemli açılış sayfalarına ve diğer niş öğelere odaklanabilirsiniz. Bu, dönüşüm oranlarını artırır ve web sitesini ekstra trafik gerektirmeden çok daha etkili hale getirir.

Sizinle ilgili yardıma ihtiyacınız varsa, bizimle iletişime geçmekten çekinmeyin.