Açılır Pencere Tasarımı: Sıcakken Yakalayın

E-posta abonelik formlarını kullanmak, daha fazla abone edinmenin en etkili yollarından biridir. Bu makalede, açılır e-posta abonelik formlarına odaklanacağız; özellikle, pop-up tasarımınızı nasıl geliştireceğinizi açıklayacağız ve ilham almanız için bazı harika pop-up örnekleri göstereceğiz.

Pop-up formların e-posta pazarlamasındaki rolü

Pop-up'lar, web sitesi içeriğinin ön planında görünen ve kullanıcıları e-posta almak için kaydolmaya teşvik eden formlardır. Genellikle bir başlık, kısa bir açıklama, e-posta adresinizi, adınızı ve diğer ayrıntılarınızı gireceğiniz bir alan ve bir CTA düğmesinden oluşurlar.

Pop-up'lar genellikle indirim, ücretsiz e-kitap, web semineri kaydı, etkinlik bileti ve diğer bedavalar gibi bir öncü mıknatıs sunar. Örneğin, açılır pencerelerinden birinde Kate Spade, tüm yeni e-posta abonelerine %15 indirim sunuyor.

Ancak, çoğumuz onları sinir bozucu olarak görüyorsak, pop-up'lar nasıl yol açabilir? Bunun basit bir bilimsel açıklaması var.

Yazar, aynı zamanda reklam ve marka uzmanı olan Martin Lindstrom, "Buyology: Truth and Lies About Why We Buy" adlı kitabında 3 yıllık büyük bir nöropazarlama çalışmasının bazı ilginç sonuçlarını paylaştı. Özetlemek gerekirse, insanların satın alma davranışlarının %90'ının bilinçsiz olduğunu ve kullanıcıların inandıklarını iddia ettikleri birçok eylemle çeliştiğini kanıtladı. Dolayısıyla, pop-up'lar hakkındaki tartışmalı görüşlere rağmen, hala işe yarıyorlar: iddia edebiliriz. pop-up'lardan rahatsız olmak için, ama yine de onlara tepki veriyoruz ve kaydolmaya devam ediyoruz.

Şimdi pop-up'ları çalışırken görelim. Sumo, iki yılda neredeyse iki milyar açılır pencereyi analiz etti ve hangi öğelerin onları genel e-posta pazarlama sonuçlarına değerli bir katkıda bulunduğunu keşfetti.

Bu denemede, ortalama pop-up dönüşüm oranı %3,09'du. En yüksek performans gösteren ilk %10'luk pop-up'ların ortalama dönüşüm oranı %9,28'di, bazıları %50,2'ye ulaştı.

Sumo, pop-up dönüşüm oranlarında aşağıdaki eğilimleri fark etti:

1. Uygun bir bağlama yerleştirilen pop-up'lar %40'ın üzerinde dönüşüm oranlarına ulaştı. Uygun bağlamla, bir açılır pencerenin konusunun, üzerinde göründüğü bir web sitesi sayfasının konusuyla eşleştiğini kastediyoruz.
2. Tamamen bağlama bağlı olan pop-up'ların zamanlaması, bir e-kitap sayfasındaki 15 saniyelik gecikme sayesinde %38.4 dönüşüm oranları getirdi. Google Analytics gibi araçlar, her bir durumda en uygun zamanlamanın ardındaki gizemi çözmeye yardımcı olur.
3. Bağlam ve zamanlamayı göz önünde bulundurarak, bağlama uygun bir CTA oluşturarak, net olmaya çalışarak ve değer katarak Sumo, %60'lık bir dönüşüm oranına ulaşmayı başardı.

Gördüğünüz gibi, bir pop-up formun her bir yönüne daha derine iner ve ayrıntıları tek tek test ederseniz, dönüşümleri önemli ölçüde artırabilirsiniz.

Pop-up tasarım ipuçları ve püf noktaları

Tasarım, dönüşümleri artırmak ve daha fazla potansiyel müşteri çekmek söz konusu olduğunda göz ardı edilmemesi gereken bir husustur. Yukarıda bahsedilen “Buyology” kitabına göre tüketiciler satın alma kararı vermek için genellikle en fazla 2 saniye harcarlar. İnsanların gördüğü ilk şey tasarım öğeleri ve renklerdir ve ancak o zaman içeriği okumaya başlarlar. Yani, kelimenin tam anlamıyla dikkat çekmek, amacınızı açıklamak ve bir kullanıcıyı formunuzda e-posta adresini bırakmaya teşvik etmek için yalnızca birkaç saniyeniz var.

Kendi abonelik formlarınız için hangi pop-up tasarım stratejilerini kullanabileceğinizi öğrenmek için bazı iyi görünen açılır pencere örneklerinin ayrıntılarına bakalım.

Pop-up'larınızı kurumsal yönergelere uygun hale getirin

Her şeyden önce, web sitesi, e-posta veya sosyal medya gibi herhangi bir medya türünde kullanılan tüm tasarım varlıklarınız, şirketinizin kurumsal yönergeleriyle bir bütün olarak eşleşmelidir, bu varlıklar bir marka olarak sizin hakkınızda bir izlenim oluşturur. Bu nedenle kurumsal renklerinize, yazı tiplerinize, şekillerinize ve diğer tasarım öğelerinize bağlı kalmanız önemlidir.

Whole Whale Hakkımızda sayfasına bir göz atın. Renk paletinin açık ve lacivert tonlarıyla tamamlanan beyaz ve gri tonlarından oluştuğunu görebilirsiniz. Çok fazla negatif alan var, web sitesinde sans serif yazı tipi kullanılıyor.

Şimdi, formda aynı renkler ve yazı tipleri uygulandığından, web sitesi tasarımına mükemmel şekilde uyan pop-up tasarımına bakın. Ayrıca, pop-up'a daha fazla dikkat çekmek için duygusal bir fotoğraf kullanılır. Sol metin kısmı ve sağ resim kısmı tamamen simetriktir.

Whole Whale, bağış sayfalarının etkinliğini artırmak için yapılan, biri Lighthouse olmak üzere, kâr amacı gütmeyen kuruluşlar için faydalı üç farklı ürün sunuyor. Bu ürünün pop-up tasarımının kurumsal tasarım yönergeleriyle nasıl eşleştiğine ve genel olarak daha güçlü bir etki yarattığına dikkat edin.

Pop-up tasarımınız, Whole Whale'in kullandığı kadar tarafsız olmak zorunda değildir. Özellikle kişisel bir blogunuz veya web siteniz varsa, biraz daha karakter eklemekten çekinmeyin.

Örneğin, Wait But Why web sitesi Whole Whale'in sahip olduğu web sitesinden çok farklıdır. Eğlenceli ve parlaktır ve eskiz benzeri birçok çizime sahiptir.

Pop-up'ları bir istisna değildir - aynı zamanda eğlenceli ve kişiseldir. Pop-up'ların can sıkıcı doğası hakkında şaka yapan şirket, yalnızca kullanıcıları kaydolmaya teşvik ediyor.

Görsel algı teorilerini uygulamaya koyun

Tasarımda çağlardan bu yana kullanılan birçok yerleşik görsel algı kuramı vardır. Tasarım teorilerinin en önemlilerinden ikisi olan Altın Oran kuralı ve Gestalt teorisinden bahsedeceğiz.

Altın Oran kuralı

Altın Oran, doğada bulunan ve bir resmin belirli kısımlarını vurgulayarak görsel olarak dengeli görüntüler oluşturmak için kullanılan yaklaşık 1:1,61'lik bir orandır.

Bunu pratikte nasıl kullanabilirsiniz? Örneğin, bu orantılar bir görüntüyü dengeli bölümlere ayırmanıza, tasarımınızın en önemli öğelerine vurgu yapmanıza veya resimleri görsel olarak en çekici şekilde kırpmanıza yardımcı olabilir.

Aşağıdaki resim Altın Oran ilkesi kullanılarak kırpılmıştır. Resmin en önemli parçası olan bir cep telefonunun, insan gözünün doğal olarak çekildiği spiralin merkezine nasıl yerleştirildiğine dikkat edin.

Açılır pencere tasarımı üzerinde çalışırken, CTA düğmelerini spiralin ortasına yerleştirebilirsiniz, görüntü spiralin en büyük bölümünü kaplayan başlangıcında yer alır. Bu durumda pop-up'ınızın temel düzeni şu şekilde görünebilir:

Gestalt teorisi

Gestalt, “birleşik bütün” anlamına gelir ve insanların nesneleri iki boyutlu uzaydaki yerleşimine göre nasıl algıladıklarını açıklayan tüm teorinin özünü oluşturur.

Gestalt'ın 6 ortak ilkesi vardır:

1. benzerlik Benzer nesneler bir örüntü veya grup olarak algılanır.
2. Devam . Tek bir yola yerleştirilen nesneler bir grup olarak algılanır ve insan gözü bu görsel çizgilerle yönlendirilir.
3. Kapatma . Bir nesnenin bazı kısımları eksik olsa bile onu bir bütün olarak algılarız. Sadece pandalı WWF logosunu düşünün ve bu prensibi anlayacaksınız.
4. yakınlık Birbirine yakın yerleştirilen nesneler bir grup olarak algılanır.
5. Şekil/zemin . İnsanlar öğeleri arka plandan ayırır, böylece büyük olan zemin olarak, daha küçük olan ise bir nesne veya şekil olarak algılanır. Bu ilke genellikle Escher'in eserlerinde kullanılır.
6. Simetri ve düzen . İnsanlar simetrik tasarımları gördüklerinde kendilerini daha güvende ve sakin hissederler.

Tüm bu ilkeleri ezbere öğrenmek zorunda değilsiniz. Bununla birlikte, bazı temel bilgiler, asimetrik tasarımların neden daha dinamik, simetrik tasarımların daha istikrarlı ve daha güvenli görünebileceğini ve ayrıca kullanıcının dikkatinin neden diğerlerinden öne çıkan en büyük veya en parlak nesnelere çekileceğini anlamanıza yardımcı olacaktır.

Örneğin, SheSimplyShops'un pop-up tasarım örneğine bakalım. Şirket, kullanıcılara indirim kazanma şansı elde etmek için çarkı döndürmelerini sunuyor. Açılır pencere ekranın sol tarafında belirir ve asimetriktir: sol kısım sağdan daha 'ağır' görünür. Tekerlek, açılır pencerenin tüm sol kısmını alırken, metin ve CTA düğmesi, negatif boşlukla çevrili sağa yerleştirilir. Tüm bunlar, açılır pencerenin etrafında dinamik ve enerjik bir ruh hali yaratır.

Buna karşılık, Leia'nın pop-up formu tamamen simetriktir ve bu nedenle önceki örneğe göre çok daha sakin görünür. Tüm öğeler ortalanır, görsel olarak tek bir noktaya yönlendirilir - CTA düğmesi.

Okunabilirliğe dikkat edin

Pop-up'larınızın doğru mesajı iletmesini istiyorsanız, anlaşılması kolay olmalıdır. Okunabilirlik söz konusu olduğunda, metin ve tipografi ile çalışma yeteneğiniz çok önemlidir.

Başlıklar, açıklamalar ve düğmeler gibi öğelerin görsel olarak ayrıldığı görsel bir hiyerarşi oluşturun - tamamlayıcı yazı tiplerini, farklı boyutları ve ağırlıkları ve ayrıca boşlukları kullanarak. Satır aralarında bir boşluk olan satır aralığı ve harfler arasında bir boşluk olan karakter aralığı, okuyucuyu formunuz boyunca yönlendirmelidir. En önemli bilgi parçaları her zaman en belirgin olmalıdır.

Daha büyük bir kontrast oluşturmak için, tek bir yazı tipinin farklı ağırlıklarının yanı sıra serif ve sans serifleri karıştırabilirsiniz. Ancak, formun dağınık görünmemesi için en fazla iki yazı tipine bağlı kalmaya çalışın.

Tim Ferris blogundaki açılır bir form, iyi bir tipografinin harika bir örneğidir. Logotype, başlık, alt başlık, yazar adı ve iki düğme arasındaki farkı açıkça görebilirsiniz, bunlardan daha belirgin olanı istenen CTA'dır.

Arka plan ve metin arasındaki kontrast sayesinde başlık en çok dikkati çeker. Bundan sonra gözünüz doğrudan CTA düğmesine geçer. Ardından, ayrıntıları okumak için geri gidersiniz - alt yazı ve yazarın adı.

Sosyal Tetikleyiciler ise, cesur tipografiye dayalı daha hafif bir pop-up formu sunar. İlk olarak, soru şeklinde merak uyandıran başlığı görüyorsunuz, gözleriniz hemen CTA düğmesine kayıyor. Açıklama bir bölücü ile görsel olarak ayrılmış ve daha küçük puntolu yazı tipi ile yazılmıştır.

Renk seçimlerinize dikkat edin

Renk, açılır formlarınızın havasını tamamen değiştirmek için kullanılabilecek güçlü bir araçtır. Pastel tonlar daha romantik ve neşeli bir ruh hali getirirken, yüksek ve canlı renkler pop-up'ınızı daha abartılı hale getirebilir.

Birbiriyle iyi birleşen renkleri seçmek için Adobe Color gibi araçları kullanın. Ücretsizdir ve sıfırdan benzersiz renk paletleri oluşturmanıza, bunları görüntülerden çıkarmanıza veya ilham bulmak için renkleri ve trendleri keşfetmenize olanak tanır.

Tommy Hilfiger'ın açılır penceresine bir örnek, kırmızı, mavi ve beyaz arasındaki büyük kontrastı sergiliyor. Başlık koyu büyük harflerle yazılmıştır ve en önemli kısmı kırmızı ile vurgulanmıştır. Dikkatiniz hemen başlıktan kayıt düğmesine sürüklenir.

Minimalist tasarım seçeneklerini daha çekici bulursanız, arka plan için tek bir ana renk ve metin ve diğer öğeler için ikincil bir renk kullanabilirsiniz.

Örneğin, Horizn Studios, tek renkli arka planı kontrastlamak için beyaz metin ve düğmeler kullandıkları için tamamen siyah bir form sunmaktan korkmuyor. Bir web sitesinin solmuş arka planının yanı sıra bu tür kontrast, bu formu iyi görünür kılar.

Elvie&Leo, tam tersi, siyah metinli tamamen beyaz bir form kullanın. Ana mesaj için akıllıca bir serif yazı tipi seçimi ve formun geri kalanıyla kontrast oluşturan siyah düğme sayesinde basit ama şık.

My Deal web sitesi, bir renk patlamasıyla başka bir minimalist seçenek sunuyor. Sağa kırmızı bir kağıt uçak yönlendirilir - bu, kırmızı bir kayıt düğmesinin bulunduğu yerdir. Tipografinin formun ana mesajını vurgulamak için nasıl kullanıldığına dikkat edin.

Şekiller ve etkileşim ile denemeler yapın

Etkileşimi artırmak için pop-up'larınıza biraz daha eğlence katın. Örneğin, Jackpot Candles size bir spin-to-win piyangosuna katılmayı teklif eder.

Çarkı çevirdiğinizde dört ödülden birini kazanabilirsiniz. Açılır pencere etkinleştirildiğinde şöyle görünür:

Şekillerle oynamak, pop-up'a daha fazla dikkat çekmenizi sağlar. Örneğin Pazartesi günü e-posta, abonelik formunun alışılmadık şekline başvurdu - bir daire. Bunu, web sitesi kurucusunun fotoğrafını gösteren daha küçük bir daire ile birleştirerek, markanın daha fazla potansiyel müşteri elde etme şansı olabilir.

Senin sıran

Abonelik formlarınızı dikkat çekici hale getirmek için şu basit açılır pencere tasarım ilkelerini unutmayın:

• pop-up formlarınızın şirketinizin kurumsal tarzında tasarlandığından emin olun;
• Tasarım öğelerini yerleştirirken ve formunuzun tipografisiyle çalışırken Altın Oran ve Gestalt teorilerini hatırlayın;
• açılır pencerelerinizin metninin okunması kolay olduğundan emin olun;
• açılır pencerenin en önemli kısımlarına vurgu yapmak için renkleri akıllıca kullanın;
• Pop-up'larınızı kullanıcılar için eğlenceli ve sıra dışı hale getirmek için etkileşim ekleyin ve farklı şekillerle oynayın.

SendPulse ile ilk açılır formunuzu ücretsiz olarak oluşturmaya hazır mısınız?