Above the Fold Nedir?
Above the fold, bir web sitesinde ya da ekranda kaydırma yapmadan önce görülen ilk kısımdır.
Bu kısım büyük olasılıkla açılış sayfasının en dikkat çekici bölümü çünkü above the fold ziyaretçilerin ilk etkileşime geçtiği kısımdır.
Gazete yayıncılığından gelen bir terim olan 'Above the fold' dijital çağda önemli ölçüde gelişmiştir. Artık web tasarımında kullanılan bu terim, bir web sitesinde kaydırma yapmadan görülebilen ilk içeriği ifade ediyor ve kullanıcı etkileşiminde önemli bir rol oynuyor.
Bu nedenle, internette geçireceğimiz zamanı hesaplayarak web sitesinin kullanışlılığı ve etkiliğine göre düzenlemeler yapmaktayız.
Son olarak, above the fold etkilerinin farkında olmalısınız.
En İyi 20 Üstte Görünen Örnek
Zihninizde ve yaratıcılığınızda yeni bir pencere açacak 20 etkileyici above the fold örneği burada.
1. Ahrefs
Ahrefs her türlü SEO ihtiyacınızı karşılayabilecek kapsamlı bir araçtır ve sunduğu ücretsiz araçlar ile çeşitli özelliklere sahip planlarla kaliteli bir hizmet sunar.
Ahrefs'in above the fold bölümü basit ama etkili bir örnek teşkil ediyor. Sayfa, çarpıcı bir mavi renkle çevrelenmiş, başlık kısmında önemli unsurlar ve ziyaretçileri kayıt olmaya teşvik eden CTA butonu ile uyumlu bir yapıya sahip.
Ayrıca Ahrefs, kelimelerin öneminin farkında olarak ziyaretçilerin dikkatini çekiyor ve "Daha yüksek sıralamaya ulaşmak ve daha fazla trafik almak için ihtiyacınız olan her şey." diyerek gelenlerin ihtiyaçlarını ve isteklerini özetliyor.
Bir diğer detay ise, Ahrefs son yedi güne ait sosyal kanıtları paylaşmakta ve sağ alt köşede bulunan sohbet kutusu ikonu ile ziyaretçilerin kalbini fethetmek için Yardım Merkezi'ne yönlendirmektedir.
2. Allbirds
Allbirds, sürdürülebilirlik ve doğal malzemelerin kullanımıyla güçlenen bir ayakkabı ve giyim markasıdır.
Allbirds'in above the fold'u oldukça etkileyici, ve başlığa hızlı bir bakış attığınızda Allbirds'ün sahip olduğu kategorileri simgeleyen gerekli butonları göreceksiniz.
Ayrıca, başlığın sağ tarafına detaylı bir şekilde baktığınızda, ziyaretçiler kendileri için kişiselleştirebilsin diye profil, yardım ve alışveriş çantası sembollerini göreceksiniz. Sol tarafta ise mevsim için başka bir koleksiyon ipucunu veriyor.
Kullandığı görüntü, sürdürülebilirlik fikrini ve kaliteyi verdiği sloganla birlikte sunuyor. Sloganın altında, Allbirds'ün sahip olduğu iki cinsiyet seçeneği var ve ziyaretçilerin doğal ürünler arasında gezinmek için bunlardan birini seçmeleri bekleniyor.
3. Apple
Herkesin yakından tanıdığı Apple, çeşitli elektronik ürünler, çevrimiçi hizmetler ve yazılımlar üreten ünlü bir teknoloji şirketidir.
Kullanıcılar Apple'ın sayfasına ilk tıkladıklarında, ortadaki görüntü dikkatlerini çeker. Bu, markanın yeni ürünü tanıtmak ve teşvik etmek amacıyla yaptığı bilinçli bir harekettir.
Ayrıca, yeni cihazı merak edenler için 'Daha Fazla Bilgi' ve satın almak isteyenler için 'Satın Al' butonları ile tanıtımı teşvik eder.
Sayfanın above the fold'unda, Apple'ın özellikleri ile ilgili birçok seçenek vardır, bu da ziyaretçiler için aksiyon almalarında oldukça yardımcıdır.
Above the fold kısmında, UNICEF ile savaş mağdurları için yapılan iş birliğini görüyoruz. Firma, sosyal sorumluluk sahibi bir marka olduğunu göstermek adına bu açıklamayı bu kısımda vurgulamak istemektedir.
4. Bobo’s
Bobo's, sağlıklı, organik, glutensiz, sertifikalı GDO'suz ve vegan yulaf barları ve gıdaları üreten bir markadır.
Bobo's'un above the fold'u turuncu renk sayesinde canlı bir görüntü veriyor. Tasarımcılar, barların sağlıklı olduğuna işaret etmek için öğeleri akıllıca seçmişlerdir.
Makalelerin yanında, kullanıcılar 'Şimdi Alışveriş Yap' butonuyla bilgilendiriliyor ve eylemin merkezine konuluyor.
Üst kısımda, dört kategoriyi inceliyoruz: Ürünlerin satın alındığı 'Alışveriş', markanın detaylarını ve macerasını anlatan 'Hakkımızda', Bobo's'un içindekileri gösteren 'İçindekiler' ve tüketiciler için faydalı bilgiler içeren 'Blog'.
Üst başlık bölümünde, ziyaretçilere bazı ürünler almayı seçtiklerinde ücretsiz kargo öneren bir kampanya görüyoruz.
Ayrıca, sağ alt köşede yer alan Bobo's Ödülleri butonu hafif ama etkili bir detay. Bu buton, bir satın alma yaptığınızda ödüller kazanmanızı ve çeşitli avantajlar elde etmenizi sağlıyor. Stratejik bir hamle olarak yorumlanabilir, ama kesinlikle etkili.
5. Calvin Klein
Calvin Klein modern iç çamaşırları, çantaları, giyim ürünleri ve ev dekorasyonu ile ünlüdür.
Calvin Klein ayrıca farklı ama doğrudan bir üst menü sayfası tercih ediyor. Sayfanın ayrımı ilk başta dikkat çekiyor ve above the fold kısmında Calvin Klein indirim fırsatını duyuruyor.
Calvin Klein logosu ile aynı sırada kategoriler, arama çubuğu ve her bir kullanıcıya özgü özelleştirme seçenekleri yer alıyor.
Merkez boyunca, markanın ürünlerini tanıtan iki figür bulunuyor. Figürlerin yanında, sayfa alışveriş için üç seçenek sunuyor ve bu da akıllı bir adım olarak değerlendiriliyor.
Son olarak, başka bir sayfaya yönlendiren bir bar bulunuyor, ancak ziyaretçileri çağırmak interaktif bir tercih olarak üst menü için en güçlü araç olarak vurgulanıyor.
6. Dyson
Dyson farklı teknolojik ev aletleri ve geleceğe yönelik yeniliklerle uğraşan çok uluslu bir şirkettir.
Siyah renk parlak olmasa da, Dyson gibi iddialı olduğunu biliyoruz. Bu nedenle, başlık ve başlıklar gayet yeterli ve kişiyi sayfaya tıklamaya teşvik edici nitelikte.
Ürünleri konuma göre düzenleyen web sitesi, ana amacı gelişimi ve kat ettiği yolu göstermek olduğu için animasyonlu görsel içerik sunuyor.
Above the fold ayrıca arama çubuğunu ve Dyson'un müşteri çekmek için hazırladığı bir CTA butonunu gösteriyor çünkü bu marka ismi oldukça dikkat çekici.
7. EyeBuyDirect
EyeBuyDirect, her türlü gözlük, reçeteli ve reçetesiz bile üreten bir gözlük markasıdır.
Hızlı teslimat ve CTA (Call to Action) ile müşterileri etkilemek çok önemlidir, ve bunun yanında popup ve bildirim kutuları kullanmak sayfa ziyaretçilerini dahil etme fikrini destekler.
EyeBuyDirect, kullanıcı dostu bir üst bilgiye sahiptir ve görsel yardımı merkeze alır. Görseldeki figürler EyeBuyDirect gözlüklerini takıyor, biri ciddi diğeri ise oldukça mutlu; marka EyeBuyDirect ile her türlü ruh haline hitap edebileceğini gösteriyor.
Marka, belirli bir dönem için özel olarak tasarlanmış bir kampanya kodu ile görselliği destekliyor.
Ekranın sol alt köşesinde, ilk kez ziyaret edenler için bir hoşgeldin teklifi ve markanın ürünleri hakkında bir açıklama görüyoruz.
Açıklama, başlangıçta yeterli olarak değerlendirilebilir çünkü markanın yararlılığını öğrenmek isteyenler buradan ana bilgileri alabilir.
8. FOMO
FOMO, işletmelerin ziyaretçileri çekmesi ve dönüşüm oranlarını artırması için kullanabileceği en ünlü ve değerli sosyal kanıt araçlarından biridir.
FOMO, her zamanki gibi logosunu sol üst köşede konumlandırır ve daha net olabilmek için bir açıklama ekler çünkü FOMO'nun 'kaçırma korkusu' anlamına geldiğini biliyor olabilirsiniz.
Başlık, FOMO'nun yönlendirebileceği kategoriler içindir ve bir işletme FOMO'nun neler sunduğunu görmek istediğinde bunlar en önemli olanlardır.
Eğer giriş yapabileceğiniz bir profiliniz varsa giriş yapabilirsiniz; ancak FOMO bunu zorunlu kılmaz çünkü yazı tipi ve tarz oldukça rahat ve hatta havalıdır.
Merkezde, sosyal kanıt'ın ne olduğunu gösteren bir görsel bulunmaktadır :) Sayfa, hem yaptığı işi açıklar hem de ziyaretçileri ücretsiz deneme fırsatı ile harekete geçmeye çağırır.
9. Fossil
Fossil, aksesuarlarla ilgili birçok ürünü bulunan bir moda markasıdır ve birçok alt markası mevcuttur.
Fossil, markanın canlılığını göstermek için ticari bir çekimle etkileşimli bir above the fold sunar. Ayrıca, yeni piyasaya sürülen Gen 6 Hybrid'i tanıtarak, bu ürünü öğrenmek ve satın almak için merkeze konulan iki seçenek sunar.
Dikkat çekilecek bir diğer detay ise, sayfanın mevsimsel nedenlerle kampanyaları vurgulamasıdır ve bu anlamda çok şey sunar.
Above the fold'daki başlık, tıklamadan önce seçenekleri gösterdiği için tüm bu üst kısmın başlıkları arasında en kullanışlı olanlardan biri olabilir ve ziyaretçiler istedikleri seçeneği tercih edebilir.
Not: Fossil, başlığın üzerindeki kısım sayesinde, firmanın sorumluluğunu, müşterilerin sipariş durumunu, profil sayfalarını ve en önemlisi, gönderim yerleri seçeneğini göstermesiyle bir puan daha kazanıyor.
10. HubSpot
HubSpot inbound pazarlama, satış ve hizmet yazılımında başarılı bir yazılım şirketidir. Çok yönlü bir platform olarak öne çıkar.
HubSpot'u ziyaret ettiğinizde, sizi ilk karşılayan sohbet kutusu olur ve yardıma ihtiyacınız olduğunda size destek sunar. Sayfanın genel görünümü kırmızı renkten oluşur ve bu da sizi işiniz için harekete geçmeye teşvik eder.
HubSpot, ücretsiz ve premium seçenekler sunarak ziyaretçilere kendisi hakkında detaylı bilgi verir ve daha fazla bilgi için davet eder.
Başlık kısmında dil seçenekleri, satış ve müşteri desteği ile iletişim, profil ve hakkımızda sayfaları gibi birçok seçenek bulunur.
Ayrıca, yazılım detaylarına ve fiyat seçeneklerine kolayca ulaşabilir, bu da kullanıcı deneyiminin kalitesini artırır.
11. Instatus
Instatus kesintileri önlemek için etkileyici "above the fold" ve diğer pratik özelliklere sahip, geçerli bir durum sayfası aracıdır.
Instatus'un "above the fold" bölümü diğerlerine göre karanlık görünebilir. Ancak burada önemli olan sayfanın kullanıcı dostu olmasıdır. Bu nedenle, Instatus'un ekranda gereken bilgileri verdiğine dair çıkarımlar yapabiliriz.
Şirketle ilgili fikir edinmek için kullanılan interaktif kutular ve mottosunu fark etmek imkansızdır. Özellikleri gördükten sonra, uygun fiyatlı anlık bir durum sayfası edinmeye yönelebilirsiniz.
Üst bilgi neden kullanmanız gerektiği, fotoğraflarda nasıl çalıştığı, ne kadar ödemeniz gerektiği gibi bilgileri basitçe tasarlanmıştır. Çizgiyi takip ederseniz, Instatus'un ziyaretçileri ücretsiz denemeye davet etme çabasına tanıklık edebilirsiniz.
12. Kylie Cosmetics
Ünlü isim Kylie Jenner tarafından kurulan kozmetik markası, temiz ve vegan makyaj ile cilt bakım ürünleri üretmektedir.
Kylie Cosmetics anasayfasının above the fold kısmında, markanın farklı ilgi alanlarına yönelik kategoriler bulunmaktadır. Seçtiğiniz kategoriye göre alt bölümler değişir ve sadece arama çubuğu ile profil simgeleri aynı kalır.
Bu günlerde firma, Stassie Karanikolaou ile bir işbirliği yürüttüğü için, bu işbirliğine odaklanılmış ve sayfanın önemli bir kısmı bu işbirliğine ait özellikler ve bir CTA düğmesi ile düzenlenmiştir.
Ayrıca, bu markanın ve işbirliğinin yüzleri olan Kylie ve işbirliği ortağı Stassie'nin, anasayfanın üst kısmında bir fotoğrafı bulunmaktadır.
13. Little Caesars
Little Caesars, sadece pizza değil, çeşitli kızartılmış yiyecek seçenekleri sunan ünlü bir pizza markasıdır.
Aç olduğunuzda sizi hiçbir şey durduramaz ya da dikkatinizi dağıtamaz, öyle değil mi? Little Caesars'ın above the fold'u oldukça basit bir şekilde tasarlanmış, gerekli bilgileri sunar ve fazlasına yer vermez. Bu da onu oldukça kullanışlı yapar.
Sayfada sizi 'Merhaba, Misafir' yazısıyla karşılar ve sepetinizde ne olduğunu gösterir. Ancak burada daha önemli olan, sunduğu kampanyalardır ve Little Caesars en uygun ve çekici olanları merkeze yerleştirir.
Sipariş vermek ise bunlardan daha da basit: Sizin için en uygun seçenekleri seçebilirsiniz. Al-götür mü yoksa teslimat mı tercih edersiniz? Hemen yemek için seçim yapın!
14. Melula
Melula çocuklar için ayakkabı ve ayakkabı aksesuarları üzerine odaklanan bir moda markasıdır.
Melula'nın ilk izlenimi bu listedeki en sade ve en renkli olanlardan biridir. Çocukluğun masumiyeti gibi, marka kendini anlatmak için yumuşak tonlar ve sade ögeler kullanır.
Mesajı oldukça net olup, ziyaretçilerin sayfada bir adım atması kısa ve öz bir CTA (Çağrı) butonu ile sağlanabilir.
Mağaza ve hakkımızda sayfalarının above the fold'u ücretsiz ve dünya çapında kargo fırsatı vurgulanmaktadır.
15. Oskar Gydell
Oskar Gydell, İsveç'te kurulan ve el yapımı, benzersiz takılar üretmeyi amaçlayan bir mücevher markasıdır.
Diğerlerinden farklı olarak, Oskar Gydell bulunduğunuz konuma göre para birimi seçenekleri sunar ve bu bilgileri başlıkta belirtir.
86 ABD doları üzeri alışverişler için ücretsiz kargo hizmeti sunar. Bunun yanı sıra, çevrimiçi mağazanın sunduğu ürünleri, alışverişe devam etmeden ve iletişim veya 'Hakkımızda' sayfasına tıklamadan önce görebilirsiniz.
Yaz mevsiminde olduğumuz için hüzne kapılmadan, Oskar Gydell'in takılarıyla sunduğu promosyonu görmek bizi mutlu eder; çünkü ilk izlenim saf bir görüntü ve harekete geçirme çağrısıyla bunu gösterir.
16. Popupsmart
Popupsmart, popup oluşturma ve işletmelerin potansiyel müşteri yaratma süreçlerini artırma işlevi gören, kullanımı kolay bir kodsuz araçtır.
Popupsmart'ın above the fold'u sadece gerekli bilgileri vererek hedefe yönelik olarak tasarlanmıştır, zira marka ne kadar çok ayrıntı verirse, durum o kadar kötüleşebilir.
Bu nedenle, Popupsmart, kullanıcılarına gerekli özellikleri ve vaatlerini Greenpeace, UNICEF, Rakuten ve Wienerberger gibi isimlerle sosyal kanıt olarak paylaşır.
Popupsmart hakkında bilgi edinmek için gereken bilgilerin yanında, ziyaretçilerin neyle karşılaşacaklarını bilmeleri gerektiği için potansiyel müşteri oluşturmayı hedefleyen yaz pop-up kampanyasının bir örneğini görüyoruz.
Başlıkta ise, sadece gerekli bilgilere yer verilerek sadelik sağlanmıştır; örneğin çözümler, kullanımı kolaylaştırmak için ürün turu, yol gösterecek bazı vitrinler ve fiyatlandırma gibi. Daha sonra, 'Başla' butonlarını görerek harekete geçebilirsiniz.
17. Shopify
Shopify, pek çok tanınmış ismin kullandığı, oldukça bilinen bir e-ticaret yazılımı ve alışveriş platformudur.
Shopify hakkında bundan fazlası gösterilemezdi. Evet, alışveriş çantasından bahsediyoruz. Bu, markanın en iyi özetidir çünkü bir e-ticaret platformu olarak Shopify, hem ürünleri hem de detayları gösterir ve Shopify'nin yapabileceği konuları özetler.
Shopify'nin ana başlığı, siteyi amaçlı olarak ziyaret edenler için yeterince açıklayıcıdır ve onları doğrudan ilgili kısımlara yönlendirir.
Açıklamalara gelince, HubSpot ve Popupsmart'la benzer bir yöntem görüyoruz; bu, ziyaretçilere kendilerini tanıtmanın ve e-posta adreslerini paylaşarak ücretsiz deneme başlatmalarını davet etmenin etkili bir yoludur.
18. Tesla
Tesla Elon Musk tarafından kurulan ve otomotiv endüstrisi ile temiz enerji alanında faaliyet gösteren bir şirkettir.
Tesla ile Apple’ın benzer bir tanıtım yöntemi kullandığını söyleyebiliriz çünkü Tesla’nın yeni modeli, Model 3, sayfanın ortasında tanıtılıyor. Ayrıca, istediğiniz gibi bir araç siparişi verebilir veya mevcut stoğu inceleyebilirsiniz.
Sayfanın above the fold'unda, diğer modelleri ve özellikleri tanıtan birçok seçeneğin yer aldığı son derece faydalı bir üst menü görüyoruz.
Çevre bilincini sergilemek amacıyla Tesla, ziyaretçileriyle 2021 Etki Raporunu paylaşıyor ki bu bizce cesur ve adil bir hareket.
19. Walmart
Walmart, tüketiciler için çeşitli mağazalardan oluşan ve merkezi Arkansas'ta bulunan bir perakende şirketidir.
En kalabalık above the fold Walmart'a ait. Ancak, bir perakende şirketi işletiyorsanız bu kötü bir şey değildir çünkü ziyaretçilere neler sunduğunuzu göstermeniz gerekir.
Başlıkta kategoriler sunar ve bunları konumunuza, ihtiyaçlarınıza ve tarihlere göre ayrıntılandırmanıza olanak tanır.
Walmart ayrıca merkezde etkileşimli bir bölüm sunar çünkü zaman geçtikçe tüketiciler için yeni fırsatlar, satışlar ve indirimler ortaya çıkar.
Her şeyin olması gereken yerde olmasından dolayı, yoğunluğuna rağmen en kullanıcı dostu above the fold'lardan biri olarak kabul edilebilir.
20. Zapier
Zapier, birçok markanın iş yönetimini daha iyi hale getirmek için istediği otomasyon ve entegrasyon konusunda ünlüdür.
Zapier'in üabove the fold kısmı, görselliği sağ tarafa yerleştirir ve hemen yanındaki açıklamalarla destekleyerek ziyaretçilerin dikkatini merkezde tutar.
Ayrıca, animasyonlu otomasyon bölümü ile Zapier, otomasyon alanında yetkin olduğunu gösterir. Her zamanki gibi ziyaretçileri bir düğme ile harekete geçirme çağrısı yaparak otomasyon vaatleri sunar.
Başlık, firmanın ziyaretçileri çekmek ve sayfa boyunca yararlı bir atmosfer sağlamak için basit ve etkili bir yol izlediği için sayfanın geri kalanıyla uyum sağlar.
SSS
Sorularınız mı var? Haydi cevaplayalım!
"Above the Fold Örneği Nasıl Olmalıdır?"
Dikkat etmeniz gereken bazı kriterler şu şekildedir:
- Basitlik en iyisidir, karmaşıklıktan kaçının.
- Açık ve net olun, lafı dolandırmayın.
- Uzun alıntılar ve metinlerden kaçının.
- Görseller ve görsel yardımlar kullanın.
- CTA (Harekete Geçirici Mesaj) ziyaretçilerinizin aksiyon almasını sağlar ve düğmelerinizi buna göre düzenleyin.
- Kullanıcı dostu ve ilgi çekici bir above the fold tasarımı oluşturun.
Neden İyi Bir Above the Fold'a İhtiyacınız Var?
İlk izlenime yani sayfanızın above the fold'una önem vermezseniz, dönüşüm oranınızı ve kullanıcı etkileşiminizi artırmak zorunda kalırsınız.
Ayrıca, ziyaretçilere ürününüz ve tanıtımınız hakkında ne kadar titiz olduğunuzu gösterir.
Ziyaretçilerin kendilerini özel ve değerli hissetmek istediğini unutmayın. Bu detayı sayfanızın above the fold'unda atladığınız takdirde, yanlış bir izlenim yaratabilirsiniz.
Neden Sayfanın Üst Kısmı (Above the Fold) Alt Kısmından (Below the Fold) Daha Önemli?
Çünkü sayfanın üst kısmı ziyaretçileri ilk karşılayan ve asıl etkiyi yaratan kısımdır. Sayfanın alt kısmı (below the fold) ise sayfanın sonraki bölümü olup, gezinme sürecinde ikinci adımı oluşturur. Yani, sayfanın alt kısmı önem sıralamasında ikinci sıradadır ve sayfayı aşağı kaydırdığınızda görülür. Aynı zamanda şunu da söyleyebiliriz ki, ziyaretçiler bir kez sizin profesyonel olduğunuzu anladıktan sonra sayfanın alt kısmı belirleyici bir faktör olmaz.
Sonuç
Tüm sayfa ile ilgilensek de, ilk dikkat çeken kısım sayfanın above the fold'udur.
Bu nedenle, etkili bir above the fold oluşturmak oldukça önemlidir.
Umarız örneklerden keyif alırsınız ve bu örnekler web siteniz için aradığınız ilhamı sağlar.
Diğer İlham Veren Bloglar
İşiniz için ilham arıyorsanız, bunlara da göz atabilirsiniz.
- Satışları Artıran En İyi Eylem Çağrısı (CTA) Örnekleri 2024
- En İyi 17 SaaS Açılış Sayfası Örneği ve Neden İşe Yaradıkları
- Form Dönüşüm Oranlarını Artırmak İçin 10 Basit Ama Etkili Yöntem
- Ürün Sayfası Optimizasyonu 101: En İyi İpuçları ve Örnekler
- Email Listesi Oluşturma: 2024'te Email Listenizi Büyütmek İçin Kanıtlanmış 13 Yöntem
