15+ Beautiful Website Headers and Why They Work So Well

Co jest pierwszą rzeczą, którą widzi użytkownik na twojej stronie internetowej?

Dokładnie, nagłówek.

Jeśli nie jest on wystarczająco atrakcyjny, jeśli nie daje jasności, Twoi użytkownicy mogą po prostu odejść, a może nigdy nie wrócić.

Nie chcemy tego, prawda?

Nagłówki stron internetowych są centralną częścią projektowania strony internetowej. Odgrywają one kluczową rolę w przykuwaniu uwagi użytkowników i nawiązywaniu połączenia z odwiedzającymi witrynę.

Dlatego w poniższych liniach zajmiemy się niektórymi zasadami projektowania nagłówków, których powinieneś być świadomy podczas projektowania nagłówka witryny.

Header Design Principles to Follow

Badania wykazały, że oczy użytkowników poruszają się po stronie internetowej, podążając za jednym z 3 wzorów:

• Wzór Gutenberga

Źródło obrazu: https://vanseodesign.comThe Wzorzec Gutenberga może być stosowany do treści o dużej ilości tekstu. Sugeruje on, że oczy czytelnika przesuwają się w poprzek i w dół strony w serii poziomych ruchów.

Przykład:

• Wzór w kształcie litery Z

Wzorzec Z określa ścieżkę, jaką podążają oczy użytkowników podczas skanowania strony, ścieżkę, która przybiera kształt litery Z. Zalecany jest do projektowania stron docelowych, które czytelnicy szybko skanują.

Przykład:

• Wzór w kształcie litery F

Ten wzorzec opisuje najczęściej stosowany styl czytania bloków treści w medium internetowym. Użytkownicy szybko skanują stronę, a ich oczy podążają za wzorcem F.

Przykład:

Bez wchodzenia w dalsze szczegóły dotyczące tych wzorców, chcielibyśmy wzmocnić, że dla każdego z tych wzorców, górna linia pozioma jest miejscem, w którym odwiedzający rozpoczynają skanowanie strony.

Co zintegrować z nagłówkiem strony internetowej?

Te wzorce pokazują, dlaczego projektant stron internetowych musi starannie zdecydować, co użytkownicy powinni zobaczyć w pierwszej kolejności. Nagłówek powinien służyć jako haczyk, który przyciągnie ich uwagę i zachęci do zapoznania się z resztą strony.

Nie ma szans na zrobienie drugiego wrażenia. Dlatego warto dwa razy zastanowić się, co zawrzeć w nagłówku:

• Strong hero image

A hero image jest bardzo dużym banerem, który jest wyświetlany powyżej fałdu na stronie internetowej. Jest on zawarty w sekcji nagłówka i jest pierwszą rzeczą, którą użytkownicy widzą po przybyciu na stronie internetowej. Hero obrazy mają również na celu przyciągnięcie uwagi odwiedzających do unikalnego punktu sprzedaży (USP) firmy. Najlepsza praktyka mówi, że użycie twarzy prawdziwych ludzi w obrazach bohaterów może pomóc odwiedzającym lepiej odnieść się do marki. Komunikacja staje się bardziej ludzka i osobista.

Źródło: Drift.com

• Unique selling point (USP)

Unique selling point (USP) to fraza, która wyjaśnia powód, dla którego firma istnieje. Powinien ujawnić, co firma robi, dlaczego i dla kogo. Powinno również podkreślać unikalne cechy i korzyści, które sprawiają, że marka wyróżnia się wśród swoich konkurentów. Silne USP jest kluczowe w przekazywaniu właściwej wiadomości do odwiedzających stronę internetową, a ostatecznie w przekształcaniu ich w klientów.

Źródło: miro.com

• Nazwa marki

Nazwa marki przyzwyczaja ludzi do tożsamości witryny lub wzmacnia obraz, jaki ludzie mają o Twojej tożsamości biznesowej.

Wizerunek powinien odzwierciedlać osobowość Twojej marki i zapewniać spójność głosu marki w całej witrynie. Powinien być łatwo rozpoznawalny, nawet jeśli zostanie wycięty z nagłówka witryny. A gdy zostanie umieszczony w nagłówku strony, powinien odgrywać kluczową rolę w nawiązywaniu osobistej więzi z każdym użytkownikiem.

Źródło: carolinaherrera.com

• Wideo produktowe

Ponieważ wyrobienie sobie opinii o stronie internetowej zajmuje użytkownikom tylko 50 milisekund, oznacza to, że powinieneś mieć najważniejsze wiadomości w nagłówku. Dlatego właśnie wiele firm nie czeka, aż użytkownicy przewiną stronę w dół i przejdą do cech ich produktu/usługi, ale wykorzystuje moc wideo, aby lepiej przekazać swoją wiadomość. Nie zapominajmy również, że 78% ludzi ogląda filmy online każdego tygodnia, a 55% ogląda filmy online każdego dnia.

Źródło: wistia.com

• Wezwanie do działania (CTA)

CTA to komunikat (zazwyczaj na przycisku), który wywołuje określoną reakcję ze strony odwiedzających stronę internetową. Call-to-action powinno być jasno określone i łatwe do zrozumienia przez odwiedzających stronę. Naturalnie, CTA umieszczone w nagłówku, w miejscu, w którym odwiedzający rozpoczynają swoją podróż na stronę, zwiększa szanse na uzyskanie pożądanej akcji od odpowiednich użytkowników.

Źródło: creatopy.com

• Product featuring

W przypadku prowadzenia sklepu eCommerce, będziesz chciał podkreślić jakość i wygodę określonego produktu, a najlepszym sposobem na to jest umieszczenie tego produktu w nagłówku. Uwaga użytkowników będzie kierowana w stronę tej najlepszej oferty, a oni będą skłonni przejść do procesu zakupu.

Źródło: amazon.com

W każdym z powyższych przypadków, ogólna zasada brzmi: zachowaj prostotę, zachowaj przejrzystość, spraw, aby nagłówek był angażujący! Badania pokazują, że „średnia różnica w traktowaniu przez użytkowników informacji powyżej i poniżej fałdy wynosi 84%”. Najlepiej więc skupić swoje wysiłki na tym, aby te liczby jak najbardziej zredukować. I zrobisz to najlepiej, jeśli wyznaczyłeś sobie jakieś cele, co chcesz przekazać.

Duże strony internetowe, takie jak www.youtube.com, ograniczają przestrzeń przeznaczoną na nagłówek tylko do niewielkiej ilości. Robi się to celowo, gdyż chodzi o to, aby uwaga użytkownika była skierowana na coś ważniejszego, np. produkty, usługi lub filmy (np. YouTube).

Czasami nawet nie potrzebujesz nagłówka, a jeśli już, to niewielki.

Wszystko zależy od specyfiki strony. Pomyśl o tym i daj swojej stronie osobowość, której potrzebuje, bez względu na to, co trendy w projektowaniu stron internetowych „mówią” ci teraz i wtedy.

Co inspiruje nagłówek twojej strony internetowej?

Poza przekazywaniem pewnych wiadomości, możesz również rozważyć zaszczepienie pewnych emocji w czytelnikach. W zależności od tego, jaki cel nadasz nagłówkowi, może on wzbudzić w czytelnikach jedną z następujących emocji:

• Ciekawość

Dla niektórych stron internetowych odpowiednie będzie ustawienie nagłówka, który wzbudzi w czytelnikach ciekawość. Będą chcieli dowiedzieć się więcej, będą tęsknić za więcej, będą pędzić do odkrywania reszty historii.

Tak właśnie czuję się z tym nagłówkiem od Canva. Składają ogromną obietnicę właśnie tam: „Zaprojektuj wszystko”. A Ty jesteś zaproszony do przetestowania tego. Can you resist?

• Action

W niektórych przypadkach, lepiej jest wzbudzić działanie bezpośrednio z nagłówka. Z wezwaniem do działania, można zaprosić użytkowników do kliknięcia na przycisk, lub wykonać inną interakcję z witryny, od razu z bat. W przypadku Planable, ich USP jest bezpośrednio związane z poniższym CTA. ponadto, jeśli użytkownik nie jest jeszcze gotowy na zakup, istnieje możliwość umówienia się na demo.

• Zaufanie

Przydatne może być rozpoczęcie od wzbudzenia zaufania u odwiedzających. Chcesz, aby później podjęli jakieś działania, a żeby to zrobić, muszą czuć się w pełni przekonani, że podejmują właściwą decyzję.

Zobaczmy, jak robi to Salesforce. Twierdzą, że są największym CRM-em na świecie. Ok, możesz powiedzieć, że 99% firm nie jest pierwsza w swojej dziedzinie. I miałbyś rację. Ale, jeśli czytasz poniżej, na pewno jest coś, co można wykorzystać. Jest tam studium przypadku, które pokazuje, jak wydajny jest produkt. Sam możesz wykorzystać takie studium przypadku.

• Ból

Dlaczego, u licha, chciałbyś wywołać ból u czytelników, zwłaszcza z nagłówka? Cóż, wiele firm ma swój marketing oparty na zasadzie FUD (Fear, Uncertainty, Doubt). Na wczesnym etapie procesu konwersji, strach/ból wywoła decyzję o natychmiastowym zastosowaniu rozwiązania i sprawi, że ten ból zaniknie.

To może być podejście dla usług cyberbezpieczeństwa, usług bezpieczeństwa fizycznego, ale także w służbie zdrowia czy funduszach emerytalnych.

Takie podejście może być wykorzystane w kampaniach, które chcą uświadomić ludziom, że należy zaszczepić się przeciwko COVID lub zapiąć pasy bezpieczeństwa.

• Laughter

Może chcesz emocjonalnie połączyć się z odwiedzającymi, od samego początku. A nie ma na to lepszego sposobu niż rozśmieszyć ich do łez. I to śmiać się głośno. W ten sposób tworzy się poczucie współudziału, a użytkownicy staną po twojej stronie, podczas gdy będą eksplorować witrynę.

• Znajomość

Połączenie sytuacji użytkowników z podobną sytuacją przedstawioną w nagłówku może stworzyć pewien stopień znajomości.

Typy nagłówków dla różnych typów witryn

W zależności od specyfiki witryny, jeden nagłówek będzie lepiej pasował do ogólnego projektu niż inny. Odpowiednio, powinieneś mieć jasny pomysł, jaki typ nagłówka będzie najlepiej pasował do twojej własnej strony (czy to eCommerce, blog, portfolio, gazeta online, itp.).

• CTA-focused header

W przypadku Blue Apron, nagłówek strony używa dużego wideo, zamiast dużego obrazu bohatera. Przekazuje on poczucie przytulności, znajomości, apetytu.

Następnie mamy CTA, które zaprasza użytkownika do podjęcia działania, aby skorzystać z tego samego przytulnego i mniam mniam doświadczenia.

Strona CrazyEgg posiada nagłówek, który zaprasza użytkowników do wzięcia ich produktu na demonstrację na żywo. Ich produkt jest po prostu idealnie dopasowany do takich demonstracji w czasie rzeczywistym. I to udowadnia natychmiast korzyści z produktu. Używają również wizualnej wskazówki, wskazującej na CTA: ręka mężczyzny w balonie kieruje wzrok w stronę przycisku.

• Nagłówek skoncentrowany na marce

To jest piękny przykład strony internetowej z nagłówkiem skupiającym się na tożsamości marki i elementach brandingowych. Zawiera logo, replikację kolorów logo marki w górnej części, jak również ich slogan.

• Content-focused header

To jest bardzo odpowiednie dla blogów, oraz magazynów, które promują artykuły i historie.

Ale, znalazłem też kilka wyjątków.

Patagonia nie promuje swojego sklepu na stronie głównej, ale, oni pchają historie, które pokazują ich zaangażowanie w dokonywanie zmian na świecie. Ta aktualna historia, przedstawiona w nagłówku strony, dotyczy niewolnictwa i aktywizmu.

W przypadku Ikea, lewa strona ekranu skłania odwiedzających do jednego ze sklepów internetowych, podczas gdy druga połowa skłania użytkowników do przeczytania historii Ikea.

• Skupiony na tle wideo nagłówek

BUKWILD zintegrował 3 różne filmy wideo w nagłówku strony. Każdy z filmów może być odtwarzany poprzez umieszczenie myszki nad odpowiednią sekcją. Interesujący jest kreatywny sposób wykorzystania filmów jako części większego „obrazu”, takiego, który reprezentuje ich markę.

• Nagłówek skoncentrowany na produkcie

W przypadku Cropp, sklepu internetowego z odzieżą, najnowsze kolekcje są prezentowane w nagłówku.

Threadless.com umieszcza wall-art w kontekście i charakteryzuje się kwadratem CMYK. Nagłówek zawiera również wyraźne CTA, dla wszystkich tych, którzy czują, że należą w pewien sposób do tego scenariusza przedstawionego w nagłówku przez „squad”.

• Personal branding-focused header

W przypadku bloga podróżniczego Alex in Wanderland, w nagłówku strony, oprócz zdjęcia Alex, użytkownicy mogą zobaczyć początek historii w tym nagłówku: „Five years and counting on the road…”. Jest to zaproszenie dla czytelników, aby chcieli poznać więcej historii.

Aby podsumować…

Nagłówki w znacznym stopniu przyczyniają się do sukcesu lub porażki strony internetowej. Technicznie rzecz biorąc, ta górna część jest naturalnie pierwszą rzeczą na stronie, z którą ludzie wchodzą w interakcję.

.