15+ Krásné hlavičky webových stránek a proč tak dobře fungují

Co je první věc, kterou uživatel na vašich webových stránkách uvidí?

Přesně tak, hlavička.

Pokud není dostatečně přitažlivá, pokud nepřináší přehlednost, může se stát, že vaši uživatelé prostě odejdou a možná se už nikdy nevrátí.

To přece nechceme, nebo ano?

Záhlaví webových stránek je ústřední součástí návrhu webových stránek. Hrají klíčovou roli při upoutání pozornosti uživatelů a navázání kontaktu s návštěvníky webu.

Proto se v následujících řádcích budeme zabývat některými zásadami návrhu záhlaví, které byste měli při návrhu záhlaví webu znát.

Zásady designu hlavičky, kterými je třeba se řídit

Výzkumné studie zjistily, že oči uživatelů se na webové stránce pohybují podle jednoho ze 3 vzorů:

• Gutenbergův vzor

Zdroj obrázku: https://vanseodesign.comThe Vzor Gutenberg lze použít na obsah s velkým množstvím textu. Naznačuje, že čtenářův zrak přejíždí po stránce a sjíždí po ní řadou horizontálních pohybů.

Příklad:

• Vzor ve tvaru písmene Z

Vzor ve tvaru písmene Z definuje dráhu, po které se pohybují oči uživatelů při skenování stránky, dráhu, která má tvar písmene Z. Vzor ve tvaru písmene Z se používá při skenování stránky. Doporučuje se pro návrh vstupních stránek, které čtenáři rychle skenují.

Příklad:

• Vzor ve tvaru písmene F

Tento vzor popisuje nejčastěji používaný styl čtení bloků obsahu v online médiu. Uživatelé rychle skenují webovou stránku a jejich oči sledují vzor F.

Příklad:

Aniž bychom zacházeli do dalších podrobností o těchto vzorech, rádi bychom posílili, že u kteréhokoli z těchto vzorů je horní vodorovná čára místem, kde návštěvníci začínají skenovat stránku.

Co začlenit do záhlaví webové stránky?“

Tyto vzory ukazují, proč musí webový designér pečlivě rozhodnout, co mají uživatelé vidět jako první. Záhlaví by mělo sloužit jako háček, který upoutá jejich pozornost a vyzve je k prozkoumání zbytku stránky.

Není šance udělat druhý dojem. Proto byste si měli dobře rozmyslet, co do záhlaví zařadit:

• Silný hrdinský obrázek

Hrdinský obrázek je velmi velký bannerový obrázek, který se na stránce zobrazuje nad záhybem. Je součástí části záhlaví a je první věcí, kterou uživatelé uvidí při příchodu na webovou stránku. Účelem hrdinských obrázků je také přitáhnout pozornost návštěvníků k jedinečnému prodejnímu bodu (USP) podniku. Osvědčený postup uvádí, že použití tváří skutečných lidí na obrázcích hrdinů může pomoci návštěvníkům lépe se sžít se značkou. Komunikace se stává lidštější a osobnější.

Zdroj: Drift.com

• Unique selling point (USP)

USP je věta, která vysvětluje důvod existence podniku. Měla by odhalit, co podnik dělá, proč a pro koho. Měla by také zdůrazňovat jedinečné vlastnosti a výhody, kterými značka vyniká mezi svými konkurenty. Silné USP má zásadní význam pro předání správného sdělení návštěvníkům webových stránek a v konečném důsledku pro jejich přeměnu na zákazníky.

Zdroj: miro.com

• Název značky

Název značky přivyká lidem na identitu webu nebo posiluje představu, kterou mají lidé o identitě vaší firmy.

Představa by měla odrážet osobnost vaší značky a zajistit, aby byl hlas vaší značky konzistentní na celém webu. Měl by být snadno rozpoznatelný, i kdyby byl vystřižen z hlavičky webu. A pokud je umístěn do záhlaví webu, měl by hrát klíčovou roli při navazování osobního vztahu s každým uživatelem.

Zdroj: carolinaherrera.com

• Video produktu

Protože uživatelům trvá jen 50 milisekund, než si vytvoří názor na web, znamená to, že byste měli mít v záhlaví nejdůležitější sdělení. Proto mnoho firem nečeká, až uživatelé srolují dolů a dostanou se k vlastnostem jejich produktu/služby, ale využívají sílu videa, aby lépe předali své sdělení. Nezapomínejme také, že 78 % lidí sleduje online videa každý týden a 55 % lidí sleduje online videa každý den.

Zdroj: wistia.com

• Výzva k akci (CTA)

CTA je sdělení (obvykle na tlačítku), které u návštěvníků webu vyvolá určitou reakci. Výzva k akci by měla být jasně definovaná a pro návštěvníky webu snadno pochopitelná. CTA umístěná v záhlaví, přímo tam, kde návštěvníci začínají svou cestu na webové stránky, samozřejmě zvyšuje šance na získání požadované akce od příslušných uživatelů.

Zdroj: creatopy.com

• Produkt představující

V případě, že provozujete e-shop, budete chtít zdůraznit kvalitu a výhodnost určitého produktu, a nejlepším způsobem, jak toho dosáhnout, je uvést tento produkt v záhlaví. Pozornost uživatelů bude směřovat k této nejlepší nabídce a budou mít tendenci vstoupit do nákupního procesu.

Zdroj: amazon.com

V každém z výše uvedených případů platí obecné pravidlo: Zachovejte jednoduchost, přehlednost, ať je záhlaví poutavé! Výzkumy ukazují, že „průměrný rozdíl v tom, jak uživatelé přistupují k informacím nad a pod záhybem, je 84 %“. Nejlepší je tedy zaměřit své úsilí na co největší snížení těchto čísel. A nejlépe to uděláte, pokud si stanovíte nějaké cíle, co chcete přenést.

Velké webové stránky, jako například www.youtube.com, omezují prostor věnovaný záhlaví jen na malou část. Dělá se to záměrně, protože záměrem je, aby se pozornost uživatelů zaměřila na něco důležitějšího, jako jsou produkty nebo služby nebo videa (např. YouTube).

Někdy záhlaví ani nepotřebujete, a pokud ano, stačí malé.

Vše záleží na zvláštnostech webu. Zamyslete se nad tím a dodejte svému webu potřebnou osobitost bez ohledu na to, co vám tu a tam „říkají“ trendy v oblasti webdesignu.

Co má hlavička vašeho webu vzbuzovat?

Kromě předávání určitých sdělení můžete uvažovat také o tom, že ve čtenářích vzbudíte určité emoce. V závislosti na účelu, který záhlaví webu přisoudíte, může ve čtenářích vzbudit jednu z následujících emocí:

• Zvědavost

Pro určité webové stránky by bylo vhodné nastavit záhlaví, které ve čtenářích vzbudí zvědavost. Budou se chtít dozvědět víc, budou toužit po dalším, vrhnou se na prozkoumání zbytku příběhu.

Takový pocit mám z tohoto záhlaví od společnosti Canva. Právě tady dávají obrovský příslib: „Navrhněte cokoli“. A vy jste zváni, abyste si to vyzkoušeli. Odoláte?“

• Akce

V některých případech je lepší vyburcovat akci přímo z hlavičky. Pomocí výzvy k akci můžete uživatele vyzvat, aby klikli na tlačítko nebo provedli nějakou jinou interakci s webovou stránkou přímo z titulku. V případě společnosti Planable je jejich USP přímo spojeno s CTA níže. také, pokud nejste zcela připraveni ke koupi, je zde možnost naplánovat si také demo.

• Důvěra

Může být užitečné začít tím, že v návštěvnících vzbudíte důvěru. Chcete, aby později podnikli nějakou akci, a k tomu je třeba, aby se cítili plně přesvědčeni, že se rozhodují správně.

Podívejme se, jak to dělá společnost Salesforce. Uvádějí, že jsou největším CRM na světě. Dobře, možná si řeknete, že 99 % společností není ve svém oboru prvních. A měli byste pravdu. Ale když si přečtete níže, určitě se najde něco, co můžete využít. Je zde případová studie, která ukazuje, jak je produkt efektivní. Takovou případovou studii můžete sami využít.

• Bolest

Proč proboha chcete ve čtenářích vzbuzovat bolest, zejména z nadpisu? Inu, mnoho společností má svůj marketing založený na principu FUD (Fear, Uncertainty, Doubt). V rané fázi konverzního procesu strach/bolest vyvolá rozhodnutí okamžitě aplikovat řešení a způsobí, že bolest odezní.

To může být přístup pro služby kybernetické bezpečnosti, služby fyzické bezpečnosti, ale také ve zdravotnictví nebo penzijních fondech.

Takový přístup lze využít v kampaních, které chtějí lidi upozornit, že je třeba očkovat proti COVID nebo si zapnout bezpečnostní pásy.

• Laughter

Možná se chcete s návštěvníky emocionálně spojit, a to hned na začátku. A není lepší způsob, jak toho dosáhnout, než je rozesmát. A smát se nahlas. Vytvoří se pocit spoluúčasti a uživatelé vám budou stát po boku, zatímco budou prozkoumávat webové stránky.

• Známost

Spojení situace uživatelů s podobnou situací prezentovanou v záhlaví může vytvořit určitou míru známosti.

Typy záhlaví pro různé typy webových stránek

V závislosti na specifikách webových stránek bude jedno záhlaví lépe zapadat do celkového designu než jiné. Podle toho byste měli mít jasnou představu o tom, jaký typ záhlaví bude nejlépe vyhovovat vašemu vlastnímu webu (ať už se jedná o elektronický obchod, blog, portfolio, internetové noviny atd.).

• Záhlaví zaměřené na CTA

V případě webu Blue Apron používá záhlaví místo velkého hrdinského obrázku velké video. To přenáší pocit útulnosti, důvěrnosti, chuti k jídlu.

Dále máme CTA, které vyzývá uživatele k akci, aby využil stejného útulného a lahodného zážitku.

Webové stránky CrazyEgg přicházejí se záhlavím, které vyzývá uživatele, aby si vzali jejich produkt na živou ukázku. Jejich produkt je pro takové předvádění v reálném čase jako stvořený. A okamžitě dokazuje výhody produktu. Používají také vizuální narážku, která upozorňuje na CTA: ruka muže v balónku směřuje oko k tlačítku.

• Záhlaví zaměřené na značku

Toto je krásný příklad webu se záhlavím zaměřeným na identitu značky a prvky brandingu. Obsahuje logo, repliku barev loga značky v horní části a také její slogan.

• Záhlaví zaměřené na obsah

Toto je velmi vhodné pro blogy a časopisy, které propagují články a příběhy.

Ale našel jsem i výjimky:

Patagonia na domovské stránce nepropaguje svůj obchod, ale naopak prosazuje příběhy, které ukazují její snahu o změnu světa. Tento aktuální příběh, uvedený v záhlaví webové stránky, se týká otroctví a aktivismu.

V případě společnosti Ikea levá polovina obrazovky vybízí návštěvníky k návštěvě jednoho z internetových obchodů, zatímco druhá polovina vybízí uživatele k přečtení příběhu společnosti Ikea.

• Záhlaví zaměřené na video na pozadí

BUKWILD integroval do záhlaví webu 3 různá videa. Každé z videí lze přehrát umístěním myši nad příslušnou část. Zajímavý je na tom kreativní způsob, jakým používají videa jako části většího „obrazu“, který reprezentuje jejich značku.

• Záhlaví zaměřené na produkty

V případě internetového obchodu s módou Cropp se v záhlaví objevují nejnovější kolekce.

Threadless.com dává wall-art do souvislosti a obsahuje CMYK Squad. Součástí záhlaví je také jasná CTA, pro všechny, kteří mají pocit, že nějakým způsobem patří do toho scénáře, který v záhlaví prezentuje „skvadra“.

• Záhlaví zaměřené na osobní branding

V případě cestovatelského blogu Alex in Wanderland mohou uživatelé v záhlaví webu kromě fotografie Alex vidět začátek příběhu v tomto záhlaví: „Five years and counting on the road…“ (Pět let na cestách…). Je to výzva pro čtenáře, aby chtěli prozkoumat další příběhy.

Na závěr…

Záhlaví výrazně přispívají k úspěchu či neúspěchu webové stránky. Technicky vzato je tato horní část přirozeně první věcí na webu, se kterou lidé přicházejí do styku.

.