Fold Üstü Dikkat ve Scroll: Veriyi Yerleşim Kararına Çevirmek

Dikkatin sayfanın üst bölümünde yoğunlaştığı tartışmalı değil. Tartışmalı olan, bundan çıkarılan yerleşim kuralları: her şeyi yukarı yığmak ve fold'u sabit bir piksel çizgisi sanmak. Aşağısı için ne yapılacağı da aynı kararın parçası, ayrı bir konu değil.

Fold bir çizgi değil, bir dağılım

Ziyaretçilerin viewport yüksekliği geniş bir aralığa yayılır. Masaüstünde tarayıcı çubuklarından sonra kalan alanla, adres çubuğu açıkken küçük bir telefonda kalan alan arasında iki kattan fazla fark olabiliyor. Tek bir “fold yüksekliği” yok, bir dağılım var.

Bu kararı ortalama ekran yüksekliğiyle değil, analitikteki viewport yüksekliği dağılımının alt ucuyla veririm: 10. yüzdelik dilimdeki kullanıcı ne görüyorsa “üst” odur. Ortalamaya göre kurulan sayfada ziyaretçilerin yaklaşık yarısı asıl öğeyi kaydırmadan göremez, ki bu tam olarak kaçınmaya çalıştığın şey.

Üste ne koyacaksın

Üç şey yeter: sayfanın ne olduğunu söyleyen bir başlık, tek bir birincil eylem, aşağıda devam eden içeriğin sinyali. Geri kalan her şey aşağı inebilir, dahası inmeli.

Tarama düzeninin F harfine benzemesi serbest metin blokları için geçerli, kartlı ya da ızgara düzenler için değil. Pratik karşılığı basit: ana mesajı satırın ya da maddenin başına koy, sonuna değil. Uzun bir cümlenin ortasına gömülen fiyat bilgisi taranırken görünmüyor.

Yukarıdaki CTA ile sahte dip çelişkisi

“CTA fold üstünde dursun” ile “aşağıda içerik olduğunu belli et” tavsiyeleri aynı alanı ister. Ekranı tastamam dolduran, alt kenarında hiçbir şey kesilmeyen bir hero bölümü kullanıcıya sayfanın bittiğini söyler. Ok işareti koymak yerine bir sonraki bölümün ilk satırını ekranın altından içeri taşı. Kesilmiş içerik, kaydırma için gördüğüm en güçlü sinyal.

CTA'nın yeri de sayfa türüne göre değişir. Tanıdık ve kısa bir aksiyonda (kaydol, sepete ekle) yukarı koymak doğru. Açıklama isteyen bir üründe, fiyatlandırma ya da kurumsal satış sayfalarında yukarıdaki CTA erken gelir, kullanıcı henüz karar verecek bilgiye sahip değil. Orada tek bir yukarı buton yerine içeriğin ardından tekrarlanan bir CTA daha iyi çalışıyor.

Ölçmenin pratiği

Scroll derinliği ham haliyle yanıltır: kısa sayfada yüzde yüze ulaşmak kolaydır, uzun sayfada zor. Yüzde yerine piksel yüksekliğine normalize et ya da tek bir anlamlı olay tanımla, örneğin içeriğin son paragrafını gören oturum. Bunu ölçmek için scroll dinleyicisi yazmaya gerek yok; sayfanın altına bir işaret öğesi koyup IntersectionObserver ile izlemek hem daha ucuz hem de kaydırma performansını bozmuyor.

Bir de şu tuzak var: dikkatin üstte toplanması kısmen kendi kendini doğruluyor, çünkü değerli içeriği zaten üste koyuyoruz. Isı haritası bu iki nedeni birbirinden ayıramaz. Ayırmak istiyorsan aynı bileşeni iki farklı konumda yayınla ve etkileşim oranlarını karşılaştır. Ölçüm maliyeti bir A/B kurulumu kadar, çıkan cevap ise tüm sayfa şablonuna uygulanabildiği için genelde bu maliyeti hızla çıkarır.