Hero Section (sayfa üst bölümü)
Hero section, bir landing page'in en üstündeki belirgin bloktur ve genellikle bir başlık, destekleyici metin, bir görsel ve birincil bir eylem çağrısını bir araya getirir.
Önemli noktalar
- Hero bir bileşik bloktur; tek bir öğeyle değil hiyerarşiyle çalışır.
- Reklamın ifadesini hero'da tekrarlamak anında tanıma sağlayıp hemen çıkmayı düşürür.
- İlgili ekran görüntüsü iddiayı destekler; dekoratif fotoğraf kanıtsız yer kaplar.
- Menüyü kaldırmak quiz landing hero'sunda tıklanacak tek şey bırakır.
- Düz seyreden hero testleri genelde sunumu değil konumlandırmayı işaret eder.
Derinlemesine
Hero section bir bileşiktir: başlık, destek satırı, bir görsel, tek bir birincil eylem ve çoğu zaman küçük bir güven öğesi. Tek bir parça üzerinden değil, hiyerarşi üzerinden çalışır. Punto, kontrast ve boşluk okuma sırasını kurar; göz başlığa iner, destek satırına devredilir ve butona ulaşır. İki öğe aynı görsel ağırlık için yarıştığında bu sıra kırılır ve ziyaretçi sırayı kendi kurmak zorunda kalır.
En güçlü kaldıraç mesaj eşleşmesidir. Hero, ziyaretçiyi getiren reklamın veya arama sonucunun ifadesini tekrarladığında tanıma anında olur ve hemen çıkma düşer. İkinci sırada görsel seçimi gelir: ilgili bir ekran görüntüsü ya da şema iddiayı destekler, dekoratif bir stok fotoğraf kanıt eklemeden yer kaplar. İkinci bir eylem çağrısı, bağlantı dolu bir menü ya da otomatik oynayan video genelde sunduğu seçenekten çok sulandırma getirir.
Uygulamada hero en son kurulur; teklif ve hedef kitle netleştikten sonra, trafik kaynağı değiştiğinde de yeniden yazılır. Birçok ekip sayfanın geri kalanını sabit tutup kampanya başına birkaç hero varyantı taşır. Quiz funnel sayfasında hero giriş noktasıdır: başlık sonucu çerçeveler, destek satırı süre ve formatı verir, tek bir buton scorecard'ı başlatır ve menü kaldırıldığı için tıklanacak başka bir şey kalmaz.
Hero, yanlış kitleyi ya da kimsenin istemediği bir teklifi telafi edemez. Kazanımlar düzleştikten sonra varyant testine devam eden ekipler, sorun konumlandırmadayken genellikle sunumu optimize eder. Kalıp ayrıca ziyaretçinin zaten ikna gelmiş olduğu yerlere, örneğin deneme içinden açılan bir fiyat sayfasına ve okurun aradığı metni yalnızca geciktiren büyük dekoratif blokların bulunduğu editoryal sayfalara kötü oturur.
Pratikte örnek
Nasıl ölçülür
Hero performansını iki sayı anlatır: birincil eylemin tıklama oranı ve hiç kaydırmayan ziyaretçilerdeki hemen çıkma oranı. İkisini trafik kaynağı kırılımıyla okuyun; bir reklam için yazılmış hero başka bir reklamda zayıf kalır. Yüksek hemen çıkma ile küçük kalan kesimde güçlü tıklama oranı, zayıf butonu değil mesaj uyumsuzluğunu işaret eder.
Tek değişken test edin ve sayfanın kalanını sabit tutun; yoksa sonucu başlığın mı görselin mi değiştirdiğini ayırt edemezsiniz. Kazananı tıklamanın ötesinde de izleyin: quiz başlatmayı artırıp tamamlamayı düşüren bir hero, teklife uymayan kişileri çekmiştir; bu, iyileştirme kılığına girmiş bir kayıptır.
Sık yapılan hatalar
Ekipler hero'yu teklif ve kitle kararlaşmadan önce yazar ve ziyaretçinin sonucunu değil şirketi anlatan bir metinle kalır. Önce ziyaretçinin elde ettiği sonucu, bir görüşmede sesli söyleyeceğiniz cümle olarak yazın; sonra onu başlığa sıkıştırıp ayrıntıları destek satırına taşıyın. Sayfanın kimi dışarıda bıraktığını söyleyemiyorsanız hero hâlâ fazla geniştir.
İkinci hata kalabalık hero'dur: eşit ağırlıkta iki buton, tam bir menü, dönen bir slider ve bir rozet sırası. Her ekleme ziyaretçiden eylem değil seçim ister; özellikle slider, mesaj okunmadan onu kaydırıp götürür. Tek bir eyleme baskın kontrastı verin, ikincil bağlantıları görünür biçimde hafifletin ve slider'ı en güçlü tek karesiyle değiştirin.
Sıkça sorulan sorular
En yaygın hero section hatası nedir?
Değer odaklı yerine zekice ya da özellik odaklı bir başlık kullanmak, böylece ziyaretçilerin ne aldıklarını anlayamamasıdır. Quizin sunduğu somut sonuçla başlamak genellikle çok daha iyi dönüşür.
Hero section'da ne bulunmalı?
Sonucu söyleyen bir başlık, ayrıntıları taşıyan tek bir destek satırı, süsleyen değil netleştiren bir görsel ve tek bir birincil eylem. Doğru ve kısa olmak kaydıyla müşteri sayısı ya da tek satırlık bir alıntı gibi küçük bir güven öğesi işe yarar. Özel bir landing page'de menü dahil geri kalan her şey isteğe bağlıdır ve çoğunlukla eksiltir.
Hero'da görsel mi video mu kullanmalı?
Görsel, ürünün ne yaptığını netleştirdiğinde kullanılır; ekran görüntüsü veya etiketli şema gibi. Video, teklif tek cümleye sığmıyorsa işe yarar ama tıklayınca oynasın; otomatik oynatma başlıkla yarışır ve ilk çizimi geciktirir. Dekoratif fotoğraf, harekete geçirilebilir bilgi eklemeden sayfa ağırlığı ekler.
Landing page hero'sunda menü olmalı mı?
Özel bir kampanya sayfasında genelde hayır. Menü, amacı tek bir eylem olan bir sayfadan çıkış kapıları sunar; ziyaretçi gezinerek değil reklamdan gelmiştir. Logoyu ve yasal olarak gereken bağlantıları koruyun. Ana sayfada hesap tersine döner, çünkü ziyaretçiler karışık niyetle gelir ve yönlendirmeye ihtiyaç duyar.
Hero section ile above the fold farkı nedir?
Above the fold bir viewport ölçümüdür: kaydırmadan görünen her şey. Hero section ise tanımlı bir kompozisyonu olan tasarlanmış bir bloktur. Genelde örtüşürler ama aynı değildirler: uzun bir hero telefonda çizginin altına taşabilir, bir duyuru bandı ise hero'ya ait olmadan görünür alanı kaplayabilir.
Hero metni ne kadar uzun olmalı?
Başlık, mobil genişlikte tek satırda okunabildiğinde en iyi çalışır; bu genelde on kelimenin altı demektir. Destek satırı iki satıra kadar uzayabilir ve koşulları taşır: kimin için, ne kadar sürede, hangi bedelle. Bunun ötesinde metin butonu ekrandan iter ve netliği bütünlükle takas eder.
Hero ne sıklıkla güncellenmeli?
Takvime göre değil; teklif, kitle ya da trafik kaynağı değiştiğinde. Bir kampanyanın diliyle yazılmış hero, başka bir reklamdan gelen ziyaretçiye yabancı gelir. Birçok ekip sayfa gövdesini ortak tutup yalnızca hero'yu kampanya başına değiştirir; böylece her varyant için ayrı sayfa taşımadan mesaj eşleşmesi korunur.