Wygląd landing page’a – jak zrobić to lepiej

Mniej niż 15 sekund – tyle właśnie przeciętny użytkownik poświęca na pierwsze przyjrzenie się landing page'owi. I tylko tyle masz czasu, aby wygląd landing page'a przyciągnął uwagę i zachęcił do pozostania na stronie dłużej – prawdopodobnie... całe 52 sekundy.

Wygląd landing page'a – dlaczego go ulepszać?

To właśnie czas jest (prawie) najważniejszym powodem, dla którego warto zadbać o wygląd landing page'a. Jego ulepszenie może zauważalnie wpłynąć na wynik twojej kampanii. Decydująca jest przy tym zwłaszcza pierwsza sekcja strony docelowej. W niej powinno zawrzeć się CTA – wezwanie do działania – i komunikat, który jasno opowie o twojej ofercie bądź produkcie. Dla wielu odwiedzających to wystarczy, aby dać się przekonać. Ale co z resztą? Co, jeśli potrzeba czegoś więcej niż jedna sekcja? Jeśli landing page musi przekazać więcej informacji, aby zaintrygować i nakłonić do podjęcia działania, które zakończy się konwersją? Pisać? Dodać więcej zdjęć? W tym artykule odpowiem na te pytania i przede wszystkim wyjaśnię, dlaczego i jak ulepszyć wygląd landing page'a. 

DODATKOWO: Na dole tego artykułu znajdziesz odnośnik do webinaru, podczas którego specjaliści Landingi omawiali, jak uatrakcyjnić stronę docelową. Jeżeli więc należysz do osób, które wolą przekaz multimedialny od pisanego, koniecznie sprawdź to wideo! Poza tym (podobnie jak w przypadku wszystkich innych funkcji dostępnych w Landingi) szczegółowe instrukcje dotyczące możliwości edytora i platformy znajdziesz jak zwykle w naszym Centrum Pomocy.

Założeniem tego artykułu jest przedstawienie sposobów i powodów dla ulepszania oraz uatrakcyjniania wyglądu landing page'a, ale pamiętaj, że naczelną zasadą jest umiar. Nietrudno jest przedobrzyć – jeżeli skupisz się na efektach specjalnych, główny cel landing page'a może szybko zostać przez nie przysłonięty. "Zabiegi upiększające" powinny jedynie umożliwiać łatwiejsze przyswojenie treści i informacji, które dla odwiedzających zawsze są najważniejsze.

Metody uatrakcyjniania strony docelowej omówię, opierając się na funkcjach dostępnych w edytorze Landingi. Bez problemu możesz jednak te rozwiązania zastosować także gdzie indziej. 

Zacznijmy od przycisku "Stwórz nowy landing" i szablonu landing page'a, który najbardziej odpowiada twoim potrzebom. Szablony to fantastyczne ułatwienie w budowaniu stron docelowych i coś, czym kreatory landing page'y zyskują przewagę nad narzędziami, takimi jak WordPress. Są zaprojektowane przez profesjonalistów, którzy zadbali o to, aby przyciągały wzrok i przedstawiały informacje klarownie i atrakcyjnie. Oczywiście możesz je edytować dowolnie! Aby dowiedzieć się więcej na ten temat, zobacz nasz webinar Jak tworzyć landing page na podstawie szablonu – dobre praktyki.

Nagłówki i podtytuły

Mogłoby się wydawać, że obecność i ważność nagłówków oraz podtytułów na landing page'u są oczywiste. A jednak pracując z klientami, tak często spotykałem się z pomijaniem tego zagadnienia, że trudno to zliczyć. 

Nagłówki powinny być duże, przyciągające wzrok i zapowiadające następującą po nim część landing page'a. Dobry nagłówek na stronie docelowej łączy dwie rzeczy: informuje oraz zachęca do działania. Jeżeli uzupełnia swoim przekazem przyciski CTA, jest właściwie idealny. Stworzenie kilku takich nagłówków może być jednak trudne – i tutaj do gry wkraczają podtytuły. 

Nagłówek może być krótki. Trzy–cztery słowa, slogan, motto. Tuż pod nim znajduje się natomiast idealne miejsce na podtytuł: dłuższy, pisany czcionką w mniejszym rozmiarze, ale odróżniający się od treści kolejnego akapitu. Zobacz kilka naszych przykładów połączeń nagłówka z podtytułem:

Czy używasz ich na swoim landing page'u?

Nie zapomnij także o oznaczeniu tytułu, nagłówków i kolejnych podtytułów tagami (H1, H2, H23 itd.). Obecność lub brak tych tagów może istotnie wpłynąć na koszty kliknięć w reklamę twojej strony docelowej. Przeczytaj więcej o ustawienia SEO i optymalizacji strony. 

Sekcja rozwijana – więcej dzięki jednemu kliknięciu

Załóżmy, że po zapoznaniu się z twoją ofertą na landing page'u w odwiedzającym zrodziły się dotyczące jej pytania. Postawienie odpowiedzi na nie może być swojego rodzaju "być albo nie być" dla tego, co oferujesz. Aby uspokoić potencjalnych klientów, jeszcze zanim zaczną mieć wątpliwości, stwórz sekcję pytań i odpowiedzi, tzw. FAQ. 

Zastanów się nad potencjonalnymi problemami. Czy mogę otrzymać zwrot pieniędzy? Czy muszę płacić za dodatkowe funkcje? Kiedy otrzymam zamówienie? Czy mogę wymienić towar? 

Jeżeli odpowiadasz na jedno, dwa pytania, nie potrzebujesz niczego specjalnego. Jeśli jednak jest ich więcej, a odpowiedzi są długie i bardziej złożone, może skończyć się to ścianą tekstu, która nie tylko będzie wyglądać zniechęcająco, ale także odciągnie użytkowników od CTA. To idealny moment, aby landing page wzbogacić o sekcje rozwijane.

Jak wygląda sekcja rozwijana? To niewielki nagłówek z pytaniem oraz odpowiedź, która jest ukryta, dopóki użytkownik nie kliknie w sekcję. 

Tak może wyglądać:

Użytkownicy, którzy będą poszukiwali dodatkowych informacji przed dokonaniem zakupu lub spełnieniem żądanego wezwania do działania, łatwo znajdą je w odpowiedniej sekcji landing page'a. Pozostałym nie będzie przeszkadzała ich obecność.

Sprawdź, jak wzbogacić landing page o sekcję rozwijaną.

Galeria obrazów – obraz wart więcej niż tysiąc słów

O tym, jak obrazy i zdjęcia są istotne na landing page'u, nie trzeba przypominać. Pokazują produkt i pozwalają przyjrzeć się jego detalom. Szczególnie jest to istotne tuż przed ostateczną decyzją o zakupie – to wtedy użytkownik zastanawia się, czy to, co chce kupić, jest rzeczywiście takie, jak widzi na zdjęciu.

Podczas wizyty w fizycznym sklepie potencjalny klient może ściągnąć produkt z półki i przyjrzeć się mu z każdej strony. W sieci nie jest to takie proste. Aby ukazać produkt w pełnej krasie, na landing page'u musisz wykorzystać dodatkowe zdjęcia. Podobnie jednak jak w przypadku FAQ duża liczba obrazów, umieszczonych jeden pod drugim, niepotrzebnie rozciągnie stronę docelową i zamiast być zachęcająca, sprawi, że oglądanie ich będzie żmudne i niewygodne. Nikt z nas nie lubi przecież przewijać strony w nieskończoność...

Zgromadzenie takich zdjęć w jednym miejscu – w galerii – to zdecydowanie lepsza opcja. Strzałki nawigacyjne dają odwiedzającemu pełną kontrolę nad tym, w jakim tempie chce oglądać obrazy i czy zobaczy je wszystkie. Galeria to również ciekawy dodatek wizualny do landing page'a.

Sprawdź, jak uatrakcyjnić landing page dzięki galerii obrazów.

Slajder – aby wyróżnić to, co ważne

Dodając omówioną wyżej galerię do landing page'a, oddajesz kontrolę nad oglądaniem obrazów w ręce użytkownika. Czasem jednak zależy ci na tym, aby odwiedzający na pewno zobaczył konkretne zdjęcia. Podobnie jak poprzednio – można by je po prostu dodać jedno pod drugim. Ale zajmie to zdecydowanie więcej miejsca na landing page'u niż powinno. Można to zrobić lepiej, w dodatku wykorzystując efekt animacji, która zdynamizuje i uatrakcyjni stronę. 

Jeżeli ci na tym zależy – zastosuj na landing page'u slajder. Obrazy do niego dodane będą zmieniać się automatycznie, przyciągając uwagę klientów. Możesz wykorzystać same zdjęcia lub (co jeszcze lepsze) zdjęcia z tekstem w formie nagłówków lub przedstawieniem najważniejszych cech. 

Landing page'e wykorzystujące slajdery w pierwszej sekcji mają wyraźnie lepsze wyniki konwersji!

Przeczytaj, jak dodać slajder do landing page'a.

Unsplash – oszczędność czasu i wysoka jakość obrazu

Ten punkt nie omawia funkcji, która bezpośrednio poprawia wygląd landing page'a, ale skoro wspomniałem już o obrazach, galerii i slajderze, myślę, że warto przedstawić też Unsplash. 

Możliwe, że przy budowaniu strony już kiedyś napotkałeś ten problem: Potrzebuję obraz, ale nie mam żadnego własnego. Skąd wziąć darmowe zdjęcie? Rozwiązaniem jest Unsplash – darmowa galeria stockowych obrazów, dostępna bezpośrednio w edytorze Landingi. Zdjęcia tylko czekają na użycie! Skoro więc obrazy poprawiające wygląd landing page'a są pod ręką, po co tracić czas na szukanie idealnej grafiki w całym Internecie?

Lightbox – dodatkowe informacje

Na pewno wiesz, czym są pop-upy. Bywają irytujące, nagle wyskakując i zasłaniając landing page'a, ale są też skuteczne – przyczyniają się do znacznego zwiększenia współczynnika konwersji. Ich funkcja sprowadza się jednak przede wszystkim do wzmocnienia wezwania do działania. 

Podobne do pop-upów, jednak mniej drażniące, są lightboxy. Wyświetlają się tylko wtedy, gdy użytkownik chce je zobaczyć. Dzięki nim możesz znacznie zwiększyć ilość informacji przekazywanych klientom. 

Załóżmy, że landing page promuje produkt o wielu skomplikowanych funkcjach. Zamiast dodawać kolejne sekcje i bloki tekstu opisujące je wszystkie, możesz te treści umieścić na lightboxach i "ukryć" pod ikonami. Ikona będzie symbolem przedstawiającym daną funkcjonalność, a po jej kliknięciu użytkownik zobaczy dodatkowe okienko ze szczegółowym opisem. 

Lightboxy nie tylko ułatwiają udostępnianie informacji, ale także pozwalają na skonstruowanie bardziej przejrzystego i atrakcyjnego wyglądu landing page'a. 

Kliknij tutaj, żeby sprawdzić, jak poprawić landing page'a dzięki lightboksom.

PageInsider – sprawdź, czy nie zabrnąłeś za daleko

Wszystko, co do tej pory opisałem, pomaga poprawiać wygląd landing page'a i jego atrakcyjność w oczach potencjalnych klientów. Nietrudno w dodawaniu kolejnych ulepszeń jednak stracić umiar i osiągnąć rezultat odwrotny od zamierzonego – łatwo wśród wszystkich ekstra funkcji, animacji oraz grafik zgubić CTA i ważne informacje.

Skąd więc wiedzieć, że nowy design landing page'a jest lepszy, a nie przesadzony? Co zrobić, aby odwiedzający nie czuli się zagubieni i potrafili odnaleźć to, po co przyszli?

Czy istnieje sposób, aby sprawdzić, czy projekt strony docelowej jest dobrze wyważony i to, co ważne, nie straci się w nim?

Tak, istnieje!

Nazywa się PageInsider™ i jest opartym na sztucznej inteligencji narzędziem stworzonym dzięki uczeniu maszynowemu. Jedno kliknięcie wystarcza, aby PageInsider™ przeanalizował wygląd landing page'a i ocenił jego przejrzystość. Wskaże ci, które elementy przykuwają uwagę odwiedzającego, i przedstawi wyniki w wartości procentowej.

Dzięki wykorzystaniu funkcji PageInsider™ dowiesz się, czy na twojej stronie docelowej nie dzieje się za dużo, czy możesz wzbogacić landing page o więcej elementów.

Zobacz nasz webinar Uatrakcyjnij stronę docelową przez zastosowanie dodatkowych funkcjonalności w Landingi, aby dowiedzieć się, jak zaimplementować niektóre z wyżej wymienionych funkcji na swoim landing page'u.

Nie wiesz, jak zacząć?
Przetestuj nas!

Twórz z nami wysoko konwertujące kampanie

Wypróbuj za darmoDemo