A weboldalaknak általában három fő része van, a header, vagy fejléc, body, vagy test és a footer, mint lábléc. Ebben a posztban a fejléc, (a továbbiakban inkább használjuk a header kifejezést), fogjuk közelebbről tanulmányozni.

Mi a header?

A header a weboldal legfelső része, ami egészen az oldal bal szélétől a jobb széléig tart. Ennek a résznek a szerepe stratégiailag is nagyon fontos, mert leginkább ezzel találkozik először a látogató, ugyanis a weboldalt is úgy „olvassuk”, mint ahogy a könyvet szoktuk, fentről lefelé és balról jobbra.  Tehát az első benyomásait innen szerzi, amik, mint tudjuk nagyon fontosak és, ha ez nem jól sikerül, akkor második esélyt a javításra aligha kapunk. Már az első néhány másodpercben eldől, hogy marad-e a látogató, vagy tovább áll, mert nem fogta meg semmi az oldalon.

Mi a header feladata?

Bár nem a header fogja a termékünket, vagy szolgáltatásunkat eladni, mégis kulcsfontosságú szerepe van. Ennek a területnek az a feladata, hogy pontosan közvetítse a látogató felé, az oldal, illetve a vállalkozás célját, bizalmat ébresszen és tegye mindezt olyan hatékonyan, hogy az első benyomás ott tartsa a látogatót az oldalon.

Hogy néz ki a header?

Nincsenek általános érvényű szabályok, de leggyakrabban a headerben találjuk a logót, az elérhetőségeket (e-mail, telefonszám), a szlogent, a navigációt, linkeket a közösségi média oldalakhoz, nyelv kiválasztót, feliratkozási lehetőséget és a kereső funkciót. Természetesen ettől el lehet térni, bármelyikük elhagyható. Ezeken kívül, bizonyos oldalakon kerülnek ide már értékesítési, promóciós célú üzenetek is, akár képi, vagy csak szöveges formában.

A header elrendezésével kapcsolatban van néhány olyan szabály, amit érdemes megfontolni, mert a látogatókat segíti a jobb felhasználói élmény elérésében. Ilyen például, hogy a keresőt és az elérhetőségeket, közösségi oldalakra mutató linkeket pedig leginkább a jobb oldalon érdemes elhelyezni, míg a logó a bal oldalon, vagy középen kapjon helyet, mert a látogató ott szokta, meg, ezért ott fogja keresni. Fontos szerep jut a navigációnak is a headerben, hiszen ez segíti, irányítja a látogatót, hogy megtalálja az oldalon, amit keres. Legyen tehát egyértelmű, jól kezelhető és helyezzük el úgy, hogy a funkciója nyilvánvaló legyen.

Ezen az oldalon egy klasszikus kialakítású headert készítettek

Persze itt is, mint mindenhol vannak kivételek, amik eltérnek az általánostól. Vannak weboldalak, ahol rögtön a navigáció került a lap tetejére és nincs is más a headerben.

Az egyszerű header – a navigáción kívül, csak a logó, egy kereső és egy kosár kapott helyet

Sőt van, olyan oldal is, ahol a készítők minden hagyományos dolgot elvetettek és nem is készült klasszikus értelemben vett header.

Weboldal header nélkül, a navigáció is az oldalsávban kapott helyet

A használatot illetően a header lehet fix, avagy rögzített, vagyis, ahogy görgetünk lefelé, ott marad a lap tetején, de lehet olyan is, ami a helyén marad, illetve van egy köztes megoldás, ami egy csökkentett headert tart rögzítetten, benne például többnyire a navigációt. A fix header használata mellett szól az, hogy a felhasználó könnyebben tud navigálni az oldalon akkor is, ha a headert már elhagyta.

Rögzített, vagy fix header, ami csak a navigációt tartalmazza

Mire érdemes tehát figyelni a header tervezésénél?

Mivel, ahogy már fent is írtam, a header nagyon fontos szerepet játszik abban, hogy a látogató az oldalon maradjon, meg kell találni egy olyan egyensúlyt, hogy ne közöljünk túl sokat és mégis meglegyen ott az, ami arra készteti, hogy tovább maradjon.

Legyen tehát a header egyszerű, jól átlátható. Fontos, hogy ne legyen ott semmi feleslegesen, ne vesszen el a látogató a rá zúduló információk tengerében, és legyen számára azonnal érthető, hogy hol is jár, jusson el hozzá az oldal üzenete.  Használjunk könnyen olvasható fontokat, hogy a felhasználó könnyen el tudja olvasni és gyorsan átlássa a mondanivalót. Erre gondoljunk a színek, képek kiválasztásánál is. Vannak oldalak, amelyeknek a témájához jól illik a minimalista stílus és nincs szükség semmilyen díszítő elemre, de van, ahol bőven elfér némi grafika, esetleg fotók a headerben, ez leginkább az oldal természetétől függ, hogy hogyan alakítjuk ki.

Összefoglalva elmondható az, ami a designban általában is érvényes, hogy gondoljuk át alaposan, hogy milyen weboldalt készítünk, kinek szánjuk, mi a fő mondanivalója, mit szeretnénk vele elérni és ehhez igazítsuk a header kialakítását is.