powrot do bloga

Przykłady skutecznych landingpage - stron docelowych

Przykłady skutecznych landingpage - stron docelowych

6 przykładów najlepszych stron Landingpage

Poznaj pomysły i rozwiązania, które pomogą Ci zwiększyć konwersję Twojej strony docelowej. Zobacz jak swoje landingpage wykonali najwięksi.

Z tego artykułu dowiesz się:

  1. Na co zwrócić uwagę projektując landingpage
  2. O czym nie możesz zapomnieć uruchamiając stronę lądowania
  3. Przykłady landingpage od największych firm
  4. Airbnb
  5. Dropbox
  6. Netflix
  7. Spotify
  8. Nowoczesny landing od monday.com
  9. Oryginalna i kreatywna strona lądowania codecademy

Po co mi landingpage ?

Landingpage to strona służąca do zbierania leadów. Zawierać powinna tylko najważniejsze informacje dotyczące promowanej oferty. Budowa i konstrukcja tego typu podstrony powinna być prosta i czytelna bez przeładowania zbędnymi elementami nawigacji i grafiką, która powoduje rozproszenie od głównego zadania do którego landingpage został zaprojektowany. Zobacz również jak tworzyć i co to jest landingpage.

Dzięki skupieniu uwagi użytkownika na meritum są oni mniej podatni na skupianie uwagi na innych elementach i obszarach strony.

Na co zwrócić uwagę projektując landingpage ?

Techniczne landing page powinien być przygotowany jako dedykowana podstrona do konkretnej oferty, promowanej usługi w stylistyce strony.

Postaw na prosty design i czytelność

Użytkownik odwiedzający stronę powinien z łatwością odnaleźć podstawowe informacje oraz przekaz strony docelowej. Ważne aby mógł odnaleźć zadania jakie ma na niej wykonać np: gdzie kliknąć by zamówić demo lub wypróbować produkt online.

Nawigacja na stronie docelowej

Jak pokazują badania testów A/B wykonane prez HubSpot lepszą konwersję uzyskują strony docelowe które nie posiadają nawigacji do podstron serwisu w głównym menu.

Chwytliwe i skondensowane treści

Strona docelowa nie powinna być przeładowana zbyt dużą ilością informacji. Jej zadaniem jest przekonanie odbiorcy do prezentowanego produktu / usługi i wykonania odpowiedniego działania. Tekst powinen być wartościowy i skondensowany do kilku sekcji.

Warto pamiętać że ułożenie tekstu na projekcie tzn forma graficzna ma duże znaczenie gdyż jeżeli zadbamy o ciekawą jego prezentację zyskamy zainteresowanie samą sekcją tekstową jako walorem wizualnym.

Sekcja nagłówka

Duże nagłówki zawierające docelowy slogan i hasło to podstawowy element strony docelowej. Warto zadbać nie tylko o aspekt wizualny ale przede wszystkim o kontrast względem tła i czytelność.

Formularz oraz Call to Action

Zachącające CTA znacznie odbiegające od typowego dowiedz się więcej zadziała lepiej. Jednak musimy pamiętać by treść buttona akcji była zgodna z jego przeznaczeniem.

Stara zasada less is more mówi że im mniej tym lepiej. Sprawdza się to i w tym przypadku. Nie zmuszaj użytkownika do wypełnienia stosu pól jeżeli chce on tylko sprawdzić czy w ogóle ma po co przechodzić dalej. Uprość logowanie i rejestrację.

Logowanie i rejestracja

Jeżeli to możliwe daj użytkownikowi możliwość zarejestrowania poprzez portale społecznościowe. Era maili potwierdzających już minęła, a często też nikt nie chce wykonywać dodatkowej pracy związanej z aktywacją konta na niesprawdzony jeszcze system w wersji demo.

Social proof

Jedna z ważniejszych sekcji potwierdzająca wiarygodność usługi / produktu /. Zwykle w krótkiej formie lidera z opiniami lub logotypami zaufanych firm.

Aktywne numery kontaktowe

Częstym błędem na stronach jak i stronach landing page są nieaktywne numery kontaktowe.

O czym zapominamy tworząc landingpage ?

Kody śledzenia Google Analitycs

Bardzo ważny lubiący uciec element. Bez niego nie mamy jak śledzić efektów naszego landingpage oraz konwersji.

Wersja mobilna

Dopracowana wersja mobilna to klucz do sukcesu. Z tym zagadnieniem wiąże się nie tylko poprawność wyświetlania, choć i z tym bywa niestety różnie ale głównie chodzi o czas wczytania. Należy maksymalnie dopilnować jak najlepszego czasu wczytania oraz performance podstrony lądowania.

Jeżeli masz już stronę docelową sprawdzisz ją : gtmetrix.com oraz developers.google.com/speed/pagespeed/insights/

Testy A/B

Wykorzystując Google Analitycs oraz np mapy ciepła hotjar.com w prosty sposób możemy testować i sprawdzać jak konkretne zmiany wpływają na użytkowników go odwiedzających. W podanych poniżej przykładach zaobserwujemy jak popularne i znane firmy wprowadzają różne wersje swoich stron docelowych i co testują.

Czy zapis z formularza działa

Częstą praktyką jest brak sprawdzenia od strony użytkownika czy można się zapisać na formularz.

Również warto zaopatrzyć podstronę jak i cały serwis w zabezpieczenia antyspamowe np: camtacha

Inspirującep przykłady stron landingpage

Poniżej prezentujemy przykłady największych firm tworzących swoje strony docelowej. Przeanalizujemy zalety i wady oraz pokażemy dlaczego konwertują.

Strona docelowa od Airbnb

Widok strony docelowej to czytelny układ i przejrzysta koncepcja budowy sekcji. Strona lądowania to nowoczesny layout oraz minimalizm, którego zastosowanie zaowocowało czytelnym i projektem pełnym przestrzeni.

Zastosowanie w pierwszej sekcji baneru wideo gospodarzy zapraszających do swoich domów wzbudza zaufanie i ociepla wizerunek portalu.

Strona typu landingpage Airbnb

Podstrona rejestracji / logowania

Zamiast klasycznej podstrony dostajemy lightbox z formularzem pojawiającym się na stroną.

Brak polotu oraz typowej podstrony do ewentualnego mierzenia ruchu z Google Analitycs.

Zalety:

  • Funkcjonalność rejestracji poprzez portale społecznościowe,
  • Czytelny button CTA.

Strona logowania / rejestracji. Możliwość wykonania operacji poprzez portale społecznościowe znacznie skraca czas.

Bardzo ciekawym pomysłem jest wykonanie wersji mobilnej. Button CTA pozostaje 'przyklejony' do spodniej części przeglądarki i jest zawsze dostępny.

Button CTA w formie sticki przypięty do dolnej krawędzi przeglądarki

Strona lądowania Dropbox

Dropboxa nie trzeba przedstawiać. W swoim charakterystycznym stylu wykonany landingpage w którym dominują duże fonty oraz wektorowe grafiki.

Struktura landing'u

Sekcja above the fold / przed przewinięciem / zawiera :

  1. Nagłówek z głównym hasłem Dropbox,
  2. Krótki opis,
  3. Screen z panelu / choć równie dobrze mógłby tu znaleźć się krótki film pokazujący panel od środka.

Co ważne warto zauważyć brak głównego menu, a skupienie uwagi na buttonie CTA : Wypróbuj bezpłatnie.

Sekcja korzyści

Podzielona na 3 kolumny i prezentująca najważniejsze zalety wykorzystania Drobox

Sekcja social proof

Slider poziomy zawierający logotypy firm które skorzystały z usługi.

Sekcja oferty

W której prezentowane są najwazniejsze pakiety wraz z podstawowym opisem oraz dedykowanym buttonem CTA - wypróbuj bezpłatnie przez 30 dni.

Stopka

Zawierająca pełne menu.

Dropbox - strona lądowania.

Podstrona rejestracji

Zdecydowanie brakuje koloru i ducha strony głównej landing'a. Bardzo prosto i minimalistycznie.

Zalety:

  1. Czytelny układ - podział na dwie kolumny,
  2. W kolumnie lewej powtórzone hasło oraz najważniejsze benefity pakietu. Dodatkowo zapewnienie o pełnym dostępiedo funkcji w wersji próbnej,
  3. Funkcjonalnie buttony formularza w stanie uzupełniania podświetlane są na kolor niebieski,
  4. Możliwość rejestracji za pomocą konta Google

Podstrona rejestracji dostępna z strony landing Dropbox

Jak rozwiązał swój landingpage Netflix

Popularny serwis Netflix to dość prosty wizualnie landingpage. Wizualnie zabieg polegający na umieszczeniu centralnie CTA do zapisu na tle kolażu ekranów filmów wtapiających się w ciemne tło. Stylistycznie i graficznie raczej z poprzedniej epoki designerskiej.

Sekcje dostępne poniżej głównej tj: po przewinięciu to prezentacja zalet portalu.

Ocena wizualna

Wizualnie całość wygląda bardzo średnio. Sekcje pozbawione są buttonów CTA.

Całość landingpage będącego jednocześnie stroną główną kończy sekcja FAQ nie wiadomo czemu z zastosowanym fontem możliwym do przeczytana na ekranie kolegi obok. Przed stopką powtórzenie CTA.

Strona landingpage Netflix

Podstrona logowania / rejestracji

Utrzymana w tonie całej strony. Niczym specjalnym tutaj się nie zaskoczymy. Stylistycznie lekko niestety poprzednia epoka designerska. Plus za logowanie poprzez FB.

Strona rejestracji z możliwą rejestracją za pomocą Facebook

Spotify - przykład czytelnego landing'a.

Serwis Spotify to dobrze znany każdemu konerserowi muzyki portal. Stosuje dość ciekawe użytecznie rozwiązania. Wizualnie również bardzo dobrze wszystko w spójną całość się układa.

Sekcja baneru

Krótka sekcja zawierająca najważniejsze informację tj: główny przekaz, wyjaśnienie oraz gwarancję.

Całość wykańczają dwa buttony CTA.

Sekcja Reason to Believe

W tej sekcji prezentowane są najważniejsze zalety portalu w wersji Premium.

Sekcja wyboru pakietów

W tej sekcji czytelnie opisane zostały pakiety do wyboru dla użytkownika. Martwi jedynie brak pakietu sugerowanego

Spotify prezentująca wysoki poziom UX swoich rozwiązań

Podstrona logowania rejestracji

Dość prosta podstrona niczym nie wyróżniającą się pod względem graficznym. Z naszej strony poprawna lecz nic więcej. Brak polotu, a jak pokazują kolejne przykłady można kreatywniej wykorzystać potencjał tej podstrony.

Strona logowania do Spotify

Ciekawy, oryginalny, nowoczesny Monady

Serwis Monday.com to platforma dla firm i organizacji dzięki której mogą oni pracować w formie tasków zadaniowych. Ułatwia ona planowanie pracy i prowadzenie komunikacji wewnątrz zespołowej, pomaga zarządzać zasobami i czasem.

WIzualnie

Bardzo nowoczesny layout oraz warstwa UI. Oryginalny pomysł na podstronę logowania / rejestracji.

Sekcja baneru

W miejsce typowego slideru zastosowane zostało główne hasło oraz jego objaśnienie (potwierdzenie) podstawowa misja monday.com. Element graficznie stanowią taby - nawiązanie do funkcjonalności systemu / możliwość oznaczania zadań /.

Sekcja reason to believe

Generalnie w strukturze landingu jak i w każdym prezentowanym tutaj nic nowego się nie pojawia. Jednak w przypadku monday.com ta sekcja robi wrażenie.

Sekcje korzyści

Poniżej sekcji baneru analogiczne jak w przypadku Netflix umieszczone zostały korzyści i główne zalety portalu, jednak w tym przypadku wizualnie wygląda to zdecydowanie lepiej. Jest ciekawie, interesująco i chętnie się wczytuje w krótkie akapity opatrzone screenami z systemu (zaprojektowanego również bardzo dobrze).

Ponownie CTA i stopka

Kończąc dzieło projektanci UX oraz UI zaproponowali ponowną chęć skorzystania z portalu w opcji której nie widzimy wcześniej w sekcji baneru . To tutaj oferują 14 dni dostępu za darmo bez karty kredytowej co często się nie zdarza. Nie dość że apetyt wzrósł po zapoznaniu się z zaletami systemu to otrzymaliśmy jeszcze bardzo dobre warunki dla wersji demo ;)

Nowoczesna strona docelowa / landing / od monday.com

Zarejestruj lub zaloguj

Arcydziełem jest tutaj sposób wykonania podstrony logowania do systemu.

Zalety:

  • zamiast zwykłej strony logowania użytkownik w tle widzi wideo z pracy systemu,
  • całośc jest bardzo kontrastowa i czytelna,
  • wielkie brawa za pomysłowość i design,
  • możliwość logowania / rejestracji poprzez portale społecznościowe

Logowanie / Rejestracja w tle działającego programu

Oryginalny landingpage codecademy

Kolejnym nowoczesnym landingpage który umieściliśmy na naszej liście to strona codecademy.

Zalety:

Przede wszystkim uwagę przyciąga design. Żywe kolory oraz lekki styl daje poczucie świeżości oraz kreatywności projektanta UI. Układ landinga jest bardzo czytelny i zawiera wszystkie niezbędne sekcje.

Sekcja baneru

Układ dwukolumnowy z hasłem głównym i zaletami widocznymi już po wejściu na stronę po prawej stronie. Całość domyka guzik CTA.

Spotkaliśmy się z dwoma wersjami landingpage - wersja z filoletowymi guzikami dostępna z wyników organicznych wyszukiwania, wersja z czarnymi dostępna z adwords.

Sekcja dlaczego warto

To kafle z wizenukiem uczniów oraz odkrycie kart dla wersji PRO.

Tutaj również powtórzony został CTA.

Sekcja reason to believe

Sekcję tą poprzedza pasek z logotypami. Docelowo zastosowano tutaj układ 4 kolumn w ciekawej formie graficznej z uciętą ramką / kontynuacja stylu z sekcji z kaflami wcześniej /.

Sekcja referencji

Dość wysoka sekcja referencji, jak dla nas za wysoka. Mamy wrażenie że codecademy postawiło na ocieplane wizerunku przez zastosowanie dużego slidera z uczniami oraz ich opiniami w sekcji kolejnej.

Sekcja wyboru pakietu

Dość nisko dostępna sekcja, która mamy wrażenie ginie wśród pozostałych sekcji zawierających więcej światła i przestrzeni. Na plus pakiet rekomendowany

Nowoczesny i ciekawy landing codecademy

Podstrona rejestracji / logowania

Czytelna, utrzymana w stylistyce graficznej całej podstrony. Duża przestrzeń prawej strony równoważona przez lewą stronę z opisem korzyści.

Zalety :

  • czytelny układ,
  • możliwość powrotu do widoku wcześniej,
  • możliwość rejestracji / logowania poprzez portale społecznościowe
  • wypisanie zalet, które nie zaburza procesu logowania.

Strona logowania / rejestracji