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.”
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.
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.
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!
- 5 legjobb honlap-gyakorlat
- 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.