Sztuka pierwszego wrażenia

[ + Test jakości wkrótce ]

Kupujemy emocjonalnie. Co zrobić, żeby to działało na korzyść Twojej firmy?

Na początek zrób dobre pierwsze wrażenie. Zdobywając już na wstępie kredyt zaufania u użytkowników, łatwiej Ci będzie dokończyć sprzedaż.

Sprawdź, jak to zrobić.

Sekcja hero i pierwsze wrażenie na landing page - Owocni

OWOCNY HIT!

Zamów bezpłatne badanie
strony, by otrzymać
porady ekspertów.

Usprawnij to na stronie i przygotuj
więcej miejsca na nowych klientów.

Zamów badanie teraz

Mariusz Słowik
Head of design

> landing page > sekcja hero

Streszczenie:

Masz zaledwie kilka sekund, żeby DOBRE pierwsze wrażenie zatrzymało na Twojej stronie potencjalnego klienta i popchnęło go w kierunku sprzedaży. Użytkownicy są przebodźcowani. Trzeba się mocno postarać, aby to nie stanęło na drodze do dopięcia sprzedaży.

Świetne pierwsze wrażenie

Twoi klienci w każdej sekundzie są bombardowani różnymi komunikatami
w Internecie. Doświadczają przebodźcowania.

Dlatego pierwsze wrażenie, szczególnie w sieci, jest tak ważne, żeby w ogóle zechcieli poznać ofertę Twojej firmy.

Za pierwsze wrażenie na stronie internetowej odpowiadają głównie szybkość ładowania i sekcja hero.

Szybkość strony

Jak szybko powinna wczytywać się Twoja strona?

Najszybciej jak to możliwe. Im dłużej to trwa, tym większe prawdopodobieństwo, że użytkownik zrezygnuje z czekania i opuści stronę zanim na dobre ją zobaczy.

Najlepsze strony wczytują się w mgnieniu oka. Dosłownie.

Mrugnięcie trwa około 400 milisekund. Szybkość na poziomie 500 milisekund
(0,5 sekundy) jest możliwa.

Im bliżej tego pułapu doskoczy Twój Landing Page, tym lepiej.

Sekcja hero

Sekcja hero to górna część strony, którą odwiedzający widzą bez konieczności przewijania w dół (czyli znajduje się „above the fold”).

To pierwsze, co Twój potencjalny klient zobaczy lądując na stronie.

Ta sekcja zawiera (co najmniej):

  • nagłówek;
  • podtytuł;
  • wezwanie do działania (CTA);
  • hero shot (kluczowy obraz, animację lub wideo).

Wszystkie te elementy muszą tworzyć spójną całość i jasno komunikować użytkownikowi, jaką WARTOŚĆ mu oferujesz.

Jeśli znasz swoich odbiorców dobrze, będziesz wiedział na czym im najbardziej zależy w kontekście Twojej oferty. To właśnie umieścisz
w sekcji hero.

Skupmy się głównie na obrazach - hero shots. Dlaczego?

Użycie zdjęcia na stronie docelowej jest warte tysiąca słów.

Schemat prezentujący sekcję hero na Landing Page

Hero shot na Landing Page

Hero shot to zazwyczaj duży, wysokiej jakości obraz, który reprezentuje Twoją markę, produkt lub usługę. Może nim być też animacja lub wideo.

Silny hero shot jest kluczem do uzyskania wysokiego współczynnika konwersji.

KONWERSJA to konkretne działanie, którego oczekujesz od odwiedzających po przejściu na Twoją stronę. Zachęcasz do niego również za pomocą Call to Action (CTA).

Konwersją może być np. złożenie zamówienia, wysłanie formularza kontaktowego, zapis na newsletter.

Bez względu na to, czym dokładnie jest konwersja na Twoim Landing Page, do osiągnięcia dobrych wyników potrzebujesz silnego obrazu.

To pierwsza rzecz, którą ludzie zobaczą, więc upewnij się, że jest to coś, co przykuje ich uwagę i sprawi, że będą chcieli zostać dłużej.

Korzyści z dobrej grafiki

Obraz to szansa na pokazanie w ułamkach sekundy tego, czego same słowa nie są w stanie wyrazić. Na pewno nie w tak krótkim czasie.

Dobry hero shot ożywia ofertę, ale nie odwraca od niej uwagi. Zachęca do przeczytania nagłówka i kliknięcia w przycisk CTA.

Grafika, którą umieścisz w swojej sekcji hero nie może być tylko nic nieznaczącym wypełniaczem. Przez takie obrazy tracisz szansę, by zachwycić i przyciągnąć klienta do swojej firmy.

Jeżeli użytkownik Cię zignoruje, to nic od Ciebie nie kupi. Żeby tego uniknąć warto poznać bliżej dobre i złe praktyki tworzenia hero shot.

5 rodzajów grafiki w sekcji hero:

  • produktowa;
  • procesowa;
  • obiecująca;
  • abstrakcyjna;
  • metaforyczna.

Produktowa

Grafika produktowa koncentruje się w 100% na produkcie. Bardzo często pokazuje go w użyciu.

Sprawia, że Twoja oferta przestaje być abstrakcyjna.

Daje odwiedzającym przedsmak tego, jak wygląda Twój produkt i jak mogą się czuć korzystając z niego.

Warto, żebyś po nią sięgną szczególnie w przypadku nowych lub skomplikowanych produktów.

Jest to świetny sposób na zbudowanie zaufania do możliwości Twojego produktu.

Procesowa

Jeżeli prowadzisz firmę usługową lub tworzysz oprogramowanie, hero shot skoncentrowany na procesie może okazać się dla Ciebie tym najlepszym.

Wizualizując proces, który jest w stanie przynieść klientowi konkretną wartość, możesz go zachęcić do działania.

Vinted w swojej sekcji hero pokazuje, jak łatwe (i przyjemne) jest wystawianie produktów na sprzedaż w ich aplikacji. Wystarczy zrobić zdjęcie telefonem.

Dodatkowo marka od razu komunikuje,że kieruje ofertę do zwykłych ludzi, którzy chcą wprowadzić zmiany w swojej szafie.

Obiecująca

Przykład procesowej grafiki hero shot na stronie internetowej

Tego typu hero shot pobudza aspiracje użytkownika. Pokazuje mu, co jest możliwe, jeśli skorzysta z produktu lub usługi.

Wybierając ten rodzaj grafiki przedstawiasz klientowi rezultat, którego doświadczy, kiedy już wybierze Twoją firmę.

My pokazujemy w swoim hero wideo ze zrealizowanymi już stronami internetowymi.

Dajemy próbkę naszych możliwości i eksponujemy przyszły, POŻĄDANY przez klienta, stan.

Jaki daje nam to efekt?

Jeśli użytkownik pomyśli: “Tak, właśnie tego szukam. O taki efekt mi chodzi. Biorę!”, wygrałeś.

Metaforyczna

Obiecujący hero shot na Landing Page Owocni

Metaforyczne obrazy jasno symbolizują wartość, jaką oferujesz klientom, ale robią to w metaforyczny (nie dosłowny) sposób.

Tak jak pancernik na stronie Armadillo - firmy oferującej gwarancję na dom.

Pancerniki symbolizują ochronę, empatię i wyznaczanie granic. Nie istnieje chyba lepsza metafora, tak dobrze oddająca klimat tego rodzaju firmy.

Mocą metaforycznych hero shotów jest ich kreatywność i to, że tak mocno zapadają w pamięć. A jednocześnie, ZROZUMIALE, przekazują wartość oferty.

Abstrakcyjna

Przykład metaforycznego hero shot

Z kreatywnością można jednak przesadzić. Korzystanie z abstrakcyjnych obrazów w sekcji hero jest ryzykowne.

Tak naprawdę nie komunikują one nic o produkcie i usłudze. Po prostu wypełniają przestrzeń.

Nie pomagają potencjalnym klientom zrozumieć Twojej oferty.

W rzeczywistości utrudniają odwiedzającym zorientowanie się, co robisz i dlaczego powinno ich to w ogóle obchodzić.

Dobre praktyki w tworzeniu hero shot

Aby stworzyć skuteczny hero shot zastanów się, jaki rodzaj wiadomości chcesz przekazać. Przemyśl również kim są Twoi docelowi odbiorcy.

Obraz musi zrobić mocne pierwsze wrażenie, więc bądź strategiczny co do tego, co w nim zawierasz.

Upewnij się, że jest wysokiej jakości i ma związek z Twoją marką.

Twój hero shot może zawierać trochę tekstu. Ale tekst powinien być zawsze drugorzędny w stosunku do obrazu.

Upewnij się, że grafika współbrzmi z osobą, do której ją kierujesz

Twój obraz powinien od razu trafić do odbiorców, jednocześnie sygnalizując, że nie jest dla wszystkich innych.

Klienci podejmują decyzję o tym, czy pozostać na stronie w ułamkach sekund.

Jeśli od razu nie dasz im jasności, że to, co pokazujesz jest właśnie dla nich, mogą po prostu opuścić Twoją stronę. Nie podejmując na niej żadnej akcji (konwersji).

Firma Noir Dental Clinic zrobiła w tej kwestii naprawdę dobrą robotę. Ich grafika od razu trafia do osób, które liczą na metamorfozę. Podkreśla, że klinika jest wyjątkowa.

Ciemny, elegancki design, wyraziste niebieskie usta i piękne prezentujące się w tej kolorystyce białe zęby- nie codziennie widzimy takie strony z usługami dentystycznymi. Ta się mocno wyróżnia.

Pamiętaj, żeby dopasować hero shot do przekazu i kreacji tego, co sprowadziło ludzi na stronę.

Bez względu na to, czy kierujesz ich z reklam, portali społecznościowych, wpisów blogowych czy z jakiegokolwiek innego miejsca - zadbaj, żeby dostali to, na co liczyli klikając link.

Zbuduj kontekst

Twój hero shot powinien wspierać nagłówek i podtytuł. Ma być wizualną reprezentacją tego, co obiecujesz w swoim nagłówku.

Wpasuj go idealnie w swoją sekcję hero, nie myśląc w tym miejscu o informacjach, które podajesz klientowi w dalszej części strony.

Hero shot na stronie kliniki dentystycznej

Pobudź emocje

Ożywiaj swoją ofertę. Tchnij w nią więcej emocjonalnego pierwiastka.

Wzbudzaj w odbiorcach pozytywne odczucia, które będą mogli powiązać z Twoją marką. Możesz tego dokonać dzięki odpowiednim obrazom.

Hero shot na stronie www Firmbee

Zrobiliśmy to dla Studia OKO. Z ich hero shot bije szczęście i pewność siebie.

Po najechaniu na kolorowy, multimedialny element w dłoni naszej bohaterki, zaczyna się on poruszać.

Zgodnie z kierunkiem wyznaczonym przez kursor, a więc dyktowanym przez samego użytkownika.

To przedsmak możliwości oferowanych przez markę. Buduje zaufanie.

Dodatkowo zwróć uwagę, na co patrzy bohaterka obrazu. Dokładnie. Na treści umieszczone w nagłówku i podtytule.

I wiesz co?

Dzięki temu Twój wzrok też pewnie do nich powędrował.

Napisz do nas, chętnie zrobimy coś skrojonego specjalnie dla Twojej marki i jej klientów.

Zyskaj zaufanie

Już samo to, że zastosowałeś się do omówionych wyżej wskazówek zapewni Ci większe zaufanie odbiorców.

Bo skoro zainwestowałeś czas i pieniądze, żeby dopieścić swoją sekcję hero, to prawdopodobnie jesteś profesjonalistą. W końcu wiarygodne firmy tak robią. Zawsze, prawda?

Ale nie musisz na tym kończyć.

Możesz jeszcze bardziej wzmocnić pewność swoich klientów umieszczając w sekcji hero dowód społeczny. Potwierdzenie, że inni już Cię sprawdzili. I byli zadowoleni ze współpracy.

Dobrze działają w tym miejscu referencje, oceny gwiazdkowe, nagrody lub, jak robi to Brand24, loga dotychczasowych klientów.

Multimedialny hero shot stworzony przez Owocni.pl na stronie Studia OKO

Zachowaj spójność

Ważne, żebyś dostosował to, co prezentujesz do swojej marki.

Używaj niestandardowych zdjęć, obrazów, animacji i materiałów wideo.

Sekcja hero na stronie www Brand24

Marka Adobe zrobiła w tej kwestii coś genialnego. Prezentuje animację pokazującą możliwości swojego narzędzia. Uwaga. Bazując na własnym logo!

Jeśli natomiast musisz wykorzystać fotografie z banków zdjęć, popracuj nad nimi. Dopasuj je do stylu i charakteru Twojej marki.

Jeżeli pokażesz swoją sekcję hero osobie, która kompletnie nie zna Twojej firmy i będzie ona w stanie opisać, co oferujesz w dwóch zdaniach - GRATULACJE.

Jeśli nie, czas przetestować różne warianty Landing Page w poszukiwaniu tej najlepszej.

Jesteśmy tu, gdybyś potrzebował kogoś, kto zdejmie Ci z barków to zadanie. Dowieziemy zbawienny landing, który faktycznie będzie zbierał dla Ciebie klientów.

Rozdział 1:
Fundamenty skutecznych stron w biznesie
Odkryj, jak landingi mogą zrewolucjonizować Twoje działania marketingowe szybciej niż myślisz. Dowiedz się, jak to działa!
Rozdział 2:
Tworzenie skutecznej Landing Page
Sprawdź, jak powstaje doskonały landing page. Taki, któremu klientom ciężko się oprzeć.
Rozdział 3:
Kluczowe elementy skutecznych Landing Page
Dowiedz się, jakich elementów nie może zabraknąć na landingu, jeśli myślisz poważnie o przekuwaniu kliknięć w sprzedaż.
Rozdział 4:
Cele i rodzaje Landing Page
Zrozum jak żonglować różnymi rodzajami stron docelowych, aby Twoja firma prosperowała jak nigdy dotąd.
Rozdział 5:
Optymalizowanie Landing Page
Są skuteczne landingi i takie, które rozbijają bank. Odkryj wskazówki, które odblokowują konwersje.
Rozdział 6:
Landingi na czasie
Dopasuj swoją stronę docelową do zmieniających się wymagań klientów. Sprawdź, co działa na nich teraz.

Owocni eksperci cytowani są przez:

Zamów bezpłatne
badanie strony, by
otrzymać porady
od ekspertów

Usprawnij to na stronie firmy
i przygotuj więcej miejsca
na nowych klientów.

Zamów badanie teraz

Serwis oceniany przez klientów jako
DOSKONAŁY! w ankiecie badania opinii.

4.98 / 5