Popup ve modal tasarımı: Dönüşüm için doğru kullanım

Popup modal tasarımı, doğru uygulandığında e-posta listesi büyütmekten sepet terk oranını düşürmeye kadar pek çok hedefi destekler; ancak yanlış kullanım hem kullanıcı deneyimini zedeler hem de Google'ın intrusive interstitial cezasını tetikler.

Web sitesi sahipleri sık sık popup ile modal arasındaki farkı göz ardı eder. Popup, sayfanın üzerine kayan ve genellikle otomatik tetiklenen bir katmandır; modal ise kullanıcının bir eylemi (buton tıklaması, form açma) sonucunda açılan diyalog penceresidir. Bu ayrım, hem kullanıcı beklentisini hem de SEO riskini doğrudan etkiler.

⠀

Popup tetikleme türleri ve doğru zamanlama

⠀

Popup modal tasarımında en kritik karar, tetikleme anıdır. Üç yaygın yöntem öne çıkar:

• Çıkış niyeti (exit-intent): Kullanıcının imleci tarayıcı sekmesine doğru hareket ettiğinde devreye girer. Sepet terk oranını düşürmede en etkili yöntemdir.
• Zaman bazlı: Sayfa yüklendikten belirli bir süre (genellikle 30-60 saniye) sonra gösterilir. Kullanıcıya içeriği okuma fırsatı tanımak için en az 10 saniye beklenmesi önerilir.
• Scroll bazlı: Kullanıcı sayfanın belirli bir yüzdesini (örneğin %50) aştığında tetiklenir. İçerikle ilgilenen, yani nitelikli ziyaretçileri hedefler.

⠀

Her üç yöntemde de ilk birkaç saniyede ekrana gelmemesi, kullanıcının içeriğe yönelmesine alan açar ve hemen çıkma oranını azaltır.

⠀

Google intrusive interstitial cezası: Hangi popuplar risk taşır?

⠀

Popup modal tasarımı yapılırken Google'ın 2017'den bu yana uyguladığı intrusive interstitial cezası göz ardı edilmemelidir. Ceza, özellikle mobil aramalarda sayfayı erişilemez kılan popuplara uygulanır. Risk taşıyan senaryolar şunlardır:

• Sayfa yüklenir yüklenmez tam ekran kaplayan reklam veya abone formu
• İçeriği tamamen örten ve kapatma butonu belirgin olmayan katmanlar
• Kullanıcının asıl içeriğe ulaşmadan etkileşim kurmak zorunda kaldığı interstitials

⠀

Google'ın cezalandırmadığı istisnalar arasında yasal zorunluluk taşıyan cookie onay bildirimleri, yaş doğrulama ekranları ve oturum açmış kullanıcılara yönelik kişiselleştirilmiş içerikler yer alır. Popup boyutunun ekranın %30'unu geçmemesi ve her zaman görünür bir kapatma butonunun bulunması, ceza riskini belirgin biçimde düşürür.

⠀

⠀

⠀

Dönüşüm artıran popup tasarımı için en iyi uygulamalar

⠀

Popup modal tasarımında dönüşümü etkileyen unsurlar şunlardır:

Tek ve net mesaj: Her popup yalnızca bir teklife odaklanmalıdır. "Hem e-postanı bırak hem de ürünü incele" gibi çift hedefli popuplar dönüşümü düşürür.

Güçlü teklif: İndirim kodu, ücretsiz kargo veya özel içerik gibi somut bir değer sunulmadığında kullanıcı formu doldurmaz. "Bültenimize abone ol" ifadesi tek başına yeterli değildir.

Açık kapatma butonu: "X" butonu görünür, büyük ve erişilebilir olmalıdır. Kapatma butonunu gizlemek kısa vadede tıklama sayısını artırsa da kullanıcı memnuniyetini ve marka güvenini ciddi biçimde zedeler.

Mobil uyumluluk: Mobil ekranda popup, tam ekranı kaplamalı ya da sayfanın yalnızca küçük bir bölümünü işgal etmelidir. Ortada asılı kalan ve kapatılamayan popup'lar hem kullanıcıyı kaçırır hem de Google cezasını davet eder.

Yükleme gecikmesi: Sayfa içeriğinin önce yüklenmesi, popupın ardından gelmesi, Core Web Vitals skorlarını olumsuz etkilemez.

⠀

Modal tasarımında kullanıcı deneyimi standartları

⠀

Modal, popup'tan farklı olarak kullanıcı eylemine bağlı açılır; bu nedenle farklı tasarım kuralları geçerlidir. Popup modal tasarımı karşılaştırmasında modaller için şu standartlar öne çıkar:

• Arka plan karartma (overlay) kullanılmalı; bu, kullanıcıya odaklanması gereken bir iletişim kutusu olduğunu bildirir.
• Klavyede Escape tuşuyla veya overlay'e tıklayarak kapatılabilmesi, erişilebilirlik açısından zorunludur (WCAG 2.1).
• Form içeren modallerde hata mesajları alanın hemen altında, kırmızı veya turuncu gibi dikkat çekici renkte gösterilmelidir.
• Modal açıldığında odak (focus) ilk etkileşilebilir elemana taşınmalı; modal kapandığında ise tetikleyen butona geri dönmelidir.

⠀

⠀

⠀

⠀

A/B test stratejisi: Hangi değişkeni önce test edin?

⠀

Popup modal tasarımını optimize ederken aynı anda birden fazla değişkeni değiştirmek, hangi unsurun etkili olduğunu gizler. Öncelik sırası şu şekilde olmalıdır:

1. Tetikleme zamanı: 5 saniye mi, 30 saniye mi? Bu değişken dönüşümü en çok etkiler.
2. Teklif içeriği: %10 indirim mi, ücretsiz kargo mu? Hangi teşvik daha güçlü?
3. Başlık metni: Fayda odaklı mı, merak uyandıran mı?
4. Renk ve CTA butonu: Buton rengi ve metni son sırada test edilmelidir çünkü etkisi daha küçüktür.

⠀

Her test en az iki hafta ve istatistiksel anlamlılık (%95 güven düzeyi) sağlanana kadar sürdürülmelidir. Google Optimize kapandığından bu yana VWO, Optimizely veya Convert.com gibi araçlar kullanılabilir.

⠀

Sık Sorulan Sorular

⠀

Popup mobil SEO sıralamamı etkiler mi?

Evet. Mobil arama sonuçlarından gelen kullanıcıyı içeriğe ulaşmadan engelleyen popuplar, Google'ın intrusive interstitial politikası kapsamında sayfa sıralamasını olumsuz etkileyebilir. Masaüstü için aynı ceza uygulanmaz.

Popup ile modal arasında hangisini tercih etmeliyim?

Otomatik tetiklenecekse popup, kullanıcının bir eylemi (üyelik, ödeme bilgisi) sonucunda açılacaksa modal tercih edilmelidir. İkisini karıştırmak kullanıcı beklentisini bozar.

Popup ne kadar sıklıkla gösterilmeli?

Aynı kullanıcıya oturum başına en fazla bir kez gösterilmesi, cookie veya localStorage ile kontrol edilmesi önerilir. Kapatılan popupun en az 7-30 gün boyunca tekrar gösterilmemesi, kullanıcı memnuniyetini korur.

⠀

Blakfy olarak, web tasarım projelerinizde popup modal tasarımını dönüşüm hedeflerinizle uyumlu biçimde kurgulamak ve Google ceza riskini sıfırlamak için veri odaklı bir yaklaşım benimsiyoruz.