Z-Desen Düzeni Nedir ve Ne Zaman Kullanılır?

Web sayfaları gibi tıklama sonrası açılış sayfaları her zaman bir tür organize görsel hiyerarşiyi izlemelidir. Muhtemelen, bunu zaten biliyorsunuz, ancak tekrar etmekte fayda var. İzleyicilerinizi, fark etmelerini istediğiniz şeye odaklanmaları için etkilemek için yapabileceğiniz her şey oyunun adıdır.

İyi bir tasarımcı, kullanıcıların çevrimiçi bilgileri nasıl görüntülediğini ve işlediğini anlar. Bu bilgi, tasarım kararlarını bilgilendirir ve en temel unsurları fark edilecek şekilde yerleştirmelerine yol açar. Her şey doğru görünüyorsa, tasarım ziyaretçileri istenen eylemi yapmaya ikna edecektir.

Tasarımcıların kullanıcıları etkilemesinin ve bir sayfanın en önemli unsurlarına dikkat çekmesinin başlıca yollarından biri, sayfayı Z-Desenini kullanarak tasarlamaktır.

Z-Desen nedir?

Z-Pattern tasarımı, insan gözünün okuduğunda - soldan sağa, yukarıdan aşağıya - izlediği rotayı izler:

• İlk olarak, insanlar sol üstten sağ üste doğru tarayarak hayali bir yatay çizgi oluşturur.
• Ardından, görünen sayfanın aşağısına ve soluna, hayali bir çapraz çizgi oluşturarak
• Son olarak, ikinci bir yatay çizgi oluşturarak tekrar sağa dönün

İzleyicilerin gözleri bu düzende hareket ettiğinde hayali bir “Z” şekli oluşturur:

Z-Pattern tasarımlarının geleneksel Z-Shape'e uyması gerekmediğini ve model boyunca Z-Açılarının sayısının değişebileceğini belirtmek önemlidir.

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

Z-Layout ile bir web sayfası oluşturmak, insanların takip etmesi muhtemel görsel bir hiyerarşi oluşturmaya yardımcı olur ve bu da onu tıklama sonrası açılış sayfası tasarımları için mükemmel bir düzen seçeneği haline getirir.

Ama neden F-Pattern yerine Z-Pattern ile bir sayfa tasarlayasınız?

F-Layout, içeriğin yoğun olduğu sayfalar için daha uygun olma eğilimindeyken, Z-Layout, öncelikle minimum kopyaya sahip sayfalar içindir. Esasen, Z-Pattern, basitliğin öncelikli olduğu ve ana paketin CTA olduğu sayfalar için daha uygundur.

Z-Layout'u göz önünde bulundurarak tasarlama:

• En üstteki yatay çizgi, izleyicilerin önce odaklanmasını istediğiniz ana bileşenleri içermelidir.
• Çapraz çizgi, harekete geçirici mesajınızı oluşturan tüm bilgi parçalarını içermelidir.
• Alt yatay çizgi, desen boyunca bir noktada CTA'yı vurgulamalıdır

Tıklama sonrası açılış sayfanızı Z-Desen düzenine göre oluşturmak, daha fazla dönüşüme yol açabilir, çünkü izleyicinin gözlerinin nereye hareket ettiğini kontrol edebilirsiniz .

Birkaç tıklama sonrası açılış sayfası örneğini inceleyerek Z-Desen tasarımı hakkında biraz daha bilgi edelim.

Tıklama sonrası daha kısa açılış sayfaları için tüm sayfayı gösterdiğimizi unutmayın. Ancak, daha uzun sayfalar için yalnızca ekranın üst kısmında görüntüledik. Tartıştığımız bazı noktaları görmek için her bir tıklama sonrası açılış sayfasına tıklamanız gerekebilir. Ek olarak, listelenen bazı örnekler, sayfalarını aşağıda gösterilenden farklı bir sürümle A/B testi olabilir.

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

Aşağıdaki Trafik Işığı Medyası tıklama sonrası açılış sayfası Z-Desenini izlemiyor. Bununla birlikte, izleyicilerin gözlerini sayfanın ortasından aşağı doğru CTA düğmesine giden amaçlanan bir yolu izlemeye ikna eden temiz, düzenli bir sayfa olarak kasıtlı bir akış sağlar:

Aşağıdaki varyasyonla sayfayı A/B testi yapma konusunda akıllıdırlar. Bu sefer Z-Desen düzenini takip ediyorlar:

Bu varyasyonu gördükten sonra, Z-Yolu aşağıdaki gibidir:

1. Beyaz başlık, şirket logosu sayfada daha üstte yer almasına rağmen, koyu arka plana karşı ilk önce dikkat çekiyor.
2. Buradan, yol, sayfa başlığının hemen yanında olduğundan ve beyaz arka planıyla iyi bir tezat oluşturduğundan, form başlığına doğru tarar. Bu, ilk Z-Desen açısıdır.
3. Daha sonra desen tasarımı, sayfanın sol tarafında sarı “fırsat keşfetme” kopyasına çapraz olarak devam eder.
4. Yolu takip ederek tekrar sağ tarafa dikkat çekilir ve turuncu CTA butonuna odaklanılır.

Bu göz hareketlerinin öznel olduğunu ve tüm kullanıcıların sayfaları aynı şekilde taramayacağını unutmayın. Hatırlanması gereken en önemli şey, izleyicilerinizin izlemelerini istediğiniz yola odaklanmalarını sağlamak ve onları CTA'nızı dönüştürmeye ikna etmektir.

Şimdi, Z-Desen düzenini izleyen bazı tıklama sonrası açılış sayfalarını inceleyelim.

Z Modelini takip eden tıklama sonrası açılış sayfaları

Yaşam Kilidi

Bu LifeLock tıklama sonrası sayfası Z-Desenini takip eder ancak bir CTA ile sonuçlanmaz:

1. Metnin geri kalanından daha büyük yazı tipi olduğundan ve koyu arka planla iyi bir kontrast oluşturduğundan, ziyaretçi muhtemelen başlıktan başlayacaktır.
2. Sağa doğru tarayan izleyici, ilk Z-Açısı olan adamın yüzüne odaklanacaktır.
3. Ardından, göz bakışı, ikinci dönüş noktasındaki parlak kırmızı CTA düğmesine çapraz olarak gidecektir.
4. Son olarak, odak akıllı telefon görüntüsüne dönecektir.

Z-Desenli tasarımların geleneksel bir "Z" oluşturmaması gerektiği gibi , Z-Pattern açılarında CTA'ların gerekli olmadığını bilmek önemlidir. CTA'ların dönüşlerde olması daha iyidir çünkü burası izleyicilerin gözlerinin sona ereceği yerdir.

AraYangın

Bu CallFire tıklama sonrası sayfası, geleneksel bir Z oluşturmayan başka bir örnektir, ancak model hala belirgindir:

1. İzleyiciler, kopyanın geri kalanından daha büyük olduğu için sayfa başlığıyla başlar.
2. Buradan ziyaretçiler, forma ve CTA düğmesine odaklanarak ilk Z-Açısını oluşturarak görüntüden geçerek aşağı ve sağa doğru tarayacak.
3. Ardından, izleyiciler sola, videoya doğru ilerler ve ikinci Z-Açısını oluşturur.
4. Son olarak, izleyicilerin gözleri sayfa boyunca ikonografiye ve üç adıma doğru devam edecek.

kehanet

Oracle'ın sayfası, geleneksel bir Z'yi takip etmeyen başka bir örnektir, ancak yol sonunda CTA'ya götürür:

1. Sayfa ziyaretçileri, sayfadaki en büyük yazı tipi olduğundan ve çevresindeki tüm boşluklarla okunması kolay olduğundan, büyük olasılıkla başlıktan başlayacaklardır.
2. Ardından, sağdaki görüntüye yatay olarak hareket edecekler.
3. Buradan, insan gözü doğal olarak grafikte sol tarafa doğru akacaktır.
4. Son olarak, izleyicilerin gözleri sayfanın alt kısmını Z-Layout'un sona erdiği CTA'ya tarar.

Filomatik

Bu Fleetmatics tıklama sonrası açılış sayfası, birden çok Z-Açısında bir CTA içerir:

1. Muhtemelen sol üstteki başlık ve alt başlık izleyicilerin dikkatini ilk önce çekecektir.
2. Oradan, ziyaretçiler arka plan videosunu görmek için sağa doğru tarayacak.
3. Z-Shape'te ilk köşegeni oluşturan ziyaretçilerin, soldaki ilk turuncu CTA düğmesine doğru tarama yapması muhtemeldir.
4. Ardından, kullanıcının bakışları müşteri rozetlerinden geçerek madde işaretli kopyadan ikinci turuncu CTA düğmesine geçiş yapacaktır.
5. Son olarak, Z Düzeni, görüntüye doğru sola ve tekrar üçüncü CTA düğmesine geri döner.

Desen, daha fazla Z-Açı oluşturarak sayfada daha da devam eder. Ve birçok kez bir CTA ekleyerek, izleyiciler onları görmezden gelmekte zorlanacak ve tıklamaya ve dönüştürmeye ikna edilecektir.

Z-Desen düzeniyle bir sonraki sayfanızı tasarlayın

Yukarıda tartışılan markaların her biri, tıklama sonrası açılış sayfası öğelerini bir Z-Desen düzeni boyunca yerleştirme konusunda harika bir iş çıkarıyor. Yol boyunca, izleyicinin bakışlarını etkili bir şekilde etkiler ve onları CTA'ya yönlendirir.

Bu örnekleri göz önünde bulundurarak ve ziyaretçilerinizin dönüşüme daha fazla odaklanmasını sağlamak için Instapage ile bir sonraki tıklama sonrası açılış sayfanızı tasarlayın. Bugün bir Instapage Enterprise demosu için kaydolun.