Above the Fold Nedir? Kıvrım Üstü Tasarım Rehberi

Above the fold nedir?

Above the fold, bir web sayfası açıldığında kullanıcının kaydırma yapmadan gördüğü ilk ekran alanıdır. Türkçede "kıvrım üstü" denir. Terim gazetelerin katlanan ön sayfasından gelir. Üst yarıdaki haber satışı belirlediği için gazeteler en güçlü başlığı oraya koyardı.

Web sayfasında kıvrım fiziksel bir çizgi değildir. Çünkü ekran boyutuna, tarayıcı çubuklarına ve cihaza göre yer değiştirir. Bu yüzden tek bir "doğru piksel" yoktur. Önemli olan, kullanıcının ilk saniyede ne gördüğüdür.

Biz ekibimizle her projede önce şu soruyu sorarız: ziyaretçi kaydırmadan nerede olduğunu, ne sunduğunuzu ve sonraki adımı anlıyor mu? Cevap evetse above the fold alanı işini yapıyordur. Aksi halde alt bölümleri güzelleştirmeniz sonucu değiştirmez.

Bu yazıda tanımı, mobil davranışı, hero alanında olması gerekenleri ve CTA yerleşimini anlatıyoruz. Ayrıca araştırma bulgularını, tablo ve kontrol listesiyle uygulamaya çevireceğiz. Genel çerçeve için web tasarım rehberimize de göz atabilirsiniz.

Above the fold neden hâlâ önemli?

Nielsen Norman Group (NN/g) 2018 tarihli göz izleme çalışmasında masaüstü kullanıcıların sayfa görüntüleme süresinin yaklaşık %57'sini kıvrım üstünde geçirdiğini bildirdi. Üstelik ilk iki ekranda süre oranı %74'e çıkıyordu. Kaynak: NN/g, "Scrolling and Attention".

Aynı kurumun 2010 verisinde bu oran %80'di. Yani insanlar daha çok kaydırıyor. Ancak kıvrımdan sonra dikkatin keskin biçimde düştüğü örüntü, NN/g'nin ifadesiyle 2018'de de aynı kaldı. Dolayısıyla "kaydırma alışkanlığı arttı, kıvrım önemsiz" sonucu çıkmaz.

Bir başka NN/g makalesi ("The Fold Manifesto") kıvrımı bir etkileşim maliyeti olarak tanımlar. Görünen içeriğe ulaşmak neredeyse bedavadır. Ama gizli içerik için kullanıcı ekstra bir eylem yapar. Üstelik kimse motivasyonsuz kaydırmaz.

Bu verilerin sınırını da bilmeniz gerekir. Çalışma masaüstü göz izleme verisine dayanır ve sizin sitenizin kitlesini birebir yansıtmaz. Bu nedenle bulguları kesin kural değil, test hipotezi olarak kullanın. Kendi ölçümünüz her zaman daha değerlidir.

Kıvrım çizgisi nerede başlar?

Kıvrım çizgisi sabit değildir. Bir masaüstü monitörde yaklaşık 600 ile 900 piksel arasında değişebilir. Öte yandan telefonda bu alan çok daha dardır. Tarayıcı araç çubukları, çerez bandı ve sabit menü de ekranda kalan alanı küçültür.

NN/g, kıvrımın "her ekran boyutunda bulunduğunu" vurgular. Yani sorun yalnızca eski 1024 piksellik ekranlar değildir. Hatta geniş ekranda bile bir yerde içerik yarım kalır. Bu noktayı tasarımın bir parçası olarak düşünmeniz gerekir.

Pratik bir yöntem şudur: hedef kitlenizin en yaygın üç cihaz boyutunu analitik verinizden çıkarın. Ardından her birinde sayfayı kaydırmadan açın ve ekran görüntüsü alın. Orada gördüğünüz alan, sizin gerçek above the fold alanınızdır.

Örneğin ekibimiz bir projede 1366x768 dizüstü, 1920x1080 masaüstü ve 390 piksel genişliğinde telefon boyutlarını temel alır. Böylece en kısıtlı ekranda bile değer önerisi ekranda kalır. Ayrıca geliştirici araçlarındaki cihaz simülasyonu bu iş için yeterlidir.

Mobilde above the fold nasıl çalışır?

Mobilde kıvrım üstü alan küçüktür, ama kullanıcı kaydırmaya daha alışkındır. NN/g, küçük ekranlarda daha çok kaydırma gerektiğini ancak kullanıcıların yine de kaydırmayı haklı çıkaracak değerli içerik beklediğini belirtir.

Bu nedenle mobilde üç şeyi öncelemelisiniz: net bir başlık, tek bir birincil eylem ve kaydırmayı teşvik eden görsel ipucu. Uzun bir menü, büyük bir logo ve çerez bandı ilk ekranı doldurursa içeriğiniz kıvrımın altına düşer.

• Logo ve menüyü kompakt tutun; ilk ekranın en fazla beşte birini kaplasın.
• Başlığı iki üç satırda bitirin ve değer önerisini açık yazın.
• Birincil CTA butonunu başparmak erişimindeki alana koyun.
• Çerez bandını küçültün ya da alt kenara alın.
• Görseli içeriği itmeyecek şekilde ölçekleyin.

Mobil öncelikli yaklaşımın ayrıntısını mobil öncelikli tasarım yazımızda anlattık. Sitenizi hızlıca denemek için mobil uyumluluk testi aracını kullanabilirsiniz.

İyi bir hero alanında neler bulunmalı?

Hero alanı, sayfanın en üstündeki ana bölümdür ve above the fold içeriğinin çekirdeğini oluşturur. İyi bir hero, beş sorunun cevabını birkaç saniyede verir. Kimsiniz, ne sunuyorsunuz, kime sunuyorsunuz, neden sizi seçmeli ve sonraki adım nedir?

• Değer önerisi içeren başlık: ne kazandırdığınızı söyler.
• Destekleyici alt başlık: başlığı bir cümleyle açar.
• Birincil CTA: tek ve net bir eylem çağrısı.
• Güven işareti: müşteri logosu, puan ya da sertifika gibi doğrulanabilir bir öğe.
• Anlamlı görsel: ürünü, hizmeti ya da sonucu gösteren bir görsel.

Bu beş öğenin hepsi büyük olmak zorunda değildir. Ancak hiçbiri eksik kalmamalıdır. Örneğin yalnızca şık bir fotoğraf ve marka sloganı içeren hero, şık durur ama ziyaretçiye yol göstermez.

Sektörünüze göre ağırlıklar değişir. Hizmet işletmelerinde güven işareti, e-ticarette ürün görseli ve fiyat, B2B sitelerde ise sorunu doğru adlandıran başlık öne çıkar. Bu ayrımı B2B landing page rehberimizde detaylandırdık.

Above the fold başlığı nasıl yazılır?

Above the fold başlığı, ziyaretçinin "doğru yerdeyim" demesini sağlamalıdır. Bu yüzden soyut slogan yerine somut fayda yazarsınız. "Geleceği tasarlıyoruz" cümlesi hiçbir şey anlatmaz. "İstanbul'daki klinikler için randevu getiren web sitesi" ise kimin için ne yaptığınızı söyler.

İyi bir başlık genellikle üç özellik taşır. Birincisi, ziyaretçinin diliyle konuşur. İkincisi, bir sonuç vaat eder ama abartmaz. Üçüncüsü, arama sorgusu ya da reklam metniyle uyumludur. Reklamdan gelen kullanıcı başka bir mesajla karşılaşırsa sayfayı hemen terk eder.

Alt başlıkta ayrıntı verirsiniz. Başlık "ne", alt başlık "nasıl" ve "kim için" sorusunu cevaplar. Ayrıca kısa tutun: alt başlığın iki satırı geçmemesi iyi bir ölçüdür.

Metin yazarken UX yazarlığı yaklaşımı size net bir çerçeve verir. Kısacası cümleyi süslemek yerine ziyaretçinin kararını kolaylaştırmaya odaklanın.

CTA butonu kıvrımın neresine konur?

Birincil CTA butonunu kıvrım üstünde, başlığın ve alt başlığın hemen altına ya da yanına koyun. NN/g de yüksek öncelikli içeriğin ve ana çağrı butonlarının kıvrım üstünde durmasını önerir. Butonu ilk bakışta fark edecek kadar belirgin tasarlamalısınız.

Ancak her sayfada CTA aynı ağırlıkta olmamalıdır. Satın alma niyeti yüksek bir ürün sayfasında "Sepete ekle" kıvrım üstünde durur. Bilgi amaçlı bir blog yazısında ise aşırı agresif bir buton okuma akışını böler.

• Tek birincil CTA seçin; ikincil CTA görsel olarak daha sönük kalsın.
• Buton metninde eylemi ve faydayı birleştirin: "Ücretsiz teklif al" gibi.
• Kontrastı yeterli tutun; arka planla karışan buton görünmez olur.
• Mobilde buton genişliğini ve dokunma alanını rahat tıklanacak boyutta bırakın.

CTA metni ve tasarımı için CTA butonu örnekleri yazımıza bakın. Renk seçimi için renk kontrast kontrolü aracı işinizi görür.

Kıvrım üstü ve altı içerik nasıl ayrışır?

İçeriği kıvrımın üstüne ve altına bilinçli dağıtmanız gerekir. Üstte karar vermeyi sağlayan öğeler, altta ikna eden ve ayrıntı veren öğeler durur. Aşağıdaki tablo bu ayrımı özetliyor.

Tablodaki ayrım katı bir kural değildir. Kısa bir landing page'de her şey kıvrım üstüne sığabilir. Uzun bir kurumsal sayfada ise güven kanıtlarını altta tekrarlamak mantıklıdır.

Kıvrım altına geçiş nasıl teşvik edilir?

NN/g'nin uyardığı en önemli tuzak "sahte zemin" (false floor) olgusudur. Sayfanın üstü bitmiş gibi görünüyorsa kullanıcı aşağıda içerik beklemez ve kaydırmaz. Örneğin tam genişlikte bir görsel ve altında geniş bir boşluk bu etkiyi yaratır.

Çözüm basit ipuçlarıdır. Bir sonraki bölümün üst kenarını kıvrımdan biraz taşırın. Örneğin küçük bir ok ya da "Nasıl çalışır?" gibi bir yönlendirme ekleyin. Ayrıca bölümler arasında renk değişimi kullanarak akışın sürdüğünü hissettirin.

Kaydırma davranışının tasarımı ayrı bir konudur. Detaylar için scroll deneyimi yazımıza bakın. Orada ilerleme göstergesi ve bölüm geçişi örneklerini de anlattık.

Kısacası kıvrım üstü alan sayfayı satmaz, sayfaya girmeyi satar. Amacınız ziyaretçiyi ikinci ekrana taşımaktır. Çünkü bunu başardığınızda geri kalan içerik işini yapar.

Above the fold sayfa hızını ve LCP'yi nasıl etkiler?

Kıvrım üstündeki en büyük öğe çoğu zaman sayfanın LCP (Largest Contentful Paint) öğesidir. Hero görseli ya da başlık bloğu bu role denk gelir. Google'ın web.dev rehberi, iyi bir LCP için sürenin 2,5 saniye veya altında olmasını önerir.

Bu nedenle hero görselini özenle hazırlamanız gerekir. Sıkıştırdığınız, doğru boyutlandırdığınız ve modern formatta sunduğunuz görsel işinizi görür. Kıvrım üstündeki görselde tembel yükleme (lazy loading) uygulamayın. Ama kıvrım altı görsellerde uygulayın.

• Hero görselini ekran boyutuna göre ölçekleyin.
• WebP ya da AVIF gibi hafif formatları tercih edin.
• Kıvrım üstü kritik CSS'i erken yükleyin.
• Kaydırıcı (slider) ve ağır video arka planlarından kaçının.

Metrik ayrıntıları için Core Web Vitals yazımıza, hızın aramadaki etkisi için site hızı ve SEO yazımıza bakın. Kaynak: web.dev, Largest Contentful Paint.

Hero alanında video, slider veya büyük görsel kullanmalı mı?

Kısa cevap: yalnızca ziyaretçinin kararına yardım ediyorsa kullanın. Süsleme amaçlı bir görsel, yer kaplar ve yüklemeyi yavaşlatır. Değer önerisini gösteren bir ürün fotoğrafı ya da kısa bir demo ise güçlü bir hero olabilir.

Slider'lar çoğu durumda sorun çıkarır. İlk slayt dışındaki içerik neredeyse hiç fark edilmez, ayrıca otomatik geçiş kullanıcıyı yarıda keser. Bu yüzden tek, güçlü bir mesaj genellikle daha iyi çalışır. Kendi sitenizde A/B testiyle doğrulayın.

Video kullanıyorsanız sessiz başlatın, kısa tutun ve yüklemeyi erteleyin. Video dönüşüme katkı sağlayabilir, ancak etkisi sayfaya göre değişir. Ayrıntılar için video ve dönüşüm oranı yazımıza göz atın.

Sayfa türüne göre kıvrım üstü nasıl tasarlanır?

Her sayfa türünde ziyaretçinin ilk sorusu farklıdır. Bu yüzden above the fold içeriği sayfanın görevine göre değişir. Aşağıda dört yaygın senaryoyu ve her birinde öncelediğimiz öğeleri görürsünüz.

• Landing page: tek teklif, tek CTA, sınırlı menü. Dikkat dağıtan bağlantıları kaldırırsınız.
• Kurumsal ana sayfa: ne yaptığınız, kime yaptığınız ve iletişim yolu. Güven işaretini erken gösterirsiniz.
• E-ticaret ürün sayfası: ürün görseli, fiyat, stok durumu ve sepete ekle butonu.
• Blog yazısı: başlık, kısa özet ve içindekiler. Reklam ve pop-up okumayı kesmemeli.

Ana sayfa ile landing page arasındaki fark büyüktür. Ana sayfa birçok ziyaretçi tipine hizmet ederken landing page tek bir kitleye ve tek bir hedefe yönelir. Dönüşüm odaklı yaklaşım için dönüşüm odaklı web tasarım yazımıza göz atın.

E-ticarette kıvrım üstü özellikle kritiktir. Fiyatı ve teslimat bilgisini aşağıya saklarsanız kullanıcı sorusuna cevap bulamadan ayrılabilir. Bu nedenle satın alma kararını etkileyen bilgileri ilk ekrana taşıyın.

Above the fold tasarımında en sık hangi hatalar yapılır?

Gördüğümüz hataların çoğu "çok fazla şey göstermek" ya da "hiçbir şey göstermemek" uçlarında toplanır. Çünkü kalabalık sayfa kararı zorlaştırır, boş sayfa ise merak uyandırmaz. Dengeyi önceliklendirme kurar.

• Soyut slogan: ziyaretçi ne sunduğunuzu anlamaz.
• Birden fazla eşit ağırlıkta CTA: hangisine basacağını bilemez.
• Devasa menü ve çerez bandı: içerik kıvrımın altına düşer.
• Düşük kontrastlı metin: görsel üzerinde okunmaz.
• Sahte zemin: ilk ekran bitmiş gibi görünür ve kaydırma olmaz.
• Ağır hero görseli: LCP süresi uzar, ziyaretçi bekleyemez.

Bu hataların birçoğu bir UX denetiminde hızla ortaya çıkar. Sürecin işleyişini UX audit rehberimizde anlattık. Ayrıca satışı düşüren arayüz hatalarını ayrı bir yazıda topladık.

Kıvrım üstü ile hemen çıkma oranı arasında nasıl bir ilişki var?

Kıvrım üstü alan, ziyaretçinin kalıp kalmayacağına birkaç saniyede karar verdiği yerdir. İlk ekran belirsizse kullanıcı geri tuşuna basar. Bu davranış analitikte yüksek hemen çıkma oranı olarak görünür. Ancak tek başına bu rakamı yorumlamak yanıltıcıdır.

Örneğin bilgi arayan biri bir blog yazısında cevabı bulup ayrılabilir. Yani bu durum kötü bir deneyim sayılmaz. Buna karşılık bir hizmet sayfasında kullanıcı CTA'ya ya da ikinci bölüme hiç inmiyorsa sorun büyük ihtimalle ilk ekrandadır.

Bu yüzden hemen çıkmayı sayfanın görevine göre okuyun. Kaydırma derinliği, CTA tıklaması ve oturum süresiyle birlikte değerlendirin. Böylece şikayetin mesajdan mı, hızdan mı yoksa yanlış trafikten mi geldiğini ayırt edersiniz.

Ekipçe çoğu zaman şu sırayı izleriz: önce trafik kaynağını, sonra ilk ekran mesajını, en son hız ve cihaz kırılımını inceleriz. Böylece bu sıra gereksiz tasarım değişikliklerini önler.

Reklamdan gelen ziyaretçi için above the fold nasıl uyarlanır?

Reklamdan gelen ziyaretçi, tıkladığı metnin cevabını ilk ekranda görmek ister. Reklamda "ücretsiz keşif" vaat edip sayfada genel bir şirket tanıtımı gösterirseniz kullanıcı güveni kaybeder. Bu nedenle başlık ile reklam metni aynı dili konuşmalıdır.

Pratikte her reklam grubu için ayrı bir kıvrım üstü kurgulayabilirsiniz. Başlığı sorguya göre uyarlar, CTA metnini reklamdaki vaatle eşleştirirsiniz. Ayrıca gereksiz menü öğelerini kaldırarak dikkat dağılmasını azaltırsınız.

Reklam yönetimi ile sayfa tasarımı ayrı ekiplerin işi gibi görünür, oysa sonuç ikisinin uyumuna bağlıdır. Google Ads yönetimi hizmetimizde bu yüzden açılış sayfasını da kampanyanın bir parçası sayarız.

Dönüşümü izlemeden bu çalışma yarım kalır. Hangi varyantın daha iyi çalıştığını görmek için hedefleri önceden tanımlayın. Hedef belirleme yaklaşımını dönüşüm hedefi yazımızda anlattık.

Çerez bandı, pop-up ve sabit başlık kıvrım üstünü nasıl bozar?

Bu üç öğe ilk ekranın değerli alanını yer. Çerez bandı alt kenarı, sabit başlık üst kenarı, pop-up ise tüm ekranı kaplar. Özellikle mobilde üçü bir araya gelirse gerçek içeriğe çok az yer kalır.

Önce her öğenin gerçekten gerekli olup olmadığını sorun. Çerez bildirimi yasal bir gerekliliktir, ancak boyutunu küçültebilirsiniz. Sabit başlığı kaydırırken daraltabilirsiniz. Pop-up'ı ise ilk saniyelerde değil, kullanıcı içerikle ilgilendikten sonra göstermek daha sağlıklıdır.

• Çerez bandını ince bir şerit olarak tasarlayın.
• Sabit menünün yüksekliğini mobilde sınırlayın.
• Sayfa açılır açılmaz çıkan tam ekran pop-up'tan kaçının.
• Kapatma düğmesini belirgin ve kolay dokunulur yapın.

Kısacası ilk ekranı içeriğe ayırın, yardımcı öğeleri kenara çekin. Kullanıcı sayfanın ne sunduğunu görmeden önce üç kapı aşmak zorunda kalmamalıdır.

Above the fold ilk izlenimi nasıl şekillendirir?

İlk izlenim, tipografi, renk, boşluk ve görselin birleşiminden doğar. Ziyaretçi metni okumadan önce sayfanın düzenli ve güvenilir durup durmadığını hisseder. Dolayısıyla tasarım ayrıntıları yalnızca estetik değil, güven meselesidir.

Renk seçimi bu noktada önem kazanır. Marka renginizi CTA ile arka plan arasındaki kontrastı bozmadan kullanmanız gerekir. Renklerin duygusal etkisini renk psikolojisi yazımızda işledik.

Tipografide de aynı mantık geçerlidir. Başlık yeterince büyük, gövde metni rahat okunur boyutta olmalıdır. Ayrıca satır uzunluğunu kısa tutarsanız göz yorulmaz. Boşluk ise dikkati yönlendiren görünmez bir araçtır.

Son olarak tutarlılığa bakın. Logo, renkler ve ton sayfanın tamamında aynı kişiliği taşıyorsa ziyaretçi markayı daha kolay hatırlar. Bu yüzden hero alanını marka kimliğinden bağımsız düşünmeyin.

Kıvrım üstü tasarımda okunabilirlik ve erişilebilirlik neden önemlidir?

Okunamayan bir hero, hiç yazılmamış bir hero ile aynı sonucu verir. Görsel üzerine yerleştirilen açık renkli metin, parlak ekranda ya da düşük görüş durumunda kaybolabilir. Bu nedenle kontrast ve yazı boyutu ilk ekranda öncelik taşır.

Pratik bir kural: başlık metnini görselin yoğun bölgesine koymayın. Gerekirse yarı saydam bir katman kullanın. Ayrıca buton metninin arka planla yeterli kontrast taşıdığını test edin.

• Metin ile arka plan arasında yeterli kontrast bırakın.
• Mobilde gövde metnini rahat okunur boyutta tutun.
• Yalnızca renge dayanan bilgi vermeyin.
• Dokunma hedeflerini parmakla rahat basılacak genişlikte yapın.

Bu ayarlar yalnızca engelli kullanıcılara değil, herkese fayda sağlar. Güneş altında telefon kullanan biri de aynı kontrasta ihtiyaç duyar. Kontrastı hızlıca ölçmek için renk kontrast kontrolü aracına başvurabilirsiniz.

Above the fold ile kaydırma davranışı arasındaki fark nedir?

Above the fold ilk ekranın içeriğidir, kaydırma davranışı ise kullanıcının o ekrandan sonra ne yaptığıdır. İkisi birbirini besler. İlk ekran ilgi uyandırırsa kullanıcı kaydırır, kaydırırsa alt bölümler devreye girer.

Dolayısıyla iki kavramı ayrı ayrı optimize etmek yetmez. Örneğin ilk ekranı mükemmel kurup ikinci bölümü boş bırakırsanız kullanıcı merakla indiği yerde hayal kırıklığına uğrar. Ama güçlü bir ikinci bölüm zayıf bir hero'yu kurtarmaz.

Bu nedenle bölümler arası geçişi tasarlayın. Her bölümün sonunda bir sonraki bölüme küçük bir köprü kurun. Ayrıca sayfa uzunluğunu içeriğin ihtiyacına göre belirleyin; NN/g de ideal uzunluğu gerçek kullanıcılarla test etmeyi önerir.

Yani amaç kullanıcıyı kaydırmaya zorlamak değil, kaydırmayı anlamlı kılmaktır. Her ekranda yeni bir değer sunduğunuzda kullanıcı kendiliğinden devam eder.

Above the fold çalışmasında hangi metrikleri izlemelisiniz?

İzleyeceğiniz metrikler sayfanın hedefine bağlıdır, ama çekirdek set hemen her sitede aynıdır. Önce ilk ekranın hızını, sonra kullanıcının ona tepkisini ölçersiniz. Ardından dönüşüme etkisini bağlarsınız.

Metrikleri tek tek değil, birlikte okuyun. Örneğin LCP iyi ama CTA tıklaması düşükse sorun hızda değil mesajdadır. Tersine, tıklama yüksek ama dönüşüm düşükse sorun formda ya da teklifte olabilir.

Son olarak ölçüm dönemini yeterince uzun tutun. Çünkü hafta içi ve hafta sonu davranışı farklıdır. Ayrıca kampanya dönemlerini ayrı değerlendirin, çünkü trafik kalitesi değiştiğinde oranlar da değişir.

Above the fold alanını nasıl test edersiniz?

Önce ölçmek, sonra değiştirmek gerekir. Kıvrım üstünü test etmenin dört temel yolu vardır: kaydırma derinliği ölçümü, ısı haritası, kullanıcı testi ve A/B testi. Her biri farklı soruya cevap verir.

• Kaydırma derinliği: kullanıcıların yüzde kaçının ikinci ekrana indiğini gösterir.
• Isı haritası: tıklama ve dikkat dağılımını görselleştirir.
• Kullanıcı testi: beş saniyelik testle ilk izlenimi ölçersiniz.
• A/B testi: başlık ya da CTA varyantını gerçek trafikle karşılaştırır.

Beş saniye testi basit ama güçlüdür. Birkaç kişiye sayfayı beş saniye gösterip "Bu sayfa ne sunuyor?" diye sorun. Cevaplar sizin başlığınızdan farklıysa mesajınız netleşmemiş demektir.

Test sonuçlarını yorumlarken küçük örneklemin yanıltabileceğini unutmayın. Ayrıca her seferinde tek değişken deneyin. Dönüşüm değişimini hesaplamak için dönüşüm oranı hesaplama aracını kullanabilirsiniz.

Bir örnek hesapla iyileştirmenin etkisi nasıl okunur?

Aşağıdaki rakamlar gerçek bir müşteriye ait değildir; yalnızca mantığı göstermek için hazırladığımız örnek hesaptır. Bir hizmet sayfasının aylık 10.000 ziyaretçisi ve %2 dönüşüm oranı olduğunu varsayalım. Yani bu, ayda 200 talep eder.

Hero alanını yeniden düzenleyip dönüşüm oranını %2,4'e çıkardığınızı düşünelim. Böylece trafik aynı kalırsa talep sayısı 240 olur. Yani ek reklam harcaması yapmadan ayda 40 talep kazanırsınız. Ancak bu sonuç varsayımdır ve garanti değildir.

Dikkat edin: gerçek sonucu yalnızca kendi verinizle görürsünüz. Saha tecrübemize göre net bir değer önerisi ve belirgin bir CTA çoğu sitede iyileşme getirir. Ancak etki büyüklüğü sektöre, trafik kaynağına ve teklife bağlıdır.

Bu nedenle hedef koyarken sonucu tahmin etmek yerine test planı yazın. Hangi metriği, hangi sürede, hangi örneklemle izleyeceğinizi baştan belirleyin. Böylece değişikliğin etkisini yorum yerine veriyle okursunuz.

Above the fold kontrol listesi: yayından önce neye bakmalı?

Yayından önce aşağıdaki listeyi masaüstü, tablet ve telefonda ayrı ayrı gözden geçirin. Yani her madde evet cevabını almalıdır. Bir madde hayır çıkarsa önce onu düzeltin, sonra diğer iyileştirmelere geçin.

1. Başlık, ziyaretçinin ne kazanacağını tek cümlede söylüyor mu?
2. Alt başlık, kime ve nasıl hizmet verdiğinizi açıklıyor mu?
3. Birincil CTA ilk ekranda, kaydırmadan görünüyor mu?
4. Güven işareti kıvrım üstünde yer alıyor mu?
5. Mobilde menü ve çerez bandı içeriği aşağı itmiyor mu?
6. Hero görseli hızlı yükleniyor ve LCP 2,5 saniyeyi aşmıyor mu?
7. Kıvrım çizgisinde sahte zemin oluşmuyor mu?
8. Reklam ya da aramadan gelen mesajla başlık uyumlu mu?

Listeyi bir kez uygulamakla yetinmeyin. Tasarım, içerik ya da kampanya her değiştiğinde yeniden çalıştırın. Çünkü küçük bir banner eklemek bile CTA'yı kıvrımın altına itebilir.

Ekip olarak above the fold çalışmasını nasıl yürütürüz?

Biz ekibimizle süreci dört adıma böleriz. Önce hedef sayfanın tek görevini yazarız. Ardından hedef kitlenin cihaz dağılımına bakıp kritik ekran boyutlarını seçeriz. Sonra hero taslağını mobil öncelikli çizer, en son test ederiz.

Bu akışta tasarım, içerik ve performans aynı masada ilerler. Başlığı yazan kişi ile görseli hazırlayan kişi LCP'yi birlikte düşünür. Böylece güzel ama yavaş bir hero ile hızlı ama anlamsız bir hero arasında seçim yapmak zorunda kalmazsınız.

Sitenizin ilk ekranı dönüşüm kaybettiriyorsa profesyonel bir değerlendirme yardımcı olur. Web tasarım hizmetimiz kapsamında hero alanı, CTA yerleşimi ve mobil deneyimi birlikte ele alırız. Amacımız süslü değil, işe yarayan bir ilk izlenim kurmaktır.

Ayrıca karar verme sürecinizde web tasarım teklifi değerlendirme yazımız size kriter sunar. Kaynak olarak NN/g makalelerini de okumanızı öneririz: Scrolling and Attention ve The Fold Manifesto.