A fejléc kulcsszerepet játszik egy weboldal kialakításában, és meghatározza annak minden más aspektusát. Különösen most, a diadalmas minimalizmus korában, amikor a különböző szemcukrokat gyakran kíméletlenül, de tisztességesen kiűzik. Néha már semmi más nem marad a szemnek, így a webhely fejléc tervezésének szerepe jelentősen megnőtt.
A webdesignerek sok energiát fektetnek a webhely e részének kreativitást és termelékenységet szem előtt tartó megtervezésébe. A Google szerint mindössze 50 ms szükséges ahhoz, hogy véleményt alkossunk egy weboldalról, és egyes vélemények hihetetlen 17 ms alatt alakulnak ki. A fogyasztók megismerkedése egy márkával itt kezdődik.
Hogy megtudja, hogyan tervezzen egy weboldal fejlécét, ami működik, és milyen elemeket kell tartalmaznia, olvasson tovább, lesznek példák.
“Az élet az első benyomás. Egyetlen esélyed van rá.”
Tedd örökkévalóvá.”
– J. R. Rim
A weboldal fejléce a weblap felső része. Régebben az emberek a fejlécek alatt a weboldalak felső részén található keskeny csíkokat értették, amelyek a logót, a cselekvésre való felhívást és az elérhetőségi adatokat tartalmazták. A modern dizájnban azonban a kezdőlap teljes, a hajtás feletti teret fejlécnek tekintik.
Az oldal stratégiai részeként, amelyet az emberek a weboldal betöltésének első másodperceiben látnak, a fejléc egyfajta meghívóként működik. Alapvető információkat kell nyújtania a webhelyről, hogy a felhasználók másodpercek alatt megértsék, mit kínál.
Egyes tervezők külön fejléceket készítenek a webhely különböző részeihez. Például készíthet egy nagy fejlécet a kezdőlapnak, és hagyhat egy kis sávot a többi oldalnak. De tartsd következetesnek. A belső oldal fejlécének kialakítása legyen a főoldal fejlécének rövidített változata. Ez egy jó honlaptervezési gyakorlat.
- Mit tartalmaz egy honlap fejléce?
- A legjobb honlapfejléc-tervezési gyakorlatok
- Főcím mérete
- Vizuális hierarchia
- Fixed (sticky) header
- A fejléc által közvetített üzenet
- Releváns képek
- Videó vagy animáció
- Egy jól megtervezett felhívás a cselekvésre
- A legjobb betűtípusok a weboldal fejlécéhez
- Egyszerű fejléc kialakítása
- Rejtett navigáció (hamburgermenü)
- Mobil fejléc kialakítása
- Végezetül
Mit tartalmaz egy honlap fejléce?
A fejléc feladata, hogy választ adjon a felhasználóknak az alapvető kérdésekre: milyen márkát képvisel, milyen árukat és szolgáltatásokat kínálnak, hogyan lehet felvenni a kapcsolatot a cég munkatársaival, vannak-e aktuális ajánlatok, és így tovább.
Ezeken túl a weboldal minőségét, sőt identitását is képviseli. Ha a fejléc jó érzelmi reakciót vált ki, és a néző úgy érzi, hogy van benne valami értékes, akkor az első próbát már kiállta.
A weboldal fejlécének fő elemei általában a következők:
- logó vagy márkaazonosító
- felhívás a cselekvésre
- szöveg vagy főcím
- navigációs elemek
- keresés.
Nem kell mindet egyszerre hozzáadni. Meg kell találni az egyensúlyt az információk bősége és harmonikus elrendezése között. Csak a szükséges adatokat használja, a fejléc túlterhelése nem bizonyul előnyösnek, bármennyire is fontosnak tűnik az összes hivatkozás.
A fejlécet túl üresen hagyni szintén nem jó ötlet. Az a felhasználó, aki néhány másodperc alatt nem tud kiigazodni a felületeden, nagy valószínűséggel távozik, és nem tér vissza. Egy rossz fejléc a látogatókat egy másik, gyengébb tartalmú webhelyre taszíthatja.
A minimalista fejlécek kialakításánál csak a webhely főbb részeire mutató linkek és a cég logója jelenik meg. Ez a technika különösen hasznos a landing oldalak tervezésekor.
A legjobb honlapfejléc-tervezési gyakorlatok
A fejlécrész kialakításakor semmi sem szab határt a kreativitásnak. A webhely fejléce a kreatív tervezési döntések széles mezeje előtt nyitva álló terület, amelynek emlékezetesnek, tömörnek és hasznosnak kell lennie.
Menjünk végig a főbb pontokon.
Főcím mérete
Nincs határozott válasz arra a kérdésre, hogy milyen méretű legyen a webhely fejlécének képe. Egyes források megpróbálnak pontos számadatokat tartalmazó készleteket adni, de manapság a honlapkészítés egyik legnehezebb szempontja az, hogy minden képernyőméretnél biztosítsuk a hatékonyságot. És még ha két képernyő mérete azonos is, a felbontás eltérő lehet, így a felhasználók nem ugyanazt fogják látni.
Ne ragaszkodjon tehát a pontos pixelfogalomhoz, inkább kövesse a józan ész egyszerű szabályait.
A fejlécnek olyan magasságúnak kell lennie, hogy ne zavarja a tartalom érzékelését. Információs források esetében egy kis fejléc remek választás lenne, míg a landolások esetében a fejléc lehet nagyobb is.
A terjedelmes fejlécek esetében jobb, ha hagyunk némi helyet a hajtás alatt, hogy a felhasználó megpillanthassa, mi következik az oldalon, és elkezdjen görgetni.
Vizuális hierarchia
A Nielsen Norman Group 2006-ban fogalmazta meg először a webes olvasás F alakú mintázatáról szóló elméletét, amely a mai napig nem vesztett aktualitásából.
Aki egy új, ismeretlen webhelyen találja magát, vizuális utazását mindig a képernyő bal felső sarkából kezdi. És ha nem ott találja a várt információkat, akkor az oldalt automatikusan trükkösnek és nem szabványosnak érzékeli, és túl sok erőfeszítést igényel a megértése.
Logo. Egy másik, az NN/g által végzett tanulmány megállapította, hogy a felhasználók sokkal könnyebben megjegyzik azokat a márkákat, amelyek logóját a bal oldalon helyezték el a középső vagy a jobb oldali elhelyezéshez képest.
Ha kerek alakú logóval rendelkezik, akkor elfogadható, ha a képernyő közepére helyezi, bár a hatékonysága még így is alacsonyabb lesz a bal oldalon elhelyezettekhez képest.
Navigáció. Nagyon figyeljen arra, hogy ne legyen túlzsúfolt ez a része a weboldalnak. A túl sok link túlterheli a látogatókat. Néha szükség lehet egy weboldal szerkezetének teljes átalakítására, hogy helyet csináljon a legfontosabb kategóriáknak.
A látogatók könnyen megértsék, hogy hol vannak, és hogyan találják meg a további utat. Használjon lebegőeffektusokat, hogy navigálás közben vezesse a felhasználókat.
Call to action. Alkalmazza a vizuális hierarchia elveit a CTA természetes kiemelése érdekében.
Fixed (sticky) header
A perzisztens navigációs sávok, vagy más szóval “sticky header” azt jelenti, hogy a navigáció görgetés közben követi az oldalt. Ez ma már webdesign-szabvány.
A fejléc legyen fix, ha ez nem sérti az általános tervezési koncepciót. Ez jó ötlet mind az asztali, mind a mobilos dizájn esetében:
- E-kereskedelmi webhelyek – a kosár mindig a felhasználó előtt van.
- Szolgáltató webhelyek – a telefonszám vagy egy CTA folyamatosan látható.
A fix fejlécek javítják az ügyfélélményt, a felhasználók tájékozódnak és nagyobb kontrollt biztosítanak számukra.
A fejléc által közvetített üzenet
A fejléc tervezése előtt vegye figyelembe a webhely általános stílusát és fő célját.
Ha egy termék bemutatására szánt promóciós weboldalról van szó, a fejléc kialakítása tartalmazhat a fő részekre mutató linkeket, az első képernyőn egy nagyméretű hős képpel kombinálva, mivel az ilyen weboldal fő célja a termék hatékony bemutatása. Az e-kereskedelmi vagy üzleti weboldalak esetében a helyzet más lehet. A felhasználónak könnyen kell navigálnia, tudnia kell a legújabb ajánlatokról, arról, hogyan léphet gyorsan kapcsolatba az ügyvezetővel, és hol láthatja a már leadott rendeléseit, így ebben az esetben a fejléc tömörebb lehet, teret engedve más kategóriáknak.
Egy fejléc több lehetséges üzenetet is közvetíthet:
- a fogyasztót valamire ösztönzi
- bizalomépítésre törekszik
- bátorítja a látogatót, hogy többet tudjon meg
- szórakoztató stb.
A választás az adott weboldal céljától függ.
Releváns képek
A fejlécben lévő képnek közvetlenül az üzletről kell információt közvetítenie. Ha például ételkiszállítási szolgáltatást képvisel, akkor a kép egy takaros futárt ábrázolhat esztétikailag vonzó ételekkel. Általánosságban elmondható, hogy a látogató, miután meglátta az oldalát, szeretne vásárolni Öntől valamit.
Magas minőségű képek. A fényképezés hatékony eszköz a webdesignerek számára. Elmondhat egy történetet, érzelmeket kelthet, és motiválhatja látogatóit, hogy tovább görgessenek. Az erőteljesen feltűnő képekkel rendelkező webhelyek esetében próbáljon meg átlátszó fejlécet készíteni. Ez jobban megjeleníti a képeket, megtartva a fő hivatkozásokat.
A csúszó képek. Ha több nagyszerű, a weboldal üzletét reprezentáló képe van, csak rajta! A felhasználók görgethetik a gyönyörű, nagy felbontású képeket.
Illusztrációk. A webhelyek fejlécképeinek meg kell találniuk a megfelelő akkordot, és személyes kapcsolatot kell teremteniük. Jobb, ha egy kép jól megkülönböztethető és könnyen felismerhető, még akkor is, ha kivágják a weboldal fejlécéből. Ezt úgy érheti el, ha kihasználja az illusztrációk mai trendjét.
Videó vagy animáció
Ne csak a statikus képekre koncentráljon.
A videó hozzáadása a leghatékonyabb honlapfejléc ötletek közé tartozik. Ha lehetséges, próbáljon meg egy tematikus videóanyagot beilleszteni a fejlécbe. Sok weboldal használja ezt arra, hogy magával ragadja a közönséget, miközben a lehető legjobban bemutatja a vállalatát vagy a termékét.
Egy másik módja annak, hogy még vonzóbbá, élénkebbé és emlékezetesebbé tegye a designt, az animáció hozzáadása. Ezzel igazán menő honlapfejléceket lehet készíteni. Ha olyan interaktív weboldalt keres, amely leköti a nézőket, az animáció remek alternatíva.
Egy jól megtervezett felhívás a cselekvésre
A webfejléc tervezése során a tervező néhány felhívó elemet illeszt oda, például “bejelentkezés”, “bejelentkezés”, “kapcsolatfelvétel” stb. Ahhoz, hogy a felhasználó figyelmét felkeltse, hogy az a szükséges cselekvést eredményezze, a gombnak az ügyfél számára érthető feliratot kell tartalmaznia, és feltűnőnek kell lennie a többi tartalom között.
A stratégiailag fontos helyen elhelyezett felhívás a cselekvésre tökéletes lehetőség arra, hogy a felhasználókat már az elején cselekvésre ösztönözze, így növelve a konverziós arányt. Egyes CTA-k egy ideig használhatók különleges ajánlatok népszerűsítésére, mások hosszú távú jelenlétet biztosítanak.
A legjobb betűtípusok a weboldal fejlécéhez
Az ügyfél először a részek nevét és a vállalat által nyújtott információkat érzékeli: elérhetőségek, érdekes ajánlatok. Ezért világos, jól olvasható betűtípusokat kell választania, amelyek nem rontják az érzékelést, és első látásra érthetőek.
A nagyméretű honlapfejlécek esetében használhat néhány merész tipográfiát és fantáziadús elemet, hogy felkeltse a felhasználók figyelmét, egyébként pedig jobb, ha nem választ díszes betűtípusokat, amelyek nehezen olvashatónak bizonyulhatnak.
Egyszerű fejléc kialakítása
Azzal, hogy a fejléc jól meghatározott és rendezett, a látogatók úgy fogják érezni, hogy nem próbálja őket az ajánlatával terhelni. Egy kreatív weboldal fejlécének nagyon egyszerű megjelenése is lehet.
Ez egy egyre gyakrabban alkalmazott megoldás a weboldalak tervezésénél. A hamburger menü egy három csíkból álló kis ikon, amelyre kattintva megjelenik a teljes menü. Ezt a technikát a tervezők akkor használják, amikor a fő képernyőre kell összpontosítaniuk.
A webhely használhatósága szempontjából ez egy jó megoldás. Az ilyen menü a mobiltervezésből származik, és már ismerős a felhasználók számára. A hamburger alkalmas promóciós oldalakhoz, ahol a fő hangsúly a termék fényképek vagy videók segítségével történő minőségi bemutatásán van. Az online áruházak számára ez a lehetőség talán kevésbé megfelelő, mivel a vásárló számára fontos, hogy a kosár, a kiválasztott termékek és a keresőmező gyors elérésben legyen.
Mobil fejléc kialakítása
A fejlécnek nemcsak a weboldal asztali, hanem a mobil változatán is helyesen kell megjelennie. Tehát reszponzívnak kell lennie, és jól kell tudnia alkalmazkodni bármilyen mobileszközhöz.
A mobileszközök mindennapos használata olyan weboldalak tervezéséhez vezetett, amelyek már asztali inkarnációjukban is mobilorientáltnak tűnnek. Például a nagyméretű hősképek és a hamburger menük megvalósítása a mobiltervezésből ered.
Végezetül
A honlapot a fejléc mutatja be. Olyan, mint egy egyedi névjegykártya. Ezért a webhely tervezésekor fordítson maximális figyelmet a fejlécre.
És még egy utolsó legjobb gyakorlat a webhely fejlécének kialakításához: végezzen rendszeres változtatásokat, hogy webhelye friss és naprakész maradjon. Használjon fel néhány meglátást ebből a cikkből.