Etkileyici Bir Popup Tasarlamak için Uygulaması Kolay 5 İpucu (24 Örnekle)

Pop-up'lar ve diğer yerinde mesajlar genellikle müşterilerinizle iletişim kurmanız gereken en seçkin "perakende alanı"nda, yani web sitenizde görünür. Ürünlerinizle en çok ilgilenen kişilere görünürler - bu yüzden tıkladılar, değil mi? Bu da, sizden gelen harika tekliflere en açık oldukları anlamına gelir.

Yine de birçok pazarlamacı, inanılmaz derecede basit, yaratıcı olmayan ve hatta düpedüz çirkin olan pop-up'lar sunar.

Neden? Niye?

Çünkü açılır pencereler güçlüdür ve sonuç alırlar… onları tasarlamak için çok çaba sarf etmeseniz bile. %1'den daha düşük tıklama oranlarına alışmış pazarlamacılar, pop-up'ları için genellikle %3-5'lik bir dönüşüm oranından memnundur. "Yeterince iyi" görünüyor.

Gerçekte, bu pazarlamacılar bir altın madeni üzerinde oturuyorlar - henüz bunun farkında değiller. Birkaç basit değişiklikle, açılır pencerelerinin dönüşüm oranlarını ikiye veya üçe katlayabilirler. Biraz daha fazla çalışmayla (mesajı anahtar segmentler için kişiselleştirmek gibi), %30-50 dönüşüm oranlarıyla pop-up'lar oluşturabilirler.

Bu onların işleri için ne kadar fark yaratırdı?

Tasarım, açılır pencerelerle süper güçlüdür ve iyi tasarlanmış, güzel bir açılır pencereyi bir araya getirmek, bir pazarlamacı olarak en yüksek yatırım getirisi etkinliğiniz olabilir. Şimdi sadece birkaç dakikanızı ayırın ve size aylar veya yıllar boyunca para kazandıracak bir varlığa sahip olabilirsiniz!

CTR'de %5'lik bir artış için Facebook reklamlarını mikro optimize etmek için saatlerce harcamak yerine, bu sürenin bir kısmını site mesajlarınızı optimize etmeye harcamanızı öneririm.

Pop-up'larınızın tasarımından en iyi şekilde nasıl yararlanabileceğinizi görelim!

Her şeyden önce: bir açılır pencerenin tasarımı neden önemli? İçeriğin tasarımın önüne geçtiği basit bir mesaj değil mi?

Açılır pencerenizin mesajı ve değer önerisi çok önemli olsa da, harika tasarım herhangi bir mesajın etkinliğini gerçekten artırabilir. Pop-up'lar genellikle birdenbire ortaya çıkar ve ziyaretçiyi etkilemek için yalnızca birkaç saniyeleri vardır. Ve dikkat gerektiren dünyamızda, bir web sitesi ziyaretçisini etkilemek kolay bir iş değildir.

Aşağıdaki gibi güzel, benzersiz bir açılır pencereye sahip olmak, %50'ye varan dönüşüm oranları sağlayabilir! Bu arada, aynı teklifi (normal %10 indirim) sıkıcı, salt metin bir şekilde sunmak, %10'luk bir dönüşüm oranı elde etmek için şanslı olacaktır. Bu %400'lük bir fark!

Büyük markalar bile bazen yanlış anlıyor.

Sadece Mailchimp'ten bu açılır pencereye bakın. Büyük olasılıkla %2'nin altında dönüşüm sağlıyor; bu, ziyaretçilerinin %98'inin gereksiz yere kesintiye uğradığı (ve dolayısıyla rahatsız olduğu) anlamına geliyor.

Artık açılır pencere tasarımının neden önemli olduğunu bildiğimize ve kopyalamak istemeyeceğiniz kötü bir açılır pencere tasarımı örneğini gördüğümüze göre, iyi şeylere geçelim: etkileyici açılır pencerelerin nasıl tasarlanacağı ve ilham için bazı mükemmel örnekler.

Bazı çevrimiçi pazarlama mitlerinin aksine, diğerlerinden daha üstün olan tek bir renk kombinasyonu yoktur.

Bununla birlikte, renkleri seçerken iki önemli faktör vardır:

• En önemli öğelerinize karşıtlık oluşturabilmeli (ve dolayısıyla odaklanabilmelisiniz)
• Renk seçimleriniz markanıza uygun olmalı ve tutarlı, sorunsuz bir deneyim yaratmalıdır.

Bu ipuçlarının her ikisini de sonraki bölümlerde daha ayrıntılı olarak tartışacağız.

Ancak temel bir kural olarak, beyaz bir arka plan seçebilir ve markanızın ana rengini başlık ve CTA buton rengi olarak kullanabilirsiniz. Bu çok klasik, düşük riskli bir çözümdür.

Enro'dan bu örneğe göz atın:

Arka plan olarak markanızın renklerini kullanmayı tercih ederseniz, Mented Cosmetics güzel bir örnek sunuyor. Sadece marka renkleriyle eşleşmekle kalmaz, aynı zamanda şirket değerlerini daha da vurgular:

Koyu arka plana sahip ters renk paletlerini de kullanabilirsiniz. Bu durumlarda yazı tipleri çoğunlukla beyaz veya açık gri olmalıdır. Daha doygun renkler kullanmak, mesajlarınızın okunabilirliğini ortadan kaldırır.

“Az çoktur”— pop-up'lar söz konusu olduğunda fazlasıyla doğru olan bir söz.

Dikkat çekmek ve ilgi yaratmak için çok sınırlı bir zamanınız olduğundan, mesajınız ve tasarımınız çok basit olmalıdır.

Açılır pencerenizdeki her kelimeye ve öğeye karşı acımasız olmaya çalışın ve her birinin kesinlikle gerekli olduğundan emin olun.

Yeterince basit olduğunu düşündüğünüzde, bir ana değer önerisi ve bir CTA'dan başka hiçbir şey kalmayana kadar daha da basit olmaya çalışın.

Merak ediyor olabilirsiniz: Bu, kendimizi aşağıdaki gibi siyah beyaz salt metin açılır pencereleriyle sınırlamamız gerektiği anlamına mı geliyor?

Cevap kocaman bir HAYIR!

Çoğu kişi, açılır pencereyi okumaya veya basitçe kapatmaya karar vermeden önce, açılır pencere içeriğinizin yalnızca birkaç kelimesini okur. Bu, mesajınızın tasarımının (renkler, resimler, estetik vb.), mesajınızın etkinliği üzerinde en az başlığınızla aynı miktarda etkiye sahip olacağı anlamına gelir.

Tabii ki, mesajınızın özü belirli ürünlere odaklanıyorsa, o zaman (bir kategori açılış sayfasında olduğu gibi), odağın ürünlerde kalmasına izin vermek için mesajınızın geri kalanını mümkün olduğunca basit tutmanız gerekir.

Burberry'nin bunu nasıl yaptığına aşağıdan göz atın: Kusursuz kontrastlı, çıplak, süper basit bir mesaj kullanıyorlar ve yakın zamanda görüntülenen üç ürüne odaklanıyorlar.

Yerinde mesajlarınız bir boşlukta değil, web sitenizin bir parçası olarak, bir yer paylaşımında görünseler bile görünür. Bu nedenle, açılır pencerelerinizin markanızın temasıyla kusursuz bir şekilde uyum sağlaması önemlidir.

Bu, web sitenizde kullanılanlara benzer öğeler (yazı tipleri, resimler vb.) seçmeniz gerektiği anlamına gelir.

ClickUp, marka stil kılavuzuna mükemmel şekilde uyan basit ama etkili açılır pencerelerin nasıl oluşturulacağının harika bir örneğidir:

Ramp'ın yaptığı gibi, markanızın yazı tiplerini ve logonuzu kullanarak pop-up'larınızı marka üzerinde kolayca tutabilirsiniz:

Diğer markaları tanıttığınız B2C dünyasında olsanız bile, Sephora'nın Gucci ile ilgili bu açılır pencerede yaptığı gibi, her iki markadan da öğeler çekebilirsiniz:

Pop-up'larınızın markanızın temasıyla uyumlu olması önemlidir, evet. Ancak, öne çıkmaları ve izleyicinin dikkatini çekmeleri de çok önemlidir.

Çok fazla içeriğiniz varsa (örneğin, teklifinize dahil olan şeylerin madde imli bir listesi), başlık kopyasında değer teklifinizin açık olduğundan emin olun.

Ayrıca, CTA renginin açılır pencerenin geri kalanından farklı olduğundan ve düğmenin büyük ve okunaklı olduğundan emin olun. Başlık ve CTA genellikle açılır pencerelerinizin en önemli iki öğesidir, bu nedenle yeterli kontrasta sahip olduklarından emin olun.

Örneğin, CTA düğmeniz için parlak, zıt bir renk seçebilirsiniz. Bu, onu çok daha dikkat çekici hale getirecek ve ziyaretçilerinizin tıklama olasılığı daha yüksek olacaktır.

Açılır pencereniz çoğunlukla siyahsa, harekete geçirici mesaj düğmeniz için turuncu veya sıcak pembe kullanmayı düşünebilirsiniz.

Farklı yazı tipi boyutları kullanmak, hedef kitlenizin dikkatini açılır pencerenizin özüne odaklamanın en kolay yoludur. Aynı açılır pencerede birden çok türde metin olsa bile, Komily'nin yaptığı gibi, mesajınızın ana değerine vurgu yapmak için yazı tipi boyutlarını, renkleri ve diğer kontrast artırıcı teknikleri kullanabilirsiniz:

Karanlık bir web siteniz varsa, genellikle ışık kutusu renginizle oynayarak biraz kontrast oluşturmanız gerekir (biliyorsunuz, açılır pencerelerinizin etrafındaki o gri, yarı saydam alan).

Örneğin, açılır pencerenizin rengi koyuysa, görüntülenirken daha açık bir kaplama kullanabilirsiniz.

Veya açılır pencerenizin ekranın %100'ünü kaplayan tam ekran sürümünü kullanabilirsiniz; bu, aşağıdaki örnekte olduğu gibi açılır pencerenizin görünür olmasını sağlar:

Birden fazla düğmeniz varsa, ana CTA'yı vurgulamak için farklı düğme renkleri kullanabilirsiniz; bu, kullanıcılara hangi seçeneğin onlar için daha iyi bir seçim olduğunu ince bir şekilde belirtir:

Başka bir strateji, harekete geçirici mesaj düğmesine işaret eden oklar gibi görsel öğeler eklemeyi içerir. Aşağıdaki açılır pencerede olduğu gibi, harekete geçirici mesajınızı belirtmek için parlak, elle çizilmiş yönlü nesneler kullanabilirsiniz:

Pop-up tasarımıyla teklifinizi vurgulamanın bir başka yolu da alışılmadık şablon şekilleri kullanmaktır. Bunlar, insanların tüm web'de gördüğü genel dikdörtgen açılır pencerelerin düzenini bozar ve benzersiz oldukları için ilgi çeker.

Çok fazla öğeye vurgu yapmamaya dikkat edin. Aşağıdaki gibi bir anket açılır pencereniz varsa, düğmeleriniz için ikincil, daha az agresif bir düğme stili kullandığınızdan emin olun:

Atasözü dediği gibi, "bir resim bin kelimeye bedeldir." Bu kesinlikle pop-up'lar için geçerlidir!

Aslında, insan beyni görüntüleri metinden 60.000 kat daha hızlı işler ve beyne iletilen bilgilerin %90'ı görseldir.

Bu nedenle, bazı harika görseller, yerinde mesajlaşmanızın etkinliğini büyük ölçüde artırabilir. Amaç, bu açılır pencerenin yaptığı gibi, yazılı mesajı güçlendirmek için doğru görselleri seçmektir:

Açılır pencereniz için yüksek kaliteli görüntüler bulmanız gerekir. BlendJet'in yaptığı gibi, stok görseller yerine ürünlerinizin gerçek fotoğraflarını kullanmak en iyisidir:

En iyi yaklaşım, ürün/marka resimlerinizi gözden geçirmek ve mesajınızla uyumlu, şu Oodie açılır penceresi gibi alakalı bir resim seçmektir:

Sezonluk indirimler yapıyorsanız, mesajlarınızı sezonlarla güncellemek iyi bir uygulamadır. Alakalı ve zamanında olmak, bu tekliflerin zamanla sınırlı olduğu hissini yaratır ve kaçırma (ve dolayısıyla dönüşümleri) korkusunu artırır:

Sunacak özel bir şeyiniz olmasa bile, yalnızca mesajlarınızı mevcut sezona uyacak şekilde güncellemek, tıpkı şu mesaj gibi, dönüşüm oranlarını önemli ölçüde artırabilir:

Ürünleriniz fotoğraflarda eğlenceli veya kullanışlı görünüyorsa, insanların onları satın alma ve indirimler karşılığında e-posta veya SMS listelerinize kaydolma olasılığı daha yüksek olacaktır.

Ziyaretçileri ücretsiz bir çekiliş talep etmeye teşvik etmeye çalışıyorsanız, Castlery'nin yaptığı gibi, mesajınızı hedef kitlenizin kalbine bağlayan kelimeler ve resimler kullanabilirsiniz:

Açılır pencere tasarımına ilişkin en iyi uygulamalar ve örnekler listemi umarım faydalı bulmuşsunuzdur!

Büyük açılır pencere tasarımının önemi genellikle göz ardı edilir. Ama umarız, artık akıllı bir tasarımın nasıl bir etki yaratabileceğini gördünüz, bir daha asla sıkıcı, ho-hum pop-up'lara geri dönmeyeceksiniz! Çarpıcı, markalı pop-up'lar tasarlamaya biraz zaman ayırmanın, dönüşüm oranları üzerinde BÜYÜK bir etkisi olacak ve yatırım getirinizi göklere çıkaracaktır.

Pop-up'larda yeni misiniz? Burada kullanıma hazır şablonlarımızdan biriyle başlayın!