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.

Czym jest Landing Page i konwersja?

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.

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.

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.

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ś".

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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ą.

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.

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.

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.

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ę.

Ż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.

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

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ć.

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.

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ę.

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.

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

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.

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.

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

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

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.

­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.