Hero Header: Így készíthetsz fantasztikusat!

Amikor az emberek megkérkeznek a honlapodra, csupán néhány másodperc áll rendelkezésedre, hogy lenyűgözd őket és meggyőzd, hogy maradjanak. Ez egy nagyon fontos pillanat, mégis a legtöbb webhely elhalasztja a lehetőséget ahelyett, hogy megragadja a látogatókat és kapcsolatba lépjen velük.

Győződj meg róla, hogy az általad használt hero header kiemelkedik a többi közül.

Minek kell szerepelnie a hero header-en?

Mindenféle módon lehetőséged van kezelni a hero header-t. Lehet, hogy azt szeretnéd, hogy elfoglalja az egész oldalt, lehet, hogy egy új terméket promótálnál rajta, vagy egy tömör mondatban mutatnád be, a márkád mit takar. Van azonban néhány lényeges elem, amiből a hero header összeáll. 

Ide tartozhatnak:

• szemet gyönyörködtető címsorok
• cselekvésre ösztönzés (CTA)
• valamilyen nagyméretű, feltűnő háttérkép vagy videó
• beágyazott magyarázó videó vagy animáció
• carousel, ami bemutatja a kiemelt tartalmakat
• vállalati márkajelzés - logó vagy szlogen
• márka és navigáció
• animáció

Vegyük most át ezeket és nézzük meg, hogyan lehet beépíteni őket a hero header-be.

A címsor (Headline)

A címsorral kezdjük. Ez valószínűleg az első, amit a látogatók elolvasnak. Könnyen érthetőnek kell lennie, miközben a megfelelő üzenetet is továbbítja.

A megfelelő stílus

Amikor a szöveget szembetűnővé teszed, annak egyértelműnek kell lennie. Semmi esetre se hagyd ki ezt a címsort! Ebben a nagy, vastag betűtípus is segít. Ha háttérképet használsz, általában jó ötlet nagyméretű, fehér szöveget alkalmazni, mivel ez általában könnyebben olvasható, mint a sötét szöveg.

Cselekvésre ösztönzés

Miután meghatároztad a fő üzeneted a nagy, szemet gyönyörködtető címsoron keresztül, a következő lépés az, hogy a látokatókat elvezesd egy számodra fontos művelet elvégzéséhez. Lehet ez egy “Regisztráció” gombra történő kattintás, ami bátorítja őket a termékek vagy projektek megtekintésére, vagy e-mail küldésre is ösztönözhet. Ezt általában egy űrlap gombként vagy egy űrlapon elhelyezett gomb formájában jelenítik meg és ezt nevezzük “Call to Action”-nek (CTA).
Amikor eltervezed, hogyan ösztönzöd majd cselekvésre látogatóid, ügyelned kell arra, hogy ez a felület vizuálisan kitűnjön. Ez azt jelenti, hogy például a márkanevet használják háttérként, felnagyítják azt vagy a képernyő egy jól látható területén helyezik el. Az elülső vagy középső szakasz címsor alatti elhelyezése népszerű választás, de nem feltétlenül szükséges ennek így lennie. A színnel történő megfelelő kiemelés, például a jobb sarokban ugyanígy működhet. Miután megvan, hova helyezzük el, a következő dolog, amit figyelembe kell venni, a szavak megválasztása. Az olyan kifejezések, mint a “Kezdd el”, “Töltsd le most” vagy “Regisztrálás” mind nagyon fókuszálnak a cselekvésre és segítik a látogatókat abban, hogy megértsék, mire mutat a gomb. Ezért kerüld el az olyan kifejezéseket, mint a “Küldés” vagy “Indulás”. Egy homályos kifejezés lelassíthatja az embereket, de amit igazán akarsz, azok a boldog látogatók, akik határozottan és tudatosan kattintanak a gombra.

A háttérkép

Most már erős üzenetünk és jó ösztönzőnk van. A következőkben érdemes megfontolnod egy szélesebb oldalt. Sok hero header nagy háttereket használ. Ezek valóban életre keltik a formatervezést és segíthetnek az embereknek kapcsolatban lépni az emögött álló üzenettel vagy érzéssel.
Nagyon sok kivál hely létezik a jogdíjmentes képek megvásárlására. A Google keresés megnöveli a betöltéseket. A tervezés megkezdésekor érdemes ingyenes képekkel kipróbálni a terveket és megnézni, melyek és hogyan működnek a legjobban.

Méretek és fájlméret

Ha megtaláltad az ideális képet, elő kell készíteni azt a hero header-hez. Azt szeretnéd, hogy a kép elég nagy legyen a képernyő lefedéséhez, de nem olyan masszív, hogy a letöltés hosszú ideig tartson. A fotók általában nagyon nagy képernyőn méretezhetőek fel, tehát általában egy fotót érdemes kb. 1400-1600 képpont szélesre méretezni. Ennek a legtöbb képernyőn jól kell kinéznie.
A fényképeket JPEG fájlokként kell elmenteni és tömöríteni. A fotó típusától függően a kész fájl mérete körülbelül 200-500KB lehet. A nagyobb méretek lassabbak és észrevehetően késleltetik a webhely betöltési idejét. Te viszont azt szeretnéd, ha a hero header gyorsan megjelenne, ezért fotnos, hogy a használt képek tömörítve legyenek.

A teljes nézetablak kitöltése

A képernyők bármilyen méretűek lehetnek. Gyakran azt akarjuk, hogy a hero header illeszkedjen a képernyőhöz, de nehéz előre látni, hogy a felhasználók széles, rövid böngészőablakon, vagy keskeny, magas ablakban nézik-e majd. Két trükköt használhatunk arra, hogy megszerkesszük a hero header-t a rendelkezésre álló hely kitöltésére. A háttér méretének (cover) és a hero header magasságának beállítása (100vh).
Érdemes a háttérkép méretét (cover) úgy állítanod be, hogy a böngésző méretezze és vágja le a képet oly módon, hogy az kitöltse a rendelkezésre álló helyet. Ne feledd, ez azt jelenti, hogy levághatja az oldalakat egy magas képernyőn vagy leveheti a képernyő felső és alsó részét.

Színátmenet hozzáadása

Megvan a nagyszerű háttérképünk, de most nehezen látjuk a címsort. Ez sokszor megtörténik, viszont számos módon javíthatunk rajta. Ennek egyik módja az eredeti kép elmosása vagy sötétítése. Egy másik megközelítés lehet a CSS erejének felhasználása. A CSS felhasználásával háttérgradienst alkalmazhatunk a hero header képére. Itt hozzáadhatunk egy (before) ál-elemet, amely a tartalom mögött helyezkedik el, de még a háttérkép előtt. Ebben az esetben ez egy szürkétől sötét szürkéig tartó gradiens. Ezt helyettesítheted egyszínű vagy eltérő színátmenettel vagy háttérképpel. Alternatív megoldásként hozzáadhatsz háttérszínt vagy képet a fejléchez is. A lényeg, hogy ellenőrizd, hogy az előtérben levő szöveg kiemelkedik-e.

Háttér videó

Időnként nem elég egy nagy kép, és szükséged van még valamire. Népszerű lehetőség egy videó beágyazása az oldal hátterébe és annak automatikus lejátszása a betöltéskor. A videók jól nézhetnek ki, de ellőrizned kell, hogy optimalizáltak-e az internethez is. Ez azt jelenti, hogy rövid ideig kell tartaniuk, általában 10-20 másodpercig. Ezeket viszonylag alacsony felbontásra kell csökkenteni és tömöríteni úgy, hogy a fájl mérete megközelítőleg kb. 10MB legyen.
A videókat a saját szervereden is tárolhatod, de általában jobb megoldás szolgáltatót használnod. Használhatsz ugyanúgy ingyenes platformokat is a videó beszerzésére, illetve akár háttérképet is beilleszthetsz maszkként a videód elé.

Magyarázó videó

Lehet, hogy egy jelenet háttérképpel vagy videóval megoldva nem elég. A videót továbbra is használhatjuk, de elöl, a középpontban elmondhatjuk a márkánk történetét. Ilyen videókat ágyazhatunk be a YouTube-ból (vagy, ha úgy tetszik, a Vimeo-ból). A YouTube használata esetén a legegyszerűbb módszer az (iframe) beágyazási lehetőség használata. Hozzáadhatsz még néhány egyedi beállítást is, hogy még világosabbá váljon.

Carousel

Ez néha trükkös lehet. A web korábbi napjaiban azt gondoltuk, hogy a képernyő alján van egy “hajtás” (újság kifejezés), amelyen túl minden tartalom és remény elveszik. Ez nem feltétlenül igaz, de az ötlet fennmaradt. Mielőtt eldöntenéd, hogy a carousel megfelelő ötlet-e, olvass utána, hogyan kell helyesen csinálni. Lehet, hogy egyáltalán nincs is szükséged rá. A carousel hasznos lehet a hero header-ben, de légy óvatos! Hiszen nem akarod zavarba ejteni látogatóid túl sok üzenettel.

Márka és navigáció

A szemet gyönyörködtető címsor, az egyértelmű és intuitív cselekvésre ösztönzés, a gyönyörű képek és a videó segítségével a hero header már nagyon jól néz ki. Ne felejdsd ki a márkanevet és a navigációt!
Általában, a logót balra, a bal felső sarokban, míg a menüt a jobb felső sarokban helyezzük el. Ez egy egyezmény, ami segít a látogatóknak megismerni, hol kell ezeket az információkat keresni. Előfordulhat, hogy a CTA a menü mellett található. Ha igen, akkor hasznos lehet azt gombként kiemelni, hogy kihangsúlyozzuk, mint a legfontosabb műveletet.
Ügyelj arra, hogy a logó és a navigációs hivatkozások könnyen olvashatóak legyenek. Ha nagy háttérképet használsz, akkor érdemes egy sávot elhelyezni a tejején, hogy a logó és a linkek kiemelkedjenek.

Gondolkodj a hajtáson túl

Míg lenyűgöző lehet a képernyő kitöltése a hero header-rel, ugyanúgy működhet, ha tudatjuk az emberekkel, hogy még többet láthatnak, ha lejjebb görgetnek. Az emberek nagyon jól tudnak görgetni mobilon és az interneten, ez még könnyebb számukra mint a kattintás. Ezt kihasználhatod úgy, hogy a fejlécet követő tartalom láthatóvá válik, ösztönözve az embereket a görgetésre. Ugyanakkor tanulmányok kimutatták, hogy az információk, amelyeket az emberek először látnak, fontosabbak, mint az oldal többi része.

“Ami az oldalon minden cselekvést nélkülözve látható, az ösztönöz bennünket a görgetésre.”

Röviden: a legtöbbet hozhatod ki a látható megjelenésből, amikor az oldal először megjelenik, de ne feledd, hogy az emberek görgetnek. Még akkor is, ha azt látják, hogy a tartalom kevésbé fontos.

Szegd meg a szabályokat!

Az itt ismertetett megközelítések remélhetőleg hasznosak számodra, de ne félj kipróbálni egy saját megközelítést is!

Animációk

Ha egy lenyűgöző hero header a helyén van, akkor is hiányzik még valami. Ez betöltéskor csak hirtelen megjeleni. Az utolsó lépés: adj animációt a hero header-hez!