Bezpłatna konsultacja
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ę:
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.
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.
Dowiedz się Co to jest Paginacja
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
Poniżej prezentujemy przykłady największych firm tworzących swoje strony docelowej. Przeanalizujemy zalety i wady oraz pokażemy dlaczego konwertują.
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.
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:
Bardzo ciekawym pomysłem jest wykonanie wersji mobilnej. Button CTA pozostaje 'przyklejony' do spodniej części przeglądarki i jest zawsze dostępny.
Dropboxa nie trzeba przedstawiać. W swoim charakterystycznym stylu wykonany landingpage w którym dominują duże fonty oraz wektorowe grafiki.
Sekcja above the fold / przed przewinięciem / zawiera :
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.
Podstrona rejestracji
Zdecydowanie brakuje koloru i ducha strony głównej landing'a. Bardzo prosto i minimalistycznie.
Zalety:
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.
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.
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
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.
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 ;)
Zarejestruj lub zaloguj
Arcydziełem jest tutaj sposób wykonania podstrony logowania do systemu.
Zalety:
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
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 :
Agencja digital Hauerpower sp z o.o.
31-408 Kraków, Al. 29 Listopada 85
NIP 945-225-31-35
Copyrights 2010-2023
