Jak projektować skuteczne landing pages

Wstęp

Wiele statystyk dowodzi, że urzadzenia mobilne zaczynają dominować wśród użytkowników Internetu. Używamy ich nie tylko do interakcji, np. obsługi email oraz sieci społecznościowych, ale również do wyszukiwania informacji, robienia zakupów oraz rozrywki (według badania “Seven Shades of Mobile”, przeprowadzonego przez firmę InsightsNow dla AOL i BBDO).

Niniejszy poradnik pomoże Ci odkryć potencjał responsywnych landing pages. Zrozumiesz, dlaczego są Ci potrzebne, poznasz najlepsze praktyki ich projektowania oraz zapoznasz się z Kreatorem Landing Pages GetResponse, dzięki któremu możesz stworzyć skuteczne strony docelowe, które generują wysoką konwersję.

Na końcu poradnika dodaliśmy również kilka godnych naśladowania projektów, aby zainspirować Cię do wykorzystania opisanych wskazówek w praktyce i stworzenia własnych stron za pomocą Kreatora Landing Pages GetResponse.

Projektowanie landing pages z myślą o urządzeniach mobilnych

Czym jest landing page?

Zanim wdam się w szczegóły i wyjaśnię, na czym polega idea projektowania stron responsywnych, upewnijmy się, że wiesz czym jest landing page i dlaczego jest niezbędnym elementem każdej kampanii email marketingowej.

Landing page to strona internetowa, która jest zaprojektowana z myślą o realizacji konkretnego celu marketingowego. Jest to strona, która zwraca uwagę i zachęca użytkownika do wykonania określonej czynności, wykorzystując tzw. wezwanie do działania (ang. call to action). Landing page jest z reguły projektowany tak, by generować konwersje, które są jego głównym celem.

Skuteczne kampanie email marketingowe wykorzystują dedykowane strony docelowe. Główną rolą wiadomości email jest przekierowanie odbiorców na landing page – to tutaj ma miejsce konwersja.

Poniżej znajduje się przykład landing page firmy Bitlit. W sekcji powyżej linii przewijania (ang. above the fold) widoczne jest wyłącznie call to action, zachęcające użytkownika do pobrania e-booka.

Czym jest RWD?

“Projektowanie stron responsywnych (ang. responsive web design) zakłada, że podczas przygotowania i rozwoju projektu bierzemy pod uwagę konfigurację sprzętową użytkownika. Przede wszystkim rozdzielczość i orientację ekranu, z którego korzysta. W praktyce polega to na zastosowaniu odpowiedniej struktury HTML, łatwo przystosowującej się do wybranego rozmiaru ekranu i korzystającej z zapytań media queries. Gdy użytkownik przechodzi z laptopa na iPada, strona internetowa powinna automatycznie dopasować rozmiar grafik i dostosować swoją strukturę do rozdzielczości. Innymi słowy, strona internetowa powinna dopasować się do preferencji użytkownika. Tym sposobem, moglibyśmy wyeliminować konieczność projektowania i rozwoju strony pod kątem każdego nowego gadżetu, który pojawi się na rynku.”

– Kayla Knight, autorka Smashing Magazine

Zdj.1 Landing page firmy Bitlit mający jasno określony cel

Poniżej kilka statystyk pochodzących z Pew Research Center’s Mobile Technology Fact Sheet:

64% dorosłych Amerykanów posiada smartfon
32% dorosłych Amerykanów posiada czytnik e-booków
42% dorosłych Amerykanów posiada tablet.

Jak widać, coraz więcej osób posiada kilka urządzeń mobilnych o różnej rozdzielczości, które służą im do realizacji różnych celów. Obecnie nie wystarczy już projekt strony pod kątem komputerów stacjonarnych oraz jej alternatywna wersja dla urządzeń mobilnych.

Nie nadążylibyśmy za nowymi urządzeniami, które każdego miesiąca pojawiają się na rynku. Właśnie z myślą o urządzeniach o dowolnej rozdzielczości ekranu wymyślono koncepcję projektowania stron responsywnych.

Dlaczego potrzebujesz responsywnych landing pages?

Odpowiedź na to pytanie jest całkiem prosta. Jeżeli chcesz dotrzeć z przekazem do odbiorców, musisz dostosować wygląd wiadomości do urządzeń, z których korzystają. Większość osób sprawdza maile za pomocą urządzeń mobilnych, jak smartfon czy tablet. Twoja rolą jest zapewnienie im wygody korzystania ze strony, bez względu na urządzenie, na którym ją odwiedzają.

Landing page jest decydującym elementem kampanii email marketingowej. Wielu email marketerów uważa, że to właśnie strona docelowa jest miejscem, które ma największy wpływ na konwersję. Jeżeli Twój landing page jest odpowiednio zaprojektowany, użytkownicy są bardziej skłonni do wykonania pożądanej przez Ciebie czynności, np. zapisania się na newsletter, pobrania e-booka czy zakupu produktu.

Responsywna strona internetowa umożliwi użytkownikom wykonanie działania w dowolnym momencie, na każdym urządzeniu. W dzisiejszych czasach nie możesz już sobie pozwolić na utratę użytkowników urządzeń mobilnych.

Przygotowanie landing pages pod kątem urządzeń mobilnych

Stacjonarny vs. mobilny

Na początku 2014 r. liczba osób korzystających z Internetu za pomocą urządzeń mobilnych po raz pierwszy była większa niż liczba osób korzystających z Internetu za pomocą komputerów stacjonarnych. W rezultacie mogliśmy zaobserwować olbrzymią zmianę w sposobie, w jaki ludzie korzystają z mediów społecznościowych, wyszukują informacje lub robią zakupy.

Zdj.2 Liczba użytkowników urządzeń mobilnych i stacjonarnych, 2014
Źródło: http://www.smartinsights.com/mobile-marketing/mobile-marketing-ana-lytics/mobile-marketing-statistics

Wygląda na to, że dzięki dostępowi do wielu urządzeń mobilnych, mamy tendencję do przeglądania Internetu na przestrzeni całego dnia. Właśnie dlatego kampanie muszą być dostępne dla użytkowników o każdej porze.

Według badania przeprowadzonego przez 10ZiG study, w 2017r. urządzenia mobilne będą generowały więcej ruchu na strony internetowe niż komputery stacjonarne, jeżeli utrzyma się obecne tempo wzrostu. Jak widać, projektowanie stron responsywnych wydaje się być najlepszą strategią na przyszłość.

Efekt ROPO

Obecnie nie można oddzielić zakupów online i offline. Według badania przeprowadzonego niedawno przez firmę Forrester, aż 88% konsumentów szuka informacji o produkcie w Internecie, zanim dokona zakupu w sklepie stacjonarnym. Strona internetowa jest miejscem, w którym konsumenci mogą obejrzeć produkty i zdobyć informacje na ich temat, jednak sprzedaż (konwersja) często ma miejsce w tradycyjnym sklepie.

Odpowiednio zaprojektowany, responsywny landing page pomoże Ci odwrócić ten proces. Użytkownik korzystający z urządzenia mobilnego może wejść na stronę Twojego produktu, w trakcie zakupów w sklepie stacjonarnym i porównać ofertę. Jeżeli zapewnisz najwyższej jakości doświadczenie zakupowe, duży wybór produktów oraz konkurencyjne ceny, będziesz miał duże szanse na zachęcenie klienta do zakupu.

Różnice w doświadczeniu użytkownika na urządzeniach mobilnych i stacjonarnych.

Istnieje kilka podstawowych różnic dotyczących doświadczenia użytkownika na urządzeniach mobilnych i stacjonarnych, o których warto pamiętać podczas projektowania:

Rozmiar ekranu jest ograniczony

Na stronie przeznaczonej dla urządzeń mobilnych nie musisz zamieszczać wszystkich informacji – wybierz te najważniejsze. Użytkownicy często opuszczają strony “przeładowane” zbyt dużą ilością elementów.

Pisanie sprawia więcej trudności

Konieczność uzupełniania dużej ilości pól może sprawić, że użytkownicy zrezygnują z wypełnienia formularza zapisu. Pola wyboru oraz rozwijane listy mogą okazać się lepszym pomysłem. Pamiętaj, że Twoja strona docelowa powinna ułatwiać proces konwersji.

Przyciski są mniejsze

Zgodnie z prawem Fittsa, małe obiekty spowalniają działania użytkownika, ponieważ musi on poświęcić więcej uwagi na ich właściwe wykorzystanie. Zadbaj o to, by Twój projekt był przyjazny dla użytkownika. Dostosuj rozmiar przycisku do wielkości palca, co pozwoli mu szybko wykonać pożądaną akcję.

Obrazy ładują się wolniej

Zmniejsz rozmiar obrazów i popraw szybkość ładowania strony. Ograniczysz wykorzystanie procesora i pamięci, które w przeciwnym wypadku musiałyby zostać wykorzystane do zmiany rozdzielczości obrazów.

Najlepsze praktyki w projektowaniu landing pages

Podczas przygotowania strony docelowej pod kątem kampanii email marketingowej, weź pod uwagę następujące elementy:

Czytelne wezwanie do działania (ang. call to action)

Napisz, czego dokładnie oczekujesz od użytkowników – “kup teraz”, “zapisz się”, “wypróbuj” czy może “skontaktuj się z nami”. Upewnij się, że wezwanie do działania jest widoczne i zrozumiałe.

Oferta

Oferta to wszystko, co dajesz użytkownikom w zamian za wykonanie oczekiwanej akcji. Nie odwracaj jednak uwagi od call to action.

Ograniczony wybór

Zachowaj prostotę. Jeśli to możliwe, ogranicz wybór do 1-2 możliwości: np. “Zapisz się do 1 maja, a otrzymasz produkt w niezwykle atrakcyjnej cenie!”

Główne korzyści

Krótka lista korzyści wynikających z zakupu Twojego produktu. Ludzie potrzebują konkretnych powodów, aby podjąć decyzję. Uważaj, by nie przesadzić z ich ilością.

Skuteczny nagłówek

Podsumuj w zrozumiały sposób, czego dotyczy strona docelowa. Nie musisz starać się, aby tekst był wyjątkowo oryginalny – email już przyciągnął uwagę użytkowników.

Układ dopasowujący się do rozmiaru ekranu

Optymalizuj pod kątem różnych wyszukiwarek, platform i urządzeń. Prawie 20% odwiedzających wyświetla strony internetowe za pomocą urządzeń mobilnych. Twórz strony docelowe, biorąc pod uwagę potrzeby wszystkich użytkowników.

Dbaj o schludny wygląd

Podstawa to przejrzystość: odpowiednie odstępy, wypunktowania, duże czcionki, obrazy i/lub materiały wideo. Nie przesadzaj z ilością elementów na stronie. Mniej znaczy więcej, a najlepsze strony to te, które szybko się ładują.

Społeczny dowód słuszności

Certyfikaty, opinie klientów, informacje prasowe… wszystko co podkreśla wyjątkową wartość Twojej oferty i nie jest Twoją własną opinią.

Jak ważna jest sekcja ATF

Fraza “powyżej linii przewijania” (ang. above the fold) wywodzi się z branży prasowej i oznacza przestrzeń nad linią zgięcia gazety. W przypadku landing pages, ATF odnosi się do tej części strony, która jest widoczna bez konieczności przewijania w dół.

Sekcja ATF jest Twoją jedyną szansą na przyciągnięcie uwagi odbiorców i zachęcenie ich do zapoznania się z dalszą częścią strony. Każdy produkt jest inny, więc nie ma uniwersalnego układu, który sprawdzi się we wszystkich przypadkach. Powinieneś testować poszczególne elementy i sprawdzić, które z nich najlepiej działają na Twoich odbiorców. Podczas planowania sekcji ATF, weź pod uwagę następujące elementy:

Przykuwający uwagę nagłówek
Wzmacniający przekaz podtytuł
Zdjęcie produktu
Lista korzyści płynących z jego wykorzystania
Czytelne wezwanie do działania
Opinie zadowolonych klientów

Gdzie umieścić przycisk CTA?

Masz dwie możliwości wyboru: powyżej lub poniżej linii przewijania. Wszystko zależy od stopnia zaawansowania Twojego produktu oraz ilości informacji, które chcesz umieścić na stronie.

Diagram z bloga KISSmetrics przedstawia związek pomiędzy poziomem zaawansowania oraz najlepszym miejscem na CTA na stronie docelowej.

Zdj.3 Związek pomiędzy poziomem zaawansowania produktu oraz ilością informacji, jaką chcesz umieścić na stronie docelowej

Krótka czy długa strona docelowa?

To bardzo dobre pytanie, na które będziesz musiał samodzielnie znaleźć odpowiedź. Wyodrębniono dwa rodzaje konsumentów i każdy z nich oczekuje innej ilości informacji:

Entuzjaści wyjaśnień: dogłębne, szczegółowe wyjaśnienia rozbudzają u nich chęć posiadania produktu. Tego rodzaju użytkownicy są szczerze zainteresowani opisem sposobu, w jaki działa Twój produkt.
Wrogowie wyjaśnień: krótkie informacje pomagają im lepiej zrozumieć i rozbudzają chęć zakupu produktu. Ci konsumenci preferują możliwie najmniejszą ilość szczegółów i nie zadadzą sobie trudu przeczytania długiego opisu.

Poznaj swoich odbiorców i dopasuj treści marketingowe do ich preferencji. Przeprowadź testy A/B, aby sprawdzić, jakiego typu strona docelowa osiąga lepsze wyniki.

Najpierw wersja mobilna

Projektowanie w pierwszej kolejności z myślą o wersji mobilnej jest ciekawym podejściem. Zakłada ono tzw. progresywne ulepszanie: zaczynasz projekt z myślą o urządzeniu z najmniejszym rozmiarem ekranu i stopniowo rozbudowujesz projekt pod katem większych urządzeń.

Ponieważ masz do dyspozycji niewiele przestrzeni, dodajesz do projektu wyłącznie najważniejsze elementy. Takie podejście pozwala uniknąć nadmiaru elementów oraz skutkuje lepszym układem strony i lepszym doświadczeniem użytkownika.

Zwrot z inwestycji

Każdy marketer musi stale mierzyć zwrot z inwestycji (ang. return on investment, ROI). Oto 4 konsekwencje wynikające z zastosowania projektowania responsywnego:

Lepsze doświadczenie użytkownika

Użytkownicy mogą korzystać z Twojej strony docelowej z dowolnego miejsca, bez konieczności zwężania okna przeglądarki, skalowania lub skrolowania wiadomości w każdą stronę. Dzięki większym, lepiej rozmieszczonym przyciskom CTA, wiedzą dokładnie, gdzie kliknąć, by wykonać pożądaną akcję.

Większy współczynnik konwersji

Zastosowanie responsywnego designu wyraźnie zwiększa współczynnik konwersji. Dzięki dopasowaniu sposobu sprzedaży produktu do tego, jak użytkownicy robią zakupy, możesz zwiększyć obrót. Będziesz wszędzie tam, gdzie są Twoi odbiorcy. Bez względu na to czy właśnie wracają z pracy czy odpoczywają na sofie – Twoja strona jest zawsze do dyspozycji.

Większa sprzedaż

Gdy przyciągniesz już uwagę użytkowników urządzeń mobilnych, być może będą oni woleli dokonać zakupu za pomocą laptopa lub komputera stacjonarnego. Responsywne strony wyglądają świetnie na wszystkich urządzeniach, więc jeśli umożliwisz odbiorcy dokonanie zakupu na urządzeniu o większym ekranie, być może zrobi większe zakupy.

Lepsze statystyki

Zadbaj o doskonałe doświadczenie użytkownika. Nie będziesz musiał się martwić wysokimi wskaźnikami rezygnacji z subskrypcji lub zgłoszeń wiadomości jako spam.

Kreator Landing Page GetResponse

Już wiesz, jak ważny jest landing page w skutecznej kampanii email marketingowej. Poniżej zaprezentuję kilka funkcjonalności Kreatora Landing Page GetResponse, które mogą wydać Ci się szczególnie interesujące:

Design responsywny

W kilka minut przygotujesz landing page przystosowany pod kątem urządzeń mobilnych. Dzięki funkcji podglądu wiadomości przekonasz się, że Twoja strona automatycznie dopasowuje się do ekranu o dowolnej rozdzielczości: smartfonu, tabletu lub monitora.

Wbudowane formularze zapisu

Wykorzystaj gotowe elementy i w kilka chwil stwórz własny formularz zapisu, dzięki któremu rozbudujesz bazę adresów email i pozyskasz informacje od potencjalnych klientów.

Ponad 100 gotowych szablonów

Stale powiększająca się kolekcja gotowych do użycia szablonów pozwala na przygotowanie doskonale wyglądającej i skutecznej strony w mniej niż 30 minut.

Edytor zdjęć

Możesz wybierać spośród 1000+ zdjęć lub wykorzystaj własne. Wbudowane narzędzia zawierają filtry, naklejki, pędzle, itd.

Bez znajomości HTML

Edytor pozwala m.in. na przesuwanie, zmienianie rozmiaru i skali czy też grupowanie i zmienianie kształtu dowolnego elementu na stronie: pola tekstowego, zdjęcia, tła, pola formularza i przycisków.

Testy A/B

Śledź i ulepszaj wyniki swojej strony za pomocą testów A/B, następnie wybierz projekt, który osiągnął najlepsze wyniki. Wykorzystaj narzędzia SEO, aby dotrzeć do odbiorców przebijając się przez konkurencyjne oferty.

Kilka praktycznych wskazówek

Poniżej kilka wskazówek dla osób, które maja zamiar zacząć korzystać z Kreatora Landing Page GetResponse. Za pomocą edytora z funkcją WYSIWYG w prosty sposób dopasujesz każdy element strony do własnych potrzeb. Istnieje jednak kilka kwestii związanych z projektowaniem responsywnym, na które warto zwrócić uwagę.

Układ elementów

Wszystkie elementy są wyświetlane w pozycji absolutnej, innymi słowy każdy element stanowi odrębną warstwę. Podczas podglądu strony na urządzeniu mobilnym, możesz zobaczyć, że poszczególne elementy mają inny układ niż w wersji na komputerach stacjonarnych. Dzieje się tak dlatego, że edytor umieszcza je według kolejności w drzewie obiektów: przed przetworzeniem od góry do dołu, po przetworzeniu od dołu do góry.

Struktura wersji mobilnej

Szkielet wersji mobilnej strony tworzą elementy typu box (Pole). Elementy umieszczone w polach, zachowają włąściwą strukturę na urządzeniu mobilnym. Przygotuj oddzielne pola dla najważniejszych elementów strony docelowej: nagłówek, treść, stopka, itd. Tym sposobem będziesz mógł wprowadzić zmiany w jednym elemencie, bez ryzyka zmiany struktury pozostałych.
Z tego samego powodu proponujemy umieszczać kilka akapitów tekstu w jednym polu

Obrazy w elementach blokowych

Jeżeli chcesz ustawić zdjęcie jako tło pola, wykorzystaj opcję Obraz w tle. W przeciwnym wypadku w wersji mobilnej zdjęcie będzie stanowiło odrębną warstwę.

Mierzenie skuteczności landing pages

Wyniki swoich stron docelowych możesz w prosty sposób śledzić, by potem optymalizować ich poszczególne elementy w sposób, który pozwoli na zmniejszenie liczby odrzuceń i zwiększenie konwersji.

Przejdź do sekcji Zarządzaj w zakładce Landing Pages. Po lewej stronie zobaczysz miniaturki swoich stron docelowych, a po prawej dostępne statystyki:

Liczbę subskrybentów wraz z procentowym wskaźnikiem zapisów

Jeżeli celem Twojej strony jest budowa listy subskrybentów, przygotuj wartościową treść na zachętę oraz czytelny formularz zapisu. Będziesz mógł obserwować postępy w czasie rzeczywistym. Wskaźnik zapisów pokaże, ile spośród osób, które odwiedziły stronę, dokonało subskrypcji.