WordPress ve Divi Leads ile Dönüşüm Tasarımında Ustalaşma

Konu veya amaç ne olursa olsun, her web sitesi sahibi bir noktada dönüşüm hakkında düşünmelidir. Harekete geçirici mesajınızı web sitenizde bir yere yerleştirebilir ve en iyisini umabilirsiniz, ancak web sitenizden ve dönüşümlerden en iyi şekilde yararlanmak istiyorsanız, dönüşüm tasarımına odaklanmak için biraz zaman ayırmanız en iyisidir.

Dönüşüm Tasarımı Nedir?

Dönüşüm Odaklı Tasarım (CCD) olarak da bilinen dönüşüm tasarımı, ziyaretçileri bir iş hedefine yönlendirmek için bir deneyim yaratmaya odaklanan bir tasarım felsefesidir. Ziyaretçilerin CTA'nıza yanıt vermesini ummak yerine, ziyaretçileri satış hunisinden ve istenen sonuca yönlendirmek için aktif olarak çalışır. Sadece mantıklı – dönüşüm tasarımını iyileştirmek, dönüşüm oranlarını artıracaktır.

Dönüşüm tasarımı, web sitenizin tasarımına rehberlik etmek için tasarım ilkelerini dönüşüm psikolojisiyle birleştiren bir pazarlama biçimidir. Bu kombinasyondan, özellikle web sitenizin tasarımını kullanarak dönüşümü zorlamak için ilkeler geliştirilmiştir. Şimdi bu tasarım ilkelerine bir göz atalım.

Yedi Tasarım İlkesi

Dönüşüm merkezli tasarımda kullanılan yedi tasarım ilkesi vardır. İlk dördü tasarım öğeleridir:

1. kapsülleme
2. Kontrast ve renk
3. Yön ipuçları
4. Beyaz boşluk

Ve son üçü psikolojik unsurlardır:

5. Aciliyet ve kıtlık
6. Satın almadan önce deneyin
7. Sosyal kanıt

Bu tasarım ilkeleri, açılış sayfası tasarımında görülebilir ve ayrıca afişler ve kenar çubukları ile veya dönüşüme odaklanmak istediğiniz herhangi bir yerde kullanılabilir.

kapsülleme

CTA'nızı bir pencereye veya çerçeveye yerleştirin. Yönlü ipuçları oluşturmak için bunu daireler gibi şekillerle ve kontrast ve renk gibi öğelerle yapabilirsiniz.

Kontrast ve Renk

CTA düğmenizin öne çıkmak için yeterli kontrasta sahip olduğundan emin olun. En iyi performans için kontrastla başlayın ve renkleri test edin. Ayrıca sayfadan çıkan bir formu da göz önünde bulundurun. Bazıları renk teorisine bağlı kalırken, diğerleri rengin kontrasta ikincil olduğunu iddia ediyor. Sizin için en iyi olanı görmek için A/B testi kullanmanızı öneririm.

Referans için burada renk psikolojisine bir bakış.

• siyah: ciddi
• kahverengi: sağlıklı
• Kırmızı: tehlike, heyecan
• Koyu Mavi: sakinleştirici, güvenilir
• Açık Mavi: havalı, genç
• Altın: muhafazakar, zarif
• Gri: bütünlük, olgun, tarafsız
• Yeşil: rahatlatıcı, büyüme, pozitif
• Metalik: zarif, zengin
• Turuncu: pozitif
• Pasteller: hassas, yumuşak, genç
• Pembe: genç, sıcak
• mor: kraliyet
• Beyaz: saf, temiz, dürüst
• Sarı: olumlu, dikkatli

Drama veya güvenlik hissi yaratmak için bu renkleri zıt kombinasyonlarla kullanabilirsiniz. Amaç, doğru türde dikkati çekmektir.

Yönlü İpuçları

Ziyaretçilerinizi satış konuşmanız aracılığıyla harekete geçirici mesajınıza yönlendirin. Ziyaretçileri doğru yöne yönlendirmek için görsel ipuçlarını kullanın. Yön vermek için bir etiketle birlikte yollar veya oklar >> gibi ipuçlarını kullanarak odak noktalarını yönlendirin. Belirli bir yöne bakan insanlar veya hayvanlar, okuyucuları o yöne bakmaya sevk eder.

Beyaz boşluk

Boşluk kullanmayı unutmayın. Bu, tüm öğelerin öne çıkmasını ve kalabalıkta kaybolmamasını sağlayan bir nesnenin etrafındaki boş alandır. Birbirine tıkıştırılmış çok fazla eşya, her bir eşyanın görülmesini çok zorlaştıracaktır. Boşluk, tasarıma biraz yer verir, böylece ziyaretçiler onlardan ne istediğinize odaklanabilir. Gözlerinin odaklanması gereken yalnızca birkaç şey varsa, görmelerini istediğiniz şeyi görmeleri ve tıklamalarını istediğiniz şeye tıklamaları daha olasıdır.

Aciliyet ve Kıtlık

Biraz aciliyet ekleyin. Bazen insanlar bir karar vermeden önce fazla düşünmeye ve ayaklarını sürümeye eğilimlidirler. Teklifin her zaman orada olacağını biliyorlarsa, hemen ihtiyaçları olmadıkça sizi almak için acele etmeyeceklerdir. Teklifin her zaman orada olmayacağını bilmelerini sağlayın.

Bu, bir üründen kaç adet stokta bulunduğunu, fiyatın ne zaman artacağını, bir etkinlik için kaç koltuk müsait olduğunu, bir paket anlaşmasının süresinin dolmasına ne kadar süre kaldığını vb. göstermek kadar basit bir şey olabilir. Bu bilgilerin yakın bir yere yerleştirilmesi gerekir. CTA düğmesi. Aciliyeti gerçeğe dönüştürün. Onlara karar vermeleri için 90 saniye vermeyin, ardından sayacı yeniden başlatın. Gerçekçi ol.

Satın almadan önce deneyin

Ziyaretçilere ürünün bir önizlemesini verin. Bu, yüksek çözünürlüklü resimler içeren bir slayt gösterisi, bir video, PDF indirmesi olarak bir e-kitaptan örnek bir bölüm veya CTA'lı bir blog gönderisi (gönderi açılış sayfasında gösterilen) vb. olabilir. ürün daha güvenilir Bu, ürününüze daha fazla güvenmelerini sağlayacak ve bir karar vermelerine yardımcı olacak ve bu da sizi iadeler, kötü yorumlar vb. ile uğraşmaktan alıkoyacaktır. Gizlice göz atmak için sunumunuzda yaratıcı olun.

Sosyal kanıt

Sosyal kanıtın uygun şekilde görüntülenmesi, dönüşüm tasarımı için çok önemlidir. Ürünlerinizi kullanmış gerçek kişiler tarafından iddialarınızı destekler. Özgünlük, güvenilirlik ve inanılırlık katar. Takipçilerinizin olduğunu ve başkalarının size ve ürününüze inandığını gösterir. Yine de sosyal kanıtın kullanımı zor olabilir. Yanlış kullanılırsa dönüşümleri engelleyebilir. Müşteri referansları, gerçek ve dürüst görünmeli ve hissettirmeli ve yalnızca görüntülemek istediklerinizi özenle seçmiş gibi görünmemelidir.

Neden Dönüşüm Tasarımını Kullanmalısınız?

Dağınıklık senin düşmanın. Okuyucularınızın dikkatinin dağılmasına ve teklifinize dikkat etmemesine neden olur. Birçok web sitesi sahibi beğendiği bir tasarımı kullanır ve ardından bir CTA eklemeye çalışır. Sorun genellikle tasarımın dönüştürme veya CTA düşünülerek oluşturulmamış olmasıdır. Waldo'nun nerede olduğunu hatırlıyor musun? CTA Waldo'nuzu yapmayın!

Dönüşüm tasarım ilkelerini kullanarak, web sitesini dönüşüm göz önünde bulundurarak tasarlayabilirsiniz ve bundan sonra onu takip ediyormuş gibi hissetmezsiniz. Dönüşüm tasarımı, dağınıklığı azaltır ve ziyaretçilerinizin görmelerini istediğiniz şeyi, yani CTA'nızı görmelerini sağlar.

Dikkate Alınması Gereken Bazı Noktalar

İyi bir kampanyanın dikkat oranı bir olacaktır, yani dikkati dağıtmayan tek bir eylemi olacaktır. 19 başka bağlantı varsa, dikkat oranı 20:1 olacak ve okuyuculara 20 olası tıklama ve bir amaçlanan tıklama verilecektir. 1:1 oranında bir oran istiyorsunuz ve onlara amaçlanan tek tıklamayla olası bir tıklama sağlıyorsunuz. Okuyucunun dikkatini dağıtacak daha az bağlantıyla, CTA'nızı fark etme ve olumlu yanıt verme olasılıkları daha yüksektir.

Web kopyası da dönüştürmede önemli bir rol oynar, ancak tasarım dikkat dağıtıcı, dağınık, kafa karıştırıcı, çok gösterişli veya sadece çirkin ise büyük kopya göz ardı edilecektir.

CTA'nız ekranın üst kısmında olmalıdır. Okuyucunuzun dikkatini çekmeli, ancak dikkat dağıtıcı olmamalıdır.

Bir açılış sayfasının en önemli yönü, sonunda elde ettiğiniz dönüşüm oranıdır. Açılış sayfalarının tek bir amacı vardır – dönüştürmek. Yani muhtemelen bu şartı yerine getirmeli, sence de öyle değil mi?

Kenar çubukları genellikle haber bülteni kayıtları, reklamlar, sosyal bağlantılar, RSS aboneleri ve hatta yorumlar gibi CTA'ları içerir. Ancak her web sitesi bir kenar çubuğundan yararlanamaz. Bazı okuyucular onları fark etmiyor bile. Tıpkı herhangi bir CTA gibi, ekranın üst kısmında olmalıdır. Göz alıcı olmalı, bu nedenle renk ve kontrasta dikkat etmek isteyeceksiniz. Kenar çubuğunuzu doğru kullanırsanız, CTA'nızı yönlendirir.

Dönüşüm tasarımının bir kısmı performans testidir. Bir dönüşümün her öğesi test edilmeli ve geliştirilmelidir. Ziyaretçileri müşteriye dönüştürmüyorsa, tasarımın yeniden değerlendirilmesi gerekir.

Divi, Dönüşüm Tasarımına Nasıl Yardımcı Olabilir?

Divi, dönüşüm tasarımı için harika bir temadır. Dönüşüm için tasarımı hızlı ve kolay hale getirir. Her sayfanın bir amacı olduğunu, dolayısıyla her sayfanın bir dönüşüm odağı olduğunu unutmayın. Divi'nin yerleşik düzenlerinde bu odak önceden yerleşik olarak bulunur.

Sayfa öğelerinizi yeniden düzenlemek istiyorsanız, istediğiniz düzeni elde edene kadar sürükleyip bırakmanız yeterlidir. Düzenler temiz ve düzenlenmesi kolaydır. Divi'yi dönüşüm için tasarlamak için kullanma hakkında daha fazla bilgi için Divi Temasını Kullanarak Dönüşüm İçin Tasarım Yapma makalesine bakın.

Divi Lead'lerle Dönüşüm Tasarımını Test Etme

Divi'nin en yeni özelliği Divi Leads, sayfanızın öğelerinin performansını test ederek dönüşüm tasarımınızı iyileştirmenize yardımcı olabilir. Bölümleri, satırları ve modülleri test ederek, dönüşüm tasarımınızı açılış sayfalarında, kenar çubuklarında ve daha fazlasında test edebilirsiniz. Bu bölümde, bazı dönüştürme öğelerini test etmeye göz atacağız ve test sonuçlarının tasarımı nasıl iyileştirebileceğini göreceğiz.

Bu testlerde, CTA olarak haber bülteni aboneliklerini kullanıyorum. Bülten formlarını tasarlarken, onları kısa ve temiz tutmak en iyisidir. Kampanyanız için çok önemli değilse ad ve soyadlarını, adreslerini vb. sormayın. Sadece e-postalarını veya adlarını ve e-postalarını isteyin. Ne kadar çok alan doldurmaları gerekiyorsa, o kadar fazla bunalmış hissedecekler ve nihayetinde dönüşüm sağlama olasılıkları daha düşük olacaktır.

Bu test sonuçları hakkında kısa bir not – Size çizelgeleri göstermek için testleri simüle ediyorum. Gerçekte bir karar vermeden önce daha fazla veri isterim. Ne kadar çok veriye sahip olursanız, test o kadar doğru olur. Ayrıca, birçok şey bir dönüşüm olarak kabul edilebilir. Sitenizin amacına bağlıdır.

Açılış Sayfalarında Dönüşüm Tasarımı

Divi'nin standart açılış sayfası düzenini kullanıyorum ve ardından Harekete Geçirici Mesaj modüllerini Bloom için kısa kodlar içeren bir metin kutusuyla değiştiriyorum. Divi'nin bir e-posta tercih modülü içerdiğini biliyorum, ancak Bloom'un tasarım özelliklerini kullanmak istiyorum. Divi'nin e-posta kayıt modülü, Bloom veya herhangi bir haber bülteni kayıt formu çalışacaktır. Size en iyi dönüşümü neyin sağladığını görmek için hepsini birbirine karşı test edebilirsiniz.

Birkaç test yapmak istiyorum. Birincisi, görüntüyü ve optin formunu yan yana ve alt üste yerleştirmektir. Bu testin galibi bir sonraki teste geçecek.

Tüm modüllerimi yerleştirdikten sonra her modüle girdim ve Bloom bülten abonelik formumun kısa kodunu yerleştirdim.

1. sıra

Satır 1, formu görüntünün altına yerleştirir. Bu formun okuyucuların bir etkinliğe kaydolmasına izin verdiğine karar verdim, bu yüzden kaç koltuk müsait olduğunu göstermek için bir sayı sayacı da yerleştirdim. Bu şekilde okuyucular, katılmak istiyorlarsa hızlı bir şekilde kaydolmaları gerektiğini bileceklerdir.

Sonuç, kayıt formuna dikkat çeken temiz bir düzendir.

2. sıra

Satır 2, kayıt formunu, formun altındaki sayı sayacı ile görüntünün altına yerleştirir.

Sayfa temiz ve hem görsele hem de kayıt formuna dikkat çekiyor. Şimdi testi bir süreliğine çalıştırmam ve iki düzenden hangisinin bana en iyi dönüşümü sağladığını görmem gerekiyor.

Sonuçlar

Tıklama oranı, 1. satırın 2. satırdan daha popüler olduğunu gösteriyor. Aynı gösterim sayısıyla, 1. satır iki kat daha fazla tıklama aldı ve 2. satıra daha yüksek bir hemen çıkma oranı verdi. Satır 1, bu durumda bariz kazanandır. Ardından, form için farklı renkler, farklı metinler, farklı form düzenleri vb. kullanarak tasarımı test etmeye devam edebilirim.

Kenar Çubuklarında Dönüşüm Tasarımı

Neyse ki, kenar çubuklu bir düzeni test etmek için Divi Lead'leri de kullanabiliriz. Kenar çubukları söz konusu olduğunda Divi'nin ilginç bir düzen özelliği vardır. Normal kenar çubuğunu kullanabilir veya kendi kenar çubuğuna sahip bir düzen seçebilirsiniz. Ayrıca kenar çubuğunu kapatabilirsiniz (modülü silerek veya ayarları belirli cihazlarda görünmeyecek şekilde ayarlayarak), böylece mizanpajınız için hangisinin en iyi sonucu verdiğini test edebilirsiniz. Kendi kenar çubuğuna sahip bir düzen kullanmanın bir başka avantajı da belirli sayfalar ve gönderiler için bir kenar çubuğu oluşturabilmenizdir.

Bu test için sağ kenar çubuğuna sahip bir blog düzeni yükledim. Daha sonra Divi gönderi ayarları sayfa düzenini kenar çubuğu içermeyecek şekilde ayarladım. Bu, kenar çubuğu konumlarını ve öğelerini test etmek için harikadır. Bu testte, e-posta formlarını test etmeye devam ediyorum.

Kenar çubuğundaki ayarlar, kullanmak istediğim widget alanını seçmeme izin veriyor. Bu şekilde, çeşitli widget alanlarına farklı widget'lar yükleyebilir ve aralarında test edebilirim. İlk kenar çubuğu için Kenar Çubuğu'nu seçtim. İkinci kenar çubuğu için Kenar Çubuğu 6'yı seçtim.

Her biri farklı renk ve stillere sahip birkaç farklı e-posta kayıt formu oluşturdum. Ardından, hangi bülten kayıt formunun en başarılı olduğunu görmek için bir A/B testi oluşturdum. Bloom kullanıyorum (kendi A/B testi özelliğine sahip), ancak A/B testini Divi Lead'lerle yapmayı seçtim, böylece diğer widget'larda değişiklik yapabilirim.

Bloom'un tüm yerleşik tasarımları harika görünecek olsa da, en iyi sonucu görmek için kendi stillerinizi, renklerinizi, alanlarınızı vb. A/B testi yapabilirsiniz.

Sonuçlar

İkinci kenar çubuğunun daha az gösterimi, ancak daha fazla tıklaması vardı.

İlk kenar çubuğunun daha yüksek bir hemen çıkma oranına sahip olduğunu görebiliriz. Testi sonlandırdım ve ikinci kenar çubuğunu kullandım. Bana en fazla dönüşümü sağlayan kenar çubuğunu test etmeye ve kullanmaya devam edeceğim.

Hangi formu tutmak istediğimi belirledikten sonra, tüm bölümü kenar çubuğu solda olan bir bölümle veya kenar çubuğu olmayan ancak bölümün içindeki formla hangisinin daha iyi performans gösterdiğini görmek için bir bölümle test edebilirim. Sonuçta tasarım ve düzen tercihlerim dönüşümle belirlenecek.

Son düşünceler

WordPress ve Divi ile dönüşüm tasarımı kolaydır. Divi Lead'ler, tasarımlarınızı geliştirmeniz için size araçlar sunar. Dönüşüm tasarım ilkelerini kullanarak tasarımlarınızı test etmek ve mümkün olan en iyi dönüşümleri elde etmek için Divi Lead'leri kullanabilirsiniz.

Senin sıran! WordPress web sitenize Dönüşüm Tasarımı ilkelerini dahil ediyor musunuz? Ekleyeceğiniz bir şey var mı? Yorumlarda bize bildirin.

Makale küçük resmi, Vadym Nechyporenko tarafından / Shutterstock.com