15+ gyönyörű weboldal fejléc és miért működnek olyan jól

Kép forrása: https://vanseodesign.com

Kép forrása: F-alakú minta

Ez a minta az online médiában a tartalmi blokkok olvasásának leggyakrabban használt stílusát írja le. A felhasználók gyorsan végigpásztázzák a weboldalt, és a szemük egy F-mintát követ.

Példa:

Amellett, hogy nem megyünk bele e minták további részleteibe, szeretnénk megerősíteni, hogy bármelyik modell esetében a felső vízszintes vonal az, ahol a látogatók elkezdik az oldal átolvasását.

Mit integráljunk egy weboldal fejlécébe?

Ezek a minták megmutatják, miért kell egy webdesignernek gondosan eldöntenie, mit lássanak először a felhasználók. A fejlécnek olyan kampóként kell szolgálnia, amely megragadja a figyelmüket, és az oldal többi részének felfedezésére invitálja őket.

Nincs esély a második benyomásra. Ezért kétszer is meg kell gondolnia, mit tegyen a fejlécbe:

• Elég erős hőskép

A hőskép egy nagyon nagyméretű bannerkép, amely a weboldalon a hajtás felett jelenik meg. A fejlécben szerepel, és az első dolog, amit a felhasználók látnak, amikor egy weboldalra érkeznek. A hősképek célja az is, hogy felhívják a látogatók figyelmét a vállalkozás egyedi értékesítési pontjára (USP). A legjobb gyakorlat szerint, ha a hősképekben valódi emberek arcát használjuk, az segíthet a látogatóknak jobban kötődni a márkához. A kommunikáció emberközelibbé és személyesebbé válik.

Forrás: Forrás: Hírlevél: Drift.com

• Egyedi értékesítési pont (USP)

A USP egy olyan kifejezés, amely megmagyarázza, hogy miért létezik egy vállalkozás. Ki kell derülnie, hogy mit csinál a vállalkozás, miért és kinek. Ki kell emelnie azokat az egyedi jellemzőket és előnyöket is, amelyek a márkát kiemelik a versenytársak közül. Az erős USP létfontosságú ahhoz, hogy a megfelelő üzenetet közvetítse a weboldal látogatóinak, és végső soron ügyféllé alakítsa át őket.

Forrás: miro.com

• Márkanév

A márkanév hozzászoktatja az embereket a webhely identitásához, illetve megerősíti az emberek képét az Ön üzleti identitásáról.

A képnek tükröznie kell a márka személyiségét, és biztosítania kell, hogy a márka hangja az egész webhelyen egységes legyen. Könnyen felismerhetőnek kell lennie, még akkor is, ha kivágják a webhely fejlécéből. A weboldal fejlécében elhelyezve pedig kulcsszerepet kell játszania abban, hogy minden felhasználóval személyes kapcsolatot teremtsen.

Forrás: carolinaherrera.com

• Termékvideó

Mivel a felhasználóknak mindössze 50 milliszekundum kell ahhoz, hogy véleményt alkossanak egy weboldalról, ez azt jelenti, hogy a legfontosabb üzeneteket a fejlécben kell elhelyezni. Éppen ezért sok vállalkozás nem várja meg, hogy a felhasználók lejjebb görgetve eljussanak a termékük/szolgáltatásuk jellemzőihez, hanem a videó erejét kihasználva jobban közvetítik az üzenetüket. Azt se felejtsük el, hogy az emberek 78%-a hetente, 55%-a pedig naponta néz online videókat.

Forrás: wistia.com

• Call to action (CTA)

A CTA egy üzenet (általában egy gombon), amely bizonyos választ vált ki a weboldal látogatóiból. A Call-to-actionnek világosan meghatározottnak és a weboldal látogatói számára könnyen érthetőnek kell lennie. Természetesen a fejlécben elhelyezett CTA, pontosan ott, ahol a látogatók a webhelyre vezető útjukat kezdik, növeli annak az esélyét, hogy az adott felhasználóktól a kívánt cselekvést kapják.

Forrás: creatopy.com

• Termékismertető

Ha e-kereskedelmi áruházat üzemeltet, akkor egy bizonyos termék minőségét és kényelmét szeretné hangsúlyozni, és ennek legjobb módja, ha az adott terméket a fejlécben szerepelteti. A felhasználók figyelmét ez a legjobb ajánlat felé tereli, és hajlamosak lesznek a vásárlási folyamatba lépni.

Forrás: amazon.com

A fenti esetek bármelyikében az általános szabály: legyen egyszerű, legyen világos, legyen magával ragadó a fejléc! A kutatások azt mutatják, hogy “a felhasználók átlagosan 84%-os különbséget tapasztalnak abban, hogy hogyan kezelik az infót a fold felett vs. alatt”. A legjobb tehát, ha arra összpontosítod az erőfeszítéseidet, hogy ezeket a számokat a lehető legjobban csökkentsd. És akkor jársz el a legjobban, ha kitűztél magad elé néhány célt azzal kapcsolatban, hogy mit szeretnél közvetíteni.

A nagy weboldalak, mint például a www.youtube.com, csak kis mértékben korlátozzák a fejlécnek szánt helyet. Ezt szándékosan teszik, hiszen az a cél, hogy a felhasználók figyelmét valami fontosabb dologra irányítsák, például termékekre, vagy szolgáltatásokra, vagy videókra (pl. YouTube).

Néha nincs is szükség fejlécre, vagy ha igen, akkor csak egy kicsire.

Az egész a weboldal sajátosságaitól függ. Gondold át, és add meg a weboldaladnak azt a személyiséget, amire szüksége van, függetlenül attól, hogy a webdesign trendek mostanában mit “mondanak” neked.

Mit inspirál a weboldalad fejléce?

A bizonyos üzenetek közvetítésén kívül azt is fontolóra veheted, hogy bizonyos érzelmeket ébresztesz az olvasókban. Attól függően, hogy milyen célt adsz a fejlécnek, az alábbiak valamelyikét inspirálhatja az olvasókban:

• Kíváncsiság

Egy bizonyos webhelyek esetében alkalmas lehet olyan fejléc beállítása, amely kíváncsiságot ébreszt az olvasókban. Többet akarnak majd megtudni, többre vágynak, sietnek felfedezni a történet további részét.

Ezzel a Canva által készített fejléccel kapcsolatban én is így vagyok. Már itt hatalmas ígéretet tesznek: “Tervezz bármit”. És meghívnak, hogy teszteld ezt. Tudsz ellenállni?

• Action

Némely esetben jobb, ha a fejléc közvetlenül cselekvésre ösztönöz. A cselekvésre való felhívással rögtön az elején felszólíthatja a felhasználókat, hogy kattintsanak egy gombra, vagy végezzenek valamilyen más interakciót a weboldallal. A Planable esetében az USP-jük közvetlenül kapcsolódik az alábbi CTA-hoz. továbbá, ha még nem állsz készen a vásárlásra, lehetőséged van egy demó időpontjának egyeztetésére is.

• Bizalom

Azzal kezdheted, hogy bizalmat ébresztesz a látogatóidban. Azt akarod, hogy később cselekedjenek, és ehhez teljesen biztosnak kell lenniük abban, hogy jó döntést hoznak.

Lássuk, hogyan csinálja ezt a Salesforce. Azt állítják, hogy ők a világ legnagyobb CRM rendszere. Oké, mondhatnánk, hogy a cégek 99%-a nem az első a saját területén. És igazad is lenne. De ha elolvasod az alábbiakat, biztosan van valami, amit felhasználhatsz. Van egy esettanulmány, amely megmutatja, mennyire hatékony a termék. Egy ilyen esettanulmányt te is kihasználhatsz.

• Fájdalom

Mi a fenéért akarsz fájdalmat ébreszteni az olvasókban, különösen a fejlécből? Nos, sok cég marketingje a FUD-elvre (Félelem, bizonytalanság, kétség) épül. A konverziós folyamat korai szakaszában a félelem/fájdalom kiváltja a döntést, hogy azonnal alkalmazzanak egy megoldást, és a fájdalom elhalványul.

Ez lehet egy megközelítés a kiberbiztonsági szolgáltatások, a fizikai biztonsági szolgáltatások, de az egészségügy vagy a nyugdíjalapok esetében is.

Egy ilyen megközelítés kihasználható olyan kampányokban, amelyek arra akarják felhívni az emberek figyelmét, hogy be kell oltani a COVID ellen, vagy be kell kötni a biztonsági övet.

• Laughter

Még a kezdetektől fogva érzelmi kapcsolatot szeretne teremteni a látogatókkal. És erre nincs is jobb módszer, mint megnevettetni őket. És nevessenek hangosan. Kialakul a cinkosság érzése, és a felhasználók melletted fognak állni, miközben felfedezik a webhelyet.

• Az ismerősség

A felhasználók helyzetének összekapcsolása a fejlécben bemutatott hasonló helyzettel bizonyos fokú ismerősséget teremthet.

Típusos fejlécek különböző típusú webhelyekhez

A webhely sajátosságaitól függően egy fejléc jobban illeszkedik az általános designhoz, mint egy másik. Ennek megfelelően tisztában kell lennie azzal, hogy milyen típusú fejléc illik legjobban a saját weboldalához (legyen az e-kereskedelem, blog, portfólió, online újság stb.).

• CTA-fókuszú fejléc

A Blue Apron esetében a weboldal fejléce nagyméretű hőskép helyett egy nagyméretű videót használ. Ez a meghittség, az ismertség, az étvágy érzetét közvetíti.

A következő CTA, amely cselekvésre hívja a felhasználót, hogy részesüljön ugyanabból a meghitt és finom élményből.

A CrazyEgg weboldalon egy olyan fejléc található, amely arra hívja a felhasználókat, hogy vegyék el a terméküket egy élő bemutatóra. A termékük egyszerűen tökéletes az ilyen valós idejű bemutatókhoz. És azonnal bizonyítja a termék előnyeit. A CTA-ra utaló vizuális jelzést is használnak: a lufiban lévő ember keze a gomb felé irányítja a tekintetet.

• Márkafókuszú fejléc

Ez egy gyönyörű példa egy olyan weboldalra, amelynek fejléce a márkaidentitásra és a márkaelemekre összpontosít. Tartalmazza a logót, a márka logószíneinek másolatát a felső részben, valamint a szlogenjüket.

• Tartalomközpontú fejléc

Ez nagyon alkalmas blogokhoz, és magazinokhoz, amelyek cikkeket és történeteket népszerűsítenek.

De, találtam néhány kivételt is.

A Patagonia nem a boltját népszerűsíti a főoldalon, hanem, olyan történeteket tol, amelyek megmutatják elkötelezettségüket a világ megváltoztatása iránt. Ez az aktuális történet, amely a honlap fejlécében szerepel, a rabszolgaságról és az aktivizmusról szól.

Az Ikea esetében a képernyő bal oldala az egyik online áruházba invitálja a látogatókat, míg a másik fele az Ikea történetének elolvasására buzdítja a felhasználókat.

• Videóháttérre fókuszáló fejléc

A BUKWILD 3 különböző videót integrált a weboldal fejlécébe. Mindegyik videó lejátszható, ha az egeret a megfelelő rész fölé helyezi. Ebben az az érdekes, hogy a videókat kreatív módon egy nagyobb “kép” részeként használják, amely a márkájukat képviseli.

• Termékközpontú fejléc

A Cropp online divatáruház esetében a legújabb kollekciókat mutatják be a fejlécben.

A threadless.com a wall-artot helyezi kontextusba, és egy CMYK Squadot mutat be. A fejléc egy egyértelmű CTA-t is tartalmaz, mindazok számára, akik úgy érzik, hogy valamilyen módon hozzátartoznak ahhoz a forgatókönyvhöz, amelyet a fejlécben a “csapat” bemutat.

• Személyes márkaépítésre fókuszáló fejléc

Az Alex in Wanderland utazási blog esetében a weboldal fejlécében Alex fotóján kívül a felhasználók egy történet kezdetét láthatják ebben a fejlécben: “Öt év és tovább tart az úton…”. Ez egy felhívás az olvasók számára, hogy további történeteket akarnak felfedezni.

Még egyszer…

A fejlécek nagyban hozzájárulnak egy weboldal sikeréhez vagy kudarcához. Technikailag természetesen ez a felső rész az első dolog a weboldalon, amivel az emberek interakcióba lépnek.