Ragadós (sticky) navigáció és fejléc tervezése

Mi az a ragadós (sticky) navigáció?

Technikailag a sticky fejléc a CSS position: sticky vagy position: fixed megoldására épül. A kettő között lényeges a különbség: a sticky egy megadott pontig együtt mozog a tartalommal, majd rögzül, míg a fixed a betöltéstől kezdve a helyén marad. A gyakorlatban a legtöbb modern fejléc a sticky viselkedésre épít, mert az természetesebb görgetési élményt ad.

A ragadós navigáció nem öncélú látványelem, hanem használhatósági eszköz. Egy hosszú aloldalon vagy blogcikkben valódi kényelmet ad, hogy a menü és a kapcsolatfelvételi gomb végig elérhető. Egy rövid, egy képernyős landing oldalon viszont teljesen felesleges, sőt zavaró lehet.

Mikor éri meg a ragadós fejléc, és mikor nem?

A ragadós fejléc akkor indokolt, ha az oldal hosszú, sokszor kell navigálni, vagy a konverziós gombnak mindig elérhetőnek kell lennie. Egy webáruház, egy tartalmas szolgáltatásoldal vagy egy hosszú blogcikk tipikusan ilyen. Itt a látogató sokat görget, és bosszantó lenne visszatérnie a tetejére csak azért, hogy továbblépjen.

• Hosszú, sok szakaszból álló oldalak, ahol gyakori a szakaszok közti ugrálás.
• Webáruházak, ahol a keresés és a kosár bármikor elérhető kell legyen.
• Landing oldalak, ahol egyetlen fő gombra akarod terelni a figyelmet.
• Dokumentációk és tudásbázisok, ahol az oldalsáv-navigáció végig hasznos.

Vannak esetek, amikor jobb elhagyni. Egy rövid, egyetlen üzenetre épülő oldalon a ragadós sáv csak helyet lop. Kis kijelzőn, ahol a hasznos magasság amúgy is szűk, egy vastag, mindig látható fejléc a tartalom jelentős részét kitakarhatja. A ragadós navigáció és fejléc tervezése ezért mindig az adott oldal céljából induljon, ne pedig egy divatos alapbeállításból.

A fejléc magassága: minden pixel a tartalom rovására megy

A ragadós fejléc legnagyobb rejtett ára a helyfoglalás. Amíg a normál fejléc kigörget a képből, a ragadós végig ott marad, és folyamatosan takar egy sávot a képernyőből. Ez a sáv minél magasabb, annál kevesebb hasznos tartalom fér a látótérbe. Ezért a visszafogott magasság a jó sticky fejléc egyik legfontosabb ismérve.

Hogyan tervezz alacsony, mégis használható ragadós fejlécet?

A trükk a fontossági sorrend: a ragadós állapotban csak az elengedhetetlen elemek maradjanak. Egy gyakori, jól bevált megoldás, hogy az oldal tetején a fejléc bővebb - logó, teljes menü, elérhetőség, majd görgetés közben egy alacsonyabb, letisztult változatra vált. A logó kisebb lesz, néhány másodlagos elem eltűnik, és a sáv összehúzódik.

A magasságot érdemes konkrét számban is kordában tartani. Egy 60-70 pixeles ragadós sáv asztali gépen általában kényelmes, míg mobilon 50-56 pixel körül már bőven elég. A fenti ábra jól mutatja, mennyivel több tartalom marad a képernyőn, ha a fejléc magasságát visszafogod.

Mi kerüljön a ragadós sávba, és mi ne?

A ragadós sáv szűk hely, ezért kíméletlenül szelektálj. A logó a bal oldalon a márkát és a főoldalra visszavezető linket adja, a menü a fő navigációt, egyetlen kiemelt gomb pedig a legfontosabb cselekvést. Minden további elem - hosszú elérhetőségek, közösségi ikonok, hirdetéssáv - inkább zavar, mint segít.

• Logó, amely egyben a főoldalra visszavezető link.
• A fő menüpontok, mobilon összecsukott (hamburger) formában.
• Egyetlen, egyértelmű cselekvésre ösztönző gomb, például ajánlatkérés.
• Opcionálisan a kereső ikonja, ha az oldalon fontos a belső keresés.

A ragadós sáv rétegei tehát világos fontossági rendet követnek, ahogy a fenti ábra is jelzi: kívül a márka és a navigáció, középen a fő gomb. Ha mindent be akarsz zsúfolni, a látogató semmit nem talál meg gyorsan. A cselekvésre ösztönző gomb pedig épp akkor ér a legtöbbet, ha vizuálisan kiemelkedik a sávból, nem olvad bele.

Ragadós navigáció mobilon: a rejtsd-mutasd elv

Mobilon a képernyő hasznos magassága a legszűkebb erőforrás, ezért a ragadós fejléc itt a legkényesebb. A bevált megoldás a rejtsd-mutasd viselkedés: lefelé görgetéskor, amikor a látogató a tartalmat olvassa, a fejléc finoman eltűnik; felfelé görgetéskor, amikor valószínűleg navigálni akar, azonnal visszatér. Így a maximális helyet adod a tartalomnak, miközben a menü mindig egy mozdulatra van.

Ez az elv illeszkedik ahhoz, ahogyan valójában használjuk a telefont. A lefelé görgetés olvasási szándékot jelez, a felfelé görgetés pedig gyakran a vezérlőelemek keresését. A fenti ábra ezt a viselkedést szemlélteti: a fejléc a szándékodhoz igazodik, nem pedig folyamatosan a képen ül.

Ügyelj arra is, hogy a ragadós fejléc mobilon ne takarja a szakaszra ugró linkek célpontját. Ha egy horgonylinkre kattintva a fejléc épp elfedi a szakasz címét, az zavaró. Ezt a görgetési eltolás beállításával (scroll-margin) egyszerűen orvosolhatod, hogy a cél mindig a fejléc alatt jelenjen meg.

Teljesítmény, akadálymentesség és a stabil elrendezés

A ragadós fejléc rosszul kivitelezve ronthatja a teljesítményt és a stabilitást. A görgetéshez kötött, folyamatosan futó szkriptek akadozó, ugráló élményt adhatnak. A modern megoldás inkább a CSS position: sticky-re és egy visszafogott, dobott képkockát kímélő logikára épít. A cél a sima, kiszámítható görgetés minden eszközön.

Az akadálymentesség sem másodlagos: a ragadós navigáció legyen billentyűzettel is bejárható, és a fókusz látható sorrendben mozogjon. A kontraszt legyen elég erős ahhoz, hogy a sáv a mögötte átsejlő tartalom felett is olvasható maradjon. Egy áttetsző fejléc látványos lehet, de csak akkor, ha a szöveg így is jól elkülönül.

A layout eltolódás (CLS) elkerülése ragadós fejlécnél

Amikor a fejléc a görgetés közben rögzül vagy összehúzódik, könnyen megugorhat a tartalom, ami kellemetlen és a keresőoptimalizálás szempontjából is hátrány. A váratlan elmozdulást a Core Web Vitals a layout eltolódás (CLS) mérőszámmal bünteti. Ezért a fejléc helyét előre le kell foglalni, hogy a rögzülés pillanatában semmi ne ugorjon.

Tipikus hibák a ragadós fejléc tervezésekor

A leggyakoribb hiba a túl magas, túlzsúfolt ragadós sáv, amely a képernyő nagy részét elfoglalja. Ehhez társul, ha mobilon is a teljes asztali fejlécet ragasztják oda, ahelyett hogy egy karcsúbb változatot használnának. A látogató ilyenkor egy szűk résen keresztül próbál olvasni.

Másik gyakori hiba, ha a ragadós fejléc elfedi a szakaszcímeket a horgonylinkeknél, vagy ha rögzüléskor megugrik a tartalom. Előfordul az is, hogy a ragadós sáv fölé kerülő felugró ablakok és süti-sávok együtt már a képernyő felét kitakarják. Ezeket a hibákat érdemes valódi eszközökön, valós tartalommal tesztelve kiszűrni, nem csak a tervezőprogramban.

Hogyan mérd, hogy a ragadós navigáció segít-e?

Ne feltételezz, hanem méregess. A weboldal analitikájából kiderül, mennyien használják a ragadós menü elemeit és a fő gombot görgetés közben. Ha a ragadós cselekvésre ösztönző gombot alig érintik, érdemes átgondolni a helyét vagy a szövegét. A mérés mutatja meg, hogy a kényelem valóban konverzióvá válik-e.

Nagyobb forgalomnál egy A/B-teszt egyértelmű választ ad: hasonlítsd össze a ragadós és a nem ragadós fejléces változatot ugyanazon az oldalon. Nézd a lényeges üzleti jeleket - a görgetési mélységet, a szakaszra ugrásokat és az ajánlatkéréseket. Így nem megérzésből, hanem adat alapján döntesz a ragadós fejléc mellett vagy ellen.

Mikor érdemes szakértővel megterveztetni?

Az alapelveket magad is alkalmazhatod, de a ragadós navigáció finomhangolása - a magasság, a görgetési viselkedés és a mobil kompromisszumok - sok apró döntésen múlik. Egy tapasztalt szem gyorsan meglátja, hol lop a fejléc helyet vagy figyelmet. A cél mindig az, hogy a kényelem ne menjen a tartalom és a konverzió rovására.

Cégünk a weboldal készítést és a felhasználói élmény tervezését együtt kezeli, így a ragadós fejléc nem utólagos ráadás, hanem az elrendezés átgondolt része. A hivatalos háttérhez a CSS position tulajdonságának leírása ad pontos, megbízható alapot.

Ajánlott forrás: a CSS position tulajdonság hivatalos leírása az MDN-en.

Összegzés: a jó ragadós fejléc láthatatlanul segít

A ragadós (sticky) navigáció és fejléc akkor jó, ha a látogató észre sem veszi, csak azt érzi, hogy minden kéznél van. Először mindig döntsd el, valóban szüksége van-e rá az adott oldalnak, mert nem minden oldalon indokolt. Egy rövid landingen gyakran jobb elhagyni, egy hosszú aloldalon viszont valódi kényelmet ad.

Ha marad, tartsd alacsonyan és letisztultan: csak a logó, a menü és egyetlen fő gomb kerüljön a sávba. Mobilon alkalmazd a rejtsd-mutasd elvet, hogy a tartalomnak jusson a legtöbb hely. Ügyelj a horgonylinkek eltolására és a rögzülés stabilitására, hogy semmi ne ugorjon.

Végül mérd vissza, hogy a ragadós fejléc valóban segít-e a navigációban és a konverzióban, ne pedig csak feltételezd. A görgetési mélység, a szakaszra ugrások és az ajánlatkérések együtt adnak tiszta képet. A jó ragadós fejléc így nem hivalkodik, hanem csendben teszi könnyebbé a látogató dolgát.