Projektowanie Landing Page

W prostych słowach

Ten artykuł powstał nie dla grafików, a dla przedsiębiorców. Takich, którym zależy na dużym zwrocie z inwestycji w tworzenie landing page.

Jeżeli liczysz na wiedzę projektową podaną w prostych słowach, to klikaj i czytaj.

Projektowanie 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

Streszczenie:

Słabe wyniki bardzo często wynikają z tego, że twórcy landingów próbują osiągnąć na nich więcej niż jeden cel. Jeśli możesz uprościć projekt i zachować przy tym wszystkie kluczowe informacje - zrób to. Każde ogniwo projektu powinno zbliżać odwiedzających do konkretnego działania.

Mariusz Słowik
Head of design

> landing page > projektowanie landing-page

Dowiedz się jak projektować skuteczne Landing Pages i twórz strony, którym nie można się oprzeć.

Nie martw się, jeśli nie jesteś projektantem. Tworzenie Landing Page omawiamy w tak lekkostrawnej formie, że rozumieją to nawet oporni przedsiębiorcy.

Podstawowe terminy

Czym jest Landing Page i konwersja?

Strona docelowa, tzw. LANDING PAGE to pojedyncza strona, która ma jeden, jasno określony cel. Najczęściej jest to zbieranie informacji kontaktowych (leadów) od odwiedzających poprzez formularz lub ankietę.

Kiedy odeślesz ludzi na landing zamiast na stronę główną sprawisz, że nic nie będzie ich rozpraszało. Skupią się na wykonaniu akcji, której od nich oczekujesz.

Zamiast błądzić po stronie internetowej, złożą zamówienie na stronie docelowej albo wypełnią formularz.

Konwersja to działanie na stronie, które realizuje ten cel. Współ­czyn­nik kon­wer­sji (z ang. conver­sion rate) jest to licz­ba zre­ali­zo­wa­nych celów podzie­lo­na przez licz­bę odbior­ców.

Przypuśćmy, że Twoim celem biznesowym jest rozbudowa listy potencjalnych klientów. Konwersją będzie więc wysłanie przez odwiedzającego formularza, w którym podzieli się z Tobą swoimi danymi.

Jeśli stawiasz na większą sprzedaż produktu, Twoją konwersją będzie opłacenie przez użytkownika złożonego zamówienia.

Tworzenie Landing Page – kluczowe elementy

Tego nie może zabraknąć na żadnej stronie docelowej.

Włączając te elementy, możesz stworzyć landing, który jest zoptymalizowany pod kątem konwersji i napędza wyniki dla Twojego biznesu.

1. Tytuł i podtytuł

Od wejścia informują co oferujesz. Dają użytkownikowi dobry powód, by czytał dalej.

8 na 10 osób przeczyta Twój nagłówek, ale tylko 2 na 10 przejdą dalej. Nagłówek musi trafiać w sedno, być jasny i zwięzły.

Trzeba w nim pokazać główną korzyść, jaką poczuje odbiorca oferty.

Poniższy przykład po mistrzowsku pokazuje, jak tworzyć tytuły skoncentrowane na klienta.

Marka Lightness zamiast standardowych: “Profesjonalnych warsztatów z employer brandingu”, postawiła na… "Ty też możesz być lepszym pracodawcą. I to od dziś".

2. Materiały wizualne (design)

Pokazują kontekst oferty. Prezentują jej szczegóły lub wspierają główny przekaz, jaki chcesz przekazać odwiedzającym.

Mamy dla Ciebie garść inspiracji na elementy wizualne projektu.

Film, który przedstawia Twój produkt lub usługę.

1

Infografika, która wizualnie wyjaśnia, jak działa Twój produkt lub usługa.

3

Zdjęcia ludzi (podnoszą konwersję średnio o 102,5%). Zwykle lepiej zapadają w pamięć i zwiększają empatię odbiorców.

5

Pokaz slajdów prowadzący odwiedzających krok po kroku przez Twoją ofertę.

2

Mapa wskazująca, gdzie Twój produkt jest dostępny.

4

Zdjęcia produktu i wizualizacje pokazujące to, czego nie widać na pierwszy rzut oka.

6

3. Oferta z dowodami społecznymi

Taka, której ciężko się oprzeć.

Ostatecznie to od Twojej oferty, i tego jak ją przedstawisz, będą zależały wyniki landingu.

Porywający tytuł i design już zrobiły swoją robotę. Zatrzymały użytkownika na stronie docelowej.

Czas sprawić, żeby propozycja, jaką dajesz odwiedzającym była zbyt dobra, by z niej tak po prostu zrezygnować.

Dobrą ofertę na Landing Page poznasz po tym, że jest:

1. Łatwa do zrozumienia.

2. Dopasowana do potrzeb, problemów i oczekiwań konkretnej grupy odbiorców.

3. Poparta dowodami społecznymi (np. opiniami, rekomendacjami, logami klientów, oceną w postaci gwiazdek, nagrodami, liczbą obsłużonych klientów, latami doświadczenia w branży.

4. Mocne wezwanie do działania

Skuś odwiedzającego do naciśnięcia przycisku lub wypełnienia formularza. Złóż mu obietnicę. Pokaż, że warto skontaktować się z Twoją marką.

My robimy to tak.

5. Przycisk akcji (CTA) lub formularz

Jasno mówi użytkownikowi co ma zrobić.

Dobry przycisk CTA jest:

  • Konkretny - zamiast: “Zamów”, idź w stronę: “Wyślijcie mi niezobowiązującą ofertę”.
  • Krótki - na przycisku zmieści się mało tekstu.
  • Kontrastowy - przycisk ma się wyraźnie odróżniać od tła i maksymalnie zwracać uwagę.

Dobrze zaprojektowany układ Landing Page zazwyczaj zawiera wiele przycisków CTA na stronie, aby zwiększyć prawdopodobieństwo konwersji.

Ważne, żeby każdy z nich realizował dokładnie ten sam cel.

Ostatnia sekcja CTA powinna pozostawić niezapomniane ostatnie wrażenie poprzez ponowne przedstawienie wartości, którą zamierzasz dostarczyć.

Jeśli zdecydujesz się na formularz, stwórz maksymalnie 5 pól do wypełnienia. Więcej już przy pierwszym spojrzeniu zniechęca i przytłacza.

Etapy projektowania Landing Page

W skrócie, strona docelowa skoncentrowana na konwersji to taka, która jest zarówno atrakcyjna wizualnie, jak i funkcjonalna. Prowadzi odwiedzających do podjęcia działania.

Jak ją zrobić?

Sprowadziliśmy projektowanie Landing Page do 4 głównych etapów.

Architektura informacji

Nikt nie chce przewijać ściany tekstu.

Kiedy masz dużo treści, ważne jest, aby pomyśleć o tym, jak zaprezentować je w sposób, który jest łatwy do skonsumowania.

Dzielenie tekstu na mniejsze sekcje, dodanie obrazów i użycie typografii do stworzenia hierarchii sprawi, że treść będzie bardziej strawna.

Istnieją dwa główne wzorce, którymi kierują się odwiedzający podczas czytania online: Wzór F i Wzór Z.

Wzorzec F stosuj na stronach docelowych bogatych w tekst.

Wzór w kształcie litery F jest najpopularniejszą hierarchią informacji w sieci nie bez powodu.

Badanie przeprowadzone przy użyciu oprogramowania do śledzenia wzroku wykazało, że większość ludzi w naturalny sposób czyta stronę w sposób zgodny z tym modelem.

Z wzorca Z korzystaj na stronach docelowych bogatych w elementy wizualne.

Jeśli Twoja strona zawiera mniej tekstu, a więcej grafiki, lepiej zaprojektować ją z wykorzystaniem wzoru Z.

Wystarczy, że będziesz stosował na przemian bloki treści wyrównane do lewej i prawej strony.

Jest to typowy sposób, w jaki czytelnicy podchodzą do strony z mniejszą ilością tekstu.

Hierarchia wizualna

Wspomaga architekturę informacji.

Biorąc się za tworzenie Landing Page musisz wiedzieć, że większość ludzi nie czyta każdego słowa na stronie. Przewijają ją i skanują treść w poszukiwaniu czegoś, co ich zainteresuje.

Dlatego tak ważna jest silna hierarchia wizualna projektu. Odwiedzający mogą dzięki niej łatwo znaleźć ważne informacje.

Zastanawiasz się, jak mądrze zaprojektować hierarchię wizualną? Wykorzystaj do tego:

  • Skalę.
    Nagłówki powinny być duże i pogrubione. Podtytuły nieco mniejsze. Akapity standardowe.
  • Kontrast.
    Kontrastującym z resztą strony kolorem lub odcieniem możesz dać odwiedzającym znak, że pewne elementy są ważniejsze od innych.
  • P r z e s t r z e ń .
    Części strony, które zajmują tyle samo miejsca są uznawane jako równie ważne. Jeśli któraś z nich zajmuje więcej przestrzeni na stronie niż inne, jest postrzegana jako ważniejsza.
  • Spójność.
    Kiedy już opracujesz swoją hierarchię wizualną, trzymaj się jej konsekwentnie na całej stronie.­­ Wtedy użytkownicy będą mogli ją szybko wychwycić i podążać za nią.

Hierarchia wizualna powinna być jasna i zwięzła, prowadząc oko naturalnie od jednego elementu do następnego w sposób, który ma sens.

Z silną hierarchię wizualną, Twój Landing Page będzie skuteczniejszy w pozyskiwaniu kontaktów do potencjalnych klientów i zwiększaniu sprzedaży.

Nie pozwoli przeoczyć najważniejszych części strony.

Projekt graficzny

Zadbaj o przyjemną, kuszącą formę.

Zastanów się, jakie emocje chcesz, aby odwiedzający czuli będąc na Twojej stronie docelowej. Wykorzystaj projekt, żeby je wzbudzić, a przy tym jasno komunikować, co oferujesz.

Przyciągaj uwagę wykorzystując whitespace

Strony docelowe są często przesycone treścią. Zbyt wiele grafik, zdjęć, filmów, kolorów i dużych bloków tekstu może przytłoczyć i rozpraszać odwiedzających.

Wybawieniem jest whitespace (inaczej biała lub negatywna przestrzeń), która rozbija treść i ułatwia jej czytanie.

Daj najważniejszym korzyściom i wezwaniom do działania więcej wolnego miejsca.

Zachowaj prostotę

Najlepsze strony to często te najprostsze.

Jeśli możesz uprościć projekt i zachować przy tym wszystkie kluczowe informacje - zrób to. Wspieraj treść, zamiast odwracać od niej uwagę.

Każde ogniwo projektu powinno zbliżać odwiedzających do konkretnego działania (konwersji).

Zrób genialne pierwsze wrażenie

Żeby tego dokonać, musisz doszlifować tę część, którą użytkownik zobaczy na ekranie po załadowaniu strony (above-the-fold). Jeszcze zanim zacznie ją przewijać.

U nas wygląda to tak.

Mamy jasny nagłówek, w którym dajemy śmiałą obietnicę. Odwołujemy się do uczuć odbiorcy, informując przy okazji, czego dotyczy nasza oferta.

Umieściliśmy też krótki opis tego, co robimy. Wstawiliśmy loga firm. Daliśmy też przycisk akcji, w który aż chce się kliknąć, bo nie wiąże się on z absolutnie żadnym ryzykiem.

Takie zabiegi dają nam pewność, że odwiedzający wiedzą, o co chodzi w Twojej firmie.

Jeśli podoba Ci się to, co widzisz, spodoba Ci się także strona, którą dla Ciebie zaprojektujemy. Napisz do nas.

Zrezygnuj z linków kierujących w inne miejsca

Nawigacja czy linki do mediów społecznościowych mogą odciągać użytkowników od działania. Najlepiej będzie, jeśli je usuniesz z Landing Page.

Ważne jest, aby nie tylko mieć referencje. Trzeba je jeszcze odpowiednio pokazać.

Opinie powinny być nieco większe niż tekst zwykłego akapitu.

Dobrze, kiedy mają dużo wolnego miejsca wokół siebie, aby łatwo można było je zauważyć.

Używaj formularzy wieloetapowych

Wieloetapowe formularze są mniej zastraszające i zwiększają szanse na wypełnienie informacji przez odwiedzających.

Dają też szansę, by bardziej wrażliwe lub trudniejsze pytania zadać później. Kiedy już odwiedzający przejdą przez pierwsze, łatwe i przyjemne, pola.

Ważne jest, by w tego typu formularzach umieszczać u góry pasek postępu. Pomoże on zorientować się, na jakim etapie jest teraz odbiorca i ile pytań mu zostało do końca.

Testy

Sprawdź, czy landing ma szansę na sukces.

Przed uruchomieniem landingu w Internecie warto sprawdzić, co myślą o nim Twoi obecni klienci.

Sprawdzić, czy dostrzegli przekaz, na którym Ci zależało. Czy jest coś, to chcieliby zmienić.

Jest też inne wyjście - testy A/B. Porównasz dzięki nim skuteczność dwóch wersji swojej strony.

Muszą się one różnić tylko jednym elementem. Inaczej nie będziesz w stanie stwierdzić co dokładnie sprawiło, że jedna wersja jest lepsza od drugiej.

Tym elementem może być treść, kolor przycisku, obraz lub inne ogniwo strony, które chcesz sprawdzić.

Następnym krokiem jest narzędzie takiego jak Google Analytics do śledzenia, która wersja osiąga lepszą konwersję.

Jest jeszcze jeden szybki test - test zmrużenia oka. To pomocny sposób na sprawdzenie, czy projekt strony docelowej jest skuteczny.

Powiększ projekt i zmruż oczy. Tak, by nie móc przeczytać żadnej litery.

Jeśli nadal będziesz w stanie zorientować się, czego dotyczy Twoja strona docelowa, to znaczy, że obrazy spełniają swoją rolę.

Najlepsze praktyki tworzenia Landing Page

Istnieją strategie, dzięki którym Landing Page może zbierać dla Ciebie jeszcze więcej klientów.

Skup się całkowicie na jednym celu.

Słabe wyniki stron docelowych bardzo często wynikają z tego, że ich twórcy próbują osiągnąć na nich więcej niż jedno działanie na raz.

Stwórz dobrą argumentację.

Zastanów się jakich informacji potrzebuje użytkownik, żeby wykonać działanie, na którym Ci zależy.

Jakie argumenty do niego przemówią? W jakiej kolejności je przedstawić, żeby tworzyły logiczną całość?

Umieść przycisk akcji (CTA) wysoko.

Powinien być zawsze w zasięgu użytkownika.

Najlepiej, kiedy rzuca się w oczy od razu po załadowaniu strony. Odległość większa niż dwa scrollowania to za dużo.

Daj coś cennego w zamian za dane.

Najbardziej udane strony docelowe do zdobywania kontaktów oferują odwiedzającym coś wartościowego w zamian za imię i adres e-mail.

Te darmowe elementy oferty (lead magnets) zazwyczaj przybierają formę materiału do pobrania, rejestracji na bezpłatny webinar lub konsultacji online.

Jeśli dasz odwiedzającym za darmo więcej, niż spodziewają się otrzymać, ciężko będzie im się oprzeć kliknięciu.

A jak dodasz do tego jeszcze poczucie pilności, wzniesiesz swój landing na wyżyny. Strach przed przegapieniem okazji potężnie motywuje do działania.

Zazwyczaj strona docelowa to część większej kampanii. Jest jednym z wielu punktów styku z Twoją marką.

Zadbaj by przekaz, obraz i ogólny klimat miejsca, z którego kierujesz użytkowników na swój landing był spójny z tym, co zobaczą na stronie docelowej.

Inaczej mogą poczuć się oszukani i zawiedzeni. A to nie sprzyja konwersji.

Walcz z obiekcjami.

Pozbywaj się barier, które mogłyby powstrzymać użytkowników przed wypełnieniem formularza, zamówieniem produktu lub inną akcją, do której chcesz ich zachęcić.

Jeżeli przeszkodą jest cena, zastosuj gwarancję.

Jeśli brak znajomości marki, pokaż dowód społeczny.

Jeżeli nieufność, pomóc mogą proszczone formularze, w których wystarczy podać imię i adres e-mail.

Istotne parametry techniczne

Myśląc o projektowaniu Landing Pages nie da się pominąć spraw technicznych. Już w fazie projektu trzeba brać pod uwagę kwestię szybkości, dostosowania do urządzeń mobilnych i dostępności strony.

Szybkość strony

Szybki czas ładowania jest kluczowy dla konwersji na Landing Pages. W szczególności, kiedy są one wyświetlane na tabletach lub iPhone'ach.

Powolny Landing Page

45.4% - Mniejsze prawdopodobieństwo sprzedaży

36.8% - Mniejsza szansa, że użytkownik wróci na stronę

11.9% - Prawdopodobieństwo, że użytkownik poleci stronę znajomym

Ludzie znacznie krócej utrzymują skupienie korzystając z telefonu komórkowego niż z komputera stacjonarnego.

Średnio połowa ruchu na stronie to ruch mobilny i to bez uwzględniania użytkowników tabletów.

Responsywność

Responsywność polega na tym, że strona wygląda dobrze i jest wygodna
w korzystaniu bez względu na rozmiar ekranu, na którym jest wyświetlana.

Dostępność strony

­Projektowanie skoncentrowane na konwersji powinno być zawsze dostępne dla wszystkich, niezależnie od ich niepełnosprawności.

Upewnij się, że treść jest czytelna. A wszystkie ważne grafiki mają znaczniki alt (tekst alternatywny, który wyświetla się, kiedy obraz nie może być z jakiegoś powodu załadowany).

Przeszliśmy wspólnie przez wszystkie kluczowe zasady projektowania Landing Pages. Jeśli nadal czujesz niedosyt lub chciałbyś przekazać misję zaprojektowania swojej strony docelowej specjalistom, zajrzyj do naszej oferty.

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