Above the fold

Az above the fold a weboldalnak az a része, amely a böngészőablakban abban a pillanatban látható, amikor a látogató megérkezik — még azelőtt, hogy görgetne, kattintana vagy bármilyen módon interakcióba lépne. Minden, ami a kezdeti látható területen túl van, a below the fold (a hajtásvonal alatti rész).

A kifejezés a tartalom első képernyőnyi részét írja le: a címsort, a hero képet, a navigációt és minden olyan cselekvésre ösztönző elemet, amely görgetés nélkül betöltődik. Ez bármely oldal legnagyobb láthatóságú zónája.

Mit jelent az “above the fold”?

A webdesignban az above the fold (gyakran csak ATF) a weboldal görgetés előtt látható területét jelenti. A “fold” (hajtásvonal) a böngészőablak alján húzódó képzeletbeli vonal — a határ, ami elválasztja azt, amit a látogató azonnal lát, attól, aminek a megjelenítéséhez már interakcióra van szükség.

A kifejezés nem egy rögzített pixelmagasságot ír le. Egy 27 hüvelykes asztali monitoron a hajtásvonal körülbelül 900–1000 képpontnál lehet a tetejétől számítva. Egy álló helyzetben tartott telefonon ez akár csak 500–600 képpont is lehet. A hajtásvonal minden eszközzel, képernyőmérettel, böngészőeszköztárral és nagyítási beállítással változik.

Három kérdésre kell szinte azonnal választ adnia az above the fold területnek:

1. Miről szól ez az oldal? — egy világos, leíró jellegű címsor
2. Miért maradjak? — értékajánlat vagy az előnyök bemutatása
3. Mit tegyek ezután? — egy jól látható cselekvésre ösztönző elem vagy navigációs útmutatás

Indítsd el affiliate programodat még ma

Állítsd be a fejlett nyomkövetést percek alatt. Bankkártya nem szükséges.

Demó kérése 30 napos ingyenes próba indítása

Honnan ered az “above the fold” kifejezés?

A kifejezés a nyomtatott újságkiadásból származik. A fizikai újságokat félbehajtva tették ki az újságosstandokra. Az arra járók csak a címlap felső felét láthatták. A szerkesztők a legfontosabb címeket, feltűnő fényképeket és vezető cikkeket ebbe a részbe helyezték, hogy felkeltsék a figyelmet és vásárlásra ösztönözzenek.

Ugyanez a logika került át a korai webdesignba az 1990-es években. A tervezők átvették a “fold” (hajtásvonal) fogalmát, hogy leírják, mit látnak a felhasználók a görgetés előtt — az újságosstandi megjelenítés digitális megfelelőjét.

Az újságpapírral ellentétben azonban a weboldalnak nincs fizikai hajtása. A hajtásvonal virtuális, teljes mértékben a látogató képernyője határozza meg.

Miért fontos az above the fold?

Az above the fold tartalom dönti el, hogy a látogató marad-e vagy távozik.

Első benyomások és visszafordulási arány

A látogató körülbelül 50 ezredmásodperc alatt alakít ki véleményt az oldalról. Ha az above the fold terület zsúfoltnak, zavarosnak vagy lényegtelennek tűnik, a visszafordulási arány megugrik. Azok az oldalak, amelyek a kezdeti látható területen egyértelműen kommunikálják a céljukat és az értéküket, mérhetően alacsonyabb lemorzsolódást mutatnak.

Hatás a konverzióra

Az above the fold területen elhelyezett cselekvésre ösztönző elemek, regisztrációs űrlapok és kiemelt ajánlatok következetesen jobban teljesítenek, mint a mélyebbre helyezettek.

SEO-vonzatok

A Google oldalélmény-jelzései és a Core Web Vitals azokat az oldalakat jutalmazzák, ahol a fő tartalom gyorsan betöltődik és azonnal hozzáférhető. Bár a hajtásvonal önmagában nem közvetlen rangsorolási tényező, azok az oldalak, amelyek a lényegi tartalmat tolakodó átfedő hirdetések (interstitialok) vagy nagy hero képek mögé szorítják, rangsorbeli visszaesésre számíthatnak. A nehezebben elérhető tartalom kevésbé versenyképesen rangsorol.

Iratkozz fel hírlevelünkre

Értesülj elsőként az új funkciókról és termékfrissítésekről.

E-mail cím

Feliratkozás

Hol van a hajtásvonal a weboldalon?

Nincs egyetlen hajtásvonal. A hajtásvonal a következőktől függ:

1. Képernyőméret és felbontás — egy 1920×1080-as asztali monitor sokkal többet mutat, mint egy 375×667-es telefonképernyő
2. Böngészőfelület (browser chrome) — az eszköztárak, könyvjelzősávok és fülsorok csökkentik a rendelkezésre álló függőleges teret
3. Eszköz tájolása — a táblagépek és telefonok fekvő, illetve álló módja eltérő hajtásvonalat eredményez

A leggyakoribb mobil nézet körülbelül 390×660 képpont. Ez azt jelenti, hogy a mobil látogatók a függőleges tartalom nagyjából felét látják annak, amit az asztali látogatók — így a mobil above the fold tervezés korlátozottabb és egyben kritikusabb is.

Hogyan mérik az above the fold részt?

A webdesignerek és marketingszakemberek több módszert is használnak annak megállapítására, hol húzódik a hajtásvonal:

• Hőtérkép-eszközök (Hotjar, Crazy Egg, Microsoft Clarity) — a görgetési mélység aggregált elérését színátmenetekkel mutatják
• BrowserStack és reszponzív tesztelőeszközök — a különböző eszközprofilok nézeteit szimulálják
• Kézi tesztelés — méretezd át a böngészőt a gyakori töréspontokra, és jegyezd fel, hol vágódik el a tartalom

A 2000-es évek elejéről származó 600 képpontos ökölszabály mára elavult. A tervezők ma folyékony fogalomként tekintenek a hajtásvonalra, és legalább öt nézetszélességen tesztelnek: 390 képpont (kis telefon), 428 képpont (nagy telefon), 768 képpont (álló táblagép), 1024 képpont (fekvő táblagép / kis laptop) és 1440 képpont (asztali monitor).

Még mindig releváns az above the fold?

Igen — de nem úgy, ahogy egy évtizeddel ezelőtt értelmezték. Az az elképzelés, hogy minden kritikus tartalomnak szigorúan az above the fold területen kell lennie, elavult. A felhasználók görgetnek, mégpedig gyakran. A közösségimédia-folyamok, a végtelen görgetésű híroldalak és a rövid videós platformok megtanították az embereknek, hogy a görgetés és a lapozás természetes mozdulat.

Az above the fold tartalom azonban továbbra is azt dönti el, hogy a látogató egyáltalán görgetni kezd-e.

Elavult tanácsok:

• Minden CTA-t, címsort és képet egy merev 600 képpontos vonal fölé zsúfolni
• Kizárólag asztali méretre tervezni, a mobil nézeteket figyelmen kívül hagyni
• Feltételezni, hogy a felhasználók soha nem görgetnek

Jelenlegi bevált gyakorlat:

• Helyezd a fő értékajánlatot és egy elsődleges CTA-t az above the fold területre
• Használj vizuális jelzéseket — a vágásnál részben látható tartalom, iránynyilak, görgetésre aktiválódó animációk —, amelyek jelzik, hogy lentebb további tartalom található
• Először a legkisebb gyakori nézetre tervezz, majd bővítsd a nagyobb képernyőkre

Mi kerüljön az above the fold részre?

A pontos összetétel az oldaltípustól függ. Egy honlap, egy landolóoldal és egy blogcikk mind más célt szolgál.

Honlapok és landolóoldalak esetén

1. Világos, előnyökre összpontosító címsor — mondd el a látogatóknak, mit csinálsz, és miért számít
2. Kiegészítő alcím — egy mondat, amely kontextust vagy egy másodlagos előnyt ad hozzá
3. Elsődleges cselekvésre ösztönző gomb — feltűnően elhelyezve, nagy kontraszttal, cselekvésre buzdító szöveggel
4. Hero kép vagy rövid videó — releváns vizuális elem, amely erősíti az üzenetet anélkül, hogy uralná a teret
5. Navigáció — letisztult, minimalista és intuitív

Blogcikkek és tartalmi oldalak esetén

1. Cikk címe — leíró jellegű és kulcsszavakban gazdag
2. Kiemelt kép — akkorára méretezve, hogy ne szorítsa a szöveget a hajtásvonal alá
3. Bevezető bekezdés — bemutatja a témát és azt, hogy az olvasó mit nyer vele
4. Tartalomjegyzék — hosszabb cikkeknél egy ugrómenü segíti az olvasót a tájékozódásban

E-kereskedelmi termékoldalak esetén

1. Terméknév és fő kép
2. Ár — görgetés nélkül látható
3. Kosárba tétel gomb
4. Csillagos értékelés és az értékelések száma — társadalmi bizonyíték egy pillantásra
5. Fő megkülönböztető tényező — ingyenes szállítás, garancia vagy egyedi tulajdonság

Hogyan vonatkozik az above the fold az affiliate marketingre?

Az affiliate marketingszakemberek — legyenek hirdetők, publikálók vagy programmenedzserek — az above the fold elhelyezésre támaszkodnak, hogy maximalizálják a láthatóságot, a kattintásokat és a konverziókat.

Hirdetőknek (affiliate programot működtető márkáknak)

Az affiliate landolóoldalaidnak azonnal közvetíteniük kell az értéket. Ha egy hivatkozott látogató olyan oldalra érkezik, ahol a címsor, az ajánlat vagy a CTA a hajtásvonal alá került, akkor a kifizetett kattintás kárba vész.

• Teszteld a landolóoldal címsorait az above the fold területen a legjobban teljesítő affiliate partnereiddel
• Mobilon tartsd az űrlapot vagy a vásárlási gombot a kezdeti látható területen

Publikálóknak (ajánlatokat népszerűsítő affiliate-eknek)

Az above the fold területen elhelyezett affiliate linkek és bannerek lényegesen több megjelenést és kattintást generálnak, mint a sidebarokba vagy a láblécekbe helyezettek. A Google hirdetéselhelyezési irányelvei azonban büntetik azokat az oldalakat, amelyek az above the fold hirdetések túlzott mennyisége miatt a tartalmat lejjebb szorítják.

• Illeszd be az affiliate CTA-kat természetesen — az első két bekezdésen belüli, kontextusba ágyazott szöveges linkek gyakran jobban teljesítenek a bannerhirdetéseknél
• Kerüld a több banner egymásra halmozását az above the fold területen a tartalmi oldalakon
• Tüntesd fel egyértelműen az affiliate kapcsolatot a link közelében, ne a láblécbe rejtve

Affiliate programmenedzsereknek

Amikor affiliate jelentkezéseket bírálsz el, és a partnerek teljesítményét követed nyomon, értékeld azt is, hogy az affiliate partnerek hová helyezik a linkjeidet. Azok az affiliate-ek, akik a forgalmas oldalakon az above the fold területen helyezik el az ajánlataidat, jellemzően a legtöbb konverziót hozzák. Használd ezt az adatot arra, hogy:

• Azonosítsd a legjobban teljesítő elhelyezéseket, és oszd meg ezeket a mintázatokat a gyengébben teljesítő affiliate-ekkel
• Biztosíts kreatív anyagokat (bannereket, szöveges linkeket), amelyek a gyakori above the fold méretekhez illeszkednek
• Figyeld a megfelelést — győződj meg róla, hogy az affiliate partnerek nem használnak megtévesztő elhelyezést, amely sérti a feltételeidet

A CTA-k az above the fold részre vagy alá kerüljenek?

A rövid válasz: helyezd az elsődleges CTA-t az above the fold részre, a kiegészítő CTA-kat pedig alá.

Az above the fold CTA azokat a látogatókat szólítja meg, akik gyorsan döntenek. Ők nagy elkötelezettségű felhasználók — már tudják, mit akarnak, és csupán a megfelelő ösztönzésre van szükségük a cselekvéshez.

A hajtásvonal alatti CTA azokat a látogatókat szolgálja, akiknek több információra van szükségük. Az előnyök, ajánlások vagy termékrészletek elolvasása után nagyobb magabiztossággal konvertálnak. Az ilyen konverziók gyakran magasabb átlagos rendelési értékkel és alacsonyabb visszaküldési aránnyal járnak.

Egyik elhelyezés sem egyértelműen jobb a másiknál. A leghatékonyabb mintázat, amelyet több ezer A/B teszt igazolt:

• Egyetlen elsődleges CTA az above the fold részben — az a művelet, amelyre a legtöbb látogató azonnal kész
• Másodlagos CTA-k elosztva a hajtásvonal alatt — minden jelentős szakasz után, amely meggyőző érveket sorakoztat fel
• Ragadós (sticky) CTA mobilon — a képernyő aljához rögzített állandó gomb, amely a görgetés során is látható

Teszteld mindkét elhelyezést. Ne csak a kattintásokat, hanem a befejezett konverziókat is kövesd nyomon. Egy olyan CTA, amely az above the fold területen sok kattintást generál, de kevés befejezést, lehet, hogy rossz közönséget vonz. A hajtásvonal alatti CTA, amely kevesebb kattintást kap, de magasabb a befejezési aránya, jobban célzott lehet.