Az oldalon töltött idő nagyobb része az első képernyőn telik, és az első tíz másodpercben dől el, marad-e a látogató — ezt a Nielsen Norman Group mérései mutatják. Nem a logód, nem a navigáció és nem a lábléc dönt, hanem az, amit a hajtás fölött, a hero szakaszban lát. Ez a cikk megmutatja, mit kell ott elmondanod, hogyan rontható el, és hogyan méred, hogy dolgozik-e.
Mi az a hero szakasz?
A hero az oldal első képernyője: az, ami betöltés után, görgetés nélkül látszik. Általában egy nagy cím, egy alcím, egy fő gomb és valamilyen vizuális elem alkotja — kép, illusztráció vagy maga a tipográfia. A neve onnan jön, hogy ez „viszi” az oldalt: itt hangzik el a fő üzenet.
A jó hero három kérdésre felel: Kinek szól az oldal? Mit kínál? Miért érdemes itt maradni? Ha bármelyikre nem ad választ, a látogató könnyen továbblép.
Miért számít? — amit a kutatások mutatnak
- A figyelem nagy része itt van. A Nielsen Norman Group 2018-as szemkamerás vizsgálatában a résztvevők az oldalon töltött idejük 57%-át a hajtás fölött, 74%-át az első két képernyőn töltötték. A görgetés tehát nem tilos, de ami lejjebb van, kevesebb figyelmet kap.
- Az első tíz másodperc a legkritikusabb. Egy korábbi NN/g-elemzés szerint a látogatók gyakran 10–20 másodperc után elhagyják az oldalt, és az első tíz másodpercben dől el, maradnak-e. A világos értékajánlat viszont sokkal tovább megtartja őket.
- Az első benyomás még gyorsabb. Lindgaard és munkatársai már 2006-ban kimutatták, hogy az oldal megjelenéséről alkotott ítélet 50 ezredmásodperc alatt kialakul. A Google kutatói 2012-ben ezt megerősítették, és azt is mérték, hogy a vizuális összetettség már 17 ezredmásodperc alatt hat rá: az egyszerű, megszokott felépítésű oldalakat látjuk szebbnek.
A sokat idézett „három másodperces szabálynak” viszont nincs egyértelmű kutatási forrása — ezért ez a cikk a mért adatokra épít. Hogy pontosan mennyi idő alatt dönt a látogató, az oldaltól és a helyzettől függ. Ami biztos: az első képernyő kapja a legtöbb figyelmet, és ott kell kiderülnie, hogy érdemes maradni.
Mit nyersz egy jó heróval?
1. A tölcsér első lépése
Aki már tudja, mit akar, annak a hero fő gombja a legrövidebb út: nem kell végiggörgetnie az oldalt, hogy ajánlatot kérjen vagy felhívjon. A többieknek pedig a hero mondja meg, miért érdemes lejjebb görgetni.
2. Sebesség és Core Web Vitals
A hero nagy képe vagy címe általában az oldal legnagyobb eleme, és ezt méri a Google Largest Contentful Paint (LCP) mutatója. A web.dev szerint a jó érték legfeljebb 2,5 másodperc, a látogatások 75%-ánál mérve. Az LCP a három Core Web Vitals-mutató egyike (a másik kettő az INP és a CLS). A Google a rangsorolásnál ezeket is figyelembe veszi, de a releváns tartalom előnyt élvez: a jó sebesség akkor dönt, ha több egyformán jó találat közül kell választani. Bővebben: PageSpeed 95+ valós feltételek között.
3. Pozicionálás egyetlen képernyőn
Egy jó hero olyan, mint egy plakát: egy mondatban elmondja, ki vagy, és mit csinálsz másképp. A „Weboldalak, amelyek dolgoznak helyetted” mást üzen, mint az „Innovatív digitális megoldások”. A látogató nem fogja végigolvasni a Rólam oldalt, hogy ezt megértse — itt nyersz vagy veszítesz.
4. Megosztáskor is ez látszik
Ha valaki megosztja az oldalad linkjét a Facebookon vagy a LinkedInen, az előnézet címét, leírását és képét az Open Graph metaadatok adják — és a kép sokszor épp a hero képe. Ha ezek nincsenek rendben, a megosztott link sem vonzó.
Így rontható el
Túl tele
Gyakori hiba, hogy minden „fontos” üzenet a heróba kerül: három alcím, négy felsorolás, két egyenrangú gomb, egy videó és egy forgó háttér. A látogató semmit sem ért belőle. A szabály: egy hero, egy üzenet, egy fő gomb.
Üres
A másik véglet: csak egy nagy „Üdvözöljük” felirat, és semmi más. Ez nem minimalista dizájn, hanem hiányzó tartalom. A látogatónak tudnia kell, miről szól az oldal, mielőtt görgetni kezd.
Lassú
Egy nagy, tömörítetlen hero kép vagy egy karusszel késlelteti az oldal legnagyobb elemét — pont azt, amit a látogató elsőként látna. Mobilon, gyengébb hálózaton ez különösen fáj.
Általános
Az „Innovatív megoldások prémium minőségben” típusú feliratok semmit nem mondanak, bármelyik másik cégre illenek. Ha a heród szövege változatlanul átkerülhetne a versenytársad oldalára, akkor nem elég konkrét. Egy jó hero specifikus és megkülönböztető.
Mi történik, ha teljesen hiányzik?
Sok régi oldalon nincs hero: a navigáció után rögtön a fő tartalom jön — lista, blogcikkek, termékek. Ilyenkor jellemzően ezt látom:
- Sok a visszafordulás. A látogató nem tudja, jó helyen jár-e, és visszalép.
- Kevés az ajánlatkérés. Nincs hangsúlyos gomb, ahol eldönthetné, hogy „igen, ez érdekel”.
- Gyenge a megosztási előnézet. Nincs erős kép és cím, amit a közösségi oldalak megmutathatnának.
- Gyengébb a SEO-jelzés. Nincs egyértelmű főcím (H1) a hajtás fölött, amely kimondja, miről szól az oldal.
A hero bevezetése vagy átírása egy meglévő oldalon általában kisebb beavatkozás, mint egy újraépítés — és jól mérhető: érdemes előtte és utána is megnézni az elköteleződési arányt és a fő gomb kattintásait. Hogy mikor elég ennyi, és mikor kell több: Mikor érdemes újraépíteni az oldalad — és mikor csak optimalizálni.
Egy jó hero anatómiája — ellenőrzőlista
- Felső címke (opcionális): 2–4 szó, ami megadja a kontextust („Webstúdió · Kaposvár”).
- Cím (H1): konkrét ígéret 6–12 szóban. Egyetlen kulcsszó lehet kiemelve, dőlttel vagy színnel.
- Alcím (opcionális): 1–2 mondat, legfeljebb 30 szó, ami kibontja az ígéretet.
- Egy fő gomb cselekvő igével („Kérek árajánlatot”), nem általánosan („Tudj meg többet”).
- Halkabb másodlagos lehetőség (opcionális) annak, aki még nem áll készen — például „Megnézem a referenciákat”.
- Vizuális elem: kép, illusztráció vagy tudatosan üres tér. A kép is az üzenet része.
- Bizalomjel (opcionális): ügyfél-logók vagy egy értékelés, például „4,9★ (87 értékelés)”.
A hero az oldal első eleme. Hogy utána mi jöjjön, és hogyan vezesd végig a látogatót a kapcsolatfelvételig, arról itt írtam: A landing oldal anatómiája.
Látványos, de nem működik
- Stockfotó mosolygó emberekkel. Az NN/g vizsgálatai szerint a látogatók a tartalmat hordozó képeket megnézik, a hangulatkeltő, általános képeket viszont átugorják. Egy valódi fotó rólad, a csapatodról vagy a munkádról többet ér.
- Magától forgó karusszel. Az NN/g szerint az automatikusan továbblépő karusszel bosszantja a felhasználókat, és az egyes elemek csak rövid ideig látszanak. Ha öt másodpercnél tovább mozog, a WCAG 2.2.2-es pontja szerint szüneteltethetőnek is kell lennie.
- Automatikusan induló videó. Adatforgalmat és akkut fogyaszt mobilon, és ha öt másodpercnél tovább fut, ugyanúgy leállíthatónak kell lennie. Hanggal a legtöbb böngésző el sem indítja magától.
- „Kattints ide” gomb. Nem mondja meg, mi történik, ha rákattintasz.
- Minden látogatáskor lejátszódó animáció. Elsőre érdekes, tizedszerre idegesítő — és akinek az eszközén csökkentett mozgás van beállítva, annak ne is játszódjon le. Az akadálymentességről bővebben: WCAG AA magyarázat magyarul.
Hogyan mérd?
Három kérdés mutatja meg, dolgozik-e a hero:
- Hányan görgetnek a hero alá? A GA4 alapból csak azt méri, ki ér el az oldal 90%-áig, ezért ehhez görgetési térkép kell — például a Microsoft Clarity ingyenes hőtérképe, amely sütit használ, így hozzájárulás kell hozzá —, vagy egy egyedi mérés a Google Címkekezelőben.
- Hányan kattintanak a fő gombra? Ezt egy kattintási eseménnyel méred; a hero-gomb kattintásait érdemes a lejjebb lévő gombokétól külön nézni.
- Hányan maradnak legalább tíz másodpercig? Erre a GA4-ben kész mutató van: a Google meghatározása szerint elköteleződött az a munkamenet, amely 10 másodpercnél tovább tart, kulcseseménnyel jár (például ajánlatkéréssel), vagy legalább két oldalmegtekintést hoz. Az elköteleződési arány nem csak a herót méri, de ha alacsony, a hero az első gyanúsított.
Konkrét „jó” értéket szándékosan nem adok: iparáganként, forgalmi forrásonként és eszközönként nagyon eltér. Ami számít, az a saját előtte–utána összevetésed. Ha valamelyik mutató gyenge, a hero az első hely, ahol érdemes javítani — nem a lábléc, nem a Rólam oldal.
Záró gondolat
A hero nem dekoráció. Az üzleted első kézfogása a látogatóval — és ahogy a valós életben, ez is eldönti, lesz-e folytatás. Ha a heród nem dolgozik, az egész oldal szenved; ha jól dolgozik, a többi szekciónak is könnyebb a dolga.
Ha kíváncsi vagy, mit tud (vagy mit nem) az oldalad első képernyője: az auditban a UX és a sebesség is benne van, konkrét javaslatokkal. Ha előbb csak beszélnél róla, foglalj egy 30 perces beszélgetést — ingyenes, és semmire nem kötelez.
