Jak projektować skuteczne landing pages DESIGN RESPONSYWNY. Jak projektować. skuteczne landing pages. 1 Podziel się:

Transkrypt

1 Jak projektować skuteczne landing pages Jak projektować Content Marketing DESIGN RESPONSYWNY skuteczne landing pages 1 Podziel się:

2 Spis treści Wstęp 3 Projektowanie landing pages z myślą o urządzeniach mobilnych 4 Czym jest landing page? 4 Czym jest RWD? 6 Dlaczego potrzebujesz responsywnych landing pages? 7 Przygotowanie landing pages pod kątem urządzeń mobilnych 8 Stacjonarny vs. mobilny 8 Efekt ROPO 10 Różnice w doświadczeniu użytkownika na urządzeniach mobilnych i stacjonarnych 11 Najlepsze praktyki w projektowaniu landing pages 12 Jak ważna jest sekcja ATF? 14 Gdzie umieścić przycisk CTA? 15 Krótka czy długa strona docelowa? 16 Najpierw wersja mobilna 16 Zwrot z inwestycji 17 Kreator Landing Page GetResponse 18 Kilka praktycznych wskazówek 20 Mierzenie skuteczności landing pages 21 Lookbook landing pages 22 2 Jak projektować skuteczne landing pages

3 Wstęp Wiele statystyk dowodzi, że urządzenia mobilne zaczynają dominować wśród użytkowników Internetu. Używamy ich nie tylko do interakcji, np. obsługi 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. 3 Podziel się:

4 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 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 marketingowe wykorzystują dedykowane strony docelowe. Główną rolą wiadomości 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 4 Jak projektować skuteczne landing pages

5 Zdj.1 Landing page firmy Bitlit mający jasno określony cel 5 Podziel się:

6 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 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. 6 Jak projektować skuteczne landing pages

7 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 marketingowej. Wielu 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. 7 Podziel się:

8 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: 8 Jak projektować skuteczne landing pages

9 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ść. 9 Podziel się:

10 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. 10 Jak projektować skuteczne landing pages

11 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: 1. 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. 2. 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. 3. 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ę. 4. 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. 11 Podziel się:

12 Najlepsze praktyki w projektowaniu landing pages Podczas przygotowania strony docelowej pod kątem kampanii 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ą. 12 Jak projektować skuteczne landing pages

13 Skuteczny nagłówek Podsumuj w zrozumiały sposób, czego dotyczy strona docelowa. Nie musisz starać się, aby tekst był wyjątkowo oryginalny - 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ą. 13 Podziel się:

14 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 14 Jak projektować skuteczne landing pages

15 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 15 Podziel się:

16 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. 16 Jak projektować skuteczne landing pages

17 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: 1. 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ę. 2. 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. 3. 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. 4. 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. 17 Podziel się:

18 Kreator Landing Page GetResponse Już wiesz, jak ważny jest landing page w skutecznej kampanii 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 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 zdjęć lub wykorzystaj własne. Wbudowane narzędzia zawierają filtry, naklejki, pędzle, itd. 18 Jak projektować skuteczne landing pages

19 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. 19 Podziel się:

20 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ę. 20 Jak projektować skuteczne landing pages

21 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. Odwiedziny oraz liczba unikalnych użytkowników 21 Podziel się:

22 Lookbook landing pages Przykład 1. Clio 22 Jak projektować skuteczne landing pages

23 Przykład 2. Wunderlist 23 Podziel się:

24 Przykład 3. Scripted 24 Jak projektować skuteczne landing pages

25 Przykład 4. Mapbox 25 Podziel się:

26 Autorzy: Ireneusz Klimczak Ekspert ds. Content Marketingu w GetResponse Ireneusz Klimczak jest Ekspertem ds. Content Marketingu w GetResponse. Każdego dnia zajmuje się przygotowaniem wartościowych i angażujących treści we wszystkich punktach kontaktu z klientem. Michael Leszczynski Content Marketing Manager w GetResponse O marketingu wie prawie wszystko i chętnie dzieli się tą wiedzą. Współtworzy i zarządza treściami edukacyjnymi w GetResponse sprawiając, że marketing jest rzeczywiście prosty - i to nie tylko dla zaawansowanych użytkowników. 26 Jak projektować skuteczne landing pages

27 O GetResponse: GetResponse to polska marka - lider wśród narzędzi marketingowych - obsługująca ponad klientów z blisko 183 krajów. Oferuje wiele praktycznych rozwiązań niezbędnych do prowadzenia efektywnych kampanii marketingowych z wykorzystaniem narzędzi takich jak: newslettery (ponad 500 gotowych do użycia szablonów), autorespondery, wideo e, ankiety internetowe, integracje z mediami społecznościowymi oraz rozbudowane statystyki. GetResponse oferuje również dedykowane rozwiązania dla klientów korporacyjnych. 17-letnie doświadczenie firmy na rynkach międzynarodowych, zostało docenione zarówno przez klientów, jak również przez kapituły renomowanych konkursów takich jak: Stevie Awards 2014 (brązowa statuetka), Best in Biz Awards 2014 (złota i srebrna statuetka). Inc. Magazine uznał GetResponse za jedną z najszybciej rozwijających się firm w Ameryce umieszczając ją na corocznej liście 5000 Inc. 27 Podziel się: