Above the Fold (kaydırmadan görünen alan)
Above the fold, bir web sayfasının kaydırma yapmadan görünen kısmı, yani ziyaretçinin sayfa yüklendiğinde gördüğü ilk şeydir.
Önemli noktalar
- Katlama çizgisi viewport, yakınlaştırma ve tarayıcı arayüzüyle kayar; sabit piksel değeri yoktur.
- Sabit header ve onay bantları, sizin içeriğiniz çizilmeden önce yükseklik tüketir.
- Görünürlük ikna değildir; alakasız bir eylem çağrısı üstte de başarısız olur.
- Üst alanı analitiğinizin gerçekten gösterdiği telefon ve dizüstü yüksekliklerinde denetleyin.
- Quiz başlat butonu yaygın mobil ekranlarda kaydırmadan görünür olmalıdır.
Derinlemesine
Above the fold'u sayfa değil viewport belirler. Tarayıcı, o anki genişlik, yükseklik ve yakınlaştırma düzeyinde görünür pencereye ne sığıyorsa onu çizer; bu yüzden sınır her cihazda, her tarayıcı arayüzünde ve her döndürmede kayar. Ziyaretçinin ulaşmak için kaydırması gereken her şey bu sınırın altında kalır. İlk çizim aynı zamanda ilk yargı olduğundan bu bölge sayfanın kimlik iddiasını taşır: sayfa kimin için, ne sunuyor ve şu an hangi tek eylem mümkün.
Kullanılabilir alan çoğu ekibin beklediğinden hızlı daralır. Sabit menü çubukları, çerez onay bantları, kampanya şeritleri ve tarayıcı araç çubukları, sizin içeriğinize sıra gelmeden yükseklik yer. Büyük hero görselleri eylem çağrısını aşağı iter, ağır dosyalar ise onun ne zaman görüneceğini geciktirir. Ödünleşim bütünlükle ilgilidir: bu alana çıkarılan her kanıt, logo sırası veya ikincil bağlantı ana mesajdan dikkat çalar; kalabalık bir üst alan yoğunluk değil gürültü olarak okunur.
Ekipler masaüstü maketine göre değil, analitiklerinde baskın olan iki üç viewport boyutuna göre üst alanı denetler. Test basittir: o yükseklikte yabancı biri bunun ne olduğunu ve sırada ne olduğunu söyleyebiliyor mu? Quiz landing page'inde bu, sonuç odaklı bir başlık, scorecard'ın ne döndürdüğünü söyleyen tek satır ve yaygın bir telefon ekranında kaydırmadan görünen bir başlat butonu demektir.
Katlama çizgisi bir eşiktir, duvar değil. Sayfanın üstü hak ettiğinde ziyaretçiler isteyerek kaydırır; bu yüzden her argümanı çizginin üstüne tıkıştırmak genelde ters teper. Kavram kalite hakkında da bir şey söylemez: görünen ama alakasız bir eylem çağrısı, bir paragraf bağlamdan sonra bulunandan daha kötü dönüşür. Düşünülerek alınan kararlarda karar ilk ekranda verilmez; üst alan dikkati satın alır, sayfanın geri kalanı lead'i kazanır.
Pratikte örnek
Nasıl ölçülür
Önce ana eylemin görülüp görülmediğine bakın. Öğe görünürlüğü veya viewport gösterim takibi, butonun oturumların hangi payında hiç render edildiğini cihaz kırılımıyla söyler. Bunu largest contentful paint ile eşleştirin; geç gelen bir buton sabırsız ziyaretçi için fiilen çizginin altındadır. Yüksek hemen çıkma oranı ile düşük buton görünürlüğü birlikte, metni değil yerleşimi işaret eder.
Ardından üstteki eylemin tıklama oranını, aynı eylemin aşağıdaki tekrarıyla karşılaştırın. Mobilde alttaki yerleşim kazanıyorsa ilk ekran ya fazla kalabalık ya fazla yavaştır. Kaydırma başlatma oranı, yani hiç kaydıran ziyaretçilerin payı, tamamlayıcı sinyaldir: neredeyse herkesin anında kaydırması, açılış ekranının hiçbir soruyu yanıtlamadığını gösterir.
Sık yapılan hatalar
Tasarımcılar üst alanı geniş bir masaüstü monitöründe onaylar ve orta boy bir telefonu hiç kontrol etmez; orada sabit header ve çerez bandı geriye butonsuz bir metin şeridi bırakabilir. Analitiğinizdeki en yaygın üç viewport yüksekliğinde ekran görüntüsü alın ve her birinde ana eylemin nerede durduğunu işaretleyin. Herhangi birinde çizginin altına düşüyorsa başlığı kısaltın veya hero görselinin yüksekliğini azaltın.
İkinci hata, üst alanı doldurulacak bir kap gibi görmektir. Ekipler bir logo duvarı, bir referans, üç bağlantı ve bir video ekler; her öğe asıl önemli olandan dikkat çalar. Sayfanın istediği tek eyleme karar verin, ona ekrandaki en güçlü kontrastı verin ve kalan her şeyi aşağı indirin. İlk ekrandaki yoğunluk netliği düşürür ve burada değerli olan netliktir.
Sıkça sorulan sorular
Above the fold mobilde hâlâ önemli mi?
Evet, hatta muhtemelen masaüstünden daha önemli. Mobil ekranlar daha küçüktür, bu nedenle görünen alan daha az içerik taşır; bu da değer önerisi ve birincil eylem çağrısıyla başlamayı kritik hâle getirir.
Bir quiz landing page'inde above the fold'da ne olmalı?
Net, fayda odaklı bir başlık, quizin neyi ortaya çıkardığına dair tek cümlelik bir vaat ve belirgin bir başlat butonu. Detaylar, referanslar ve SSS'ler, ziyaretçi kaydırdıktan sonra katlama çizgisinin altında yer alabilir.
Katlama çizgisi sabit bir konum mu?
Hayır. Ekran boyutu, çözünürlük ve tarayıcı çubuğuna göre kayar, dolayısıyla tek bir piksel çizgisi yoktur. En yaygın görünüm alanları için tasarlayın ve eylem çağrınızın hepsinde görünür kaldığını test edin.
Above the fold kaç piksel yüksekliğindedir?
Tek bir sayı yoktur. Görünür yükseklik cihaza, tarayıcı arayüzüne, yakınlaştırmaya ve yöne bağlıdır; sabit bir header veya çerez bandı alan kapladığında yeniden değişir. Sabit bir değere göre tasarlamak yerine kendi analitiğinizden yaygın viewport yüksekliklerini alın ve başlıkla ana eylemin en küçüğüne sığdığını doğrulayın.
Form veya CTA hep üstte mi olmalı?
Eylem görünür ya da açıkça işaretlenmiş olmalı, ancak formun kendisi zorunlu değil. Karmaşık ya da yüksek bağlılık isteyen tekliflerde forma kaydıran bir buton, ziyaretçinin henüz doldurmaya hazır olmadığı anında görünen bir formu çoğu zaman geçer. Önemli olan ilk ekranın sonraki adımı tartışmasız göstermesidir.
Above the fold sayfa hızı puanlarını etkiler mi?
Dolaylı olarak. Core Web Vitals, ilk viewport içindeki en büyük görünür öğenin çizilmesini ölçer; bu yüzden aşırı büyük hero görselleri ve geç yüklenen fontlar hem puanı hem ilk izlenimi bozar. Hero görselini sıkıştırmak ve fontunu önceden yüklemek genellikle ölçümü ve dönüşüm yolunu aynı anda iyileştirir.
Üst alanda ne kadar içerik olmalı?
Sayfanın kimin için olduğunu, ne kazandırdığını ve sırada ne olduğunu yanıtlayacak kadar. Pratikte bu bir başlık, bir destek satırı ve tek bir eylemdir; teklifi netleştiriyorsa bir de görsel. Geri kalan her şey aynı saniyeler için yarışır. İddiayı kurmak yerine destekleyen malzeme daha aşağı aittir.
Çerez bantları üst alanı değiştirir mi?
Evet ve mobilde çoğu zaman ciddi biçimde; onay penceresi kapatılana dek ekranın büyük bölümünü örtebilir. Sayfayı yalnızca onay sonrası değil, onay öncesi hâliyle de test edin. Bant başlığı tamamen gizliyorsa yüksekliğini azaltın veya alta sabitleyin ki değer iddiası ilk çizimden sağ çıksın.
Herkes kaydırıyorken above the fold hâlâ önemli mi?
Sert bir sınır olarak değil, dikkat filtresi olarak önemli. Kaydırmak alışkanlıktır, ama kaydırmaya devam etme kararı ilk ekranda verilir. Beklenti her şeyi görünür kılmaktan kaydırmayı hak etmeye kaydı; bu yüzden sayfanın üstü artık ne kadar şey taşıdığıyla değil netliğiyle değerlendirilir.