Mit jelent az Above The Fold? És miért fontos?

Ha visszamegyünk a könyvkiadás kezdeti időszakáig, akkor a “above the fold” kifejezést az újságok címlapjának felső felében megjelenő tartalomra használt kifejezésként kapjuk. A hajtás feletti tartalom az olvasók számára a leglátványosabbnak tűnt, a fülbemászó főcímekkel és élénk képekkel általában az olvasók figyelmének felkeltésére használták, abban a reményben, hogy az újságosbódé mellett elhaladva ez meggyőzi őket, hogy vegyenek egy újságot.
Most gyorsítsunk előre az aperről a digitálisra való átálláshoz, amikor ugyanezek a kiadók a nyomtatásból az online felületre helyezték át az üzletüket. Ahogy a webdesign az 1990-es évek eleje óta fejlődött, a kifejezés tovább ragadt. Mit jelent tehát az above the fold a honlapodon? És számít-e még 2019-ben?

Miért fontos a hajtás fölött a weboldalam számára?

A digitális marketing korában a hajtás már nem egy újság tényleges hajtására utal, hanem arra a tartalomra, amely a weboldal meglátogatásakor először betöltődik, megragadja a figyelmet és behúzza Önt.
A webdesign világában, ahol a tartalom elrendezése és elhelyezése miatt aggódik, mert a hajtás fölött megjelenő tartalom az, ami először látható, amikor a weboldal látogatója betölti az oldalt. Ez a tartalom az elsődleges ingatlan, amely a legtöbb figyelmet kapja az oldalad látogatóitól, és a felhasználói élménynek ezt kell tükröznie. Jakob Nielsen becslése szerint “…a webfelhasználók idejük 80%-át az oldal hajtása feletti információk megtekintésével töltik. Bár a felhasználók manapság többet görgetnek, még mindig csak a figyelmük mindössze 20%-át fordítják a fold alatt.”

52d960f0bb5a25.99258720.jpg

Először is fel kell tenned magadnak a kérdést: mi a legfontosabb tartalom, amely segít elérni az üzleti céljaimat?
Mihelyt megválaszolta ezt a kérdést, már tudja, mit kell elhelyeznie ezen a magasan látható területen. A tartalomnak azonnal meg kell ragadnia a felhasználó figyelmét, és azt a tartalmat kell bemutatnia neki, amit keres, hogy ne pattanjon el, és ne látogasson el egy másik oldalra.

Gyors tippek a konverziós arányok növeléséhez

  • Hőskép: Ne legyél itt túlságosan éteri. Hogy néznek ki a boldog vásárlóid? Mit tapasztalnak? Jelenítsen meg egy olyan képet, amely pozitív törekvéseket ébreszt.
  • Főcím szöveg: Ne veszítse el a világosságot az okosság kedvéért. Ha összezavarodsz, veszítesz. Ragaszkodjon egy egyszerű üzenethez, amely pontosan megmutatja, hogy mivel foglalkozik, vagy átérzi az alapvető kihívást, amellyel szembenéznek.
  • Call to action (CTA):
  • Tagsor: Az elsődleges CTA-nak nyilvánvalónak kell lennie, és a navigáció jobb felső sarkában ÉS a hős szekcióban kell elhelyezkednie.
  • Tagsor: Párosítsa az egyértelmű fejlécszöveget egy vagy két mondatos sorral, amely úgy pozícionálja a márkáját, hogy segít megoldani az ügyfél problémáját.
  • Navigáció: A kevesebb több. A nagyszerű weboldaltervezés pontosan oda vezeti a felhasználót, ahová szeretné, hogy menjen. A túl sok lehetőség döntési fáradtságot eredményezhet.
  • Feltöltési sebesség: A honlap betöltési ideje miatt a látogatók ugrálhatnak!

A hirdetések elhelyezése a hajtás felett javítja a láthatóságukat, és több reklámbevételt generál, mint a kevésbé látható helyeken elhelyezett hirdetések.

Hogyan mérhető a “hajtás” a webdesignban?

Röviden, lehetetlen pontosan meghatározni, hogy hol helyezkedik el a hajtás a weboldalon. A pontos hely eltér a különböző monitorok képernyőméretei (asztali és laptop), a képernyőfelbontások, a böngésző bővítmények és a különböző mobiltelefonok és táblagépek mérete miatt.
Ökölszabályként a legtöbb webdesigner egyetért abban, hogy a hajtásvonal nagyjából 1000 pixel széles és 600 pixel magas. Ez a legjobb becslés a leggyakoribb, 1024×768 pixeles monitor/böngésző kombinációból, a böngészőablak maximalizálva van, és nincsenek a tetejére telepített, a tartalmat lefelé nyomó eszköztárak.

FoldGraph.jpg

Ha kíváncsi vagy, hogyan tudhatsz többet, nézd meg a webhelyed analitikai programját (ha még nincs, a Google Analytics egy remek hely a kezdéshez), amelynek meg kell tudnia mondani, melyek a látogatóid leggyakoribb képernyőméretei. Míg az 1024×768-as általános képernyőméret hagyományosan megfelelőnek bizonyult, egyre népszerűbbek az olyan új méretek, mint a 320×568 és a 360×640, mindez a weboldalak mobilon történő megtekintésének növekedése miatt.

52d96112ae2b34.33407826.jpg

Mobil megtekintés és reszponzív tervezés

Az elmúlt néhány évben nagymértékben megnőtt a mobileszközök használata webböngészésre, és ez tovább bonyolítja a webdesign optimalizálásának koncepcióját a fold feletti tartalomra.
Az egyik kihívás az, hogy a mobileszközök sokféle képernyőméretet kínálnak, valamint, hogy a mobileszközök felhasználói többnyire portré módban böngésznek, nem pedig landscape módban. Ez ismét hatással van arra, hogy a tervezőnek mekkora méretben kell megjelenítenie a fontos tartalmat.

Az Optimalizely szerint: “Mivel oly sok ember ilyen sokféle eszközön keresztül fér hozzá a weboldalakhoz, a jelenlegi webtervezési gyakorlatok a reszponzív tervezés alkalmazását foglalják magukban: a rugalmas elrendezések, képek és kaszkád stíluslapok felhasználását. A reszponzív tervezésnél nincs rögzített elrendezés az oldalon, és a tartalom bármilyen méretű képernyőre átfolyik. A reszponzív weboldalak reagálnak vagy “reagálnak” arra a környezetre, amelyben fogyasztják vagy böngészik őket.”

Míg a fontos tartalomnak még mindig magasabban kell lennie az oldalon, manapság az oldalakat úgy kell megtervezni, hogy a felhasználókat görgetésre csábítsák, hogy ne maradjanak le a fontos tartalomról.
A hajtogatás mint fogalom mindig is létezni fog, de ez egy olyan szabály, amely – különösen idővel – megváltoztatható vagy módosítható. Mivel a weboldalak böngészéséhez olyan sokféle eszköz és képernyőfelbontás létezik, a fold túlságosan is különbözik felhasználóról felhasználóra ahhoz, hogy rendszeresen lehessen rá támaszkodni. De ha ügyelsz arra, hogy csak a legfontosabb elemeket és tartalmakat helyezd a hajtás fölé, megtalálhatod a megfelelő egyensúlyt a webhelyed használhatósága és a megfelelő tartalom “Above The Fold” (a hajtás fölött) kiszolgálása között.”

További tippekért a honlap legjobb gyakorlatáról vagy a webhely sebességének javításáról nézd meg ezeket a blogokat!

  1. 5 legjobb honlap-gyakorlat
  2. 13 mód a webhely sebességének növelésére

A céloldalaktól a kezdőlapokig, segítettünk az Önhöz hasonló vállalatoknak olyan felhasználói élményeket létrehozni, amelyek az eladásig vezetnek. Kérjen időpontot a megbeszélésre.

Szólj hozzá!