Dönüşümleri Artırmak için F-Patterni Nasıl Kullanılır?

Tıklama sonrası açılış sayfanızı, tüm hayati tıklama sonrası açılış sayfası öğelerini içerecek şekilde oluşturmak önemlidir, ancak aynı derecede önemli olan, bunların sırası ve konumudur - tıklama sonrası açılış sayfanızın düzeni.

Tıklama sonrası açılış sayfası düzeninizi tasarlarken, ziyaretçilerinizin sayfanızı görüntüleme olasılığının en yüksek olduğu yolu düşünmek önemlidir. Yukarıdan aşağıya okuma eğilimimizi kabul etmek, ziyaretçilerin yapmalarını istediğiniz şeye odaklanmalarını sağlamak için iyi bir başlangıçtır. Bakışlarının nereye gideceğini bilerek, görsel bir hiyerarşi oluşturabilir ve CTA'nızı dönüştürmeleri için en iyi konumlara yerleştirebilirsiniz.

Bunu desteklemek için kapsamlı araştırmalar da yapılmıştır. 2006'da Nielsen Norman Group, bugüne kadarki en faydalı ve en çok alıntı yapılan göz izleme çalışmalarından birini gerçekleştirdi. Çalışma sırasında 232 kullanıcının binlerce farklı web sayfasını nasıl görüntülediğini incelediler. Bulgular, kullanıcıların ana okuma davranışlarının çeşitli siteler ve görevler arasında nispeten tutarlı olduğu sonucuna varmıştır. Kullanıcılar bir F-Desen düzeninde okur.

F-Desen nedir?

F-Pattern, çevrimiçi içeriği okurken gözlerimizin hareket etme şeklidir. Birkaç saniye içinde gözlerimiz, web sitesinin kopyası ve diğer görsel öğeler arasında olağanüstü hızlarda hareket ederek sayfayı şu sırayla tarar:

• İlk olarak, önemli başlıkları okumak için sayfanın üst kısmında
• Ardından, sayıları veya madde işaretlerini görüntülemek için sayfanın sol tarafında
• Son olarak, kalın metin veya alt başlıkları okumak için sayfa boyunca tekrar

Aşağıdaki üç ısı haritası, üç farklı web sitesinin kullanıcı göz izleme çalışmalarından türetilmiştir. Renk anahtarı aşağıdaki gibidir:

• Kırmızı = en çok görüntülenen ve en çok sabitlenen
• Sarı = bazı görünümler, ancak daha az sabitleme
• Mavi = en az görüntülenen ve neredeyse hiç düzeltme yok
• Gri = neredeyse hiç görüş yok ve düzeltme yok

F-Okuma modelinin daha kaba, genelleştirilmiş bir taslak olduğuna dikkat edin - mutlaka tam bir F şekli değil. Ayrıca, F-Pattern tasarımının kendisini geleneksel bir F modeli gibi iki yatay gövdeyle sınırlamadığını unutmayın.

Kullanıcıların yalnızca bir yatay çizgi boyunca okuduğu ve desenin baş aşağı L gibi görünmesini sağladığı zamanlar olacaktır. Diğer zamanlarda sayfanın üçüncü bir bölümünü okuyarak tasarımın F'den çok E gibi görünmesini sağlar. Ve , tıklama sonrası açılış sayfanız daha uzunsa, insanların takip etme olasılığının daha yüksek olduğu görsel bir hiyerarşi oluşturmaya yardımcı olmak için ikiden fazla kaynak eklemek isteyeceksiniz.

F Modeli, tıklama sonrası açılış sayfalarına nasıl uygulanır?

Web sayfalarını kasıtlı bir akışla tasarlamak önemlidir. İzleyicilerinizin dikkatini çekmek için özel olarak yerleştirilmiş herhangi bir şey olmadan, gözleri F-Pattern tasarımındaki içerik ağırlıklı bir sayfada doğal olarak hareket edecektir.

F-Desen tasarımı, blog gönderileri, arama sonuçları sayfaları, daha uzun satış sayfaları vb. gibi yoğun metin içeren sayfalar için en iyi sonucu verir. Ancak bu, kısa biçimli tıklama sonrası açılış sayfaları tasarlayamayacağınız anlamına gelmez. F-Desen düzeni.

Göz izleme araştırmalarından elde edilen bulguları kullanarak, herhangi bir tıklama sonrası açılış sayfasını stratejik olarak tasarlayabilirsiniz, böylece en önemli unsurlar tam olarak ziyaretçilerinizin onlara odaklanması en muhtemel yerlerdir.

İzleyicilerin gözlerinin, sayfanın geri kalanını taramadan önce neredeyse her zaman sayfanın sol üst köşesinden başlayacağını unutmayın. Bu nedenle, tıklama sonrası açılış sayfanız meşgulse ve ziyaretçilerin, teklifiniz için geri sayım gibi belirli bir öğeyi hemen fark etmelerini istiyorsanız, bunu sol üst bölüme yerleştirdiğinizden emin olun. Ardından, tıklama sonrası açılış sayfanızın geri kalanını net bir görsel hiyerarşi ve görüntüleyenlerinizi CTA'nıza yönlendiren bir akışla tasarlayın.

F-Desenini yok sayan bir tıklama sonrası açılış sayfası

Pest Exterminator bu tıklama sonrası açılış sayfasını oluşturdu ve F-Düzenini takip etmiyor. Herhangi bir görsel hiyerarşiden yoksundur:

Dikkatiniz ilk olarak nereye gidiyor? Görüntü? İndirim? Tek biçimli alan? En alttaki üç teklif?

Gözleriniz belirli bir yere çekilmiyor. Dikkatinizi birkaç farklı yöne çekmekte çok fazla şey oluyor. Her öğe, mümkün olduğunca fazla dikkat çekecek şekilde biçimlendirilmiştir, bu da hepsinin birbiriyle rekabet etmesini sağlar. Bu nedenle, ziyaretçilerin sayfanın birincil hedefini belirlemesi zordur ve Pest Exterminator dönüşüm üretmede büyük olasılıkla mücadele edecektir.

Şimdi F-Reading modelini izleyen birkaç tıklama sonrası açılış sayfası örneğine bakalım.

Tıklama sonrası daha kısa açılış sayfaları için tüm sayfayı gösterdiğimizi unutmayın. Daha uzun sayfalar için yalnızca ekranın üst kısmında görüntülendik. Ek olarak, listelenen markalardan bazıları, sayfalarını aşağıda gösterilenden farklı bir sürümle A/B testi yapıyor olabilir.

F Düzenini takip eden tıklama sonrası açılış sayfaları

dovico

Yukarıdaki Dovico tıklama sonrası açılış sayfası, F-Pattern web tasarımı en iyi uygulamalarını kullanır. Her bir önemli bileşenin, ziyaretçilerin bu sayfayı görüntülerken doğal olarak bakacakları F-Pattern rotası boyunca tam olarak nasıl konumlandırıldığına dikkat edin:

1. İzleyiciler, önce şirket logosunu görecekleri sayfanın sol üst köşesine bakacaklar.
2. İlk yatay gövde boyunca hareket ederek kadının gülen yüzüne geleceklerdir. Burada özellikle ilginç olan şey, F-Açısının aşağıya, yüzüne doğru eğimli olması ve doğrudan telefon numaralarının karşısında olmamasıdır.
3. Sayfanın sol tarafından bir sonraki yatay gövdeye doğru hareket eden izleyiciler, dikkatlerini başlığa ve alt başlığa odaklayacaktır.
4. Son olarak, tıklama sonrası açılış sayfasının ana amacı olan CTA düğmesine gelecekleri dikey gövdede F-Desenine devam edecekler.

En temel tıklama sonrası açılış sayfası öğelerini F-Layout'a bu şekilde yerleştirmek, Dovico sayfasını optimize etmeye ve ziyaretçileri teklif üzerinde harekete geçmeye ikna etmeye yardımcı olur.

Dinamik Verim

Dynamic Yield'ın tıklama sonrası açılış sayfası da F-Pattern düzenini takip eder, ancak adları ve logoları ekranın üst kısmındaki en küçük şey olduğundan, izleyicinin gözleri muhtemelen farklı bir konumdan başlar:

1. Yazı tipi daha büyük olduğundan ve bir kısmı kalın olduğundan, muhtemelen ilk önce sayfa başlığına çekileceklerdir.
2. Ardından, ilk yatay gövdeyi tamamlayan sağdaki görüntüye ilk gövde boyunca hareket edecekler.
3. Dikey gövdeyi aşağıya doğru tarayan izleyiciler, alt başlığı okuyacaktır.
4. Aşağıya doğru devam edildiğinde, parlak mavi CTA düğmesinin bir sonraki ziyaretçinin dikkatini çekmesi muhtemeldir.
5. CTA düğmesinden sonra, müşteri rozetleri ek bir kök görevi görür ve sayfa, ekranın alt kısmında benzer bir şekilde devam eder.

Ortak Kayropraktik

F-Pattern tasarımlarının her zaman geleneksel bir F-Shape izlemesi gerekmediğinden, The Joint Chiropractic tıklama sonrası açılış sayfasının nasıl oldukça fazla yatay gövdeye sahip olduğuna dikkat edin:

1. Dinamik Verim'e benzer şekilde, başlık F Modeliyle başlar (ve formla birlikte sağa doğru devam eder).
2. İkincisi, misyon beyanı (kopyanın geri kalanından daha büyük basılmış) bir sonraki gövdeye denk gelir.
3. Son olarak, Ortak Kayropraktik'in ikonografisi ve cesur faydaları, modelin son gövdelerini oluşturur.

Daha fazla kaynak sayısına rağmen, sayfa F-Pattern web tasarımı en iyi uygulamaları göz önünde bulundurularak oluşturuldu - ziyaretçilerin takip etmesini ve tıklama sonrası açılış sayfasının en önemli bölümlerine odaklanmasını kolaylaştırdı.

Boston Küresi

Boston Globe'un tıklama sonrası açılış sayfası tipik bir F Şeklini izlemez ve bu da ziyaretçileri promosyona dönüştürmeye ikna etmelerine yardımcı olur:

1. Sol üst köşeden başlayarak, ziyaretçiler önce gazetenin logosunu görürler.
2. Logonun hemen altında başlık ve ardından aynı yatay gövde boyunca görüntü yer alır.
3. Dikey gövdeden aşağıya doğru devam eden ziyaretçiler, parlak yeşil CTA düğmesine odaklanıyor.
4. Dikey kökte daha da ilerlemeyi seçerlerse, sınırsız erişime kaydolurken neler bekleyebileceklerini öğrenecekler.

F-Desenini kullanma sırası sizde

Tüm gerekli tıklama sonrası açılış sayfası öğelerini dahil etmek, dönüşümler için önemlidir, ancak bunların düzeni de aynı derecede önemlidir.

F-Pattern tasarımı, ziyaretçilerin belirli öğelere odaklanmasını sağlamak için görsel bir hiyerarşi ve kasıtlı bir akış oluşturmanıza yardımcı olur. Onları istediğiniz yolu takip etmelerini sağlayabilirseniz, hemen çıkmaları daha az olasıdır ve bunun yerine sayfanızda daha fazla etkileşimde bulunarak eyleme geçerler.

Bu örnekleri göz önünde bulundurarak F-Layout'u uygulama sırası sizde. Instapage ile kendi profesyonel tıklama sonrası açılış sayfanızı oluşturun, bugün bir Enterprise demosu talep edin.