Geçmişte web sitelerinde pek çok gereksiz öğe bulunuyordu: Gösterişli ve çirkin renk şemalarıyla dolu sayfalar, küçük alanlara sıkışmış çok fazla metin ve ziyaretçileri rahatsız eden pop-up'lar.

Ancak tasarımcılar o zamanlar daha fazlasını bilmiyorlardı ya da bildikleri tek tasarım trendleri ve en iyi uygulamalarla çalıştılar.

O zamandan beri Times çok değişti.

Web geliştiricileri ve tasarımcıları artık teknoloji veya teknikle sınırlı değil, bu da kötü tasarım için artık mazeret olmadığı anlamına geliyor. Bu, bir WordPress sitesinde bulunan, ana sayfa başlık görüntüsünden formlar kişilerin yanı sıra tipografiden pop-up'lara kadar. Kullanıcı deneyimi için tasarım yaparken artık her şey önemli.

Bugün, bir pop-up'ı neyin etkili kıldığına odaklanmak istiyorum, bu, dönüştürme sürecinin önemli bir parçası olduğunu düşündüğüm bir şeye. Özellikle, etkili bir WordPress açılır penceresinin anatomisini ve bu heyecan verici öğenin dönüşüm oranınızı nasıl artırabileceğini incelemek istiyorum.

WordPress'te açılır pencereleri kullanma argümanı

Pop-up'lar ilginç bir tasarım öğesidir. Kullanıcı deneyimini geçici olarak kesintiye uğratırken (ki bu genellikle pek takdir edilmez), doğru yapılanlar o kadar çekici veya heyecan verici bir şey sunar ki ziyaretçilerin bir dikkat etmek için dakika.

Tabii ki, bu durumda, aboneleri toplamaya yarayan dönüşüm yaratan pop-up'lardan bahsediyoruz. bülten veya ziyaretçileri alışveriş yapmaya ikna edin. Ancak, pop-up'lar çeşitli amaçlar için kullanılabilir. Örneğin, çerezlerinizi veya gizlilik politikanızı paylaşabilir, ziyaretçiler sepete bir şey ekledikten sonra ilgili öğeleri önerebilir ve hatta onlardan hızlı bir ankete katılmalarını isteyebilirsiniz.

Açılır Anatomi - Hedef Tavsiyelerin Açılır Penceresi

Çoğunlukla, bir açılır pencere kullanıyorsanız, muhtemelen ziyaretçilerin harekete geçmesini istersiniz. Sonuçta, rahatsızlık zamanlarının yararlı bir kullanımı değilse, neden deneyimlerini yarıda keselim? Yaklaşık iki milyar pop-up üzerinde yapılan bir araştırmaya göre, bu tür pop-up'ların ortalama dönüşüm oranının% 3,09 olduğunu buldular.

Şimdi bu soruyu akla getiriyor: Pop-up'lar hala alakalı ve etkili mi? Piyasa, çıkış pop-up'ları, merhaba çubukları, tam sayfa kaplamalar ve daha fazlasıyla aşırı doymuşsa, bu, WordPress sitenizde kullanmaya değer bir dönüşüm oluşturma aracı mı?

Tabii ki !!!

Pop-up'lar birçok iyi web tasarım uygulamasını dikkate alır. Örneğin:

  • Açılır pencereler, sitenizin sayfalarından gereksiz dağınıklığı ortadan kaldırır.
  • Genellikle temiz görsellerden ve minimum metinlerden oluşur.
  • Harekete geçirici mesajlar iyi tasarlanmış ve basitçe ifade açısından sunulmuştur.
  • Çoğu insan pop-up'lara aşina olduğundan ve onlarla nasıl etkileşim kuracağını bildiğinden ziyaretçileriniz için küçük bir öğrenme eğrisi vardır.
  • Açılır pencereler, sitenizi animasyonlar, videolar veya sosyal kanıtlarla aşılamak için eğlenceli bir fırsat sağlar.
  • ile kolayca oluşturabilirsiniz. WordPress eklentileri Hustle gibi yüksek kalite veya OptinMonster.

Anatomi açılır pencere - sosyal kanıt HubSpot

Genel olarak, iyi tasarlanmış bir pop-up, en çok ihtiyaç duyduğunuz anda ziyaretçilerin dikkatini çekmek için idealdir. Zamanında bildirim veya istek göndermek için bunları kullanabilirsiniz. Ziyaretçi verilerini, onları satın almaya ikna etmek için de kullanabilirsiniz.

Etkili bir WordPress açılır penceresinin anatomisi

Açıkçası, WordPress site pop-up'larınızın başarısı, mükemmel bir şekilde tasarlanmış olanlara ve ziyaretçilerin yardım edemeyecekleri ancak etkileşime giremeyecekleri kadar çekici tekliflere sahip olmalarına bağlıdır. Öyleyse etkili bir pop-up için kazanan formülün nasıl göründüğüne bir göz atalım.

1. Stil

Farklı pop-up türleri, ziyaretçileri abonelere dönüştürmede daha etkili olma eğilimindedir:

  • E-posta aboneliği pop-up'ları% 2,9'luk bir dönüşüm oranına sahiptir.
  • Karşılama pop-up'ları (girişte tam sayfayı dolduranlar)% 2,6 oranında dönüştürülür.
  • Kaydırma ile tetiklenen pop-up'lar% 1,9 dönüştürür.
  • Akıllı veya Merhaba pop-up'lar 0,5 oranında bir dönüşüm görüntüler.

Bu, her zaman geleneksel bir e-posta aboneliği açılır penceresini kullanmanız gerektiği anlamına gelmez. Neil Patel'in sitesinden bir örnek.

Açılır Anatomi - Neil Patel'in Barosu Merhaba!

Bu iyi yapılmış, çünkü basit bir şekilde tasarlanmış, müdahaleci değil, et Minimum ayak izinin fark edilmemesi durumunda dikkat çekmek için eğlenceli animasyonlar kullanır. Bir stil seçmenin, en popüler olanı veya daha yüksek dönüşüm oranlarıyla en iyi bilinen stili kullanmakla ilgili olmadığını unutmayın. Siteniz, ziyaretçileriniz için işe yarayan ve aradaki deneyimi tamamlayacak şekilde tasarlanmış bir stil bulmakla ilgilidir.

2. renk

Elbette renk, web sitesi tasarımında her zaman önemli bir rol oynayacaktır. Seçtiğiniz renklerin arkasındaki psikolojiyi anlayarak, dönüştüren daha etkili açılır pencereler oluşturabilirsiniz. Tabii ki, markanız için yerleşik renk şemasını da unutamazsınız, bu nedenle, her şey sitede iyi görünen ancak hangisi olan bir açılır pencere tasarlamak arasında bir denge bulmakla ilgilidir. ayrıca ziyaretçileri harekete geçmeye zorlar.

3. bileşim

Bir adım geri çekilip açılır pencereyi bir bütün olarak görmek önemlidir. Pop-up'taki her hareketli parçanın tasarımı, pop-up'ın genel yapısı gibi önemli olsa da.

Açılır pencereniz:

  • takip etmek basit ve kolay olun.
  • Temiz çizgilerle tasarlandı ve dengeli olun.
  • Alakalı ve yüksek çözünürlüklü görüntüleri dahil edin; ideal olarak, teklifin konusunu özetleyen tek bir resim.
  • Sitenizin bir uzantısı gibi görünüyor ve belli ki sınırlı özelleştirme seçeneklerine sahip bir pop-up'tan yapılmamış.
  • Büyük, okunması kolay bir tipografi kullanın.

4. metin

Sonra açılır mesajımız var. Bu şeylere giren dili geliştirme sürecinde olmasanız da, açılır pencereleri metinle doldurmaya gelince hala bilmeniz gereken birkaç en iyi uygulama vardır.

Aşağıdakileri aklınızda bulundurun:

  • Her zaman bir başlık, kısa bir mesaj (bir cümle yeterli olacaktır) ve bir harekete geçirici mesaj ekleyin.
  • Ziyaretçilerin duygularına hitap eden güçlü bir dil kullanın.
  • Kısa olun. 30 kelimeden daha az yazamıyorsanız, bu mesaj bir açılır pencereye ait değildir.
  • Sitenizde kullandığınız aynı ton ve kişiliği kullanın.
  • Ziyaretçilerinizin sitede başka bir yerde bulamayacağı değerli bir şey sunun.
  • Mümkünse aciliyet kullanın. Kelimelerle yapamıyorsanız, renkli yapın.

Anatomi açılır - İstek ekranı kaplaması

5. CTA

Web sitelerinin ziyaretçilere iki harekete geçirici mesaj seçeneği sunduğu bu günlerde garip bir büyüme trendi var. Bu eğilimin neden büyüdüğünü anlıyorum, ancak pek çok web sitesinde yanlış uygulandığını gördüm ve bu eğilimin er geç sona ereceğini umuyorum.

Muhtemelen bu kötü uygulamayı kendin gördün:

  1. Olumlu seçenek : Bu, “Oh, teşekkürler, teşekkürler! Bu teklifin hayatımı daha iyi hale getirmek üzere olduğunu biliyorum! " 
  2. Negatif seçenek : Bu, "Kötü yaşam seçimleri yapmayı seviyorum ve yüzümü ovuşturmana minnettarım" diyor. Yalnızca bu korkunç kararı vermek isteyip istemediğimi tekrar soran başka bir pencere almak için bu otomatik kullanımdan kaldırma seçeneğini tıklamama izin verin. " 

Bu, iki CTA seçeneğine sahip tüm pop-up'ların kötü tasarlandığı veya ziyaretçiyi utandırmayı amaçladığı anlamına gelmez. Tim Ferris, iyi yapılmış bir ikili seçenek CTA'ya iyi bir örnek veriyor:

Pop-up Anatomi - Tim Ferris Pozitif Negatif

Bununla birlikte, genel olarak şunu söyleyebilirim ki, eğer alaycı olmaya veya ziyaretçilerinizin kararlarını korkutmaya çalışıyorsanız, o zaman sitenizden çıkın ve Twitter'a koyun. Web siteniz bunun için bir yer değildir ve Twitter umarım onu ​​tamamen yutar.

Bu evcil hayvanın öfkesinin dışında, harekete geçirme ifadesini basit tutmanızı da öneririm. Ziyaretçilerin e-postalarını girdiklerinde veya düğmeyi tıkladıklarında ne alacaklarını netleştiren basit bir dil kullanın. Ayrıca, işi minimumda tutun: doldurulacak en fazla iki alan (yani E-posta ve belki bir ad) ve tıklamak için bir düğme.

Bu eğitim için bu kadar, umarım harekete geçirme düğmelerini iyi tasarlamanıza izin verir.