Above the fold: kullanıcının kaydırmadan gördüğü alana ne konmalı?
Above the fold'un ne olduğunu, hangi içeriğin buraya konulması gerektiğini ve "herkes aşağı kaydırmaz" inancının nerede yanlış kaldığını öğrenirsiniz.
Bir bakışta
- Above the fold, sayfa açıldığında kaydırmadan görünen alandır. Terim gazete katlamasından gelir; web'de görünür alan cihaza göre değişir.
- Kullanıcı dikkati hâlâ en çok üstte toplanır. Nielsen Norman Group'un çalışması, katlamadan sonra dikkatin belirgin biçimde düştüğünü bulmuştur.
- Kaydırma sınırı sabit değildir. Ekran boyutu, cihaz ve yön değiştikçe sınır da değişir.
- Önemli içerik ve ana çağrı üstte olmalı. Değer önerisi ve birincil eylem ilk ekranda görünmelidir.
Above the fold nedir?
Above the fold, bir web sayfası açıldığında kullanıcının kaydırma yapmadan gördüğü ilk alandır. Terim gazetecilikten gelir: gazete katlanmış satılırken, üst yarıdaki manşetler müşterinin ilk gördüğü kısım olduğu için en önemli haberler oraya konurdu. Web'de de aynı mantıkla, sayfanın ilk ekranı en değerli yer sayılır.
Tek bir sabit fold çizgisi yoktur. Telefon, tablet ve masaüstünde görünür alan farklıdır; tarayıcı çubukları ve çözünürlük de bunu değiştirir. Bu yüzden fold, tasarımda bir piksel değeri değil bir kavram olarak ele alınır.
Kullanıcılar kaydırır mı?
Yaygın bir inanış, kullanıcıların hiç kaydırmadığıdır. Nielsen Norman Group'un izleme araştırması bunun doğru olmadığını gösterir: kullanıcılar bugün eskisine göre daha çok kaydırıyor, ama dikkat yine de katlamadan sonra belirgin biçimde düşüyor. Makale, dikkatin sayfanın üst bölümünde yoğunlaştığını ve kaydırmanın bir motivasyon gerektirdiğini söyler.
Sonuç şudur: kaydırmadan sonra gelen içerik okunabilir, ama onu görmeleri için kullanıcıların bir sebebi olmalıdır. Ana mesajı aşağıya saklayan sayfa bu sebebi vermez.
İlk ekrana ne konmalı?
İlk ekran üç soruya yanıt vermelidir: burası ne hakkında, bana ne fayda sağlar, ne yapmalıyım? Bunun için net bir başlık ya da değer önerisi, destekleyici kısa bir cümle ve birincil eylem düğmesi gerekir. Sayfa türüne göre ürün görseli, arama kutusu ya da önemli bir bilgi de buraya girebilir.
Bir kampanya sayfasında örneğin başlık, kısa açıklama ve "Başvur" düğmesi birlikte görünür olmalıdır. Düğmenin ilk ekranın altında kalması, ilgisi yüksek bir ziyaretçiyi bile kaydırma kararına zorlar.
Her öğenin yeri, ilk ekranda ne işe yaradığına bağlıdır
İçeriği katlamanın üstüne taşıma kararı
- Sayfanın amacını ve değerini anlatıyorsaİlk ekranda gösterBaşlık ve kısa açıklama burada yer alır.
- Birincil eylemi başlatıyorsaİlk ekranda gösterAna düğme kaydırma gerektirmemeli.
- Destekleyici ayrıntıysaAşağıya bırakKaydırma ipucu vererek devam ettir.
Mobilde durum
Mobilde görünür alan çok daha küçüktür; masaüstü için tasarlanmış büyük bir görsel ve başlık, telefonda tüm ilk ekranı kaplayıp eylemi aşağı itebilir. Bu yüzden mobil tasarımda öncelik sıralaması daha da sert yapılır: başlık, tek cümlelik açıklama, eylem.
İpuçları da önemlidir. Kesilmiş bir metin ya da yarım görünen bir kart, kullanıcıya devamında içerik olduğunu söyler. Hiçbir ipucu olmayan, her şeyin bitmiş göründüğü bir ilk ekran, kullanıcıyı kaydırmaktan caydırabilir.
Sık yapılan hatalar
- ilk ekranı yalnız büyük bir görsel ve slogana ayırmak
- ana düğmeyi sayfanın ortasına yerleştirmek
- kayan bannerlarla ilk ekranı kalabalıklaştırmak
- görünür alanı tek bir cihaza göre tasarlamak
- ilk ekran dolduktan sonra kaydırma için bir ipucu bırakmamak
Bu hataların ortak noktası, ilk ekranı güzel göstermeye çalışıp işe yarar yapmamaktır. Tasarımın ilk testi, yabancı birinin ekrana beş saniye baktıktan sonra sayfanın ne hakkında olduğunu söyleyebilmesidir.
UX ve dijital pazarlama programlarında yeri
İlk ekran, dönüşüm optimizasyonunun en çok test edilen alanıdır. UX/UI Bootcamp, UI tasarım temellerini ve kullanılabilirliği işler. Dijital Pazarlama Bootcamp ise dönüşüm optimizasyonu ve kullanılabilirlik konularını kapsayan bir modül içerir.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Above the fold ölü bir kavram mı?
Hayır ama sabit bir çizgi değildir. Nielsen Norman Group, kaydırmanın arttığını ama dikkatin hâlâ üstte yoğunlaştığını bulmuştur. İlk ekran önemini koruyor; yalnız tek bir piksel sınırı yerine cihazlara göre değişen bir alan olarak düşünülmelidir.
İlk ekrana ne kadar içerik sığdırılmalı?
Kalabalık değil, net bir ilk ekran hedeflenir: ne olduğu, neden önemli olduğu ve ne yapılacağı. Daha fazlası dikkat dağıtır. Ayrıntıları aşağıya bırakıp kullanıcıya devam etmesi için bir ipucu vermek daha iyi sonuç verir.
Fold her cihazda aynı yerde mi?
Hayır. Telefon, tablet ve masaüstü farklı görünür alanlara sahiptir; tarayıcı çubukları da bunu değiştirir. Bu nedenle tasarım ve test, birden çok ekran boyutunda yapılmalıdır. Bu yüzden önemli öğelerin yeri yalnız bir cihazda değil, birkaç farklı ekran boyutunda denetlenmelidir.
Fold'un üstündeki alanı nasıl test ederim?
A/B testi ile başlık, görsel ve düğme yerleşimi karşılaştırılabilir; kullanılabilirlik testinde katılımcılardan ilk ekrana bakıp sayfanın ne hakkında olduğunu söylemeleri istenebilir. Isı ve kaydırma haritaları da neyin görülmediğini gösterir. Bulgular, hangi öğenin fark edilmediğini ve neyin yer değiştirmesi gerektiğini somut biçimde gösterir.