Webshark Blog

A „hajtás felett” fogalma örök téma a webdesignban. Egy weboldal hajtás feletti része minden weboldal esetében kulcsszerepet játszik, különösen most, a minimalista weboldalak időszakában, amikor néha ez az egyetlen része a weboldalaknak, ami meg tudja fogni a látogató tekintetét. (2022.10.14. – Egy új fejezettel bővítettünk: Hogyan alakíts ki a ragadós fejlécet a weboldaladon?)

Még mindig gyakran hangzik el weboldalak tervezésekor, elemzésekor, hogy mennyire lényeges az a tartalom, ami a hajtás fölé kerül. Elviekben, ha az olvasó itt nem találja meg, amit keres, akkor rendkívül gyorsan továbbáll weboldalról. Ezt persze árnyalják az újabb tanulmányok, melyekből az is látszik, hogy ha nem is olyan fontos, mint jó pár éve volt, még mindig megfontolást érdemel, csak kicsit másként kell megközelíteni.

Mit jelent a „hajtás felett”?

A hajtás fogalma még a nyomtatott sajtó korából származik, amikor kettéhajtották a lapokat, és így szállították, így helyezték ki az újságosok a standra. Nyilván ilyenkor látszania kellett a lényegnek, a leghúzósabb sztorinak, hogy a hírekre éhes közönség bevásároljon a lapból. Nyilván nem álltak neki forgatni, hogy mégis mi van a lap alsó felén, hanem a szembeötlő információ alapján döntöttek.

A weben ugyanez a megjelenés lett a sztenderd a digitális tartalmaknál, mivel a monitorok képaránya hasonló volt egy félbehajtott újságéhoz, és kinyitva, illetve legörgetve előbukkantak a további tartalmak. Így tehát a weben a hajtás feletti tartalomnak az számított, amit a felhasználók görgetés nélkül láthattak egy adott weboldalon. Nem is volt ezzel sokáig gond, két okból is.

Az egyik, hogy amikor még új volt az online világ az emberek számára, és idegen a számítógép, meglehetősen bizonytalanul kezelték azt. Ekkor még nem állt rá a felhasználók keze a görgetésre, vagyis nem nem volt rutincselekvés a scrollozás. Így nagyobb arányban maradtak a hajtás felett.

A másik ok pedig az, hogy sokáig alig volt variációja a képernyőfelbontásoknak. Vagy mindenki a 640×480-as felbontást használta, vagy a következő lépésben a 800×600-ast, majd 1024×768-ast. Ezután elkezdett bonyolódni a dolog, sok lett a képernyőméret, sokféle a felbontás, majd megjelent az okostelefonok, a tabletek számtalan variációja.

Hamarosan pedig felbukkant a reszponzív design is. Ilyenkor minden képernyőfelbontásnál máshogy néz ki az oldal, minden eszközön kicsit más mennyiségű információ kerül a hajtás fölé és alá, attól is függően, hogy éppen hogy forgatjuk az eszközt, vagyis vertikálisan vagy horizontálisan tartjuk.

Mindez azt jelenti, hogy a sokféle kijelzőméret és -felbontás korában felmerül nem csak a létjogosultságra vonatkozó kérdés, hanem az is, hogy mégis milyen eszközön kell a fontos tartalomnak a hajtás fölé kerülnie? Milyen képernyőfelbontás számít ilyenkor?

Igaz ugyan, hogy a Google Analytics adatai alapján bármely weboldal esetén gyorsan meg tudjuk határozni, hogy a legtöbben milyen felbontás mellett és milyen eszközön érik el az oldalunkat, de ez nem sokat jelent. Ha jobban megnézzük az adatokat, akkor azt látjuk, hogy számtalan a variáció, és a legnagyobb csoport is csak egy töredéke a teljes látogatószámnak.

Miért fontos még mindig a hajtás felett? És mit mutatnak a vizsgálatok?

Míg a web hajnalán a felhasználókra egyáltalán nem volt jellemző, hogy görgetnének a weboldalakon. 1997-ben kezdődött egy változás, amikor a hosszabb weboldalak gyakoribbá váltak, így az emberek kénytelen voltak megtanulni görgetni. Ugyanakkor továbbra is a hajtás feletti információk kapták a legnagyobb figyelmet: még a 2010-es vizsgálatok is azt mutatták, hogy a felhasználók tekintete a weboldalon eltöltött idő 80 százalékában a hajtás felett mozog.

2010-től kezdődően – vagyis a reszponzív design és a minimalizmus terjedésének hatására – még hosszabbá váltak a weboldalak. Ezért a Nielsen Norman Group 2018-ban elérkezettnek látta az időt egy újabb szemkövetéses vizsgálatra.

A kutatásban 1920×1080-as kijelzők használatával 120 személy vizsgáltak, illetve több ezer oldalt, köztük híroldalakat, webáruházakat, blogokat, stb. Ezeken kellett a legkülönfélébb feladatokat elvégezni. A cél nem az volt, hogy az egyes oldalakat elemezzék, hanem az, hogy a felhasználói viselkedést jellemezni tudják. Majd az adatokat összevetették a korábbi vizsgálatuk eredményeivel is.

Alapvetően két változás lehetett hatással az emberek viselkedésére: az egyik a nagyobb kijelzők, a másik pedig az új webdesign trendek. Ezekhez ugyanis valószínűleg alkalmazkodtak a felhasználók. A kettő hatását ugyanakkor nem lehet egymástól elkülöníteni, de úgy vélték, hogy ez nem is olyan fontos, hiszen egyiket sem lehet már “visszacsinálni”, még akkor se, ha akarnánk.

Mint kiderült, a legújabb kutatásban az emberek a weboldalon eltöltött idő 57 százalékát a hajtás fölött töltötték. 74 százalékot pedig az első két kijelzőnyi területen, vagyis 2160 pixelig görgettek le. Az elemzés egyébként nem vette figyelembe a weboldalak hosszát, így a kapott értéket torzíthatták a rövid oldalak, és nem csak annak az eredménye, hogy 2160 pixel után feladták az emberek a görgetést.

Mindenesetre a számok jelentős mértékben különböznek a 2010-es eredményektől. Akkor még az emberek az idejük 80 százalékát töltötték a hajtás felett. Miközben persze a figyelem nagymértékű csökkenése a hajtás után korábban és most is megfigyelhető volt. Ez itt látszik jól a grafikonon:

Fontos azonban, hogy nem minden oldal azonos hosszúságú. Ezért, hogy megállapítsák, miként oszlik meg a felhasználók figyelme egy oldalon – attól függetlenül, hogy az milyen hosszú -, felosztották 20 százaléknyi részekre az oldalakat. Ez alapján megállapították, hogy a felhasználók idejük 42 százalékát a felső húsz százalék böngészésével töltötték, illetve 65 százalékban a felső 40 százalékkal foglalkoztak. (A keresőben a találati oldalakon ezek az arányok még nagyobbak voltak, vagyis az embereket elsősorban az első találatok érdekelték).

De ha a hajtás feletti területet nézzük, azon belül is inkább a felső részen lévő információk keltették fel a figyelmet: 65 százaléknyi időt a hajtás feletti rész felső felén töltöttek az emberek.

A lényeg tehát az, hogy míg 57 százaléknyi idő jutott az oldal hajtás feletti részére, már csak 17 százalék a második kijelzőnyi részre, míg a maradék 26 százalék az összes többire. Ez azt jelenti, hogy minél közelebb van egy információ az oldal tetejéhez, annál nagyobb az esélye annak, hogy az emberek el fogják olvasni.

Ezt megerősítették az olvasási minták is. A legtöbb felhasználó az úgynevezett F-mintát használta – amit akkor szoktak, ha egy weboldal nincs megfelelően strukturálva -, vagyis gyakrabban néztek a weboldalak felső részére, és kevésbé érdekelte őket az oldal alsó része. De még akkor is, ha a tartalom kellően strukturált volt, inkább az oldalak felső része érdekelte a felhasználókat. Egyébként pedig nagyon hatékonyan megtalálták az oldalon azokat az információkat, melyek fontosak voltak a feladatuk végrehajtása szempontjából, így ez sem eredményezte azt, hogy az oldal alján körülnézzenek.

Ennek ellenére az is látszik, hogy a 2010-es vizsgálatokhoz képest csökkent a hajtás felett eltöltött idő. Milyen következtetéseket lehet ebből levonni? Az NNG szerint először is azt, hogy a designerek jó munkát végeztek, és sikerült rávenni arra az embereket, hogy görgessenek. Vagyis bár tisztában voltak a hosszú weboldalak hátrányaival, ezt sikerült bizonyos mértékben mérsékelni. Másrészt pedig az emberek egyre inkább rá lettek szoktatva a görgetésre azáltal, hogy több lett a görgetést igénylő oldal.

Legalábbis bizonyos mértékig. Még mindig kijelenthető ugyanis, hogy az emberek nem szeretnek sokat görgetni, és ritkán jutnak tovább három kijelzőnyi hosszúságnál. Míg 8 éve még a hajtás felett töltötték az idejük 80 százalékot, most a három kijelzőnyi területen töltenek 81 százalékot. Az emberek tehát csak akkor görgetnek lefelé, ha erre van okuk. A figyelem továbbra is elsősorban a weboldalak felső részére irányul. Ez az a rész, mely a leginkább felfedezhető, és a legtöbben megtekintik.

Érdekes ugyanakkor, hogy a felbontás növekedése nem eredményezte a görgetési hajlandóság csökkenését. Ennek oka talán az lehet, hogy a designerek nem kihasználják a nagyobb felbontás nyújtotta előnyöket, hanem a tartalmakat nagyobb távolságra helyezik egymástól. Az információsűrűség tehát valószínűleg túl nagy volt korábban, ezért alakultak ki zsúfolt, zavaros oldalak.

Mi jelenjen meg a hajtás feletti részen a weboldaladon?

A hajtás feletti rész az a része a weboldalnak, amit az emberek az első másodpercekben látnak, amikor megérkeznek a weboldalra. Ez a rész valamiféle meghívóként működik, és arra próbálja rávenni a felhasználókat, hogy nézzenek jobban körül a weboldalon. Ezért a legalapvetőbb információkat kínálja a weboldalról, így az emberek pillanatok alatt képeset felfogni az oldal lényegét. 

A szervezőelv alapvetően az, hogy felülre kerülnek a fontos dolgok. Minél lényegesebb egy információ a weboldaladon, annál feljebb kerüljön. Az, hogy mi a fontos, eszköztől is függhet: mobilon fontosabb lehet a telefonszám vagy az elérhetőség és térkép, mint desktopon, így ezek más pozícióba csúszhatnak. Minden eszközön látható lesz a logó, a menü, a címsor, a felső és legfontosabb kép, azonban, hogy a szövegből és esetleg a többi képből mennyi látszik, az eszközönként eltérő lehet.

A fejlécek oldalanként eltérhetnek, vagyis jellemző, hogy a főoldal egy kicsit nagyobb, míg az aloldalak szinte csíkká keskenyedő fejlécet kapnak. Ilyenkor arra kell figyelni, hogy a csökkentett méretű fejlécek is viseljék a főoldali fejléc tulajdonságait, de azt mintegy rövidítve tegyék közzé. 

A hajtás feletti rész feladata az, hogy a felhasználók legalapvetőbb kérdéseire választ adjon: mit képvisel a márka, milyen termékeket, szolgáltatásokat kínál, hogyan lehet kapcsolatba lépni vele. Mindezek mellett megmutatja a weboldal minőségét és identitását is. Amennyiben pozitív érzelmi reakciót vált ki a felhasználóból, akkor ő azt érzi, hogy valami értékesbe futott bele, így a weboldal fejléce teljesítette feladatát. 

Fő elemei:

• logó vagy bármilyen márkaazonosító
• call to action
• valamilyen szöveg vagy címsor
• navigációs elemek
• kereső

Nem kell persze minden felsorolt elemnek kötelező jelleggel szerepelnie rajta, illetve meg kell találni az egyensúlyt az információk és a harmonikus elrendezés között. Vagyis csak annyi információt helyezz el itt, amennyi feltétlenül szükséges. Ha túlzsúfolod, az rontani fog rajta. Ugyanakkor a legfontosabb linkek már itt jelenjenek meg. 

Szintén nem jó túlságosan üresre tervezni a fejlécet, hiszen, ha a felhasználó a weboldaladra megérkezve nem tudja a fejléc alapján kitalálni, hogy miről szól az oldal, mit kínálhat neki, akkor nem biztos, hogy nekiáll a weboldalad más részein ez után nyomozni. A minimalista fejlécek a logón kívül jellemzően csak a legfontosabb linkeket tartalmazzák a weboldalak fő részeire. 

Nem okoz gondot SEO-szempontból egy hajtás feletti CTA-gomb

Létezik egy olyan SEO-mítosz, mely szerint a hajtás fölé helyezett call to action gombok rontják a helyezést a találati oldalakon, és egyáltalán nem megfelelőek SEO-szempontból. A Redditen éppen ezért fel is merült az a kérdés, hogy a „Google javasolja a CTA-gombok eltávolítását a hajtás feletti részről?”

Mint kiderült, egy webdesigner ügyfelének egy SEO-tanácsadó cég mondta azt, hogy „rendkívül fontos” lenne, hogy minden CTA-gombot eltávolítson a hajtás feletti részről. Magyarázatuk szerint a Google-dokumentációjából derül ki, hogy nem javasolják a weboldalak felső részén a CTA-gombok elhelyezését.

A felvetésre John Mueller, a Google szakembere reagált, aki elmondta, hogy a „Google keresés semmit nem mond a CTA-gombokról”. Ez inkább a hirdetésekkel vagy az analitikával lehet összefüggésben – tette hozzá.

Úgy vélekedett, hogy a CTA-gomb talán csak akkor okozhat problémát a hajtás felett, ha az egész CTA túl nagyra sikerül, és már úgy néz ki, mint valami reklám. Ilyenkor a CTA letolja a fő tartalmat az oldalon, ami a régi oldalelrendezési algoritmus számára lehet, hogy nem megfelelő. Ugyanakkor azt ismét hangsúlyozta, hogy egy normál méretű CTA a hajtás felett teljesen rendben van SEO szempontból.

Frissítés, 2022.06.23.:

Weboldalak kép nélkül a hajtás felett – miért lehet jó megoldás?

Habár az elmúlt évek leginkább a lehető legnagyobb hajtás felett elhelyezz képekről szóltak (hero image), mára kibontakozott egy új designtrend: egyes weboldalak hajtás feletti része kép nélkül jelenik meg. De mi értelme ennek? Használható megoldás?

Az elmúlt egy-két évben a legkülönbözőbb területeken tevékenykedő cégek weboldalai esetében jelentek meg olyan weboldalak, ahol a hajtás felett egyáltalán nem látható kép vagy akár videó. Itt tehát már nem csak valami útkeresésről van szó, ahol designerek próbálgatják a portfolió-oldalaikon a legújabb irányzatokat.

A kép hiányán kívül ugyanakkor sok egyéb vizuális jellemvonásukat tekintve eltérnek egymástól ezek a weboldalak. Némelyikük abszolút minimalista designnal készül, másoknál megjelennek az animált elemek, vagy egyéb különleges design-megoldások.

De persze akadnak közös vonásaik is ezeknek az oldalaknak. Az első dolog, ami feltűnhet, hogy minden ilyen „képhiánnyal” operáló weboldal nagy hangsúlyt helyez a tipográfiára, annak kiemelkedő jellegére. Nyilván, ha egy weboldalon nincs más meghatározó vizuális elem, akkor a tipográfia lesz az, ami kialakítja a weboldal karakterét. Ebbe beletartozik minden a különleges betűtípustól, a rendhagyó méreten és színeken keresztül a szavak jelentésééig.

A designtrend tehát egyértelműen a szövegnek kedvez, azt emeli ki. Hiszen, ha nincs kép, akkor a szöveg alapú üzenet kerül a középpontba.

A szöveget támogatja a karakteres színhasználat is, a gradiensekkel és elhomályosításokkal operáló hátterek, illetve egy fekete-fehér megjelenés gyakran kiegészül egy-egy erőteljes, kontrasztos színnel. Emellett pedig gyakran felbukkannak animációk, mozgások is a weboldalakon, mintegy kompenzálva a kép hiányát.

Miközben egy kép nélküli weboldal megtervezése egyszerűnek tűnhet, és maga az eredmény is gyakran meglehetősen minimalista, a tervezés azért nem annyira egyszerű.

A képnélküliséget viszont nem szabad erőltetni. Ha például remek fotóid vannak, akkor nem érdemes azokat veszni hagyni, csak hogy kipróbálhass valami újat. Ugyanakkor, ha nem állnak rendelkezésre jó képek, akkor használható megoldás lehet olyan weboldalt összehozni, mely inkább a szavakra és a tipográfiára épít. Persze ez csak akkor működik, ha képek nélkül is hajlandóak a látogatók az interakcióra, és elérhető egy ilyen megjelenéssel a cél.

Kifejezetten jó megoldás lehet a megoldás induló cégek számára, melyek nem akarnak vagy nem tudnak egy weboldalhoz szükséges nagyobb képanyaggal bajlódni. Ha a hajtás felett nincs óriási kép, akkor az lehetővé teszi, hogy a hajtás alatt vagy az aloldalakon is kisebb képek jelenjenek meg.

Különösen fontos ezeken az oldalakon a megfelelő kontraszt kialakítása: a színeknél, betűtípusoknál, az elemek méretezésénél is figyelni kell erre, mert a kontraszt teremti meg azokat a különbségeket az egyes elemek között, melyek aztán végigvezetik a felhasználót az oldalon.

A képek, videók magyarázó ereje ezeken az oldalakon nincs jelen, így nem tudják azt a plusz jelentést hozzátenni a weboldalhoz, mely segítene a felhasználóknak értelmezni az üzenetet. Ezért nagyobb figyelmet kell szentelni a tartalomnak, a könnyű olvashatóságnak és az érthetőségnek.

Összességében tehát elmondható, hogy képek és videók nélkül meglehetősen nagy kihívás lehet egy olyan oldalt összehozni, mely hatékonyabb, mint képekkel. Sokkal nagyobb felelősség hárul a többi design-elemre: a hátterekre, tipográfiára, színekre vagy animációkra. Ugyanakkor gondos tervezéssel, átgondoltsággal kiemelkedő weboldal hozható létre, mely a szöveges tartalmat emeli a középpontba.

Mire figyelj a hajtás feletti rész tervezésénél?

Az első fontos kérdés a méretre vonatkozik. Akadnak, akik megpróbálnak erre precíz számokat meghatározni, azonban manapság a legnagyobb kihívást inkább az jelenti, hogy elfogadhatóan jelenjen meg mindenféle kijelzőn a weboldal. Mert még ha két kijelző mérete azonos is, a felbontásuk különbözhet, így a felhasználók mást és mást látnak a weboldaladból.

Mivel pontosan nem mindig lehet tudni, hogy kinek mekkora rész jelenik meg a kijelzőjén az oldaladból görgetés nélkül, ezért fontos, hogy megpróbáld rávenni a felhasználókat a görgetésre. Arra kell bátorítanod őket, hogy fedezzék fel a weboldal többi részét. Tartalmi szempontból ez azt jelenti, hogy a weboldal felső részén valamiféle ízelítőt nyújtasz a tartalomból, mely a weboldalon található. Olyannak kell lennie az itt megjelenő tartalomnak, hogy az emberek érezzék a késztetést a folytatásra. Az igényes tartalommal – akár történetmeséléssel, azaz egy „történet” elkezdésével – is segítheted ezt, de egyes designelemekkel is:

Annak megítélésében, hogy az emberek mennyire hajlandóak a weboldaladon a görgetésre, a hőtérképek segítenek. Egy görgetési hőtérkép például elárulja, hogy a látogatók meddig görgettek le, sikerült-e rávenned őket, hogy tovább tekintsenek az oldal tetejénél.

Nem érdemes tehát valamilyen méret mellett leragadni a hajtás feletti részt tekintve, inkább néhány egyszerű szabályt tanácsos követni. Például, hogy olyan magasságú legyen, ami nem akadályozza a tartalom befogadását. Ha egy információ-központú oldalról van szó, akkor szerencsés lehet egy keskenyebb fejléc, ugyanakkor landing oldalak esetében meggyőzőbb lehet egy nagyobb fejléc. Nem árt egyébként, ha még a hajtás felett látszik valamennyi a fejléc alatti tartalomból, mert így a felhasználó könnyebben elkezd görgetni.

A vizuális hierarchiát tekintve figyelembe kell venni az úgynevezett F-mintát, melyet a felhasználók tekintete általában bejár a weboldalakon. Az emberek tekintete a bal felső sarokból indul egy ismeretlen weboldalon. Ezért kell itt megjelennie a logónak, amivel a logókról szóló anyagunk egy külön fejezetében foglalkoztunk. 

A mellette elhelyezkedő navigációs sáv megtervezésénél figyelned kell arra, hogy ne tedd azt túlzsúfolttá, mert a túl sok link nyomasztóan hat a felhasználóra. Néha az egész weboldal struktúráját át kell alakítani annak érdekében, hogy ne nőjön túl nagyra a navigációs menü. Elterjedt az elmúlt években az úgynevezett hamburger menü is, melynek előnye lehet, hogy segíti a fő elemekre történő összpontosítást, azaz nem vonja el a felhasználó figyelmét a lényegről. Ugyanakkor webáruházaknál nem praktikus a használata. 

A további tartalom attól függ, hogy milyen típusú a weboldal. Ha egy terméket akar eladni, akkor a linkek mellett megjelenhet egy hero image, hiszen a cél itt a termék hatékony bemutatása. Ugyanakkor egy webáruháznál vagy egy üzleti weboldalnál az a cél, hogy a felhasználó könnyen navigáljon, találkozzon a legújabb ajánlatokkal, vagy akár, hogy lássa a korábbi rendeléseit. A fejléc által kommunikált dolog tehát aszerint változik, hogy mi a fő célja a weboldalnak. 

Ha kép jelenik meg itt, akkor talán mondani sem kell, hogy a jó minőségen túl el kellene mondania egy történetet (a cégről, a termékről), érzéseket kell kiváltani, motiválnia a felhasználót, hogy az oldalon maradjon. Fotó helyett manapság elég népszerűek a rajzolt illusztrációk, melyek sokkal maradandóbb nyomot képesek hagyni a látogatóban, mint egy sablonos fotó. Szintén használható valamilyen videó vagy animáció. 

Végül, általában szerepel a fejlécben valamilyen call to action is, még ha ez talán nem is az oldal fő CTA-ja. Itt az egyik fontos tényező annak jó elhelyezése, mely képes kattintásra ösztönözni a felhasználót. Emellett persze a CTA-knál számos más szabályt is figyelembe kell venni, ezekről itt írtunk bővebben. 

Fontosak még a választott betűtípusok, hiszen bár lehet, hogy csábít egy egyedi betűtípus vizuális megjelenése, szükséges, hogy jól olvasható legyen az itt megjelenő szöveg. A nagyobb fejléceknél használható látványosabb tipográfia is, mely képes felkelteni a látogatók érdeklődését, azonban általában mégis érdemesebb a könnyen olvasható, egyszerűbb betűknél maradni.

Arra azonban figyelj, hogy ne próbálj meg mindent az oldal tetejére zsúfolni! Ez többet árthat, mint amennyi előnnyel jár. Szerinted mi a hatékonyabb: ha egy kijelzőnyi területen látható egy CTA és egy hozzá tartozó gomb, vagy ha ezen kívül még 4-5 üzenetet vagy más információt elhelyezel mellette? Ezzel csak összezavarod a látogatókat, akik a zsúfoltságban nem találják meg a legfontosabb elemet.

Összefoglalva tehát következtetéseket lehet mindebből levonni a weboldalad designjára nézve?

• A weboldalad felső részét tartsd meg a legfontosabb tartalmak, vagyis a lényeges üzleti célok számára. Az alsóbb részekre pedig kerülhetnek a másodlagos vagy kapcsolódó információk. Mindenesetre a fő CTA-nak a hajtás felett kellene lennie.
• Használj megfelelő formázást annak érdekében, hogy a fontos tartalomra irányítsd a figyelmet. Az emberek számára fontosak az olyan jelzések, mint egy címsor vagy egy vastagon szedett szöveg. Ez jelzi számukra, hogy mi a fontos, és megmutatja a tartalom új szegmenseit. Ezeket a jelzéseket az egész weboldaladon következetesen használd!
• Mivel fontos, hogy tovább görgessenek, ezért figyelj arra, hogy az emberek ne higgyék azt az oldal közepén, hogy az már véget is ért. Ha valahol arra utaló jelzéseket találnak, hogy az oldal véget ért, akkor nem görgetnek tovább. Legyenek tehát olyan jelzések, melyek azt mutatják, hogy a tartalom folytatódik.
• Végül érdemes azt is tesztekkel meghatározni, hogy mekkora az ideális oldalhossz, és hogy az az információ, mely érdekli őket, könnyen elérhető-e számukra.

Frissítés, 2022.10.14.:

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

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.