WordPress'te Yorum Formunuza Daha Fazla Stil Verin

Bir blogunuz olduğunda ve üzerine düzenli olarak yazdığınızda olabilecek en heyecan verici şeylerden biri okuyuculardan yorum almaktır. Ancak bunun olması için yazdığınız içeriğin ilgi çekici olması ve yorum gönderme formunun ziyaretçinin doldurup göndermesi için yeterince görünür ve çekici olması gerekir.

Ayın testi serisine ait olan bu gönderide, mevcut sürümden daha iyi çalışıp çalışmadığını görmek için blogumuzun yorum formunu biraz yeniden tasarlayarak öne çıkarmaya çalışacağız.

Her zaman olduğu gibi, değişiklikleri A/B test tekniğini kullanarak test edeceğiz. Yaptığınız değişikliklerin işe yarayıp yaramadığını web sitenizin ziyaretçilerinden gelen gerçek verilerle görmenin en iyi yoludur.

WordPress yorum formunun tasarımını iyileştirme

Yorum formumuz oldukça basit. Varsayılan olarak WordPress, yorum yapan ziyaretçinin web sitesini girmek için bir alan ekler, ancak bu alanın herhangi bir değer katmadığını düşünüyoruz. Aksine, çeken tek şey, ne pahasına olursa olsun bir bağlantı almak isteyen botlardan gelen spam yorumlarıdır. Bu sebeple orijinal halimizden çıkarttık.

Aşağıdaki karşılaştırmada blog yorum formumuzun orijinal halini ve yaptığımız değişikliklerle varyantını görebilirsiniz. İki versiyonu görmek için ortada görünen tutamacı bir taraftan diğerine kaydırmayı unutmayın:

Temel olarak yorum formunda üç değişiklik yaptık:

1. Yorum alanını vurgulamak ve ziyaretçileri yazmaya teşvik etmek için başlığa birkaç emoji ekledik. Şimdi onları selamlama emojisi ve el yazısı ile yazmaya teşvik ediyor ve el sallıyoruz gibi görünüyor. İnsanlar emojileri sever. Bunun daha fazla yoruma yardımcı olup olmayacağını göreceğiz.
2. Bilgileri doldururken yorumların nerede saklandığını açıkladığımız yasal metin daha küçük bir yazı tipi kullanır. Yasal nedenlerle orada olması gerekiyor, ancak ona çok fazla alaka vermek istemiyoruz.
3. Formun gönder butonunu göze çarpan turuncu bir renge çeviriyoruz. Daha önce de gördüğümüz gibi, renkler önemlidir.

Artık yeni tasarımımız hazır olduğuna göre, yapmamız gereken test etmek.

CSS stillerinin A/B testi oluşturma

Bu tasarım değişikliğini WordPress'teki blogumuzun yorum formunda test etmek için en basit şey bir A/B CSS kuralları testi kullanmaktır. Web sitemizin A Sürümü, orijinal forma sahip olanıdır, B sürümü ise daha önce öngördüğümüz form tasarımındaki üç değişikliği elde etmek için ek CSS kurallarını içerecektir.

Nelio A/B Testi ile yeni bir CSS A/B testi oluşturuyoruz. Bir sonraki resim, bu tür bir testin düzenleme ekranını göstermektedir:

Testi (bizim durumumuzda "Yorumları vurgula formu") ve varyantı ("Yeniden tasarlanmış yorum formu") adlandırıyoruz. Ayrıca sağ kenar çubuğundaki ilgili alana teste bir açıklama ekleyebiliriz. Önceki ekran görüntüsünde, gelecekte testi görecek herhangi bir kullanıcı için referans olarak hizmet eden eklediğimiz açıklamayı görebilirsiniz.

Ayrıca testin kapsamını https://neliosoftware.com/blog/ içeren URL'lere indirdik, böylece test yalnızca blogumuzdaki gönderiler için geçerli olacak.

Bir dönüşüm işlemi olarak, formun gönder düğmesine tıklamayı kurduk. Bir ziyaretçi bu düğmeyi her tıkladığında, ziyaretçinin görüntülediği varyant için testte bir dönüşüm sayarız.

Bitirmeden önce, testin B varyantını düzenlemeye gitmeliyiz. Fareyi bu varyantın üzerine getirdiğimizde, düzenleme seçeneği görünecektir. Tıkladığımızda, aşağıdaki ekran görüntüsünde görebileceğiniz gibi, önizlemeli bir CSS düzenleyici açılır:

Gördüğünüz gibi, sol kenar çubuğunda, daha önce gördüğümüz tasarımdaki değişiklikleri yapan belirli kuralları yazabileceğiniz CSS düzenleyicimiz var. Ayrıca sağ tarafta, bu değişikliklerin sonucunu önizlemek için web sitenize göz atabilirsiniz. Yorum formumuzu yeniden tasarlamak için yalnızca altı basit CSS kuralına ihtiyacımız var.

Bitirdiğimizde, kaydedip başlatmak için A/B test düzenleyicisine geri dönüyoruz. Artık sadece ziyaretçilerimizin gönderilerimizi ziyaret etmesini bekliyoruz. Her ziyaretçi ya formun orijinal versiyonunu ya da yeniden tasarlanmış versiyonu görecektir. Bu, hiçbir şey yapmanıza gerek kalmadan Nelio A/B Testing tarafından kendi başına yapılır.

A/B testi sonuçlarını analiz etme

Yaklaşık altı hafta boyunca testimizi çalıştırdık ve blogumuzun yaklaşık 20.000 ziyaretçisini analiz ettik (nüfusun güzel bir örneği). A/B testinin tam sonuçlarını aşağıdaki ekran görüntüsünde görebilirsiniz:

Testin aldığı toplam dönüşüm sayısı muhteşem değil. O zaman blogumuz 27 yorum aldı (bu nedenle test sonuçlarında 27 dönüşüm var).

Ancak dikkat edilmesi gereken şey, yorum formunun yeniden tasarlandığı varyantın, orijinal versiyonun dönüşüm sayısını ikiye katlamayı başardığıdır. Bu nedenle, yüksek istatistiksel güven değeri ile A/B testinin kazanan seçeneğidir.

Görüldüğü gibi tasarımlarda birkaç CSS kuralı ile yapılabilecek küçük değişiklikler, web sitenizin sonuçlarına doğrudan etki edebilir. Bu varyantı, temamıza ek CSS kuralları ekleyerek web sitemizde uyguladık.

Daha ayrıntılı bir tasarım etkileşimi teşvik eder

Tasarım, web sitemizin ziyaretçilerinin davranışını değiştirmenin anahtarıdır. Mevcut olandan daha iyi çalışan bir tasarım elde etmek, kaynak yoğun olmak zorunda değildir. Burada birkaç basit CSS kuralıyla bize hızlı sonuç veren değişiklikler yapabileceğimizi gördük.

Web sitemizin tasarımındaki değişiklikleri uygulamak, dikkatle yapmamız gereken bir şeydir. Bu yüzden bir A/B testi kullandık. Bu teknik sayesinde, değişikliklerin işe yarayıp yaramadığını ziyaretçilerimizden gelen gerçek verilerle kontrol edebiliyoruz. Aksi takdirde, doğru bir gelişme yolu mu seçtiğimizi yoksa geriye mi gittiğimizi bilemeyiz.

Unsplash'ta Jason Leung tarafından öne çıkan görsel.