Açılış Sayfaları   Kullanışlı Araçlar

Web Sitesi Açılır Pencere Tasarımında Yapılması ve Yapılmaması Gerekenler

9 minutes

Web Sitesi Açılır Pencere Tasarımında Yapılması ve Yapılmaması Gerekenler

Açılır pencereler tasarlamak ince buz üzerinde kaymaya benzer. Onları çok zorlayıcı yaparsanız, Google web sitenizi cezalandırabilir. Ayrıca, kullanıcılar agresif, spam içerikli açılır pencerelerden bıkmış durumdalar – bir satın alma işlemi için manipüle edilmekten hoşlanmıyorlar. Öte yandan, aşırı temkinli ve resmi olmaya karar verirseniz, yeni ziyaretçileriniz sıkılabilir ve teklifinizi tam olarak tanımadan ayrılabilir.

En iyi açılır pencere uygulamalarından ve saldırgan olmadan ikna edici olma sanatından bahsedelim. Size bazı göz alıcı açılır pencere tasarım örnekleri göstereceğiz ve bunları öne çıkaran unsurları tartışacağız. Ayrıca birkaç yaygın açılır pencere tasarım hatasını gözden geçirecek ve bunlardan nasıl kaçınacağınızı veya düzelteceğinizi öğreneceğiz.

Web sitesi açılır pencere tasarımının incelikleri

En iyi açılır pencere uygulamaları ile başlayalım. Tipik açılır pencereler nispeten küçüktür, bu nedenle ekran alanınızı akıllıca kullanmanız ve görsellerinize ve metninize daha fazla dikkat etmeniz gerekir.

Tutarlı tutun

Açılır pencereniz tek başına bir mesaj olduğu için göze batmak zorunda değildir. Bunu tasarımınızın bir parçası haline getirebilir ve ziyaretçilerinizin bunu markanızdan doğrudan kendilerine yönelik başka bir teklif olarak anında tanımasına yardımcı olabilirsiniz.

Sıkıcı açılış sayfaları görmekten sıkıldınız mı? Web Sitesi Karusel Tasarımında En İyi Uygulamalar ve Örnekler hakkında bilgi edinin.

Bir cilt bakım markası olan Cetaphil, açılır pencerelerinin rastgele üçüncü taraf bildirimleriyle karıştırılmayacağından ve göz ardı edilmeyeceğinden veya geçiştirilmeyeceğinden nasıl emin oluyor? Şirket, açılır pencereleri ve web sitesi sayfaları için aynı renk paletini kullanarak grafik bütünlüklerini sağlıyor.

Uyumlu bir açılır pencere tasarım örneği
Uyumlu bir açılır pencere tasarım örneği

Yine de bu açılır pencere, akıllı renk vurguları, tipografisi ve görüntüsü sayesinde arka plana karışmıyor. Davetkar ancak saldırgan değil ve kullanıcıyı bunaltmadan satın alma havasına sokmaya yetecek kadar bilgi aktarıyor.

Başlığınızı gösterinin yıldızı yapın

Başlığınız, kullanıcının dikkatini çekecek ve sizi dinlemesini sağlayacak ilk unsur olmalıdır. Küstah, kışkırtıcı, konuşkan veya esprili olabilirsiniz – sadece tıklama tuzağına düşmediğinizden emin olun.

Hedef kitlenizin ilgisini çekmek için Profesyonel Bir Başlangıç Web Sitesi Oluşturmak: Nihai Kılavuz’u okuyun!

Marka tutarlılığınızı korumak için, sosyal medya gönderileri, blog makaleleri veya bizim durumumuzda olduğu gibi açılır pencereler olsun, mesajlarınız için aşağı yukarı aynı ses tonunu kullandığınızdan emin olun.

Açılır pencere başlık örneği
Açılır pencere başlık örneği

Bu örnek, kendine has bir karakteri olan son derece temiz ancak etkili bir açılır pencere içeriyor. Akılda kalıcı başlık çok fazla şey anlatmıyor – kullanıcıyı kışkırtıyor ve daha fazla okumasını sağlıyor ve açılır pencere metin geri kalanını açıklıyor, hepsi de hoş ve samimi bir tonda yazılmış. Uzun süreli müşteri ilişkileri kurmak ve markanızın insani yönünü göstermek istiyorsanız benimsemeniz gereken harika bir yaklaşımdır.

Karışıma biraz zaman hassasiyeti veya kıtlık ekleyin

Açılır pencerelerinizi sezonluk bir teklifi, sınırlı sayıda üretilen bir ürünü veya kısa süreli bir indirimi tanıtmak için kullanarak atlanamaz hale getirin. Web sitenizin ziyaretçileri, ürünleriniz tükenmeden önce onları keşfetmek için yalnızca çok fazla zamanları olduğunu öğrendiklerinde hızlı hareket edeceklerdir. Bu arada, zaman kısıtlamalarınız hakkında yalan söylememelisiniz – bu hedef kitlenizin güvenini sarsacaktır. Çekici ve gerçekçi bir sınırlı süreli teklif sunduğunuzdan emin olun.

Zamana duyarlı açılır pencere örneği
Zamana duyarlı açılır pencere örneği

Bu açılır pencere okuyucunun dikkatini çekmek ve teklifin özünü aktarmak konusunda harika bir iş çıkarıyor. Ancak, zaman sınırına daha güçlü bir görsel vurgu yaparak daha da geliştirilebilir. Potansiyel müşterilerinizin teklifinizin süresinin dolmasını beklememelerini sağlamak için kontrast bir renk veya daha belirgin bir yazı karakteri kullanarak bunu başarabilirsiniz.

Stok görseller yerine özel illüstrasyonlar kullanın

Açılır pencere metniniz üzerinde ne kadar uzun süredir çalışıyor olursanız olun, onu ücretsiz bir fotoğraf kütüphanesinden alınmış genel, klişe bir görselle eşleştiriyorsanız, kullanıcılarınızın dikkatini çekme veya ilgisini çekme şansınızı azaltırsınız. Aynı telifsiz stok görseller dünya çapında yüz binlerce işletme tarafından kullanılmaktadır, bu nedenle mümkünse bunlardan kaçınmalısınız. Bunun yerine, markanıza ve estetiğine uygun benzersiz görseller arayın.

Gülümseyen insanların doğal olmayan fotoğrafları yerine, açılır pencerenizı türünün tek örneği haline getirmek için elle çizilmiş veya stilize edilmiş görseller kullanmayı deneyin.

Açılır pencereler için benzersiz illüstrasyonlar
Açılır pencereler için benzersiz illüstrasyonlar

Bu açılır pencere oldukça sıra dışı çünkü tipik bir stok fotoğraf yerine sıcacık bir illüstrasyon içeriyor. Şirketin kendisi kahve satıyor ve bu açılır pencere tasarımı da bunu yansıtıyor. Bu mesaj, ticari bir tekliften çok dostça bir tavsiye gibi hissettiriyor. Bu açılır pencereyi daha da iyi hale getirebilecek birkaç şey var: daha cesur bir başlık ve daha güçlü bir harekete geçirici mesaj.

Kullanıcılarınıza bir seçenek sunun

Öfkeli tıklamalardan kaçının ve ilk kez gelen ziyaretçilerinizin açılır pencerenizi anında kapatabildiğinden ve ana sayfanıza atlayabildiğinden emin olun çünkü aslında bunun için gelmişlerdir. Kapat düğmenizi görsel olarak bulmaları her zaman mümkün olmayabilir, bu nedenle onlara “Hayır, teşekkürler” veya “Belki sonra” düğmesi gibi bir alternatif sunmak isteyebilirsiniz.

İki seçenekli bir açılır pencere
İki seçenekli bir açılır pencere

Kullanıcılarınızın alakasız buldukları içerikleri atlamalarına yardımcı olarak, onları önemsediğinizi ve sorunsuz, olumlu bir alışveriş deneyimi yaşamalarını istediğinizi gösterirsiniz. Tıpkı bu örnekte olduğu gibi, hedef kitlenize karşı şeffaf ve dürüst olmak için açılır abonelik formunuza gizlilik politikanızın bir bağlantısını da ekleyebilirsiniz.

Daha kişisel ve duygusal hale getirin

Başka bir yol seçebilir ve özel illüstrasyonlar yerine gerçek fotoğraflar kullanabilirsiniz – sadece izleyicilerinizin sizin veya ekibinizin kişiliğini görebileceği en doğal görünümlü çekimleri seçtiğinizden emin olun. açılır pencere mesajlarınızın kalabalıktan sıyrılmasına ve hedef kitlenizde duygusal bir tepkiyi tetiklemesine yardımcı olacaktır.

Stok görsel yerine gerçek fotoğraf içeren bir açılır pencere
Stok görsel yerine gerçek fotoğraf içeren bir açılır pencere

Elinize iyi bir görsel geçtiğinde metniniz üzerinde çok uzun süre çalışmanıza bile gerek kalmayacaktır. Çekici ve özgün bir fotoğraf, ziyaretçilerinize markanızın ne hakkında olduğunu ve arkasında kimin durduğunu sözsüz olarak anlatarak işin yarısını sizin yerinize yapacaktır.

Çok ciddiye almayın

Bir açılır pencere sıkıcı, resmi, metin ağırlıklı bir mesaj olabilir. Ya da kullanıcılarınız için küçük bir zevk, bir Paskalya yumurtası olabilir – bu size kalmış. Abonelik formlarınızı renklendirmek ve ziyaretçilerinizi gülümsetmek için kelime oyunları, memler, GIF’ler veya emojiler kullanabilirsiniz. Nasıl yapıldığını görmek için bu örneğe bir göz atın.

Gayriresmi, muzip bir abonelik formu
Gayriresmi, muzip bir abonelik formu

Ana ses tonunuz nispeten resmi olsa bile, müşterilerinizin marka kişiliğinizin daha rahat bir versiyonuna nasıl tepki verdiğini denemek ve görmek için açılır pencereler gibi daha küçük formatlar kullanabilirsiniz. Ayrıca, bir form doldurmak gibi sıkıcı bir görevi yerine getirmeleri için onları teşvik edebilir.

Değer sunun

Web sitenizin ziyaretçilerinden kişisel bilgilerini sizinle paylaşmalarını istemeden önce, onlara bunu neden yapmaları gerektiğine dair sağlam bir neden sunun. Açılır pencerenizin spam olarak algılanmasını önlemenin tek yolu, gerçek bir değer vaat ettiğinden emin olmaktır. Müşterileriniz formunuzu doldurmaktan nasıl fayda sağlayacak? E-posta adreslerini veya telefon numaralarını size verdikten sonra ne bekleyebilirler? Özel teklifinizi neden kontrol etmeliler?

Kullanıcılara gerçek değer sunan açılır pencereler
Kullanıcılara gerçek değer sunan açılır pencereler

Uzmanlığınıza güçlü bir vurgu yapın ve ilk kez gelen ziyaretçilerinizin emin ellerde olduklarını bilmelerini sağlayın. Açılır pencerelerinizi benzersiz satış teklifinizi vurgulayacak şekilde tasarlayın. Bu örnek, akıllı, keskin başlıklar ve gözden kaçması imkansız CTA düğmeleri kullanarak bunun nasıl yapılacağını göstermektedir.

Altbilgi bağlantılarını kullanmanın açılır pencere tasarımının en iyi uygulamalarından biri olmasının bir nedeni vardır. Gizlilik politikanızı açıklamak dönüşüm oranınızı artırmanıza yardımcı olabilir çünkü ziyaretçileriniz verilerini satmayacağınızı veya kötüye kullanmayacağınızı bilerek içlerini rahat tutacaklardır.

Kullanıcının ekran alanına saygı gösterin

Açılır pencereleri tasarlarken yaratıcılığınızı serbest bırakın, ancak kullanıcı deneyimini de unutmayın. Alan kullanımınızı gerekçelendirin ve sunduğunuz tek şey mütevazı bir indirimse mesajlarınızın tüm ekranı kaplamasına izin vermeyin. Mesajınızın mutlak bir göz alıcı olmasını istiyorsanız, parlak renkler veya alışılmadık formlar kullanmayı deneyin.

BarkBox’ın bu açılır pencere tasarım örneğine bakın. Mesaj küçük ama web sitesinin renk düzeniyle hiç çelişmeyen neşeli sarı arka planı nedeniyle gözden kaçması zor. Aynı sarı tonunun sayfa boyunca metinleri vurgulamak için de kullanıldığını görebiliyoruz.

Küçük boyutlu bir açılır pencere örneği
Küçük boyutlu bir açılır pencere örneği

CTA düğmesi, kullanıcılardan oyuncak ve ödül maması içeren özelleştirilmiş bir kutu almak için evcil hayvanlarını tarif etmelerinin istendiği adım adım ilerleyen zarif bir forma yönlendiriyor. Bu kadar büyük bir anketi bir açılır pencereye sıkıştırma girişimi bir UX felaketine dönüşebilirdi – küçük boyutlu bir mesaj daha iyi bir seçenekti.

“Sıkıcı” açılır pencereleri bile samimi ve sohbet havasında tutun

Yasal açılır pencereler, önemli feragatnameler içerdikleri ve web sitesinin içeriğini korudukları için tüm ekranı kaplama hakkına sahiptir. Aslında, kullanıcının tüm dikkatini çekmek için tam ekran olmalıdırlar.

Aynı zamanda, göz korkutucu olmasalar da genellikle gereksiz derecede resmidirler. Sakari Brewery’nin örneğini takip edebilir ve web sitenizin açılır pencere tasarımına ve metnine biraz kişilik katabilirsiniz.

Yasal sorumluluk reddi içeren bir açılır pencere
Yasal sorumluluk reddi içeren bir açılır pencere

Bu hafif açılır pencere kaplaması olumlu bir izlenim bırakıyor ve web sitesinin kendisine zarif bir giriş görevi görüyor. Kullanıcının yaşını tam olarak yazmasını sağlamak yerine, açılır pencere basitçe yaşlarının ülkelerinde yasal olarak alkol tüketmelerine izin verip vermediğini soruyor. Şirketin gönderilen bilgilerin doğru olup olmadığını kanıtlamasının bir yolu olmadığından, kullanıcılarını anlamsız formlar ve alanlarla sıkmamayı tercih ediyorlar.

Web sitesi açılır pencere tasarımında yapılmaması gerekenler

Bize nelerden kaçınılabileceğini veya nelerin farklı tasarlanabileceğini öğreten açılır pencere tasarım örneklerine geçelim. Açılır pencere mesajlarını abartmamak önemlidir, ancak bunları anlamlı ve bilgilendirici tutmak da çok önemlidir.

Anlamsız açılır pencereler yapmayın

Sadece ana sayfanızı daha canlı ve etkileşimli hale getirmek için bir açılır pencere oluşturmak cazip gelebilir, ancak her zaman son kullanıcıyı aklınızda tutmalısınız. Açılır pencereniz belirli bir amaca hizmet edecek ve ziyaretçilerinizin satın alma deneyimini geliştirecek mi? Yoksa sadece onları rahatsız mı edecek veya kafalarını mı karıştıracak? Yarattığınız her küçük dikkat dağıtıcı unsurun gerekçelendirildiğinden emin olun.

Anlamsız açılır pencereler eyleme dönüştürülemez. Ya çok soyutturlar ya da çok açıktırlar – bazen bu örnekte olduğu gibi bir CTA düğmesi bile yoktur.

Eylem çağrısı içermeyen bir açılır mesaj
Eylem çağrısı içermeyen bir açılır mesaj

Kullanıcılar, eylemsiz açılır pencerelerle karşılaştıklarında genellikle ne yapacaklarını bilemezler. İyi fırsatları kaçırmak istemezler, ancak her küçük bildirimi deşifre etmek için zaman harcamaya da hazır değillerdir. Sürtünmesiz bir müşteri yolculuğu oluşturmak istiyorsanız, bilgilendirici olmayan açılır pencerelerden her ne pahasına olursa olsun kaçınmak mantıklıdır.

Açılır pencerenizi aşırı basitleştirmeyin

Aşırı yüklü, yoğun açılır pencere tasarımı zararlı olabilir, ancak bu her şeyi çıplak kemiklere kadar çıkarmanız gerektiği anlamına gelmez. Çok ileri giderseniz, bunun gibi bir şeyle karşılaşabilirsiniz – tamamlanmamış, hatta profesyonelce görünmeyen bir açılır pencere.

Aşırı basitleştirilmiş bir açılır pencere örneği
Aşırı basitleştirilmiş bir açılır pencere örneği

Açılır pencere tasarımınızın temel unsurlarını ait oldukları yerde tutun. Bir CTA düğmesi, bir başlık ve destekleyici bir metin, ilgi çekici bir mesaj oluşturmada büyük rol oynar.

Ziyaretçilerinizi size verilerini vermeye zorlamayın

Web sitenizdeki açılır formlar müdahaleci veya zorunlu olmamalıdır – eğer öyleyse, ne müşterileriniz ne de Google bundan hoşlanmayacaktır. Yeni ziyaretçilerinize nedenini açıklamadan agresif bir şekilde kayıt olmalarını önerirseniz, büyük olasılıkla siteyi terk edeceklerdir.

Zorlayıcı bir açılır pencere örneği
Zorlayıcı bir açılır pencere örneği

Kullanıcılarınızı satın almaya veya aboneliğe yönlendirmek yerine, onlara başka yerde bulamayacakları değerli içerikler veya harika fırsatlar sunun. Kısacası, web sitenizdeki açılır pencerenin bir korkuluk değil, potansiyel müşteri mıknatısı olduğundan emin olun.

Okunabilirlik ve erişilebilirlikten ödün vermeyin

Tutarlı olmanın ve açılır pencereleri genel marka yönergelerinize uygun şekilde tasarlamanın neden önemli olduğundan bahsetmiştik. Ancak, bu konuda aşırıya kaçmaya ve estetiği işlevselliğin önüne geçirmeye gerek yok – açılır pencere tasarımınız hem güzel hem de erişilebilir olabilir.

İşte görsel olarak hoş ancak çok okunaklı olmayan bir açılır pencere tasarım örneği.

Düşük kontrastlı bir açılır pencere metni örneği
Düşük kontrastlı bir açılır pencere metni örneği

Metin çok küçük ve yeterince kontrastlı değil – şık görünüyor ama okunması zor. Gizlilik politikası bağlantısı zar zor görülebiliyor ve CTA düğmesi kullanıcı çerezleri kabul edene kadar “kilitli”. Açılır pencerelerde biraz daha açık ve anlaşılır olmanız gerekir. Ziyaretçileriniz web sitenizle yeni tanışıyor ve onlara ince yazıları okumak için zaman ve enerji harcatmak haksızlık olur.

Bunu yapmak için iyi bir nedeniniz yoksa tam sayfaya geçmeyin

Tam ekran açılır pencereler web sitenizin ziyaretçilerinin kafasını karıştırabilir ve yanlış sayfaya geldiklerini düşünmelerine neden olabilir. Format nedeniyle, “Kapat” düğmesi genellikle daha uzakta ve bulunması daha zor hale gelir, bu da bazı kullanıcıları rahatsız edebilir. Neredeyse her zaman yağları kesebilir ve tüm ekranı kaplamaktan kaçınabilirsiniz.

Örneğin, değer dolu bülteniniz gibi göstermeniz gereken önemli bir şey varsa sayfa kaplaması formatını seçmek mantıklıdır.

Tam ekran açılır pencere örneği
Tam ekran açılır pencere örneği

Bu örnekte, sayfa kaplama biçimi, kullanıcının kendisine ne sunulduğuna dair bir fikir edinmesini sağlıyor. Haber bülteninin abone olmaya değer olduğunu görebildikleri için e-posta adreslerini paylaşma konusunda endişe duymayacaklardır. Alternatif olarak, bir video açılır penceresi kullanabilirsiniz, ancak yüksek kaliteli bir video oluşturmak çok daha fazla çaba gerektirir.

Web siteniz için dakikalar içinde enfes açılır pencereler tasarlayın

SendPulse ile 10 dakikadan kısa bir sürede kişiselleştirilmiş açılır pencereleri oluşturabilir ve kurabilirsiniz. Önceden tasarlanmış şablonlardan birini seçin ve kolay sürükle-bırak oluşturucumuzu kullanarak istediğiniz gibi özelleştirin. Ardından, mesajınızın doğru zamanda görünmesini garanti etmek için görüntüleme koşullarını tanımlayın.

Platformumuz, dönüşüm oranınızı artırmak ve pasif ziyaretçileri sadık müşterilere dönüştürmek için duyarlı, Genel Veri Koruma Yönetmeliği (GDPR) uyumlu açılır formlar oluşturmanıza olanak tanır. Sıradan, yerinde olmayan açılır pencereleri unutun – kullanıcılarınızın en alakalı mesajları gördüğünden emin olmak için sayfanızın amacına göre farklı senaryolar ve CTA’lar çalıştırabilirsiniz.

SendPulse size pazarlama ve satış otomasyonu için eksiksiz bir araç seti sunar. Açılır pencereleri ve sohbet botlarını kullanarak potansiyel müşteriler oluşturun, e-posta kampanyaları ile onları besleyin ve CRM’imizde takip edin. Deneyin!

Yayın tarihi:

21 Nisan 2023

Elena Timofeeva

Good writing makes my heart beat faster. So does a good conversion rate. In my free time, I obsessively learn...

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Ortalama Değerlendirme: 4/5
Toplam Oy Sayısı: 41

Paylaş:

Facebook Twitter