Above the fold: az első képernyő megtervezése

Mit jelent az above the fold?

Fontos tisztázni egy régi félreértést: az above the fold nem azt jelenti, hogy minden lényegeset ide kell zsúfolni. A látogatók természetesen és szívesen görgetnek, ha az első képernyő meggyőzi őket, hogy érdemes. A cél nem a bezsúfolás, hanem a figyelemfelkeltés és az egyértelmű irányítás lefelé.

Az első képernyő tehát egyszerre kirakat és útjelző. Elmondja, hol vagy, mit kínálsz, és mi a következő lépés. Ha ezt a három kérdést gyorsan és tisztán megválaszolja, a látogató marad; ha nem, a visszalépés gomb egy kattintás.

Miért ilyen fontos az első képernyő?

A látogatók az első benyomást töredékmásodpercek alatt alkotják meg, és ez az első kép erősen befolyásolja, mennyire bíznak meg az oldalban. Ha az első képernyő zavaros, lassú vagy nem világos, a látogató gyakran azelőtt távozik, hogy egyáltalán görgetni kezdene. A figyelem legnagyobb része, ahogy a fenti ábra is mutatja, erre a sávra esik.

Ez a visszapattanás közvetlen üzleti veszteség: a drágán, hirdetésből vagy keresőoptimalizálásból megszerzett látogató itt vész el. Épp ezért az első képernyő javítása kiemelkedő megtérülésű beavatkozás, mert a legnagyobb forgalmú ponton hat. Egyetlen jól megtervezett első képernyő az egész oldal eredményét elmozdíthatja.

Az első benyomás nem csak esztétika kérdése. A rend, a tisztaság és a gyorsaság együtt üzeni azt, hogy komoly, megbízható céggel van dolga a látogató. Egy rendezetlen, lassan épülő első képernyő ezzel szemben azonnal gyanút kelt, még mielőtt egyetlen szót is elolvasnának.

Mi kerüljön az above the fold sávba?

Az első képernyőnek néhány kérdésre kell azonnal válaszolnia: mi ez az oldal, mi a haszna a látogatónak, és mit tegyen most. Ehhez négy elem viszi a főszerepet, a többi csak zaj. A tömörség itt erény: minél kevesebb, de annál élesebb.

• Világos, haszonközpontú főcím, amely egy mondatban elmondja, miről van szó.
• Rövid alcím, amely kifejti vagy pontosítja a főcím ígéretét.
• Egyetlen, egyértelmű cselekvésre ösztönző gomb, kiemelt, jól látható helyen.
• Támogató vizuál - kép, illusztráció vagy rövid videó, amely erősíti az üzenetet.

A leggyakoribb hiba a több egyenrangú gomb: ha öt dolgot kínálsz egyszerre, a látogató egyiket sem választja. Egyetlen elsődleges cselekvés legyen, a másodlagos opciók pedig vizuálisan visszafogottak. A fenti ábra jól mutatja, hogyan áll össze ez a négy elem egy tiszta, irányított első képernyővé.

A főcím: a legfontosabb mondat az egész oldalon

A főcím dönti el, hogy a látogató tovább olvas-e. A jó főcím konkrét és a látogató hasznáról szól, nem a cégről. A „Több mint 12 éve a piacon” típusú, magadról szóló üzenet helyett azt mondd el, mit nyer a látogató, ha nálad marad.

Hogyan írj erős, haszonközpontú főcímet?

Indulj a látogató problémájából és a megoldásból, ne a saját szolgáltatásod nevéből. Legyen konkrét: egy pontos ígéret vagy eredmény többet mond, mint egy általános szlogen. Kerüld az üres, mindenkire ráhúzható mondatokat, mert azok semmit nem árulnak el. A jó főcímet gyakran a következő mondat olvasása nélkül is meg lehet érteni.

Az alcím a főcím párja: kifejti az ígéretet, vagy hozzáad egy fontos részletet, például a célközönséget vagy a fő előnyt. A kettő együtt egy pillanat alatt elhelyezi a látogatót. Ha a főcím és az alcím külön-külön is érthető, jó úton jársz.

A hajtásvonal mobilon: ahol az igazi kihívás van

Nincs egyetlen, fix hajtásvonal, mert az eszközök képernyője nagyon eltérő. Egy asztali monitoron sokkal több fér az első képernyőre, mint egy telefonon, ahol a hasznos magasság szűk, és a böngésző sávjai is elvesznek belőle. A fenti ábra ezt a különbséget szemlélteti eszközönként.

Mivel a forgalom nagy része mobilról érkezik, az első képernyőt mobilelső szemlélettel érdemes tervezni. Ami a telefon szűk sávjában is elfér és működik, az asztali gépen szinte biztosan jó lesz. Fordítva ez nem igaz: egy asztali gépre tervezett, zsúfolt első képernyő mobilon szétesik.

Mobilon különösen fontos, hogy a fő gomb az első képernyőn, kényelmesen elérhető helyen legyen, és elég nagy a hüvelykujjal való megnyomáshoz. A ragadós (sticky) fejléc és a felugró ablakok itt könnyen elveszik az amúgy is szűk helyet, ezért ezekkel óvatosan bánj. A süti-sáv se takarja el az első képernyő lényegi részét.

Sebesség: a leggyorsabb első képernyő nyer

Az első képernyő akkor sem működik, ha csak lassan épül fel. A látogató nem vár: ha másodpercekig üres vagy ugráló felületet lát, távozik. Ezért a betöltési sebesség az above the fold egyik néma, mégis döntő tényezője.

A Core Web Vitals mérőszámai közül itt kettő különösen fontos. Az egyik a legnagyobb tartalmi elem megjelenése (LCP), ami jellemzően épp az első képernyő nagy képe vagy címe - ezt érdemes a lehető leggyorsabban betölteni. A másik a layout eltolódás (CLS): ha az elemek betöltés közben ugrálnak, a látogató kényelmetlenül érzi magát, és könnyen elkattint valamit tévedésből.

• Az első képernyő nagy képét optimalizáld és töltsd elsőbbséggel (ne lusta töltéssel).
• Foglald le előre az elemek helyét, hogy semmi ne ugorjon betöltés közben.
• Kerüld a nehéz, azonnal betöltő szkripteket és a lassú, külső beágyazásokat a hajtás fölött.

Tesztelj, ne tippelj: az első képernyő finomhangolása

Az above the fold ideális kialakítása oldalanként és közönségenként eltér, ezért nem tippelni kell, hanem mérni. A weboldal analitikájából látszik, mennyien görgetnek tovább, és mennyien pattannak vissza azonnal. A hőtérképek megmutatják, hova néznek és hova kattintanak valójában a látogatók.

Nagyobb forgalomnál egy A/B-teszt egyértelmű választ ad: hasonlíts össze két főcímet, két gombszöveget vagy két elrendezést. Egyszerre csak egy dolgot változtass, hogy tudd, mi vált be. Így az első képernyő nem megérzés, hanem visszamért adat alapján lesz egyre erősebb.

Tipikus hibák az első képernyő tervezésekor

A leggyakoribb hiba a zsúfolt, több egyenrangú üzenetet és gombot felvonultató első képernyő, ahol a látogató nem tudja, hova nézzen. Ehhez társul az önmagáról szóló, haszon nélküli főcím, amely semmit nem árul el a látogatónak. Egy ilyen első képernyő figyelmet kér, de irányt nem ad.

Másik gyakori hiba a lassú vagy ugráló betöltés, valamint a mobilra kifejezetten rossz elrendezés, ahol a fő gomb csak görgetés után látszik. Sokan a felugró ablakot és a süti-sávot is épp az első képernyőre teszik, kitakarva a lényeget. Ezeket a hibákat valós eszközökön, valós tartalommal tesztelve érdemes kiszűrni.

Mikor érdemes szakértővel megterveztetni?

Az első képernyő az oldal legnagyobb tétű felülete, ezért itt a legdrágább a hiba és a legnagyobb a nyereség. A jó above the fold összehangolt munka: üzenet, dizájn, sebesség és mérés együtt. Egy tapasztalt szem gyorsan meglátja, hol veszít a jelenlegi első képernyő látogatót vagy figyelmet.

Cégünk a weboldal készítést a konverzió-központú tervezéssel együtt kezeli, így az első képernyő nem véletlen, hanem tudatos döntés eredménye. A betöltési sebesség objektív méréséhez a Google hivatalos Web Vitals leírása ad megbízható, gyakorlati kiindulópontot.

Ajánlott forrás: a Core Web Vitals hivatalos leírása a web.dev oldalon.

Összegzés: az első képernyő az oldal kirakata

Az above the fold az az első képernyő, ahol másodpercek alatt eldől, marad-e a látogató vagy távozik. Nem kell mindent ide zsúfolni: a látogatók szívesen görgetnek, ha az első kép meggyőzi őket. A cél a figyelemfelkeltés és az egyértelmű irányítás lefelé, nem a bezsúfolás.

A fő üzenetet egy erős, haszonközpontú főcím és egy pontosító alcím vigye, mellette egyetlen egyértelmű cselekvésre ösztönző gombbal. A hajtásvonal eszközönként máshol húzódik, ezért mobilelső szemlélettel tervezz, és ügyelj a fő gomb elérhetőségére. A gyors, ugrálásmentes betöltés pedig ennek néma, de döntő feltétele.

Végül teszteld és mérd az első képernyőt, ne csak tippelj, mert az ideális kialakítás oldalanként eltér. A görgetési arány, a hőtérképek és az A/B-tesztek együtt mutatják, mi vált be. Egy tudatosan megtervezett első képernyő az egész oldal eredményét elmozdíthatja, mert a legnagyobb forgalmú ponton hat.