12 technik inspiracji do projektowania stron docelowych po kliknięciu
Opublikowany: 2017-07-14Projekt Twojej strony docelowej po kliknięciu ma znaczenie, ponieważ te strony są Twoimi cyfrowymi witrynami sklepowymi — niezbędnymi do promowania i sprzedaży Twoich produktów i usług. Poprawnie zoptymalizowane strony mogą znacznie zwiększyć współczynniki konwersji. Ponieważ mają one kluczowe znaczenie dla ogólnego sukcesu Twojej firmy, tworzenie profesjonalnych, wysoce konwertujących stron docelowych po kliknięciu jest integralną częścią Twojej strategii marketingowej.
Niezależnie od tego, czy szukasz inspiracji do stworzenia strony docelowej po kliknięciu w aplikacji, strony docelowej produktu po kliknięciu, mobilnej strony docelowej po kliknięciu, czy czegoś innego. Dostępnych jest mnóstwo różnych inspiracji do projektowania stron docelowych po kliknięciu.
W Instapage mamy całą kategorię blogów poświęconą przykładom stron docelowych po kliknięciu. Często prowadzimy badania i piszemy na ten temat, aby zapewnić naszym odbiorcom inspirację od największych światowych marek. W tym Microsoft, Lyft, Marketo, Constant Contact, Oracle, Facebook, MailChimp i HubSpot.
W tym artykule przedstawimy niektóre strony docelowe po kliknięciu, podkreślając kilka różnych technik projektowania, aby zapewnić Ci inspirację podczas tworzenia stron. Dla każdego przykładu omówimy, co strona robi dobrze i co można przetestować A/B, aby uzyskać lepsze wyniki.
Kliknij, aby tweetować
Inspiracje do projektowania landing pages po kliknięciu
Przekonujący obraz bohatera
Ludzie zazwyczaj przetwarzają obrazy do 60 000 razy szybciej niż tekst. Obrazy prawidłowo użyte na Twojej stronie mogą zmusić odwiedzających do interakcji z Twoją stroną wystarczająco długo, aby dokonać konwersji z Twojej oferty. Czas przestać mówić odwiedzającym, co dostaną, gdy skorzystają z Twojej oferty, i zamiast tego zacząć im pokazywać. Ujęcie bohatera pomaga potencjalnemu klientowi wyobrazić sobie, jak by to było, gdyby mógł doświadczyć korzyści płynących z Twojej oferty.
TaskEasy to rozumie i świetnie wykorzystuje obraz bohatera na swojej stronie. Gdy tylko odwiedzający wylądują na stronie, widzą, jak mógłby wyglądać ich trawnik, gdyby zatrudnili TaskEasy:

Co strona robi dobrze.
- Kolor przycisku wezwania do działania wyróżnia się, ponieważ nie jest używany nigdzie indziej na stronie poza przyciskiem Skontaktuj się z nami.
- Kopia przycisku wezwania do działania korzysta z pierwszej osoby, co sprawia, że potencjalni klienci czują się osobiście związani z ofertą.
- Wskazówki kierunkowe (strzałki na przyciskach CTA i strzałki skierowane w dół strony) pokazują odwiedzającym, gdzie powinni skupić swoją uwagę.
- Ikonografia pomaga zwrócić uwagę na cechy i korzyści z zatrudniania TaskEasy.
- Sygnały zaufania i dowody społeczne (odznaki bezpieczeństwa, pieczęć nagrody i licznik podobny do Facebooka) prawdopodobnie sprawią, że potencjalni klienci poczują się komfortowo, bezpiecznie, a nawet zmuszeni do zatrudnienia TaskEasy.
- Wysuwany formularz kontaktowy umożliwia odwiedzającym łatwy kontakt z firmą w celu zapytania o oferowane przez nią usługi.
Co do testu A/B:
- Logo TaskEasy zawiera hiperłącze, co oznacza, że odwiedzający mają łatwą drogę wyjścia ze strony.
- Przycisk wezwania do działania w Menedżerze właściwości na górze strony zabiera odwiedzających z tej strony. Chociaż otwiera kolejną stronę przechwytywania potencjalnych klientów, powinna mieć własną kampanię, całkowicie oddzieloną od tej.
- Dodanie kopii pomogłoby potencjalnym klientom lepiej zrozumieć korzyści płynące z pracy z TaskEasy. Obecnie na stronie nie ma żadnego egzemplarza, co może utrudniać odwiedzającym dobre wyczucie firmy i oferty.
- Nawigacja w stopce zapewnia odwiedzającym zbyt wiele sposobów opuszczenia strony bez konwersji.
- Numer telefonu może być włączony „kliknij, aby połączyć”, co znacznie ułatwi odwiedzającym kontakt z TaskEasy, zwłaszcza że firma zachęca ich do dzwonienia za pomocą „Chcesz do nas zadzwonić? Były tu!"
Punkty kulowe
Ludzie często nie chcą czytać niekończącego się tekstu, aby znaleźć to, czego szukają. Wolą raczej szybko przeskanować stronę, aby znaleźć konkretne informacje — umożliwia to kopiowanie punktowane. Kopia punktowana (wykorzystująca znaczniki wyboru, strzałki, ikonografię itp.) jest skuteczna, ponieważ umożliwia odwiedzającym szybkie zeskanowanie strony i znalezienie tego, czego szukają.
Ten przykład Yodle używa wypunktowanej kopii (znaczników wyboru), aby podkreślić zalety ich oprogramowania. Wyróżnia się również od reszty tekstu na stronie białymi znakami:

Co strona robi dobrze.
- Logo Yodle nie jest połączone z ich stroną główną, dzięki czemu odwiedzający mogą zobaczyć, na której stronie się znajdują, bez ryzyka kliknięcia.
- Numer telefonu typu „kliknij, aby połączyć” ułatwia odwiedzającym kontakt z firmą.
- Nagłówek i podnagłówek informują odwiedzających o tym, czym jest oferta i jakie będą dla nich korzyści.
- Kopia pisana kursywą wyróżnia się na tle reszty, zmuszając odwiedzających do jej przeczytania.
- Zamknięty formularz przyciąga uwagę, pokazując odwiedzającym, gdzie muszą się udać, aby poprosić o demo.
- „Spersonalizowane demo” sprawia, że potencjalni klienci czują, że oferta jest specjalnie dla nich.
- Pomarańczowy przycisk CTA w kolorze r „wyskakuje” na stronie, zwracając na nią uwagę i zwiększając szansę na kliknięcie.
- Strzałka na przycisku CTA działa jak wskazówka kierunkowa, wzbudzając zainteresowanie tym, co kryje się za formularzem.
- Sygnały zaufania (referencje klientów, logo firmy i pieczęcie nagród) zwiększają poziom zaufania potencjalnych klientów do Yodle, co pomaga przekonać odwiedzających do podania swoich danych osobowych.
Co przetestować A/B:
- Kopia przycisku wezwania do działania nie jest spersonalizowana i może nie przekonać wielu odwiedzających do kliknięcia. Zmiana go na coś w rodzaju „Chcę demo” lub „Zaplanuj moje demo” może generować lepsze wyniki.
- W tym headshot z klientem, referencje sprawiłyby, że wydawałoby się bardziej ujmujące, wzbudzając jeszcze większe zaufanie u potencjalnego klienta.
- Drobny druk w stopce może przytłoczyć potencjalnych klientów i zniechęcić ich do konwersji.
Wzór F
Projektując swoją stronę, zastanów się, w jaki sposób użytkownicy najprawdopodobniej ją zobaczą. W ten sposób możesz odpowiednio rozmieścić najważniejsze elementy. Ponieważ ludzie mają tendencję do czytania od góry do dołu i od lewej do prawej, projektowanie strony zgodnie z wzorem F jest mądre.
Poniższa strona docelowa Oracle po kliknięciu ma wyraźny układ F-Pattern. Każdy ważny element znajduje się na ścieżce F-Pattern, gdzie odwiedzający będą naturalnie patrzeć podczas przeglądania strony.
- Widzowie najpierw zobaczą obraz komputera w lewym górnym rogu.
- Ich oczy będą podążać za poziomą łodygą, a następnie zobaczą uśmiechniętych ludzi.
- Przechodząc w dół lewej strony strony do następnego poziomego pnia, odwiedzający skupią swoją uwagę na nagłówku, a następnie na pojedynczym polu formularza.
- Następnie będą kontynuować wzór F w dół pionowego rdzenia, gdzie będą skanować akapit tekstu i wypunktowania.
- Na koniec skupią się na jasnoczerwonym przycisku CTA.

Co strona robi dobrze.
- Uśmiechnięci ludzie sprawiają, że strona jest bardziej uczłowieczona, co prawdopodobnie sprawi, że odwiedzający poczują się bardziej komfortowo.
- Punktory i pogrubiony tekst zwracają uwagę na podstawowe cechy oferty.
- Formularz 1-polowy sprawia, że wypełnianie jest szybkie i łatwe.
- Wzrok zwiedzających skierowany jest w stronę formularza i przycisku CTA, co oznacza, że powinien się tam skupić i dokonać konwersji.
Co do testu A/B:
- Zdjęcie produktu może być większe. Obecnie na ekranie trudno cokolwiek zobaczyć.
- Nagłówek nie jest przekonujący, ponieważ nie dostarcza odwiedzającym żadnych informacji o tym, jakie korzyści przyniesie im oferta.
- Kopia przycisku CTA jest słaba. „Kontynuuj” nie mówi nic o ofercie i nie zachęca do kliknięcia.
- Dołączenie dowodu społecznego , np. referencji klienta, mogłoby zwiększyć wiarygodność firmy i jej oferty.
- Linki nawigacyjne w stopce mogą odwracać uwagę odwiedzających, odciągać ich od strony i prawdopodobnie zmniejszać współczynnik konwersji.
Wzór Z
Podobnie jak F-Pattern, Z-Pattern pomaga również widzom nawigować po Twojej stronie, dzięki czemu jest to kolejna świetna opcja układu dla projektu strony.
Oto przykład z Business-Software.com, który jest zgodny z wyraźnym wzorem Z.
- Odwiedzający najpierw zobaczą pogrubiony nagłówek w lewym górnym rogu.
- Przesuwając się wzdłuż górnego poziomego trzpienia Z, docierają do czerwonej pieczęci „Zarejestruj się do pobrania”.
- Poruszając się po przekątnej w dół iw lewym dolnym rogu, widzowie skupią swoją uwagę na obrazie raportu.
- Na koniec uzupełnią wzór Z innym poziomym trzpieniem, w którym trafią na najważniejszy element strony — przycisk CTA.

Co strona robi dobrze.
- Logo w lewym górnym rogu nie jest połączone, dzięki czemu odwiedzający nie będą od razu rozpraszani i usuwani ze strony.
- Nagłówek i podnagłówek skutecznie informują odwiedzających, że ten raport oferuje 10 najlepszych dostawców automatyzacji marketingu i informuje ich, jakie korzyści mogą przynieść pobranie raportu.
- Punktory z minimalną ilością kopii umożliwiają widzom szybkie skanowanie strony i poznawanie najważniejszych wskazówek bez konieczności czytania dużej ilości tekstu.
- Słowo „bezpłatny” występuje w dwóch miejscach. Na czerwonej pieczątce, która jest otoczona białymi znakami i bardzo przykuwa uwagę, oraz na kopii, która jest pogrubiona i znajduje się tuż nad obrazem.
- Podgląd raportu pozwala potencjalnym klientom zobaczyć, jak wygląda raport, jeśli zdecydują się go pobrać.
- Żółty przycisk wezwania do działania dobrze kontrastuje z resztą strony, co prawdopodobnie sprawi, że więcej odwiedzających go kliknie.
Co do testu A/B:
- Logo firmy w prawym dolnym rogu jest hiperłączem do ich strony głównej, co zapewnia odwiedzającym wyjście ze strony przed konwersją na ofertę.
- 13 pól formularza to dużo jak na ofertę na etapie świadomości lejka marketingowego. Proszenie o tak wiele informacji na tak wczesnym etapie drogi kupującego może łatwo zniechęcić ludzi do konwersji.
- Zwiększenie białej przestrzeni wokół najważniejszych elementów. Takie jak obraz i przycisk CTA przyciągnęłyby do nich większą uwagę i zachęciłyby odwiedzających do pobrania raportu.
- Dodanie dowodu społecznego prawdopodobnie przekonałoby więcej potencjalnych klientów do konwersji. Ponieważ sprawiłoby to, że poczuliby się bardziej komfortowo i podekscytowani ideą współpracy z Business-Software.com.
- Stopka strony mogła zostać usunięta. Drobny druk wydaje się niepotrzebny, a logo firmy działa jak link wyjściowy, odciągając odwiedzających od tej strony.
Biała przestrzeń
Innym sposobem na przekonanie odwiedzających do skupienia uwagi jest dodanie białej przestrzeni. Uwzględniając wystarczającą ilość pustego miejsca wokół niektórych elementów, elementy te bardziej wyróżniają się na stronie.
Oprócz zwiększenia koncentracji na konkretnych elementach pomaga również biała przestrzeń.
- Zmniejsz bałagan
- Sprawia, że Twoja strona jest estetyczna
- Zwiększ czytelność i zrozumienie
- Popraw wrażenia użytkownika
Spójrz na całą białą przestrzeń otaczającą formularz przechwytywania leadów w poniższym przykładzie MarcomCentral. Zauważ, że przestrzeń wokół formularza nie jest w rzeczywistości biała. Biała przestrzeń może mieć dowolny kolor, o ile pomaga oddzielić różne elementy strony i kontrastować z podświetlanym elementem. W takim przypadku formularz:

Co strona robi dobrze.
- Numer telefonu „kliknij, aby połączyć” zapewnia odwiedzającym wygodny sposób kontaktu z obsługą klienta.
- 50-sekundowe wideo pozwala potencjalnym klientom szybko i łatwo uzyskać informacje bez konieczności czytania kopii.
- „Bezpłatny” w tytule formularza i pierwszym przycisku CTA jest bardzo przekonującym tekstem, ponieważ wszyscy kochają darmowe. Dodanie spersonalizowanej kopii może sprawić, że ta strona będzie jeszcze bardziej przekonująca.
- Tagi zakotwiczenia przenoszą odwiedzających bezpośrednio z powrotem do formularza po kliknięciu, ułatwiając im jego znalezienie i wypełnienie.
- Dowód społeczny wzbudza zaufanie i zaufanie odwiedzających. Włączenie zdjęć w głowę z referencjami klientów dodałoby jeszcze więcej wartości.
- Obrazy w sekcji „Jak to działa” pozwalają potencjalnym klientom lepiej zrozumieć i wyobrazić sobie, co opisuje każdy krok.
Co do testu A/B:
- Hiperłącze logo firmy może odciągnąć odwiedzających od strony, zanim jeszcze zobaczą całą ofertę.
- Nagłówek powinien zostać zmieniony, ponieważ choć jest duży i wyróżnia się, nie jest przekonujący. Ponieważ nie zapewnia żadnych korzyści potencjalnemu klientowi.
- Pomarańczowy przycisk wezwania do działania nie wyróżnia się tak dobrze, jak mógłby, ponieważ pomarańczowy jest używany wielokrotnie na całej stronie.
- Przyciski mediów społecznościowych na dole strony mogą odwracać uwagę odwiedzających i uniemożliwiać im konwersję.
Tagi zakotwiczenia
Tagi zakotwiczające prowadzą do innej lokalizacji na tej samej stronie, umożliwiając odwiedzającym przeskoczenie do określonej części strony bez konieczności przewijania. Ponieważ linki kotwiczne zabierają odwiedzających tam, gdzie chcą, bez większego wysiłku, pomagają poprawić ogólne wrażenia użytkownika, co pomaga w procesie konwersji.
PRWeb umieścił na swojej stronie dwa znaczniki kotwicy — oba „Rozpocznij teraz!” Przyciski CTA pod zakładką. Które po kliknięciu odsyłają odwiedzających z powrotem do formularza przechwytywania potencjalnych klientów nad zakładką:

Co strona robi dobrze:
- Nagłówek jest konkretny i wykorzystuje kopię drugiej osoby — dwie cechy, które świetnie nadają się do przekonania odwiedzających do głębszego zapoznania się z ofertą i ostatecznej konwersji.
- Zamknięcie formularza sprawia, że bardziej przyciąga on uwagę, co prawdopodobnie przyciągnie potencjalnych klientów do jego wypełnienia.
- Pozostawienie niezaznaczonego pola wyboru w formularzu sprawia, że potencjalni klienci czują, że mogą swobodnie podejmować własne decyzje, a nie PRWeb podejmując decyzje za nich.
- Obrazy i sformatowana kopia w sekcjach „Jak” i „Dlaczego” zwracają uwagę na najważniejsze szczegóły dotyczące działania PRWeb i dlaczego potencjalni klienci powinni wybrać PRWeb.
Co do testu A/B:
- Linki wyjścia (logo firmy, przyciski mediów społecznościowych i nawigacja w stopce) mogą odciągnąć ludzi od strony bez konwersji.
- Wypunktowana kopia mogłaby bardziej się wyróżniać. Wcięcie lub powiększenie strzałek zwróciłoby na to większą uwagę.
- Obraz przewodnika jest ucięty, co sprawia wrażenie błędu projektowego. Można go również kliknąć, ale gdy obraz się otworzy, nadal nie jest to pełny obraz ani żaden większy.
- Pola składające się z 7 formularzy mogą onieśmielać odwiedzających i zniechęcać ich do wypełnienia formularza. Zwłaszcza, że prawdopodobnie są jeszcze na etapie rozważania na drodze kupującego.
- Kolor przycisku CTA (wszystkie trzy przyciski) nie wyróżnia się, ponieważ czerwony i niebieski są używane na całej stronie.
- Kopia przycisku CTA (ponownie na wszystkich trzech przyciskach) jest niejasna. Coś w stylu „Chcę przewodnik marketingowy!” jest bardziej atrakcyjny i prawdopodobnie skutkowałby większą liczbą kliknięć.
- Opinia klienta nie jest zoptymalizowana. Nie ma zdjęcia Craiga Kasnoffa, nazwy firmy (i nie powinno być przecinka po konsultantze ds. mediów), a sama opinia nie mówi nic konkretnego, aby zachęcić potencjalnych klientów do współpracy z firmą.
Gify
Włączenie mediów do strony docelowej po kliknięciu (w postaci obrazów, wideo lub GIF-ów) może pomóc w zwiększeniu konwersji, ponieważ wyjaśniają one Twój produkt lub usługę, a jednocześnie sprawiają, że strona jest bardziej atrakcyjna wizualnie.

GIF to animowane obrazy, które pomagają w bardziej interaktywny sposób wyjaśniać Twoje oferty. Zamiast więc dodawać do stron statyczne obrazy, takie jak zrzut ekranu przedstawiający wygląd pulpitu nawigacyjnego oprogramowania, dodaj GIF, aby wizualnie zademonstrować, jak potencjalni klienci mogą wykonywać różne działania.
ActiveCampaign robi to na swojej stronie:

Co strona robi dobrze.
- Nagłówek i podtytuł są przekonujące. Nagłówek wykorzystuje kopię drugiej osoby, a podnagłówek dobrze uzupełnia nagłówek, informując potencjalnych klientów, że ponad 150 000 innych marketerów korzysta z ActiveCampaign.
- „Nie jest wymagana karta kredytowa” zapewnia odwiedzającym, że ta oferta jest całkowicie bezpłatna.
- Tylko dwa pola formularza sprawiają, że więcej potencjalnych klientów wypełni formularz.
- Opinie klientów świetnie nadają się do dodawania dowodów społecznych, ale uchwyty Twittera mogą odciągnąć odwiedzających od strony bez uprzedniej konwersji.
- Przewijany formularz i przycisk CTA zwiększają szanse odwiedzających na podjęcie działań, ponieważ są widoczne niezależnie od tego, gdzie się znajdują na stronie.
Co do testu A/B:
- Przycisk CTA nie wyróżnia się. Kolor zlewa się z resztą niebieskiego na stronie, a kopia nie robi wrażenia.
- Kopia pod przyciskiem wezwania do działania mówi „Klikając „Utwórz”…”, ale przycisk wezwania do działania nie mówi „Utwórz”.
- Linki nawigacyjne w stopce mogą łatwo odwrócić uwagę odwiedzających od celu strony.
Wskazówki wizualne
Wskazówki wizualne odgrywają ogromną rolę w projektowaniu strony docelowej po kliknięciu. Ponieważ pomagają utrzymać wizualną hierarchię, utrzymują zaangażowanie odwiedzających i wskazują im kierunek istotnych elementów. Trzy powszechnie używane wskazówki wizualne to strzałki, spojrzenie oczu i strategicznie rozmieszczone obiekty, które wskazują kierunek elementów, które są integralną częścią celu konwersji.
Strzałki
Strzałki są często używane na stronach docelowych po kliknięciu, ponieważ są proste, zrozumiałe i łatwe do zrozumienia. Mogą być animowane lub stacjonarne i są najczęściej używane do wskazywania odwiedzającym formularzy przechwytywania potencjalnych klientów i przycisków CTA, jak robi to Bridgeline Digital w tym przykładzie:

Co strona robi dobrze.
- Dołączenie statystyk dotyczących zwiększonych współczynników konwersji prawdopodobnie wzbudzi zainteresowanie odwiedzających automatyzacją marketingu. Również pogrubione formatowanie pomaga zwrócić na to uwagę.
- „Bezpłatny” jest wymieniony w dwóch różnych miejscach, podkreślając, że potencjalni klienci nie muszą płacić za tę białą księgę.
- Kopia punktowana ułatwia potencjalnym klientom sprawdzenie, co będzie zawierać ich oficjalny dokument, bez konieczności czytania bloków tekstu.
- Pomarańczowy przycisk CTA wyróżnia się i dobrze współgra z tytułem formularza i strzałką.
- Logo firmowe zwiększa zaufanie do strony, sprawiając, że odwiedzający myślą: „Jeśli te znane firmy współpracują z Bridgeline Digital, to ja też powinienem”.
Co do testu A/B:
- Hiperłącze logo firmy i linki w stopce umożliwiają odwiedzającym opuszczenie strony, prawdopodobnie zwiększając współczynnik odrzuceń.
- Zwiększenie białej przestrzeni wokół obrazu produktu sprawi, że będzie się on bardziej wyróżniał.
- Kopia przycisku CTA wymaga poprawy, ponieważ nie ma nic przekonującego w „Pobierz oficjalny dokument”. Dodanie kopii zorientowanej na korzyści i/lub pierwszej osoby prawdopodobnie zachęciłoby więcej potencjalnych klientów do kliknięcia.
spojrzenie oczu
Ponieważ ludzie mają tendencję do patrzenia na to, na co patrzą inni, używanie ludzkiego oka jako wskazówki kierunkowej jest szczególnie skuteczne na stronach docelowych po kliknięciu. Na przykład, jeśli obraz człowieka na Twojej stronie patrzy na nagłówek, prawdopodobnie uwagę odwiedzającego przyciągnie również nagłówek. Dlatego ta technika jest przydatna, aby odwiedzający patrzyli tam, gdzie chcesz.
Na poniższej stronie Vistage umieścił zdjęcie kobiety patrzącej w kierunku formularza przechwytywania ołowiu. Kiedy odwiedzający na nią patrzą, podświadomie czują się zmuszeni do spojrzenia na formę:

Co strona robi dobrze:
- Brak linków wyjściowych (poza polityką prywatności) uniemożliwia odwiedzającym opuszczenie strony bez kliknięcia „X” w przeglądarce lub wypełnienia formularza.
- Kontrastowe kolory pełnią rolę wizualnej wskazówki, zwracając uwagę na najważniejsze elementy strony: nagłówek, kobietę i przycisk CTA. Ponieważ reszta strony jest w odcieniach szarości, te trzy elementy wyróżniają się ponad wszystko inne.
- Uwzględnienie polityki prywatności pomaga wzbudzić zaufanie odwiedzających, informując ich, że ich informacje są bezpieczne w firmie.
Co do testu A/B:
- Dodanie dowodów społecznościowych , takich jak referencje klientów lub plakietki firmowe, prawdopodobnie zachęciłoby więcej odwiedzających do sprawdzenia, czy kwalifikują się do oferty.
- Minimalne informacje o ofercie mogą uniemożliwić konwersję. Dodanie wypunktowań lub małych fragmentów tekstu w celu podkreślenia korzyści z oferty może przynieść lepsze wyniki.
Obiekty
Trzecią powszechnie stosowaną techniką wizualnych wskazówek jest pozycjonowanie obiektów tak, aby były skierowane bezpośrednio na określony obszar strony. W ten sposób skupiasz uwagę potencjalnych klientów na pewnych ważnych elementach strony.
Lyft robi to w poniższym przykładzie, ustawiając pojazd bezpośrednio w kierunku i prawie dotykając jego formy przechwytywania ołowiu:

Co strona robi dobrze:
- Tylko jedno pole formularza doskonale nadaje się do przekonania ludzi do przekazania swoich informacji.
- Pozostawienie niezaznaczonego pola wyboru umowy sprawia, że potencjalni klienci czują się bardziej kontrolujący i komfortowo w procesie konwersji.
- Sekcja „Zobacz, ile możesz zarobić” jest przydatna, ponieważ pozwala potencjalnym klientom wprowadzić swoje informacje i kliknąć przycisk „Oblicz” CTA bez opuszczania strony. Po obliczeniu kwoty tygodniowej wypłaty przycisk zmienia się w kolejny przycisk „Zastosuj teraz”, pomagając w procesie konwersji.
- Sekcja „Jak działa Lyft Driving” umożliwia firmie dostarczanie informacji krok po kroku o tym, jak działa Lyft – a ponieważ przewija się w poziomie, nie zaśmieca strony kopią.
Co do testu A/B:
- Kilka linków wyjściowych ułatwia odwiedzającym rozproszenie uwagi i opuszczenie strony bez konwersji w ofercie.
- Nagłówek i podtytuł są trudne do odczytania ze względu na zajęte tło. Testowanie ich w innym miejscu, gdzie są bardziej widoczne, może przyciągnąć więcej uwagi i dać lepsze wyniki.
- Kopia przycisku CTA jest tak niejasna, jak to tylko możliwe. „Dalej” nie mówi nic o ofercie i prawdopodobnie nie zmusza wielu osób do kliknięcia.
Hierarchia wizualna
Każda strona docelowa po kliknięciu powinna być zgodna z określoną hierarchią wizualną — treścią uporządkowaną od najważniejszej do najmniej ważnej. Element, który ma najpierw przyciągnąć uwagę odwiedzających (zwykle nagłówek), powinien być umieszczony na górze strony, ponieważ jest to szczyt hierarchii, a reszta treści jest następnie dostarczana od najwyższego do najniższego priorytetu.
Wiele cech odgrywa rolę w tworzeniu hierarchii wizualnej, w tym między innymi:
- Rozmiar
- Kolor/kontrast
- Gęstość/bliskość
- Biała przestrzeń
- Tekstura/styl
SendGrid wykorzystuje kilka z tych komponentów na swojej stronie. Zobaczmy, których używają, a które powinni rozważyć ulepszenie:

Co strona robi dobrze.
- Zróżnicowanie rozmiaru i pogrubione formatowanie pomagają zwrócić uwagę na najważniejsze fragmenty kopii, tworząc silną hierarchię wizualną.
- Nagłówek zmusza odwiedzających do korzystania z SendGrid, wymieniając trzy znane firmy, które również korzystają z SendGrid.
- Wiele współpracujących przycisków CTA zapewnia potencjalnym klientom kilka możliwości skorzystania z oferty w różnych miejscach na stronie.
- Zdjęcie produktu pokazuje podgląd tego, jak będzie wyglądać dostarczana treść.
- Punktory z minimalną ilością kopii sprawiają, że potencjalni klienci nie muszą czytać akapitów tekstu, aby znaleźć to, czego szukają.
- Referencje klientów i odznaki firmowe służą jako dowód społeczny, prawdopodobnie przekonując więcej potencjalnych klientów do współpracy z SendGrid, ponieważ inni odnoszą z nimi sukces. Dodanie strzału w głowę Dave'a Tombacka do jego świadectwa uczyniłoby to jeszcze bardziej skutecznym.
Co do testu A/B:
- Kobieta na obrazie może patrzeć w dół na nagłówek/przycisk CTA, aby dodać wizualną wskazówkę i zachęcić odwiedzających, aby również w ten sposób patrzyli.
- Przyciski CTA można było powiększyć i przetestować w innym kolorze, aby zwrócić na nie większą uwagę. W innym miejscu strony jest niebieski, więc nie „wyskakują” tak bardzo, jak by mogły.
- Zwiększenie odstępu wokół niektórych elementów, takich jak przyciski CTA i nagłówek, pomogłoby im bardziej się wyróżnić.
- Przycisk CTA „Zobacz plany i ceny” powinien zostać usunięty, ponieważ przenosi odwiedzających na inną stronę, odwracając ich uwagę od tej.
Przyciągający uwagę przycisk CTA
Idealnie zoptymalizowany, przyciągający uwagę przycisk CTA to najważniejszy element, który należy uwzględnić w strukturze landing page’a po kliknięciu. Powinien wyróżniać się ponad wszystkimi innymi elementami, aby nie było wątpliwości, gdzie potencjalni klienci muszą kliknąć, aby skorzystać z Twojej oferty.
WalkMe stworzył swoją dwuetapową stronę zgody z dużym, kontrastowym przyciskiem CTA, który z pewnością wyróżnia się na stronie, przyciągając uwagę odwiedzających:

Co strona robi dobrze.
- Obraz tła oferuje odwiedzającym realistyczny podgląd tego, jak będzie wyglądać ich oprogramowanie.
- Przycisk CTA naprawdę pojawia się na stronie. Oprócz tego, że jest duży i kontrastowy, pojawia się również u góry strony, gdy użytkownik zaczyna przewijać.
- Dwuetapowy formularz zgody zmniejsza bałagan i sprawia, że użytkownicy czują się mniej onieśmieleni, ponieważ nie muszą wprowadzać tutaj swoich informacji.
- Kopia punktowana ułatwia potencjalnym klientom zdobycie informacji o ofercie bez konieczności czytania zbyt dużej ilości tekstu.
- Dowód społeczny (referencje klientów i przewijające się logo firmy) prawdopodobnie sprawią, że potencjalni klienci poczują się zmuszeni do współpracy z tą firmą.
Co do testu A/B.
- Zmiana kopii przycisku CTA na coś bardziej spersonalizowanego (z formatowaniem pierwszoosobowym) i zorientowanego na korzyści prawdopodobnie poprawiłaby współczynnik konwersji.
- Zastąpienie obrazu GIF-em (w części strony widocznej po przewinięciu) zapewniłoby użytkownikom bardziej interaktywne wrażenia na stronie i pomogłoby lepiej wyjaśnić produkt.
- Dodanie strzału w głowę do referencji klienta uczyniłoby ją bardziej godną zaufania, zwiększając jej skuteczność.
Jakie techniki projektowania stron docelowych po kliknięciu Cię zainspirowały?
Korzystanie ze stron docelowych po kliknięciu w celu promowania i sprzedaży produktów i usług jest integralną częścią strategii marketingowej. Dzieje się tak, ponieważ przy prawidłowej optymalizacji — dzięki technikom opisanym powyżej, wraz z naszym przewodnikiem po sprawdzonych metodach projektowania i przewodnikiem po optymalizacji strony docelowej po kliknięciu, mogą one znacznie zwiększyć współczynniki konwersji.
Zamień kliknięcia reklam w konwersje, utwórz dedykowane, szybko ładujące się strony po kliknięciu dla każdej oferty. Zobacz, jak zapewnić wszystkim swoim odbiorcom unikalne strony docelowe po kliknięciu, rejestrując się już dziś na Instapage Enterprise Demo.
