Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2021-06-170 komment

Hogyan alakítsd ki a ragadós fejlécet a weboldaladon?

Jó pár éves trend már a ragadós fejlécek alkalmazása a weboldalakon. Ugyanakkor használatuknál nem csak azt kell mérlegelni, hogy mennyire akarunk ebbe a trendbe becsatlakozni, hanem azt is, hogy valóban javítja-e a felhasználói élményt a ragadós fejléc alkalmazása. Mert ez sok esetben nincs így.

Ragadós fejléceket használunk a weboldalakon, ha azt szeretnénk, hogy az mindig látható legyen, bármeddig is görget le a felhasználó. Ha jó a kialakítása, akkor gyors hozzáférést tesz lehetővé a navigációhoz, a kereséshez anélkül, hogy vissza kellene görgetnie a felhasználónak az oldal tetejére. Ezáltal javul a weboldal fejlécének felfedezhetősége, és annak esélye, hogy a felhasználók használják azt.

Ugyanakkor, ha rosszul kerül kivitelezésre a ragadós fejléc, akkor idegesítővé és zavaróvá válik, ráadásul rontja a weboldal tartalmának befogadhatóságát. De mire kell figyelni annak érdekében, hogy a ragadós fejléc javítson a weboldal felhasználói élményén, és ne rontsa azt? A Norman Nielsen Group szedte össze az alapvető tudnivalókat.

Maradjon kicsi

A ragadós fejlécek mindenképpen teret foglalnak a kijelzőn. Olyan teret, melyet amúgy az értékes tartalom töltene ki. Ezért rendkívül fontos, hogy odafigyelj a méretére. Ez a tényező mobileszközökön még fontosabb a kisebb kijelző miatt. Meg kell győződnöd arról, hogy a ragadós fejléc a lehető legkisebb területet foglalja el, miközben a rajta szereplő szöveg olvasható marad.

Ugyanakkor másik oldalról fontos, hogy mobilon is jól kezelhető maradjon a fejléc, vagyis az érinti célpontok minimum 1×1 centiméteresek legyenek, a szövegek pedig körülbelül 16 px méretűek. Habár monitoron nagyobb tér áll a rendelkezésünkre, ott sem szabad nagyvonalúan kezelni a fejléc méretét, és üres pixeleket megjeleníteni benne. Csökkentsd le a logó méretét olyan kicsire, ami még befogadható, a betűk persze maradjanak olvashatók, de minden további vertikális terjeszkedés felesleges.

Kontraszt a tartalommal

A ragadós fejlécednek úgy válaszd meg a színét, hogy az mindenhol az oldalon kontrasztos legyen a tartalommal. Ezáltal válik észrevehetővé, olvashatóvá és világosan megkülönböztethetővé. A ragadós fejlécnek különböznie kell a weboldal hátterének színétől is.

Sokan használnak áttetsző fejlécet annak érdekében, hogy a tartalom nagyobb része legyen látható, a gyenge kontrasztarány miatt azonban a mögötte látható tartalom nem lesz olvasható, miközben a megoldás sokszor idegesítő csak és megzavarja a felhasználókat.

Használj minimális, természetes és reszponzív animációt!

Az animációk sokszor csak hátráltatják a weboldalon a felhasználókat, ezért minimalizálni kell a jelenlétüket. Általában a legjobb megoldás, ha nem használsz animációt, és egyszerűen csak a helyére kerül a fejléc, miközben görget lefelé a látogató.

Van azonban két eset, amikor szükség lehet az animációra. Az egyik, amikor összeszűkül a fejléc terület, a másik pedig, amikor csak részben ragadós a fejléc.

Ezekre a megoldásokra akkor lehet szükség, ha a fejléc túl nagy lenne, és túl nagy részét takarná a tartalomnak. Ilyenkor animáció használatával méretezhető át a fejléc, figyelni kell azonban arra, hogy óvatosan csökkenjen a mérete, semmiképpen ne tűnjön el, vagy ugorjon, vagy meglepje a felhasználót.

Részlegesen ragadós fejlécek

Részlegesen ragadós fejléceket leginkább mobiltelefonon megjelenő oldalakon lehet látni, és azt lehet mondani, hogy előnyös a használatuk, hiszen könnyűvé teszi a fejléc elérését mindenhol az oldalon, miközben jól olvasható marad a weboldal görgetés során is.

De mi is az a részlegesen ragadós fejléc? Egy olyan fejléc, mely feltételezi, hogy amikor felfelé kezd görgetni a felhasználó, akkor a fejlécet akarja megnézni. Ez persze csak néha igaz, hiszen előfordul, hogy valaki csak le-fel nézelődik egy oldalon, újraolvas egy bekezdést, stb. Utóbbi esetben a részlegesen ragadós fejléc zavarni fogja a felhasználót, mivel lefelé görgetésnél még nem lóg bele a tartalomba, felfelé görgetésnél már kitakarja egy részét.

Emiatt nagyon figyelni kell arra, hogy milyen animációval, milyen gyorsan jelenik meg felfelé görgetésnél a fejléc. A legjobb megoldás, ha úgy érződik, mintha a felfelé görgetés ütemében jelenne meg a kijelzőn, mintegy “természetes” ütemben. Az NNG javaslata szerint nagyjából 300-400ms hosszúságúnak kell lennie a beúszási animációnak, hogy természetes érzést adjon.

Gondold át, hogy kell-e egyáltalán ragadós fejléc!

Végül azt fontold meg, hogy szükséged van-e egyáltalán ragadós fejlécre, igénylik-e a felhasználók a weboldaladon vagy alkalmazásodban. Ha nem feltétlenül, akkor jobban jársz, ha nem használod. Egy ragadós fejléc ugyanis mindenképpen elfoglal valamekkora területet a tartalomból, és ha ráadásul nem is igazán hasznos, akkor teljesen feleslegesen teszi ezt.

Ahhoz, hogy a szükségességét meg tudd ítélni, tedd fel magadnak a következő kérdéseket:

  • Milyen típusú elemeket tartalmazna a fejléc? A fő navigációt? Egy kiegészítő navigációt? Csak a logót?
  • Ezek az elemek valóban szükségesek többnyire a látogatók számára miközben az oldalon járnak?

Tehát például, ha a fejléced tartalmaz egy “Bejelentkezés” gombot, akkor valószínű, hogy az emberek be akarnak jelentkezni a weboldal bármely részén? Ha a fő navigációd kategóriái szerepelnek a fejlécben, akkor a felhasználók ezt használva szeretnének egyik kategóriából egy másikba váltani menet közben, vagy valószínűbb, hogy végig inkább egyetlen kategóriában maradnának?

A válaszok a weboldaltól, az ott elvégezhető feladatoktól és a tartalomtól függenek, így általános válasz nem adható ezekre a kérdésekre, egyedileg kell őket mérlegelni.

Ugyanis a lényeg, hogy egy ragadós fejléc hasznos lehet némely weboldalon, de csak akkor, ha valóban használják azt az emberek. Ha a fejléc nem ad értéket a felhasználóknak, akkor nincs rá szükség. De ha meg is jelenik, akkor is figyelni kell arra, hogy minél kisebb területet foglaljon, kellően kontrasztos legyen a háttérrel, ne használjon zavaró animációt, ne nehezítse a tartalom befogadását, és ne zavarja meg a látogatót.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.