Tıklama Sonrası Açılış Sayfası Tasarımı İlhamı için 12 Teknik

Tıklama sonrası açılış sayfası tasarımınız önemlidir, çünkü bu sayfalar dijital vitrinlerinizdir - ürün ve hizmetlerinizi tanıtmak ve satmak için gereklidir. Doğru şekilde optimize edildiğinde, sayfalar dönüşüm oranlarını önemli ölçüde artırabilir. İşletmenizin genel başarısı için kritik olduklarından, profesyonel, yüksek dönüşüm sağlayan tıklama sonrası açılış sayfaları oluşturmak, pazarlama stratejinizin ayrılmaz bir parçasıdır.

Uygulamanızın tıklama sonrası açılış sayfası, ürün tıklama sonrası açılış sayfası, mobil tıklama sonrası açılış sayfası veya başka bir şey için ilham arıyorsanız. Çok sayıda tıklama sonrası açılış sayfası tasarımı ilhamı mevcuttur.

Instapage'de, tıklama sonrası açılış sayfası örneklerine ayrılmış tam bir blog kategorimiz var. Hedef kitlemize dünyanın en büyük markalarından bazılarından ilham almak için bu konuyu sık sık araştırıyor ve yazıyoruz. Microsoft, Lyft, Marketo, Constant Contact, Oracle, Facebook, MailChimp ve HubSpot dahil.

Bu makalede, sayfalarınızı oluştururken size ilham vermek için birkaç farklı tasarım tekniğini vurgulayarak bazı tıklama sonrası açılış sayfalarını sergileyeceğiz. Her örnek için, sayfanın neyi iyi yaptığını ve daha iyi sonuçlar elde etmek için nelerin A/B testi yapılabileceğini tartışacağız.

tıklama sonrası açılış sayfası tasarım ilhamı

Etkileyici kahraman resmi

İnsanlar genellikle görüntüleri metinden 60.000 kata kadar daha hızlı işler. Sayfanızda doğru bir şekilde kullanıldığında, görseller ziyaretçileri, teklifinizi dönüştürmeye yetecek kadar uzun süre sayfanızla etkileşime geçmeye zorlayabilir. Ziyaretçilerinize teklifinizi kullandıklarında ne elde edeceklerini söylemeyi bırakıp bunun yerine onları göstermeye başlamanın zamanı geldi. Bir kahraman çekimi, potansiyel müşterinin teklifinizin avantajlarını deneyimlemenin nasıl bir şey olduğunu görselleştirmesine yardımcı olur.

TaskEasy bunu anlıyor ve sayfalarında bir kahraman resminden büyük ölçüde yararlanıyorlar. Ziyaretçiler sayfaya gelir gelmez TaskEasy'yi işe alırlarsa çimlerinin nasıl görünebileceğine dair bir fikir edinirler:

Sayfanın iyi yaptığı şey.

• CTA düğmesi rengi , Bize Ulaşın düğmesi dışında sayfanın başka hiçbir yerinde kullanılmadığı için dikkat çekiyor.
• CTA düğmesi kopyası birinci şahıs kullanır, bu da potansiyel müşterilerin teklife kişisel olarak bağlı hissetmelerini sağlar.
• Yön ipuçları (CTA düğmelerindeki oklar ve sayfayı aşağı doğru gösteren oklar), ziyaretçilere bir sonraki aşamada dikkatlerini nereye odaklamaları gerektiğini gösterir.
• İkonografi , TaskEasy'yi işe almanın özelliklerine ve faydalarına dikkat çekmeye yardımcı olur.
• Güven sinyalleri ve sosyal kanıtlar (güvenlik rozetleri, ödül mührü ve Facebook benzeri bir sayaç), potansiyel müşterilerin kendilerini rahat, güvende hissetmelerini ve hatta TaskEasy'yi işe almaya mecbur etmelerini sağlar.
• Bize ulaşın kayan formu , ziyaretçilerin hizmetleri hakkında bilgi almak için şirketle kolayca iletişim kurmasını sağlar.

A/B testi yapılması gerekenler:

• TaskEasy logosu köprüyle bağlantılıdır, bu da ziyaretçilerin sayfadan kolay bir çıkış yoluna sahip olduğu anlamına gelir.
• Sayfanın üst kısmındaki Mülk Yöneticisi CTA düğmesi , ziyaretçileri bu sayfadan uzaklaştırır. Başka bir potansiyel müşteri yakalama sayfası açsa da, bundan tamamen ayrı kendi kampanyası olmalıdır.
• Kopya eklemek , potansiyel müşterilerin TaskEasy ile çalışmanın faydalarını daha iyi anlamasına yardımcı olur. Şu anda sayfada, ziyaretçilerin şirket ve teklif hakkında iyi bir fikir edinmelerini zorlaştırabilecek bir kopya yok.
• Altbilgi gezintisi , ziyaretçilerin dönüştürme yapmadan sayfadan çıkmaları için çok fazla yol sağlar.
• Telefon numarası tıkla ve ara özelliği etkinleştirilebilir, bu da ziyaretçilerin TaskEasy ile iletişim kurmasını çok daha kolay hale getirir, özellikle de şirket onları “Bizi aramak ister misiniz? Buradaydı!"

Madde işaretleri

İnsanlar genellikle aradıklarını bulmak için sonsuz metinleri okumak istemezler. Belirli bilgileri bulmak için sayfayı hızlı bir şekilde taramayı tercih ederler - madde işaretli kopya bunu mümkün kılar. Madde işaretli kopya (onay işaretlerinden, oklardan, ikonografiden vb. yararlanarak) etkilidir çünkü ziyaretçilerin sayfayı hızlı bir şekilde taramasını ve aradıklarını bulmasını sağlar.

Bu Yodle örneği, yazılımlarının avantajlarını vurgulamak için madde işaretli kopya (onay işaretleri) kullanır. Beyaz boşluklu sayfadaki kopyanın geri kalanından da öne çıkıyor:

Sayfanın iyi yaptığı şey.

• Yodle'ın logosu ana sayfalarına bağlı değildir, bu da ziyaretçilerin sayfadan uzaklaşma riskine girmeden kimin web sayfasında olduklarını görmelerine olanak tanır.
• Tıkla ve ara telefon numarası , ziyaretçilerin şirketle iletişim kurmasını kolaylaştırır.
• Başlık ve alt başlık, ziyaretçileri teklifin ne olduğu ve onlara nasıl fayda sağlayacağı konusunda bilgilendirir.
• İtalik nüsha , nüshanın geri kalanından ayrılır ve ziyaretçileri onu okumaya zorlar.
• Kapsüllenmiş form dikkat çekicidir ve ziyaretçilere demo talep etmek için nereye gitmeleri gerektiğini gösterir.
• “Kişiselleştirilmiş Demo” , potansiyel müşterilere teklifin özellikle onlar için olduğunu hissettirir.
• Turuncu CTA düğmesi rengi r sayfada "açılır", dikkat çeker ve insanların tıklama şansını artırır.
• CTA düğmesindeki ok , bir yönlendirme işareti görevi görerek insanların formun arkasında ne olduğuna ilgisini çeker.
• Güven sinyalleri (müşteri referansı, şirket logoları ve ödül mühürleri), potansiyel müşterilerin Yodle'a olan güven düzeyini artırır ve bu da ziyaretçileri kişisel bilgilerini doldurmaya ikna etmeye yardımcı olur.

A/B testi yapılması gerekenler:

• CTA düğmesi kopyası kişiselleştirilmemiştir ve pek çok ziyaretçiyi tıklamaya ikna etmeyebilir. Bunu "Demo İstiyorum" veya "Demomu Planla" gibi bir şeyle değiştirmek daha iyi sonuçlar verebilir.
• Müşteriyle bir vesikalık fotoğraf da dahil olmak üzere , referanslar daha yakışıklı görünmesini sağlayacak ve potansiyel müşteriye daha fazla güven aşılayacaktır.
• Altbilgideki ince baskı , potansiyel müşterileri bunaltabilir ve onları dönüşümden caydırabilir.

F-Desen

Sayfanızı tasarlarken, ziyaretçilerinizin sayfanızı görüntüleme olasılığının en yüksek olduğunu düşünün. Bu şekilde, en önemli öğelerinizi buna göre yerleştirebilirsiniz. İnsanlar yukarıdan aşağıya ve soldan sağa okumaya meyilli olduğundan, sayfanızı bir F-Desenini takip edecek şekilde tasarlamak akıllıca olur.

Oracle'ın demo tıklama sonrası açılış sayfası, farklı bir F-Pattern düzenini takip eder. Her önemli öğe, ziyaretçilerin sayfayı görüntülerken doğal olarak bakacağı F-Pattern yolu boyunca yer alır.

1. İzleyiciler önce sol üst köşedeki bilgisayar görüntüsünü görecektir.
2. Gözleri daha sonra yatay gövdeyi takip edecek ve ardından gülümseyen insanları görecek.
3. Sayfanın sol tarafından bir sonraki yatay gövdeye doğru ilerleyen ziyaretçiler, dikkatlerini başlığa ve ardından tek form alanına odaklayacaktır.
4. Ardından, metin paragrafını ve madde işaretlerini tarayacakları dikey gövdeden F-Desenine devam edecekler.
5. Son olarak, odakları parlak kırmızı CTA düğmesi üzerinde olacak.

Sayfanın iyi yaptığı şey.

• Gülümseyen insanlar sayfayı daha insancıl hale getirir, bu da ziyaretçilerin kendilerini daha rahat hissetmelerini sağlar.
• Madde işaretleri ve kalın yazı , teklifin temel özelliklerine dikkat çeker.
• 1 alan formu , doldurmayı hızlı ve kolay hale getirir.
• Ziyaretçilerin bakışları forma ve CTA düğmesine yönlendirilir, bu da oraya odaklanmaları ve dönüştürmeleri gerektiği anlamına gelir.

A/B testi yapılması gerekenler:

• Ürün görseli daha büyük olabilirdi. Şu anda ekranda bir şey görmek zor.
• Başlık ikna edici değil çünkü ziyaretçilere teklifin kendilerine nasıl fayda sağlayacağı konusunda herhangi bir bilgi vermiyor.
• CTA düğmesi kopyası zayıf. "Devam", teklif hakkında hiçbir şey söylemez ve tıklamak için cazip değildir.
• Müşteri referansı gibi sosyal kanıtları dahil etmek , şirketin ve teklifinin güvenilirliğini artırabilir.
• Altbilgi gezinme bağlantıları , ziyaretçilerin dikkatini dağıtabilir, onları sayfadan uzaklaştırabilir ve büyük olasılıkla dönüşüm oranını düşürebilir.

Z-Desen

F-Pattern gibi, Z-Pattern de izleyicilerin sayfanızda gezinmesine yardımcı olarak sayfa tasarımınız için başka bir harika düzen seçeneği haline getirir.

İşte açık bir Z-Desenini izleyen Business-Software.com'dan bir örnek.

1. Ziyaretçiler önce sol üst köşedeki kalın başlığı görecekler.
2. Üst yatay Z gövdesi boyunca hareket ederek kırmızı “İndirmek İçin Kaydolun” damgasına ulaşırlar.
3. Çapraz olarak aşağı ve sol alta doğru hareket eden izleyiciler, dikkatlerini raporun görüntüsüne odaklayacaktır.
4. Son olarak, Z-Desenini başka bir yatay gövdeyle tamamlayacaklar ve burada sayfanın en önemli öğesi olan CTA düğmesine gelecekler.

Sayfanın iyi yaptığı şey.

• Sol üstteki logo , ziyaretçilerin hemen dikkati dağılıp sayfadan uzaklaştırılmaması için bağlantılı değildir.
• Başlık ve alt başlık , ziyaretçilere bu raporun en iyi 10 pazarlama otomasyonu satıcısını sunduğunu söylemede etkilidir ve raporu indirmekten nasıl yararlanabileceklerini bilmelerini sağlar.
• Minimum kopyaya sahip madde işaretleri , görüntüleyenlerin sayfayı hızlı bir şekilde taramasını ve çok fazla metin okumak zorunda kalmadan önemli çıkarımları öğrenmesini sağlar.
• “Ücretsiz” kelimesi iki yerde kullanılmaktadır. Beyaz boşlukla çevrili ve çok dikkat çekici olan kırmızı pul üzerinde ve koyu olarak biçimlendirilmiş nüshada ve resmin hemen üstünde.
• Rapor önizlemesi , potansiyel müşterilerin raporu indirmeyi seçmeleri durumunda raporun nasıl göründüğüne dair bir fikir edinmelerini sağlar.
• Sarı CTA düğmesi , sayfanın geri kalanıyla iyi bir tezat oluşturuyor ve muhtemelen daha fazla ziyaretçinin tıklamasını sağlıyor.

A/B testi yapılması gerekenler:

• Sağ alt köşedeki şirket logosu , ziyaretçilerin teklifi dönüştürmeden önce sayfadan çıkmalarını sağlayan ana sayfalarına köprüyle bağlıdır.
• 13 form alanı , pazarlama hunisinin farkındalık aşamasında bir teklif için çok fazla. Alıcının yolculuğunun bu kadar erken döneminde bu kadar çok bilgi istemek, insanları dönüşümden kolayca caydırabilir.
• En önemli öğelerin etrafındaki beyaz boşluğu artırmak . Resim ve CTA düğmesi gibi, bunlara daha fazla dikkat çekecek ve ziyaretçileri raporu indirmeye ikna edecektir.
• Sosyal kanıt eklemek , muhtemelen daha fazla potansiyel müşteriyi dönüştürmeye ikna edecektir. Çünkü Business-Software.com ile çalışma fikri onları daha rahat ve heyecanlı hissettirecektir.
• Sayfa altbilgisi kaldırılabilir. Küçük baskı gereksiz görünüyor ve şirket logosu, ziyaretçileri bu sayfadan uzaklaştıran bir çıkış bağlantısı görevi görüyor.

Beyaz boşluk

Ziyaretçileri dikkatlerini toplamaya ikna etmenin bir başka yolu da boşluk eklemektir. Belirli öğelerin etrafına yeterli boşluk eklendiğinde, bu öğeler sayfada daha fazla öne çıkar.

Belirli öğelere odaklanmayı artırmanın yanı sıra, beyaz boşluk da yardımcı olur.

• Dağınıklığı azaltın
• Sayfanızı estetik açıdan hoş hale getirir
• Okunabilirliği ve anlaşılırlığı artırın
• Kullanıcı deneyimini geliştirin

Aşağıdaki MarcomCentral örneğinde müşteri adayı yakalama formunu çevreleyen tüm beyaz alanlara bir göz atın. Formun etrafındaki boşluğun aslında beyaz olmadığına dikkat edin. Beyaz boşluk, farklı sayfa öğelerini ayırmaya yardımcı olduğu ve vurguladığı öğeyle kontrast oluşturduğu sürece herhangi bir renk olabilir. Bu durumda, formül:

Sayfanın iyi yaptığı şey.

• Tıkla ve ara telefon numarası , ziyaretçilere müşteri hizmetleriyle iletişim kurmak için uygun bir yol sağlar.
• 50 saniyelik video , potansiyel müşterilerin kopyayı okumak zorunda kalmadan hızlı ve kolay bir şekilde bilgi edinmelerini sağlar.
• Form başlığındaki “Ücretsiz” ve ilk CTA düğmesi, herkes özgür olmayı sevdiği için oldukça ikna edici bir kopyadır. Kişiselleştirilmiş kopya eklemek, bu sayfayı daha da ikna edici hale getirebilir.
• Bağlantı etiketleri , tıklandığında ziyaretçileri doğrudan forma geri götürür, bu da onların formu bulmasını ve tamamlamasını kolaylaştırır.
• Sosyal kanıt , ziyaretçilere güven ve güven aşılar. Müşteri referanslarıyla birlikte vesikalık görüntüler eklemek daha da fazla değer katacaktır.
• “Nasıl Çalışır?” Bölümünde görüntüleri umutları daha iyi anlamak ve her adımı açıklayan ne öngörülüyor sağlar.

A/B testi yapılması gerekenler:

• Köprülü şirket logosu , ziyaretçileri tüm teklifi görmeden önce sayfadan uzaklaştırma potansiyeline sahiptir.
• Başlık değiştirilmeli çünkü büyük ve dikkat çekici olmasına rağmen zorlayıcı değil. Çünkü adaya herhangi bir fayda sağlamaz.
• Turuncu CTA düğmesi , sayfa boyunca turuncu birden çok kez kullanıldığı için olabildiğince göze çarpmıyor .
• Sayfanın altındaki sosyal medya butonları , ziyaretçilerin dikkatini dağıtabilir ve onların dönüşüm yapmasını engelleyebilir.

Bağlantı etiketleri

Bağlantı etiketleri, aynı sayfadaki başka bir konuma bağlanır ve ziyaretçilerin kaydırma yapmak zorunda kalmadan sayfanın belirli bir bölümüne atlamalarına olanak tanır. Bağlantı bağlantıları, ziyaretçileri fazla çaba harcamadan gitmek istedikleri yere götürdükleri için, dönüşüm sürecine yardımcı olan genel kullanıcı deneyimini geliştirmeye yardımcı olurlar.

PRWeb, sayfalarına iki bağlantı etiketi ekledi - her ikisi de "Şimdi Başlayın!" Ekranın altındaki CTA düğmeleri. Tıklandığında, ziyaretçileri ekranın üst kısmındaki potansiyel müşteri yakalama formuna geri gönderin:

Sayfanın iyi yaptığı şey:

• Başlık özeldir ve ikinci şahıs kopyasını kullanır - ziyaretçileri teklifi daha fazla okumaya ve sonunda dönüştürmeye ikna etmek için harika olan iki nitelik.
• Formu kapsüllemek, onu daha fazla dikkat çekici hale getirir ve bu da , formu tamamlama olasılıklarını çekmesi muhtemeldir.
• Formdaki katılım kutusunu işaretlemeden bırakmak, potansiyel müşterilere, PRWeb'in onlar adına kararlar vermek yerine kendi kararlarını vermekte özgür olduklarını hissettirir.
• “Nasıl” ve “Neden” bölümlerindeki resimler ve biçimlendirilmiş kopya , PRWeb'in nasıl çalıştığına ve potansiyel müşterilerin neden PRWeb'i seçmesi gerektiğine ilişkin en önemli ayrıntılara dikkat çekiyor.

A/B testi yapılması gerekenler:

• Çıkış bağlantılarının (şirket logosu, sosyal medya düğmeleri ve altbilgi gezinmesi) tümü, insanları dönüştürmeden sayfadan uzaklaştırabilir.
• Madde işaretli kopya daha fazla öne çıkabilir. Girinti yapmak veya okları büyütmek ona daha fazla dikkat çekecektir.
• Kılavuzun görüntüsü kesilmiş, bu da bir tasarım hatası gibi görünmesine neden oluyor. Ayrıca tıklanabilir, ancak resim açıldığında hala tam resim veya daha büyük değil.
• 7 formlu alanlar ziyaretçilerin gözünü korkutabilir ve formu doldurmalarını engelleyebilir. Özellikle de muhtemelen alıcı yolculuğunun değerlendirme aşamasında olduklarından.
• CTA düğmesinin rengi (üç düğmenin hepsinde) göze çarpmıyor çünkü sayfanın her yerinde kırmızı ve mavi kullanılıyor.
• CTA düğmesi kopyası (yine üç düğmenin hepsinde) belirsizdir. "Pazarlama Rehberini istiyorum!" gibi bir şey. daha ilgi çekicidir ve büyük olasılıkla daha fazla tıklamayla sonuçlanır.
• Müşteri referansı optimize edilmemiştir. Craig Kasnoff'un vesikalık fotoğrafı yok, şirket adı yok (ve Medya Danışmanından sonra virgül kullanılmamalıdır) ve referansın kendisi de potansiyel müşterileri şirketle çalışmaya teşvik edecek özel bir şey söylemiyor.

GIF'ler

Medyayı tıklama sonrası açılış sayfanıza (resim, video veya GIF biçiminde) dahil etmek, ürün veya hizmetinizi açıklarken sayfanızı görsel olarak daha çekici hale getirdiği için dönüşümleri artırmaya yardımcı olabilir.

GIF'ler, tekliflerinizi daha etkileşimli bir şekilde açıklamaya yardımcı olan animasyonlu resimlerdir. Bu nedenle, yazılım panonuzun nasıl göründüğünün bir ekran görüntüsü gibi sayfalarınıza statik görüntüler eklemek yerine, potansiyel müşterilerin farklı eylemleri nasıl gerçekleştirebileceğini görsel olarak göstermek için bir GIF ekleyin.

ActiveCampaign bunu kendi sayfasında yapar:

Sayfanın iyi yaptığı şey.

• Başlık ve alt başlık dikkat çekici. Başlık, ikinci şahıs kopyasını kullanır ve alt başlık, başlığı iyi bir şekilde tamamlayarak, potansiyel müşterilerin 150.000'den fazla pazarlamacının ActiveCampaign kullandığını bilmesini sağlar.
• "Kredi kartı gerekmez", ziyaretçilere bu teklifin tamamen ücretsiz olduğunu garanti eder.
• Yalnızca iki form alanı , formu daha fazla müşterinin tamamlamasını sağlar.
• Müşteri referansları , sosyal kanıt eklemek için harikadır, ancak Twitter tanıtıcıları, önce dönüşüm yapmadan ziyaretçileri sayfadan uzaklaştırabilir.
• Kayan form ve CTA düğmesi , sayfanın neresinde olursa olsun görünür olduklarından, ziyaretçilerin işlem yapma şansını artırır.

A/B testi yapılması gerekenler:

• CTA düğmesi göze çarpmıyor . Renk, sayfadaki mavinin geri kalanıyla karışıyor ve kopya etkileyici değil.
• CTA düğmesinin altındaki kopyada “'Oluştur'u tıklayarak…” yazıyor ancak CTA düğmesi 'Oluştur' demiyor.
• Altbilgideki gezinme bağlantıları, ziyaretçileri sayfanın amacından kolayca uzaklaştırabilir.

Görsel ipuçları

Görsel ipuçları, tıklama sonrası açılış sayfası tasarımında büyük rol oynar. Çünkü görsel bir hiyerarşinin korunmasına yardımcı olurlar, ziyaretçilerin ilgisini çekerler ve onları temel unsurlara yönlendirirler. Yaygın olarak kullanılan üç görsel ipucu, tümü dönüşüm hedefinizin ayrılmaz parçası olan öğelerin yönünü gösteren oklar, bakışlar ve stratejik olarak yerleştirilmiş nesneleri içerir.

Oklar

Oklar, basit, anlaşılır ve kolay anlaşılır oldukları için tıklama sonrası açılış sayfalarında sıklıkla kullanılır. Hareketli veya sabit olabilirler ve en yaygın olarak, Bridgeline Digital'in bu örnekte yaptığı gibi, ziyaretçileri potansiyel müşteri yakalama formlarına ve CTA düğmelerine yönlendirmek için kullanılırlar:

Sayfanın iyi yaptığı şey.

• Artan dönüşüm oranlarıyla ilgili bir istatistik eklemek, muhtemelen ziyaretçilerin pazarlama otomasyonuna olan ilgisini çekecektir. Ayrıca, kalın biçimlendirme, buna dikkat çekmeye yardımcı olur.
• İki farklı yerde “ücretsiz” den bahsediliyor ve potansiyel müşterilerin bu teknik inceleme için ödeme yapması gerekmediği vurgulanıyor.
• Madde işaretli kopya , potansiyel müşterilerin metin bloklarını okumak zorunda kalmadan teknik incelemelerinin ne içereceğini bulmasını kolaylaştırır.
• Turuncu CTA düğmesi öne çıkıyor ve form başlığı ve ok ile iyi bir şekilde koordine ediliyor.
• Şirket logoları sayfaya güven değeri katarak ziyaretçilerin "Bu tanınmış şirketler Bridgeline Digital ile ortak olduysa ben de yapmalıyım" diye düşündürüyor.

A/B testi yapılması gerekenler:

• Köprülü şirket logosu ve altbilgi bağlantıları , ziyaretçilere sayfadan çıkma olanağı sağlayarak hemen çıkma oranını artırır.
• Ürün resminin etrafındaki beyaz boşluğu artırmak, ürünün daha fazla öne çıkmasını sağlar.
• "Teknik Belgeyi İndirin" konusunda ikna edici hiçbir şey olmadığı için CTA düğmesi kopyasının iyileştirilmesi gerekiyor. Fayda odaklı ve/veya birinci şahıs kopya eklemek, muhtemelen daha fazla potansiyel müşteriyi tıklamaya teşvik edecektir.

göz bakışı

İnsanlar diğerlerinin baktığına bakma eğiliminde olduklarından, insan gözü bakışını yön işareti olarak kullanmak, özellikle tıklama sonrası açılış sayfalarında etkilidir. Örneğin, sayfanızdaki bir insan resmi başlığa bakıyorsa, ziyaretçinizin dikkatinin de başlığa çekilmesi olasıdır. Bu nedenle, bu teknik, ziyaretçilerin istediğiniz yere bakmalarını sağlamak için kullanışlıdır.

Aşağıdaki sayfada Vistage, müşteri adayı yakalama formunun yönüne bakan bir kadının resmini içeriyordu. Ziyaretçiler ona baktığında, bilinçaltında şu forma bakmak zorunda hissediyorlar:

Sayfanın iyi yaptığı şey:

• Hiçbir çıkış bağlantısı (gizlilik politikası dışında), ziyaretçilerin tarayıcılarındaki "X" işaretini tıklamadan veya formu doldurmadan sayfadan ayrılmasını imkansız kılmaz.
• Zıt renkler , görsel bir ipucu görevi görür ve sayfadaki en önemli öğelere dikkat çeker: başlık, kadın ve CTA düğmesi. Sayfanın geri kalanı gri tonlarda olduğu için bu üç bileşen her şeyin üzerinde öne çıkıyor.
• Bir gizlilik politikası dahil etmek , ziyaretçilere güven aşılamaya yardımcı olur ve bilgilerinin şirkette güvende ve emniyette olduğunu bilmelerini sağlar.

A/B testi yapılması gerekenler:

• Müşteri referansları veya şirket rozetleri gibi sosyal kanıtlar eklemek , muhtemelen daha fazla ziyaretçiyi teklife uygun olup olmadıklarını öğrenmeye ikna edecektir.
• Teklifle ilgili çok az bilgi , insanların dönüşüm gerçekleştirmesini engelleyebilir. Teklif avantajlarını vurgulamak için madde işaretleri veya küçük metin parçaları eklemek daha iyi sonuçlar verebilir.

nesneler

Yaygın olarak kullanılan üçüncü bir görsel ipucu tekniği, nesneleri doğrudan sayfanızın belirli bir alanına yönlendirilecek şekilde konumlandırmaktır. Bunu yapmak, potansiyel müşterilerin dikkatini belirli önemli sayfa öğelerine odaklar.

Lyft, aşağıdaki örnekte bunu, bir aracı doğrudan kurşun yakalama biçimlerine doğru ve neredeyse dokunarak konumlandırarak yapar:

Sayfanın iyi yaptığı şey:

• İnsanları bilgilerini teslim etmeye ikna etmek için yalnızca bir form alanı harikadır.
• Anlaşma onay kutusunu işaretlemeden bırakmak, potansiyel müşterilerin dönüşüm sürecinde daha kontrollü ve rahat hissetmelerini sağlar.
• “Ne Kadar Kazanabileceğinizi Görün” bölümü , potansiyel müşterilerin sayfadan ayrılmadan bilgilerini girmelerine ve “Hesapla” CTA düğmesini tıklamalarına izin verdiği için yararlıdır. Haftalık ödeme tutarı hesaplandıktan sonra, düğme başka bir “Şimdi Başvur” düğmesine dönüşerek dönüşüm sürecine yardımcı olur.
• “Lyft Sürüş Nasıl Çalışır” bölümü , şirketin Lyft'in nasıl çalıştığı hakkında adım adım bilgi vermesini sağlar - ve yatay olarak kaydırıldığından, sayfayı kopyalarla doldurmaz.

A/B testi yapılması gerekenler:

• Birkaç çıkış bağlantısı , ziyaretçilerin dikkatinin dağılmasını ve teklifi dönüştürmeden sayfadan uzaklaşmasını kolaylaştırır.
• Arka planın yoğun olması nedeniyle başlık ve alt başlığın okunması zor. Bunları daha görünür oldukları farklı bir yerde test etmek daha fazla dikkat çekebilir ve daha iyi sonuçlar verebilir.
• CTA düğmesi kopyası , aldığı kadar belirsizdir. "Sonraki", teklif hakkında hiçbir şey söylemez ve muhtemelen pek çok kişiyi tıklamaya zorlamaz.

Görsel hiyerarşi

Her tıklama sonrası açılış sayfası, en önemliden en az önemliye doğru düzenlenmiş içerik olan belirli bir görsel hiyerarşiyi izlemelidir. İlk önce ziyaretçilerin dikkatini çekmeyi amaçlayan öğe (genellikle başlık) sayfanın en üstüne yerleştirilmelidir, çünkü bu hiyerarşinin en üstündedir ve içeriğin geri kalanı daha sonra en yüksek önceliğe göre en düşük önceliğe iletilir.

Aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere birçok özellik görsel hiyerarşi oluşturmada rol oynar:

• Boy
• Renk/kontrast
• yoğunluk/yakınlık
• Beyaz boşluk
• Doku/stil

SendGrid, sayfalarında bu bileşenlerin birkaçını kullanır. Hangilerini kullandıklarını ve hangilerini geliştirmeyi düşünmeleri gerektiğini görelim:

Sayfanın iyi yaptığı şey.

• Boyut değişimi ve kalın biçimlendirme , güçlü bir görsel hiyerarşi oluşturarak metnin en önemli parçalarına dikkat çekmeye yardımcı olur.
• Başlık, SendGrid kullanan üç büyük şirketten bahsederek ziyaretçileri SendGrid kullanmaya zorluyor.
• Birden fazla işbirlikçi CTA düğmesi , potansiyel müşterilere teklifi sayfa boyunca farklı konumlarda kullanmaları için çeşitli fırsatlar sunar.
• Ürün resmi , teslim edilen içeriğin nasıl görüneceğinin bir önizlemesini gösterir.
• Minimum kopyaya sahip madde işaretleri, potansiyel müşterilerin aradıklarını bulmak için metin paragraflarını okumak zorunda kalmamasını sağlar.
• Bir müşteri referansı ve şirket rozetleri , sosyal kanıt işlevi görür ve muhtemelen daha fazla adayı SendGrid ile çalışmaya ikna eder, çünkü diğerleri onlarla başarı buluyor. Dave Tomback'in vesikalık fotoğrafını referansına eklemek onu daha da etkili hale getirecekti.

A/B testi yapılması gerekenler:

• Görseldeki kadın, görsel bir ipucu eklemek ve ziyaretçileri de bu şekilde bakmaya teşvik etmek için başlığa/CTA düğmesine bakıyor olabilir.
• CTA düğmeleri , daha fazla dikkat çekmek için büyütülebilir ve farklı bir renkte test edilebilir. Sayfanın başka bir yerinde mavi var, bu yüzden olabildiğince fazla “açılmıyorlar”.
• CTA düğmeleri ve başlık gibi bazı öğelerin etrafındaki beyaz boşluğu artırmak , bu öğelerin daha fazla öne çıkmasına yardımcı olur.
• “Planları ve Fiyatlandırmayı Gör” CTA düğmesi , ziyaretçileri başka bir sayfaya götürüp bu sayfadan uzaklaştırdığı için kaldırılmalıdır.

Dikkat çekici CTA düğmesi

Mükemmel şekilde optimize edilmiş, dikkat çekici bir CTA düğmesi, tıklama sonrası açılış sayfası çerçevenize dahil edilecek en önemli unsurdur. Diğer tüm unsurların üzerinde öne çıkmalıdır, böylece potansiyel müşterilerin teklifinizi kullanmak için nereye tıklamaları gerektiği konusunda bir karışıklık olmaz.

WalkMe, iki adımlı katılım sayfasını, sayfada kesinlikle göze çarpan ve ziyaretçilerin dikkatini çeken büyük, zıt bir CTA düğmesiyle oluşturdu:

Sayfanın iyi yaptığı şey.

• Arka plan görüntüsü , ziyaretçilere yazılımlarının nasıl görüneceğine dair gerçekçi bir önizleme sunar.
• CTA düğmesi sayfada gerçekten açılır. Büyük ve zıt olmasının yanı sıra, kullanıcı kaydırmaya başladığında sayfanın üst kısmında yeniden görünür.
• İki adımlı katılım formu, dağınıklığı azaltır ve bilgileri buraya girmek zorunda olmadıkları için kullanıcıların daha az korkmasını sağlar.
• Madde işaretli metin, potansiyel müşterilerin çok fazla metin okumak zorunda kalmadan teklif hakkında bilgi edinmelerini kolaylaştırır.
• Sosyal kanıt (müşteri referansı ve kayan şirket logoları), potansiyel müşterileri bu şirketle çalışmaya mecbur hissettirebilir.

A/B testi ne olmalı?

• CTA düğmesi kopyasını daha kişiselleştirilmiş (birinci şahıs biçimlendirmesiyle) ve fayda odaklı bir şeye değiştirmek, büyük olasılıkla dönüşüm oranını artıracaktır.
• Resmi bir GIF ( ekranın alt kısmında) ile değiştirmek, kullanıcılara sayfada daha etkileşimli bir deneyim sunacak ve ürünü daha iyi açıklamaya yardımcı olacaktır.
• Müşteri referansına bir vesikalık görüntü eklemek, onu daha güvenilir kılacak ve etkinliğini artıracaktır.

Hangi tıklama sonrası açılış sayfası tasarım teknikleri size ilham verdi?

Ürünlerinizi ve hizmetlerinizi tanıtmak ve satmak için tıklama sonrası açılış sayfalarını kullanmak, pazarlama stratejinizin ayrılmaz bir parçasıdır. Bunun nedeni, Tasarım En İyi Uygulamaları Kılavuzumuz ve tıklama sonrası açılış sayfası Optimizasyon Kılavuzumuzla birlikte yukarıda açıklanan tekniklerle doğru şekilde optimize edildiğinde, dönüşüm oranlarınızı önemli ölçüde artırabilmeleridir.

Reklam tıklamalarını dönüşümlere dönüştürün, her teklif için özel, hızlı yüklenen tıklama sonrası sayfaları oluşturun. Bugün bir Instapage Enterprise Demo'ya kaydolarak tüm hedef kitlelerinize benzersiz tıklama sonrası açılış sayfalarını nasıl sağlayacağınızı görün.