6

Jak stworzyć skuteczny landing page? Poznaj zasady, zobacz przykłady

Jeśli już wiesz, że jednym z elementów skutecznej kampanii digital może być (bo nie musi!) landing page, czas dowiedzieć się, jak powinien wyglądać. Poznaj zasady projektowania maksymalnie skutecznych stron docelowych.

Landing page, czyli strona docelowa Twojej kampanii, powinna służyć jednemu, określonemu celowi kampanii. Jeśli zaczniesz projektować bez jasnego wyobrażenia o tym, do jakiej akcji chcesz skłonić użytkowników, prawdopodobnie nie odniesiesz sukcesu. Stanowi to podstawę projektu zorientowanego na konwersję (Conversion-Centered Design).

O co chodzi? Oto trzy podstawowe zasady Conversion-Centered Design ☕☕☕

Landing page – jak zrobić skuteczny? Zasady

☕ Zasada #1: Zatrzymaj uwagę

Cała Twoja strona powinna przekonać odwiedzającego do podjęcia określonej akcji. To działanie może polegać na pobraniu e-booka, skorzystaniu z usługi, zakupie produktu lub cokolwiek innego, co ma na celu Twoja kampania.

I każdy element powinien przyczyniać się do tego celu. Im mniej zakłóceń lub możliwości wyjścia poza pożądaną ścieżkę do celu, tym lepsze wyniki.

1:1. Taki współczynnik uwagi powinna mieć Twoja strona docelowa. Czym jest współczynnik uwagi? To stosunek rzeczy, które użytkownik może zrobić, do liczby rzeczy, które użytkownik musi zrobić – co w naszym przypadku powinno oznaczać jedną rzecz.

Dlatego właśnie najlepszym rozwiązaniem jest kierowanie ruchu na dedykowany celowi kampanii landing page. Pomaga to znacznie ograniczyć rozproszenie. W większości przypadków strona główna prezentuje wiele informacji, wiele celów i wiele rozpraszaczy.

Jak uzyskać współczynnik uwagi strony docelowej wynoszący 1: 1?

Rzuć okiem na szkielet strony docelowej poniżej. Ma jeden przycisk wezwania do działania (CTA), więc jest tu tylko jedna rzecz – stosunek uwagi 1: 1. Cel strony jest bardzo jasny: kliknij przycisk wezwania do działania.

wireframe

Wyjątkiem są bardzo długie strony docelowe. Na nich możesz wielokrotnie powtórzyć button prowadzący do kluczowej akcji.

Usuń pasek nawigacyjny

Fakty:

  • Yuppiechef zaobserwował 100% wzrost współczynników konwersji (z 3% do 6%) poprzez usunięcie paska nawigacyjnego
  • Career Point College usunął górny pasek nawigacyjny i zmodyfikował układ formularzy, co zwiększyło współczynnik konwersji o 336%.
  • Współczynnik konwersji SparkPage skoczył z 9,2% do 17,6% w ciągu miesiąca, w którym przeprowadzono test eliminujący nawigację.

Ponieważ strona docelowa służy tylko jednemu celowi, użytkownicy powinni na niej pozostać – żadne możliwości ucieczki poza pożądaną ścieżkę do celu nie powinny rozpraszać użytkownika. Jeśli decydujesz się na pasek nawigacji np. w przypadku rozbudowanego, długiego landingu, kieruj wyłącznie do sekcji znajdujących się w jego obrębie.

Korzystaj z autentycznych, wywołujących emocje lub skojarzenia obrazów

Użytkownicy widzą, kiedy zdjęcie pochodzi ze stocka. Mają uczucie, że gdzieś już widzieli tę twarz. Często też nie wywołuje w nich to żadnych odczuć, poza rozbawieniem – czego przykładem jest profil Dziwny pan ze stocku.

jak zaprojektować skuteczny landing page

Chociaż czasami trudno się bez nich obejść, obrazy stockowe mogą zmniejszyć odczuwaną przez odbiorców autentyczność, wyjątkowość i wartość marki. Zastąp takie zdjęcia niestandardowymi obrazami o wysokiej jakości. Możesz nawet pomyśleć o dedykowanych ilustracjach tworzonych przez grafika. 

Niech Twoje wezwania do działania przemówią

Nie przywiązuj się do domyślnego tekstu “Prześlij”/”Zatwierdź” na przycisku wezwania do działania.

jak stworzyć konwertujący landing page

źródło: https://blog.hubspot.com/blog/tabid/6307/bid/6737/Don-t-Submit-To-Landing-Page-Button-Text.aspx/

HubSpot przetestował przyciski z tekstem “submit” oraz wersje alternatywne z inną frazą. Jak widać powyżej, nudne, stare “submit” nie ma żadnego potwierdzenia w praktyce.

☕  Zasada #2: Nie zapomnij o kontekście

Często mówi się, że sam content nie wystarczy – liczy się “content & context”. O co chodzi? Kontekst strony powinien być zauważalny, mocny, przekonujący. Chodzi o to, aby treść była zgodna ze stanem wiedzy i potrzebami użytkownika.

Narzędzie (najczęściej reklama), które zostało użyte do sprowadzenia użytkownika na stronę dała mu pewien zarys, ale nie szczegóły. Nasze zadanie polega na utrzymaniu komunikatu spójnego z reklamą, a także na dostarczaniu większej ilości informacji. Informacji, które jednocześnie wciąż mają moc perswazyjną.

Projekt skutecznego landing page‘a powinien również utrzymywać tożsamość kampanii i wizerunek marki – zarówno pod względem designu, jak i komunikacji. Brand Voice odnosi się do tonu komunikacji i stylu pisania. Oto przewodnik, który może pomóc Ci w tworzeniu właściwego głosu dla Twojej marki. Ton głosu kampanii powinien być taki sam jak w przypadku marki, ponieważ ostatecznie pomaga w budowaniu właściwego przekazu i zwiększa autentyczność, wpływając na pożądany efekt.

Co więcej – ton marki pozwala reinterpretować nagłówek – podstawowy komunikat na Twoim landingu. Następnie użytkownik może przejść do pozostałych treści.

Znaczenie nagłówka

Nagłówek jest głównym środkiem, dzięki któremu możemy wywiązać się z obietnicy i przesłania, które dostarczyliśmy za pośrednictwem reklamy. W końcu użytkownicy byli wystarczająco zainteresowani głównym motywem kampanii. Jest więc mniejsza szansa, że ​​odejdą, jeśli nadal będziemy ich przekonywać za pomocą większej ilości informacji  (jeśli reklama nie złoży fałszywych obietnic). Dlaczego nie wykorzystać tego na naszą korzyść?

Nagłówek powinien również przekazać dokładny cel kampanii i wyjaśnić, o co chodzi w stronie, na której właśnie wylądowaliśmy. To wyjaśnimy dokładnie trochę później, natomiast teraz skupmy się na podstawowych zasadach  budowania nagłówków. 

Nagłówek powinien pojawić się above the fold  i powinien być najbardziej wyraźnym fragmentem tekstu.co to jest landing page

źródło: http://www.globaldots.com/fold-time/

Bardzo dobrym tego przykładem jest strona docelowa Evernote. Ma wyraźny nagłówek, który mówi o ostatecznej użyteczności produktu, a podtytuł omawia bardziej szczegółowo, o co chodzi.  
jak zrobić skuteczny landing page

☕ Zasada #3: Doskonałość przejrzystości 

W projektowaniu, także landing page’a sprzedażowego, często mniej znaczy lepiej. Wydaje się to być dość prostą zasadą. 

Według badania Nielsen Group 79% internautów skanuje stronę, zamiast ją czytać. Jeśli zmusimy odwiedzających do zapoznania się z naszą szeroko opisaną ofertą, współczynniki konwersji spadną.

Hierarchia informacji

Hierarchia informacji to kolejność wyświetlania elementów na stronie. Elementy powinny mieć odpowiednie flow i powinny pokazywać się w budującej spójną narrację kolejności.

Wracamy do kwestii nagłówków. Headliner powyższej strony jest całkiem jasny – to świetnie. Ale co tak naprawdę o celu strony mówi nam zdanie “Od tej chwili sprawy będą się poprawiać”? Czy celem kampanii, która kieruje na ten landing page jest “Sprawa, która jest lepsza”?  

Co zabawne, twórcy copy dotrzymują słowa, bo sprawy naprawdę się poprawiają. Podtytuł jest już znacznie lepszy 😉 W rzeczywistości to on stanowi clue. Ten przykład pożyczyliśmy z ciekawego artykułu Unbounce, który polecamy przeczytać w całości!

Doskonałym sposobem sprawdzenia jasności projektu jest wykonanie “testu zeza”. To nic innego, jak zezowanie patrząc na naszą stronę lub w bardziej profesjonalnej wersji – zastosowanie rozmycia gaussowskiego na zrzucie ekranu. Podobną metodą jest test 5 sekund. Poddaj się próbie i zadaj sobie pytania:
– czy ważne elementy wyróżniają się?
– czy są wystarczające do poprawnej interpretacji usługi, oferty lub czegokolwiek, o czym mówi strona?

Copywriter płakał jak pisał, czyli clear vs. clever

Nie próbuj wybierać, odpowiedź to “clear”. Odwiedzający Twój skuteczny landing page muszą przede wszystkim:

  1. zrozumieć, gdzie się znajdują
  2. co mogą zrobić w Twojej witrynie
  3. dlaczego powinni zostać

Jeśli zabranie którejś z tych rzeczy, najprawdopodobniej użytkownik natychmiast opuści Twoją stronę. Oto świetny artykuł na ten temat. CopyHackers przeprowadził test z trzema odmianami tej samej treści. Wyniki pokazały, że copy z wyraźnym przesłaniem było najlepsze.

Ale kiedy już przekażesz niezbędne informacje, spróbuj uwolnić swoją kreatywność 😉 Jeśli twoja treść sprawi, że odbiorcy się uśmiechną, istnieje większe prawdopodobieństwo, że zapamiętają.  A w morzu wyników wyszukiwania Google bycie niezapomnianym to bardzo przydatna rzecz.

 

Jesteście gotowi? Czas na przykłady landing page!

1) Wistia

Minimum niepotrzebnych treści. Tuż obok logotypu znajduje się prosty, formularz do utworzenia konta – niebieskie, minimalnie wzorzyste tło dobrze kontrastuje z białym polem formularza. Wystarczy jeden krok i jesteśmy zapisani. 

Długość pola formularza w połączeniu z pierwszoplanowym położeniem eliminuje prawie wszystkie przeszkody, aby utworzyć konto. Jeszcze lepsze jest to, że jeśli masz wątpliwości, zawsze możesz przewinąć poniżej, aby przeczytać odpowiedzi na najczęściej zadawane pytania. Oddzielając te dwie sekcje z wyraźnym kontrastem kolorów, Wistia znacznie ułatwia skupienie się na konwersji.

landing page jak zrobić

2) Unbounce

Nic dziwnego, że znalazł się tutaj także Unbounce. W końcu specjaliści z tej fabryki webdesignu, napisali książkę o tworzeniu stron docelowych o wysokiej konwersji. Chociaż poniższa strona docelowa posiada wiele zalet, są dwie, które chcemy podkreślić.  1) Używanie okna czatu zamiast klasycznego formularza oraz 2) szczegółowe – ale dobrze opakowane – informacje poniżej formularza.

Pierwsza pomaga skierować uwagę na cel strony – aby wypełnić formularz – w sposób nie rzucający się w oczy i przypominający raczej niezobowiązującą rozmowę, niż obowiązek. Druga zaleta to ukłon w kierunku SEO i zaspokojenie tych użytkowników,  którzy potrzebują wiedzieć więcej, zanim przekażą swoje dane. 

landing page zasady landing page zasady

3) IMPACT Branding & Design

Żeby była jasność – IMPACT jest partnerem HubSpot, który wielokrotnie był przytaczany przez nas jako wzór, ale to nie dlatego jest tutaj uwzględniany. Strony docelowe IMPACT są źródłem inspiracji dla wielu projektantów. Prosty układ strony, duże nagłówki, wysokiej jakości obrazy, kontrasty, dobór kolorów i czcionek – wszystko to jest bardzo przyjemne dla oka. 

landing page co to jest

4) Muzzle

Strony docelowe pomagają użytkownikom w krótkim czasie zdecydować, czy dany produkt lub usługa naprawdę jest wart ich cennego czasu i energii. Czy istnieje lepszy sposób na przekazanie swojej USP, niż konfrontowanie użytkowników z problemem, który rozwiązuje Twoja aplikacja?

Muzzle, aplikacja Maca, która wycisza powiadomienia na ekranie, całkowicie w to poszła. Nie mówi prawie nic o funkcjonalnościach, zaletach, wadach – po prostu pokazuje problem, który rozwiąże. Odwiedzający stronę witani są falą powiadomień w lewym górnym rogu ekranu. Animacja nie tylko jest przyjemna, ale opowiada o użyteczności aplikacji bez długich opisów.

co to jest landing page

4) Airbnb

Aby pomóc w konwersji użytkowników na gospodarzy, Airbnb oferuje atrakcyjną personalizację. Prezentuje szacunkową tygodniową prognozę zarobków na podstawie lokalizacji. Można wprowadzić dodatkowe informacje o swoich potencjalnych kwaterach i uzyskać jeszcze bardziej spersonalizowane oszacowanie.

Dla tych, którzy przychodzą na stronę już przekonani, wyraźne call to action u góry strony ułatwia natychmiastową konwersję.

jak stworzyć konwertujący landing page

Mamy nadzieję, że wycieczka po najlepszych rozwiązaniach była nie tylko ciekawa, ale pouczająca i już niedługo będziemy się zachwycać Twoim landingiem 😉 A Ty, jaki inspirujący i skuteczny landing page widziałeś ostatnio? Jeśli chcesz dowiedzieć się więcej o tym, jak zrobić landing page, który konwertuje, przeczytaj nasz artykuł „Jak stworzyć idealny formularz na landing page”.

Share Button

6 Comments

  1. Fajny art 🙂 Super przykład z Unbounce i czatem zamiast formularza. Nie widziałem tego nigdzie, a wyglada na ciekawy materiał do testu a/b.
    Natomiast co do przykładu Impact – brakuje mu wg. mnie c2a na ‘home screen’ i ten niebieski button w formularzu jest totalnie niewidoczny. Ciekawe jak im to działa.

    • Dzięki, Michał! Rzeczywiście ostatnio Impact nieco zmienił układ i wygląd treści na swojej stronie w stosunku do tego, co tutaj widać 😉

  2. Sensowny landing da się szybko ogarnąć w Webvawe. W sumie od zera. Więc nawet jak jest dobry projekt graficzny, to można go wbić przy pomocy własnych rączek, bez potrzeby ganiania ludzi z IT. https://webwavecms.com – tu jest więcej fajnych kejsów itp.

Comments are closed.