Popup UX Tasarımı: 11 Yaygın Hata ve Çözüm Yolları

Online işletmelerin neredeyse hepsi sitesinde popup kullanıyor. Madem popup'lar bu kadar rahatsız edici, neden?

Aşağıda kullanıcı deneyiminizi (UX) düşüren yaygın popup hatalarını ve her birinden nasıl kaçınacağınızı anlatıyorum. Daha iyi bir popup UX tasarımıyla dönüşümlerinizi nasıl artırabileceğinizi de göreceksiniz.

Her pazarlamacı bir şekilde daha fazla dönüşüm peşinde. Bu dönüşüm bir satış olabilir, yeni bir abone olabilir, daha fazla trafik olabilir. Peki herkes istediği dönüşüm oranına ulaşabiliyor mu?

Ne yazık ki hayır.

Ama UX'in neden önemli olduğunu anlayıp sitenizi buna göre düzenlediğinizde, daha fazla ziyaretçiyi istediğiniz eyleme yönlendirebilirsiniz. Web siteniz mesajınızı müşteriye ileten araçtır; iyi UX uygulamaları sitenin her yerinde gerekir, kullandığınız popup'lar da buna dahil.

Popup'ların rahatsız edici olduğu ve kötü bir kullanıcı deneyimine yol açtığı inancı hâlâ yaygın. Bence yanlış. Doğrusu şu:

Popup'lar, daha iyi bir UX tasarımı ile DÖNÜŞÜM SAĞLAR.

Popup UX tasarımı hatalarının çoğu aynı 11 kategoriye giriyor: kötü zamanlama, zayıf hedefleme, fazla form alanı ve müdahaleci yerleşimler. Her biri için, verimizin olduğu yerlerde Popupsmart'ın 2026 kıyaslamasının ölçtüklerini, olmadığı yerlerde de NN/g, W3C ve Google'ın UX rehberliğini ekledim. Neyi bırakmanız ve bunun yerine ne yapmanız gerektiği aşağıda.

Popup UX tasarımı 2026'da dönüşümler için neden önemli?

Popup'lar hâlâ işe yarıyor. Sorun, çoğu ekibin onları kötü uygulaması; kötü popup UX tasarımı da size analiz panelinizde hemen görünmeyen yollarla para kaybettiriyor.

Ama bu medyan, en iyi popup'larla geri kalanlar arasındaki büyük bir farkı gizliyor. Ben bu farkı, popup UX kararlarının oynayabileceği alan olarak okuyorum: popup'ı kim görüyor, ne zaman, hangi cihazda ve onu yanıtlamak ya da kapatmak ne kadar kolay. Başka yerlerde daha yüksek "ortalama" popup dönüşüm oranlarının dile getirildiğini görürsünüz; medyan ise ortadaki kampanyadır, bu yüzden birkaç çok yüksek performanslı kampanya onu yukarı çekemez. Bizim oranımız da potansiyel müşterileri ziyaretçilere değil, popup gösterimlerine bölüyor.

E-posta veya telefon numarası isteyen 3.034 popup'ta popup gösterimi başına potansiyel müşteri, Ocak 2024 - Eylül 2026.

Jaguar Land Rover'ın eski CEO'su Dr. Ralf Speth'in dediği gibi: "İyi tasarımın pahalı olduğunu düşünüyorsanız, kötü tasarımın maliyetine bakın." Bu söz doğrudan dönüşüm optimizasyonu için de geçerli. Popup, hedeflediği her ziyaretçinin istese de istemese de uğraşmak zorunda kaldığı bir tasarım parçasıdır.

Aşağıdaki en yaygın 11 popup UX tasarımı hatasının her birinin bugün uygulayabileceğiniz somut bir çözümü var.

Yaygın hata 1: Rahatsız edici giriş popup'ları kullanmak

Bu hata nasıl görünür?

Bir ziyaretçi Google'dan bağlantınıza tıklıyor ve sayfa daha yüklenmeden tam ekran bir modal, e-postasını istemek için karşısına dikiliyor. İçeriğinizin tek bir kelimesini okumadı. Sizi tanımıyor. Popup'ı kapatıyor (ya da sekmenin tamamını).

Yukarıdaki KAM Motorsports örneği tam bir ders kitabı vakası: popup, ziyaretçi sitenin ne sattığını bile öğrenmeden açılıyor.

UX'e ve dönüşümlere neden zarar verir?

Giriş popup'ları anında olumsuz bir izlenim bırakır. Ziyaretçiler pusuya düşürülmüş gibi hisseder. NN/g, "ana sayfa içeriği yüklenmeden popup göstermeyi" sorunlu popup eğilimleri listesinin ilk sırasına koyuyor. Google'ın müdahaleci geçiş sayfaları ve iletişim kutuları rehberi bunları "kullanıcıların içeriği görmesini engelleyen" öğeler olarak tanımlıyor ve "arama performansının düşmesine yol açabileceği" konusunda uyarıyor (sayfa 10 Aralık 2025'te güncellendi). Arama tarafını popup'ların SEO'yu nasıl etkilediği yazımızda ele alıyoruz.

Arama bir yana, içerik için gelen insanlar doğrudan ayrılıyor. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %40,5'i ziyaretçinin popup'ı kapatmasıyla bitiyor (tüm gösterimler toplu, Şubat 2025 - Eylül 2026) ve popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor.

Bunun yerine ne yapmalı?

Ziyaretçilerinize nefes alacak alan bırakın. Önce içeriğinize göz atsınlar, sunduğunuz değeri anlasınlar; popup'ınızı ancak sonra, doğru anda gösterin. Üç alternatif var, verimiz de her biri hakkında bir şey söylüyor:

Popup'ları X saniye sonra gösterin. Bu, ziyaretçilere önce içeriğinizle ilgilenme zamanı tanır. Beklemek, sayfa yüklendiği anda açılmaktan daha iyi de görünüyor, ama verimiz yalnızca bir eğilimi destekliyor: görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya); yön verinin her yılında aynı kalıyor ama fark istatistiksel olarak güvenilir değil, bu yüzden bir kural değil, eğilim olarak okuyun.

Kaydırma derinliğine göre tetikleyin. Bir ziyaretçi sayfanızın %50'sini geçecek kadar kaydırıyorsa ilgileniyor demektir. Bir potansiyel müşteri mıknatısı ya da bülten kaydı sunmanın doğru anı budur. Popupsmart ile kaydırmaya dayalı tetikleyicileri saniyeler içinde ayarlayabilirsiniz.

Çıkış niyeti popup'ları kullanın. Bunlar yalnızca ziyaretçi imlecini tarayıcının kapatma butonuna doğru götürdüğünde açılır. Zaten ayrılmaya karar vermiş kişileri yakaladığınız için kimsenin işini bölmüş olmazsınız. UX açısından gerekçe bu ve geçerli. Dönüşüm açısından gerekçe ise ününden zayıf: kıyaslamamızda çıkış niyeti istatistiksel olarak güvenilir bir üstünlük göstermiyor; en hassas çıkış niyeti ayarındaki popup'lar, çıkış niyeti olmayanlara karşı %1,10'a %0,78 dönüştürdü (medyan kampanya), bu fark tesadüf olabilir. Ayrıntılar çıkış niyeti popup'ları işe yarıyor mu yazımızda.

İpucu: Test zamanınızı 15 saniyeye karşı 30 saniyeye harcamayın. Verimizde gecikme süresinin kendisi (0-5 saniyeye karşı 21-60 saniye) dönüşümde ölçülebilir bir fark yaratmıyor; o emeği popup'ı kimin ve hangi sayfada gördüğüne harcayın, çünkü verimiz orada farklar gösteriyor (Hata 6). Tetikleyiciye göre veriler için popup zamanlaması rehberimize bakın.

Yaygın hata 2: Mobil uyumluluğu göz ardı etmek

Bu hata nasıl görünür?

Popup'ınız 27 inçlik bir monitörde harika görünüyor. Ama telefonda tam bir felaket: kapatma butonu tarayıcı çubuğunun arkasında kalıyor, metin taşıyor ve form alanları dokunulamayacak kadar küçük. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %63'ü mobilde gerçekleşiyor ve çoğu ekip popup'larının 5,5 inçlik bir ekranda nasıl göründüğünü hiç kontrol etmiyor.

UX'e ve dönüşümlere neden zarar verir?

Popup'ınız mobilde ana içeriği kaplıyorsa, Google'ın müdahaleci geçiş sayfaları rehberinin uyardığı zayıf arama performansını göze alıyorsunuz demektir. SEO'nun ötesinde, mobil kullanıcıların sabrı daha azdır. Kapatmak için birden fazla dokunuş isteyen bir popup onları hemen rakibinizin sitesine gönderir. Üstelik popup'lar mobilde daha iyi dönüştürüyor: mobilde medyan popup %1,02 dönüştürüyor, masaüstünde bu oran %0,57. Bozuk bir mobil yerleşim, hem gösterimlerin çoğunu alan cihazı hem de daha yüksek oranı boşa harcar.

Bunun yerine ne yapmalı?

Mobili sonraya bırakmayın, önce mobil için tasarlayın. İşe yarayanlar şunlar:

• Her zaman ekranda kalan bir kapatma butonu; asla tarayıcı araç çubuğunun altında ya da uzun bir popup'ın ekrana sığmayan kısmında değil. WCAG 2.2 minimum hedef boyutunu 24×24 CSS pikseli olarak belirliyor (SC 2.5.8, AA düzeyi); 44×44 (SC 2.5.5, AAA düzeyi) başparmakla daha kolay tutturulur.
• Popup'ın dışına dokunmak da onu kapatsın. Tek çıkış yolu X olmasın.
• Sayfanın bir kısmını görünür bırakan bir boyut. Google, tam sayfa geçiş sayfaları yerine "ekranın yalnızca küçük bir bölümünü kaplayan banner'ları" öneriyor.
• Bir veya iki form alanı; her biri doğru klavyeyle (type="email", type="tel").
• Kampanya yayına girmeden önce gerçek bir telefonda önizleme.

Örnek tasarım: aynı teklif, tam ekran bir popup olarak ve sayfayı görünür bırakan bir alt panel (bottom sheet) olarak.

Popupsmart cihaz hedeflemesiyle mobili ve masaüstünü ayrı ayrı hedeflemenizi sağlar, ama yine de her kampanyayı yayınlamadan önce bir telefonda önizlemelisiniz. Bunu ekibiniz için kural haline getirin: Slack kanalına mobil ekran görüntüsü düşmeden hiçbir popup yayına girmesin. Mobil popup tasarımı rehberimizde bunu doğru yapan örnekler var.

İpucu: Klavye açıkken test edin. Ziyaretçi e-posta alanına dokunduğunda telefonun klavyesi ekranın yarısını kaplayabilir; gönder butonuna da kapatma kontrolüne de hâlâ ulaşılabilmeli.

Yaygın hata 3: Popup'ları içerikle aşırı doldurmak

Bu hata nasıl görünür?

Bir popup açıyorsunuz ve içinde bir başlık, üç paragraf metin, bir müşteri yorumu, bir görsel, bir geri sayım sayacı, iki CTA ve altı alanlı bir form var. Ziyaretçinin beyni kısa devre yapıyor. Hiçbirini okumuyor. Popup'ı kapatıyor.

UX'e ve dönüşümlere neden zarar verir?

Popup'lar doğası gereği birer kesintidir. Ziyaretçi etkileşime girmeye ya da kapatmaya karar vermeden önce değeri anlatmak için birkaç saniyeniz var: Hata 1'de gördüğümüz gibi, popup'ı kapatan ziyaretçilerin çoğu bunu popup göründükten sonraki 5 saniye içinde yapıyor. Bir popup'a çok fazla içerik doldurduğunuzda ziyaretçinin bilişsel kapasitesini aşırı yüklersiniz. Sonuç: karar felci. İki CTA'nızdan birini seçmek yerine kapatma butonunu seçerler.

Bunun yerine ne yapmalı?

"Bir popup, bir hedef" ilkesini izleyin. Her popup'ta şunlar olmalı:

• teklifi söyleyen tek bir başlık,
• bir iki satır destekleyici metin, fazlası değil,
• tek bir eylem: bir buton ya da bir veya iki alanlı bir form,
• görünür bir çıkış yolu: bir kapatma butonu ve isterseniz kibar bir "Hayır, teşekkürler".

Örnek tasarım: bir popup, bir hedef.

Anlatacak birden fazla şeyiniz varsa, farklı anlarda tetiklenen ayrı popup'lar kullanın. Bir bülten kayıt popup'ının webinarınızdan, ücretsiz denemenizden ve son blog yazınızdan da bahsetmesi gerekmez. Birini seçin.

Kıyaslamamız kalabalığı doğrudan ölçmüyor, bu yüzden bunu ölçülmüş bir artış değil, bir UX ilkesi olarak okuyun: eklenen her öğe, istediğiniz tek eylemle yarışır.

İpucu: Yayına almadan önce her popup'a bir "kısık göz testi" yapın: gözlerinizi kısın ve popup'a bakın. Teklifin ne olduğunu ve nereye tıklanacağını hemen anlayamıyorsanız popup fazla kalabalıktır.

Yaygın hata 4: Kötü zamanlama ve hedefleme

Bu hata nasıl görünür?

Bir ziyaretçi ödeme formunuzun yarısına gelmiş. Birden deneyimini puanlamasını isteyen bir popup beliriyor. Odağını kaybediyor, belki form ilerlemesini de kaybediyor ve artık satın almayı tamamen bırakacak kadar sinirli.

Örnek tasarım: ödemeyi bölen bir geri bildirim isteği.

UX'e ve dönüşümlere neden zarar verir?

NNGroup'a göre, modal olsun ya da olmasın, çoğu overlay yanlış zamanda görünüyor, kullanıcıları kritik görevlerin ortasında bölüyor, kötü bir dil kullanıyor ve kullanıcının yönünü kaybetmesine katkıda bulunuyor. Kötü zamanlanmış bir popup size o dönüşümü kaybettirir, ama zararın büyüğü sonra gelir: ziyaretçi sitenize güvenmemeyi öğrenir. Bir sonraki ziyaretlerinde, iyi zamanlanmış olanlar dahil her popup'ı hemen kapatmaya hazır olurlar.

Bunun yerine ne yapmalı?

Popup zamanlamanızı ziyaretçinin o an yaptığı işe göre ayarlayın. Uymanız gereken kurallar:

• Etkileşimden önce sormayın. Sayfa içeriği yüklenmeden ve ziyaretçi ona bakma fırsatı bulmadan popup göstermeyin.
• Kritik bir görevi asla bölmeyin. Ödeme formları, doldurulmakta olan bir form ve ödeme adımı yasak bölgedir; NN/g, kullanıcıları kritik görevler sırasında bölmeyi on sorunlu eğilim arasında sayıyor.
• Geri bildirimi görev sırasında değil, sonrasında isteyin. Puanlama isteğinin yeri, ziyaretçi puanlanmaya değer bir şey yaptıktan sonra onay sayfasıdır.
• Kendinizi tekrarlamayın. Zaten kaydolmuş kişilere popup göstermeyi bırakın ve diğer herkesin onu ne sıklıkla gördüğünü sınırlayın (veriler Hata 11'de).

Popup zamanlaması "kur ve unut" türünden bir karar değildir. Zamanlama kurallarınızı her ay gözden geçirin ve CTA performans verilerine göre ayarlayın.

İpucu: Popup o ana uyuyorsa insanlar hızlı yanıt verir: popup potansiyel müşterilerinin %61'i popup göründükten sonraki 30 saniye içinde gönderiliyor. Popup'ı yanıtlamak, ziyaretçinin yapmaya geldiği şeyi bırakması demekse, o ziyaretçi için yanlış andır.

Yaygın hata 5: A/B testini ihmal etmek

Bu hata nasıl görünür?

Bir popup tasarlıyor, yayınlıyor ve bir daha hiç dokunmuyorsunuz. Belki ekipte biri yeşili sevdiği için yeşil bir CTA butonu seçtiniz. Belki aklınıza ilk o geldiği için buton metni olarak "Hemen Kaydol"u seçtiniz. Elinizde veri yok, karşılaştırma yok ve popup'ınızın iyi mi kötü mü gittiğine dair hiçbir fikriniz yok.

UX'e ve dönüşümlere neden zarar verir?

A/B testi olmadan tahmin yürütüyorsunuz. Tahmin de pahalıdır. Üstelik önce yanlış şeyleri test etmek anlamına gelir. Yeşil buton iyi bir örnek: Popupsmart'ın 2026 kıyaslamasında buton rengi, koyu veya açık popup arka planı, aciliyet kelimeleri ve soru başlıkları dönüşümde ölçülebilir bir etki göstermiyor; veri, küçük etkileri dışlayamayacak kadar gürültülü. Butonun metni ise başka bir hikâye (Hata 8).

Test etmiyorsanız, popup'ın yayında kaldığı her gün alabileceğiniz potansiyel müşterileri kaçırıyorsunuz.

Bunun yerine ne yapmalı?

A/B testini ilk günden popup iş akışınıza katın. İşte basit bir çerçeve:

1. Önce teklifi test edin, sonra formu, sonra buton metnini.

2. Her testte tek şey değiştirin: farkı neyin yarattığını bilin.

3. Varyantları yeterince çalıştırın: ikisi de bolca gösterim toplayacak kadar uzun yayında kalsın; bir günde kazanan seçmeyin.

4. Gösterim başına lead'e bakın: kıyaslamamızın yaptığı gibi, yalnızca tıklamaya değil, gösterim başına potansiyel müşteriye (lead) göre karar verin.

Popupsmart, üçüncü taraf araçlara gerek kalmadan trafiği popup varyantları arasında bölebilmeniz için yerleşik A/B testi içerir (Advanced planı ve üzerinde). Popup'lar için A/B testi rehberimiz kurulumu adım adım anlatıyor.

İpucu: Tasarımınızı test etmeden önce teklifinizi test edin. Karşı konulmaz bir teklifi olan sıradan görünümlü bir popup, genellikle zayıf bir teklifi olan güzel bir popup'tan daha iyi sonuç verir; ekiplerin genellikle ilk test ettiği kozmetik değişiklikler de (renk, arka plan, aciliyet kelimeleri) verimizde ölçülebilir bir etki göstermedi.

Yaygın hata 6: Tüm kullanıcılara aynı popup'ı göstermek

Bu hata nasıl görünür?

İster ilk kez gelen bir blog okuru, ister fiyatlandırma sayfanızda tekrar gelen bir müşteri olsun, her ziyaretçi tam olarak aynı anda, tam olarak aynı mesajı taşıyan tam olarak aynı popup'ı görüyor.

UX'e ve dönüşümlere neden zarar verir?

Organik aramadan ilk kez gelen bir ziyaretçinin, bir e-posta kampanyasından dönen müşteriyle aynı mesaja ihtiyacı yoktur. Zaten abone olmuş birine "Blogumuza abone olun" popup'ı göstermek hem onun dikkatini hem de sizin güvenilirliğinizi boşa harcar. Herkese tek tip popup'lar kişisel gelmez; kişisel gelmeyen de alakasız gelir. Alakasız popup'lar kapatılır.

Bunun yerine ne yapmalı?

Popup'larınızı ziyaretçi davranışına ve özelliklerine göre segmentlere ayırın. Önerilerim ve kıyaslamamızın her biri için ölçtükleri şunlar:

• Yeni ve geri dönen ziyaretçiler. Yalnızca yeni ziyaretçileri hedefleyen popup'lar %1,13 dönüştürüyor; herkese gösterilenlerde bu oran %0,77. Geri dönen ziyaretçilere farklı bir mesaj gösterin ya da hiç göstermeyin.
• Sayfa türü. Teklifi, ziyaretçinin o sayfada yaptığı şeye göre ayarlayın (rakamlar aşağıda).
• Trafik kaynağı. E-posta veya SMS kampanyasından gelen ziyaretçiler popup'larda %1,81 dönüşüyor; organik aramadan gelenlerde bu oran %0,74. Sizi zaten tanıyorlar, tanıtımı atlayın.
• Mevcut aboneler ve müşteriler. Onları kayıt popup'larının dışında tutun.
• Cihaz. Mobil sürümü ayrı kurun (Hata 2).

Medyan kampanya, Popupsmart popup kıyaslaması 2026.

Bu tür bir segmentasyon eskiden özel kod ve çerez yönetimi gerektiriyordu. Artık Popupsmart'ın hedefleme kuralları, tüm bu koşulları tek satır JavaScript yazmadan görsel bir düzenleyicide ayarlamanızı sağlıyor.

İpucu: Üç hedefleme kuralıyla kurulan popup'lar %1,09 dönüştürüyor; hiç ya da bir kuralı olanlarda bu oran %0,71 (medyan kampanya). Bu bir korelasyon, çünkü dikkatli hedefleme yapan pazarlamacılar daha iyi teklifler de yazıyor olabilir; ama ben bunu, tasarıma dokunmadan önce kurulum zamanınızı popup'ı kimin gördüğüne harcamak için iyi bir neden olarak okuyorum.

Yaygın hata 7: Çok fazla bilgi istemek

Bu hata nasıl görünür?

Popup formunuz şunları istiyor: ad, soyad, e-posta, şirket adı, telefon numarası, unvan ve "Bizi nereden duydunuz?". Ziyaretçi yedi boş alana bakıp "Buna ayıracak vaktim yok" diye düşünüyor. Popup'ı kapatıyor.

UX'e ve dönüşümlere neden zarar verir?

Uzun formlar size potansiyel müşteri kaybettirir ve verimiz farkın nerede açıldığını gösteriyor. Bir veya iki alan isteyen popup'lar %0,88 ve %0,94 dönüştürüyor, üç alanda bu oran %0,56 (medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı). Yukarıdaki Hello BC popup'ı bunu iyi gösteriyor: alan sayısı arttıkça kullanıcı deneyimi kötüleşiyor.

Medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı.

Bunun yerine ne yapmalı?

Hunideki bu aşamada ihtiyacınız olan en az bilgiyi isteyin. Huninin üst kısmında potansiyel müşteri toplamak için (popup'ların çoğu bunu yapar) bu yalnızca e-postadır. İşte benim sıralamam:

1. Yalnızca e-posta. Liste büyütmek için varsayılan.

2. E-posta artı bir alan, yalnızca kullanacaksanız. E-postanın yanına isim alanı eklemenin verimizde güvenilir bir etkisi yok: genel olarak lehine görünen fark (yalnızca e-postaya karşı %1,25'e %0,88), formu nadiren değişen kampanyalarda tersine dönüyor (%0,74'e karşı %0,79).

3. SMS listesi için yalnızca telefon. E-posta yerine telefon numarası isteyen formlar en zayıf görünüyor (yalnızca e-postadaki %0,88'e karşı %0,46), ancak bu fark istatistiksel olarak güvenilir değil.

4. Üç veya daha fazla alan, yalnızca ziyaretçinin form beklediği yerlerde, örneğin bir fiyat teklifi isteğinde. Formu adımlara bölmek kanıtlanmış bir çözüm değil: çok adımlı formlar, iletişim bilgisi içermeyen 1. adım tıklamaları çıkarıldığında tek adımlı formlara göre ölçülebilir bir dönüşüm üstünlüğü göstermiyor.

Ek bilgileri her zaman daha sonra e-posta pazarlaması akışlarınızda kademeli profilleme ile toplayabilirsiniz. Önce e-postayı alın. Veriyi zamanla zenginleştirin.

İpucu: Her popup denetiminde "popup'ta 2'den fazla alan"ı bir uyarı işareti sayın: kıyaslamamızda fark tam orada açılıyor.

Yaygın hata 8: Çekici olmayan popup tasarımları kullanmak

Bu hata nasıl görünür?

Popup, sitenizden farklı bir yazı tipi kullanıyor. Renkler markanızla çatışıyor. Görsel düşük çözünürlüklü ya da alakasız. Yerleşim 2008'de yapılmış gibi görünüyor. Ziyaretçiler bu ayrıntıları bilinçli olarak incelemez, ama kopukluğu anında hisseder.

UX'e ve dönüşümlere neden zarar verir?

Çirkin bir popup düşük emek ve düşük güven sinyali verir. Popup'ınız spam gibi görünüyorsa ziyaretçiler teklifin de spam olduğunu varsayar. Tasarım kalitesi algılanan güvenilirliği doğrudan etkiler. Popup markanızın görsel kimliğiyle çatıştığında ziyaretçi bir şeylerin ters gittiğini sezer, güveni de azalır.

Ziyaretçi bir satın almayı uzun uzun tartıyorsa, ucuz görünen bir popup ürününüzü daha metniniz okunmadan saf dışı bırakabilir.

Bunun yerine ne yapmalı?

Popup'ınız üçüncü taraf bir reklam gibi değil, web sitenizin doğal bir uzantısı gibi hissettirmeli. Şu tasarım ilkelerini izleyin:

• Sitenizin yazı tiplerini ve marka renklerini kullanın.
• Tek bir görsel hiyerarşi koruyun: başlık, bir destekleyici satır, bir buton.
• Teklifi görselde gösterin ya da hiç görsel kullanmayın.
• Metni gün ışığında bir telefonda okunabilir tutun: yeterli kontrast, görsellere gömülü metin yok.
• Görünür bir kapatma butonu sunun ve bir "Hayır, teşekkürler" bağlantısı eklerseniz kibar yazın. Yukarıdaki kupon popup'ı, ayrılmak isteyen ziyaretçiyi "No thanks, I'm not ready to make my purchase right now" (Hayır, teşekkürler, şu anda satın almaya hazır değilim) bağlantısına tıklatıyor.
• Butonu birinci şahıs ağzından yazın. Aynı kupon popup'ı bunu doğru yapıyor: "Get My Deal" (Fırsatımı al).

Yukarıdaki Contently popup'ı iyi tasarlanmış bir popup'ın neye benzediğini gösteriyor: temiz yerleşim, markayla uyumlu renkler, net başlık ve tek bir CTA. Popupsmart'ın popup şablonları, markanıza uyacak şekilde dakikalar içinde özelleştirebileceğiniz, profesyonelce tasarlanmış başlangıç noktaları sunuyor. Yerleşim, yazı tipi ve renk konusunda daha fazlası için popup tasarımı en iyi uygulamaları rehberimize bakın.

İpucu: Verimizde buton rengi değil, buton metni öne çıktı: birinci şahıs butonlar ("Send my code", yani "Kodumu gönder") nötr ifadelere karşı %1,18'e %0,80 dönüştürüyor (İngilizce popup'lar, medyan kampanya). Ne kadar az seçenek sunarsanız karar o kadar kolaylaşır; belirli bir nedeniniz yoksa tek buton sunun.

Yaygın hata 9: İçeriği popup ile erişilemez hale getirmek

Bu hata nasıl görünür?

Bir ziyaretçi aradığı bir konuyu okumak için blog yazınıza geliyor. Daha ilk paragrafı geçmeden tam ekran bir overlay makalenin tamamını kaplıyor. Tek seçenek, e-postasını vermek ya da popup'ı kapatıp nerede kaldığını hatırlamaya çalışmak.

UX'e ve dönüşümlere neden zarar verir?

İçeriği engelleyen popup'lar, siteniz ile ziyaretçi arasındaki temel sözleşmeyi bozar: "Faydalı içerik sözü verdiğimiz için tıkladınız. İşte burada." O içeriği bir popup'ın arkasına kilitlediğinizde sözünüzden dönmüş olursunuz. Ziyaretçi kandırılmış hisseder ve kandırılmış ziyaretçiler dönüşmez. Hemen çıkarlar. NN/g'nin modal iletişim kutuları rehberi açık sözlü: "Mevcut kullanıcı akışıyla ilgisi olmayan, gerekli olmayan bilgiler için modal iletişim kutuları kullanmayın." İçeriği engelleyen bir overlay, Google'ın geçiş sayfaları rehberinin sitelerden kaçınmasını istediği şeyin ta kendisidir.

Bir popup içeriği ikinci bir yoldan da erişilemez hale getirebilir: klavye ya da ekran okuyucu kullanan ziyaretçiler için odağı yönetmeyen bir modal onları içine hapsedebilir ya da arkasında yönünü kaybetmiş halde bırakabilir.

Bunun yerine ne yapmalı?

İçeriğin okunmasına engel olmayan popup türleri kullanın:

• metnin yanında duran sidebar popup'lar ve kayan kutular (slide-in),
• ekranın üstünde ya da altında bir floating bar,
• sayfanın kenarında duran ve tam kampanyayı yalnızca ziyaretçi tıkladığında açan teaser popup'lar,
• makalenin içinde satır içi bir form.

Mutlaka bir tam ekran popup kullanmanız gerekiyorsa, onu çıkış niyeti hedeflemesiyle birleştirin. Böylece popup yalnızca ziyaretçi okumayı bitirdiğinde (ya da ayrılmak üzereyken) görünür. İçerik ziyaret boyunca erişilebilir kalır.

Biçim ne olursa olsun, fare olmadan da çalışmasını sağlayın. W3C'nin WAI-ARIA iletişim kutusu (modal) kalıbı, modal bir popup'ın nasıl davranması gerektiğini anlatıyor:

• Açıldığında odak popup'ın içindeki bir öğeye geçer.
• Tab ve Shift+Tab popup'ın kendi kontrolleri arasında gezinir ve popup'ın içinde başa döner.
• Escape tuşu onu kapatır.
• Kapandığında odak, onu açan öğeye ya da kendiliğinden açılan bir popup için ziyaretçinin bulunduğu yere geri döner.
• Tab sırası, W3C'nin tüm iletişim kutuları için "şiddetle önerilir" dediği görünür bir kapatma butonunu da içerir.

Modal olmayan biçimler için WCAG 2.2 daha yeni bir kural ekliyor: bir kontrol klavye odağı aldığında, sitenin kendi eklediği içerik tarafından tamamen gizlenmemelidir (SC 2.4.11 Focus Not Obscured, AA düzeyi). Klavye kullanıcısının Tab ile az önce geldiği bağlantıyı kaplayan yapışkan bir çubuk bu kurala takılır.

İpucu: Uzun makalelerde zamanlanmış bir overlay yerine teaser popup deneyin. Teklifi, yazının tek kelimesini kapatmadan bir tık uzakta tutar.

Yaygın hata 10: Çerez/GDPR bildirimleri için modal overlay kullanmak

Bu hata nasıl görünür?

Çerez onay bildiriminiz koyu arka planlı büyük bir modal overlay olarak görünüyor. Ziyaretçiyi sitenizde başka bir şey yapmadan önce karar vermeye zorluyor. Bazı uygulamalar çerez popup'ını başka bir pazarlama popup'ının üstüne bile yığıp ziyaretçiyi iki kez birden bölüyor.

UX'e ve dönüşümlere neden zarar verir?

Modal overlay'ler kullanıcılara popup'a benzeyen her şeyi okumadan kapatmayı öğretti. GDPR bildiriminiz bir reklamla aynı biçimi kullandığında ziyaretçiler onu refleksle kapatır. Bu da aslında onay vermemiş olabilecekleri anlamına gelir ve uyumluluk sorunları yaratır. NN/g, "GDPR ve çerez bildirimleri için modal overlay kullanmayı" on sorunlu popup eğilimi arasında sayıyor.

Avrupa Veri Koruma Kurulu'nun (EDPB) onay yönergeleri (05/2020) da burada net: ziyaretçi "Çerezleri kabul et"e tıklayana kadar içeriği engelleyen bir bildirim ona gerçek bir seçim sunmaz, bu yüzden onay özgürce verilmiş sayılmaz (39-41. paragraflar); bir sayfayı kaydırmak ya da parmakla kaydırmak da "hiçbir koşulda" onay sayılmaz (86. paragraf). Üstelik modal bir çerez bildirimi her ziyaretin ilk saniyelerine sürtünme ekler, yani ilk izlenimin oluştuğu saniyelere.

Bunun yerine ne yapmalı?

Uyumluluk mesajları için müdahaleci olmayan biçimler kullanın. NN/g'nin tavsiyesi, "sayfanın altına ya da yanına yerleştirilen modal olmayan overlay'leri tercih etmek":

• sayfayı kullanılabilir bırakan bir alt çubuk ya da köşe bildirimi; asla içeriği engelleyen bir modal değil,
• kabul etme yolu kadar kolay bulunan bir reddetme yolu,
• çerez ayarlarına bir bağlantı, çünkü EDPB ziyaretçilerin hangi amaçları kabul edeceklerini seçmekte özgür olmasını bekliyor (42. paragraf),
• onay bildirimi yanıtlanana kadar hiçbir pazarlama popup'ı göstermemek,
• "kaydırarak kabul etmiş olursunuz" türünden ifadelere yer vermemek.

Yukarıdaki köşe bildirimi temiz ve okunabilir, ziyaretçinin gezinmesini de engellemiyor. Ziyaretçilere gerçek bir seçim sunabilmesi için yine de bir şey eksik: Kabul et'in yanında bir reddetme yolu.

İpucu: Onay bildirimini ve pazarlama popup'larınızı birbirinden ayrı tutun. Önce çerez bildirimi yanıtlansın, sonra ilk kampanya görünsün; böylece ziyaretçi hiçbir zaman aynı anda iki overlay ile karşılaşmaz.

Yaygın hata 11: Aynı sayfada birden fazla popup göstermek

Bu hata nasıl görünür?

Bir ziyaretçi sayfanıza geliyor. Önce bir çerez onay modalı beliriyor. Kapatıyor. Sonra bir bülten popup'ı açılıyor. Onu da kapatıyor. Ardından yandan bir promosyon kayarak giriyor. Bu noktada popup kapatmaya içeriğinizi okumaktan daha çok zaman harcamış oluyor.

Örnek tasarım: ziyaretçinin okumaya başlamadan önce kapatması gereken üç overlay.

UX'e ve dönüşümlere neden zarar verir?

Ziyaretçinin kapatmak zorunda kaldığı her popup hayal kırıklığını büyütür. İkinci ya da üçüncü popup'ta artık ne içeriğinizi ne de tekliflerinizi okurlar. Kapatma butonu avına çıkmışlardır. NN/g, "art arda birden fazla popup göstermeyi" on sorunlu popup eğilimi arasında sayıyor. Birden fazla popup sayfaya görseller de ekleyebilir; bu da bir telefonun yüklemesi gereken ek ağırlık demek.

Bunun yerine ne yapmalı?

Katı bir "sayfa görüntüleme başına tek popup" kuralı uygulayın. Bunu şöyle hayata geçirebilirsiniz:

• Hangi kampanyaların hangi sayfaları hedeflediğinin haritasını çıkarın ve hiçbir sayfanın aynı anda ikisiyle eşleşmediğinden emin olun.
• Kampanyaları birbirinden ayrı tutmak için URL hariç tutma kuralları kullanın.
• Zaten kaydolmuş kişilere popup göstermeyi bırakın.
• Aynı ziyaretçinin bir kampanyayı ne sıklıkla gördüğünü sınırlayın.
• Çerez bildirimi yanıtlanana kadar pazarlama popup'larını bekletin (Hata 10).

Tekrarın ölçülebilir bir maliyeti var. Popupsmart'ın 2026 kıyaslamasında bir ziyaretçinin bir hafta içinde popup'ı gördüğü ilk iki sefer benzer oranlarda dönüşüyor (gösterimlerin %1,33'ü ve %1,22'si, toplu); üçüncü gösterimden itibaren dönüşüm düşüyor, altıncı gösterimden itibaren %0,41'e iniyor. Bu düşüşün bir kısmı seçilimden kaynaklanıyor olabilir, çünkü popup'ı altıncı kez gören biri ilk beş seferde yanıt vermemiş demektir; yine de bu, aynı popup'ı her sayfada göstermek yerine gösterim sayısını sınırlamak için iyi bir neden.

İpucu: Popupsmart'ın sayfa URL hedeflemesi, her kampanya için sayfaları dahil etmenizi ve hariç tutmanızı sağlar; iki kampanyanın aynı sayfada açılmasını önlemenin en basit yolu budur. Benim pratik kuralım: site genelinde 3'ten fazla aktif popup kampanyanız varsa hedefleme kurallarınızı hemen denetleyin. Büyük olasılıkla bazı sayfalar siz fark etmeden birden fazla popup gösteriyordur.

Popup hatalarının yerine geçecek en iyi uygulamalar

Tasarımcı Frank Chimero'nun dediği gibi: "İnsanları görmezden gelen tasarımı insanlar da görmezden gelir." Bu yazıdaki her çözüm o fikre dayanıyor. Aşağıdaki tablo, en iyi uygulamaları arkalarındaki kanıtla birlikte tek yerde topluyor:

Yöntem: Popupsmart rakamları Ocak 2024 ile Eylül 2026 arasındaki platform verimizden geliyor (28.674 kampanya, 499,6 milyon popup gösterimi); oranlar, ziyaretçilere değil popup gösterimlerine bölünmüş potansiyel müşteri ya da tıklamalardır ve "medyan kampanya", en az 1.000 gösterimi ve 14 aktif günü olan kampanyalar arasında ortadaki kampanya demektir (potansiyel müşteri oranlarında, e-posta veya telefon numarası isteyen 3.034 popup).

Bu en iyi uygulamaları kolayca hayata geçirmenizi sağlayan bir popup aracı arıyorsanız, Popupsmart bu rehberde ele alınan tüm hedefleme, zamanlama, A/B testi ve mobil optimizasyon özelliklerini içeriyor (A/B testi Advanced planında başlıyor). Ücretsiz bir hesapla başlayabilirsiniz.

Sıkça Sorulan Sorular

UX'te popover nedir?

Popover, ek bağlamsal bilgi göstermek için bir tetikleyici öğenin (buton ya da bağlantı gibi) yanında beliren küçük bir overlay öğesidir. Modal popup'ların aksine popover'lar sayfanın geri kalanını engellemez ve genellikle dışlarında herhangi bir yere tıklanarak kapatılır. Popover'lar tooltip'ler, açılır menüler ve kullanıcının akışını bozmayan bağlamsal yardım için iyi çalışır. Popup ve overlay tasarlarken popover'lar en az müdahaleci kalıp sayılır, çünkü tetikleyici öğelerine bağlı kalırlar ve arka plan overlay'i gerektirmezler.

Tooltip ile popup arasındaki fark nedir?

Tooltip'ler belirli bir öğenin yanında, üzerine gelindiğinde (mobilde dokunulduğunda) görünür ve kısa bir yardım metni içerir. İmleç uzaklaşınca kaybolurlar. Popup'lar ise zaman, kaydırma veya çıkış niyeti gibi tetikleyicilere göre görünen daha büyük overlay pencereleridir ve bilinçli olarak kapatılmaları gerekir (kapatma butonuna ya da arka plana tıklayarak). Temel fark amaçtadır: tooltip'ler bir arayüz öğesini açıklar, popup'lar ise teklif sunar, bilgi toplar ya da mesaj iletir. UX açısından tooltip'ler bilgilendirici ve pasiftir. Popup'lar tanıtıcı ve aktiftir.

Popup ile modal arasındaki fark nedir?

Popup, bir web sayfasının üzerinde zaman, kaydırma, tıklama ya da çıkış niyetiyle tetiklenerek beliren her türlü kutu veya penceredir. Modal ise ziyaretçi onu yanıtlayana ya da kapatana kadar arkasındaki sayfayı engelleyen bir popup'tır: W3C'nin ifadesiyle, modal bir iletişim kutusunun altındaki pencereler etkisizdir. Kayan kutular (slide-in), floating bar'lar ve teaser popup'lar modal değildir; bu yüzden ziyaretçi onlar ekrandayken okumaya devam edebilir. Her modal bir popup'tır; ama her popup bir modal değildir.

Mobilde popup'ın kapatma butonu neden görünmüyor?

Yaygın nedenler, kapatma simgesini görünür alanın dışına ya da tarayıcı araç çubuğunun altına iten, telefon ekranından uzun bir popup ve simgeyi gizleyen ya da küçülten bir mobil yerleşimdir. Mobilde her zaman görünür bir kapatma kontrolü gösterin: onu görünür ekranın içinde tutun, en az 24×24 CSS pikseli (WCAG 2.2 AA minimumu), ideal olarak 44×44 yapın, popup'ın dışına dokunmanın da onu kapatmasını sağlayın ve kampanyayı yayınlamadan önce gerçek bir telefonda önizleyin.

Popup'lar UX için kötü mü?

Kendi başlarına değil. Popup'lar; ziyaretçi sayfayı görmeden açıldıklarında, bir görevi böldüklerinde, çıkış yolunu gizlediklerinde ya da çok sık tekrarlandıklarında kötü UX'e dönüşür. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %40,5'i ziyaretçinin popup'ı kapatmasıyla bitiyor (tüm gösterimler toplu, Şubat 2025 – Eylül 2026); yine de e-posta veya telefon numarası isteyen medyan popup, gösterimlerinin %0,83'ünü potansiyel müşteriye dönüştürüyor. Yardımcı bir popup'ı can sıkıcı olandan ayıran şey zamanlama, hedefleme ve kolay bir çıkış yoludur.

Popup UX tasarımında en iyi uygulamalar nelerdir?

2026'da popup tasarımı ve UX için en iyi uygulamalar zamanlama, alaka ve ölçülülük üzerine kurulu. Popup'ları ziyaretçiler içeriğinizle ilgilendikten sonra gösterin (girişte değil). Tasarımı tek net CTA ve bir ya da iki form alanıyla sade tutun. Farklı ziyaretçilerin kendileriyle ilgili mesajlar görmesi için kitlenizi segmentlere ayırın. Popup'larınızı her zaman A/B testinden geçirin ve sayfa başına tek popup kuralını uygulayın. Her popup'ın mobil uyumlu olduğundan, görünür bir kapatma butonu bulunduğundan ve Google'ın müdahaleci geçiş sayfaları rehberine uyduğundan emin olun. En önemlisi, popup'ları bir değer alışverişi olarak görün: ziyaretçiden dikkatini istiyorsunuz, bu yüzden ona zamanına değecek bir şey sunmanız gerekir.

Mobil kullanıcılar için popup UX'ini nasıl iyileştirebilirim?

Mobil cihazlarda tam ekran modallar yerine alt çubuklara ya da kayan popup'lara geçerek başlayın. Form alanlarını bire indirin (yalnızca e-posta). Kapatma butonunu büyük ve kolay dokunulur yapın (en az 44×44 piksel; WCAG 2.2'nin minimumu 24×24 CSS pikseli). Yalnızca tarayıcı emülatörlerinde değil, gerçek telefonlarda test edin, çünkü görüntü alanı davranışı ve sanal klavyeler emülatörlerin kaçırdığı yerleşim sorunları yaratır. Popup'ı, çevresinde sayfanın bir kısmı görünür kalacak şekilde boyutlandırın. Popupsmart ile mobil ve masaüstü için ayrı hedefleme kuralları belirleyebilirsiniz; böylece kampanyaları çoğaltmadan her cihaz türünde farklı popup türleri çalıştırabilirsiniz.

Kaynaklar

Tüm dış kaynaklar 30 Eylül 2026'da okundu.

• Popupsmart 2026 popup kıyaslaması, Ocak 2024 - Eylül 2026 (yöntem, bu yazının başında bağlantısı verilen kıyaslama raporunda).
• NN/g, "Popups: 10 Problematic Trends and Alternatives", Anna Kaley, 30 Haziran 2019.
• NN/g, "Modal & Nonmodal Dialogs: When (& When Not) to Use Them", Therese Fessenden, 23 Nisan 2017.
• W3C WAI-ARIA Authoring Practices Guide, "Dialog (Modal) Pattern".
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, W3C Tavsiyesi, 12 Aralık 2024 sürümü.
• Google Search Central, "Avoid intrusive interstitials and dialogs", son güncelleme 10 Aralık 2025.
• Avrupa Veri Koruma Kurulu, 2016/679 sayılı Tüzük kapsamında onaya ilişkin 05/2020 sayılı Yönergeler, 4 Mayıs 2020'de kabul edildi.