Content Marketing Jak projektować - GetResponse · 2016-06-15 · Wygląda na to, że dzięki...

1 | Podziel się:

Jak projektować skuteczne landing pages

Content MarketingD E S I G N R E S P O N S Y W N Y


http://app.getresponse.com/track_customer.html?tid=68001

https://twitter.com/intent/tweet?text=%5BFree+ebook%5D+Discover+the+full+potential+of+Responsive+Landing+Pages+by+%40getresponse+http%3A%2F%2Fbit.ly%2FResponsive-Landing-Pages+%23freebiemonday

http://www.facebook.com/sharer/sharer.php?u=http://bit.ly/Responsive-Landing-Pages

http://www.linkedin.com/shareArticle?mini=true&url=http://bit.ly/Responsive-Landing-Pages

2 | Jak projektować skuteczne landing pages


Spis treści

Wstęp 3

Projektowanie landing pages z myślą o urządzeniach mobilnych 4Czym jest landing page? 4Czym jest RWD? 6Dlaczego potrzebujesz responsywnych landing pages? 7

Przygotowanie landing pages pod kątem urządzeń mobilnych 8Stacjonarny vs. mobilny 8Efekt ROPO 10Różnice w doświadczeniu użytkownika na urządzeniach mobilnych i stacjonarnych 11

Najlepsze praktyki w projektowaniu landing pages 12Jak ważna jest sekcja ATF? 14Gdzie umieścić przycisk CTA? 15Krótka czy długa strona docelowa? 16Najpierw wersja mobilna 16Zwrot z inwestycji 17

Kreator Landing Page GetResponse 18Kilka praktycznych wskazówek 20Mierzenie skuteczności landing pages 21

Lookbook landing pages 22


3 | Podziel się:


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 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


5 | Podziel się:


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







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.


http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

7 | Podziel się:


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.







Zdj.2 Liczba użytkowników urządzeń mobilnych i stacjonarnych, 20141

1 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

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

Stacjonarny vs. mobilnyNa 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.


9 | Podziel się:


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ść.





http://www.10zig.com/static/game-of-devices/web/



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.


11 | Podziel się:


Różnice w doświadczeniu użytkownika na urządzeniach mobilnychi 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.







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ą.


13 | Podziel się:


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ślawyją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


15 | Podziel się:


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 mobilnaProjektowanie 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.


17 | Podziel się:


Zwrot z inwestycjiKaż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.







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.


19 | Podziel się:


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ówekPoniż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ę.


21 | Podziel się:


Mierzenie skuteczności landing pagesWyniki 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







Lookbook landing pages

Przykład 1. Clio


23 | Podziel się:


Przykład 2. Wunderlist







Przykład 3. Scripted


25 | Podziel się:


Przykład 4. Mapbox







Authors:

Ireneusz KlimczakEkspert ds. Content Marketinguw 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.

[email protected]@irekklimczak

Michael LeszczynskiContent Marketing Manager w GetResponse

O email marketingu wie prawie wszystko i chętnie dzieli się tą wiedzą. Współtworzy i zarządza treściami edukacyjnymi w GetResponse sprawiając, że email marketing jest rzeczywiście prosty - i to nie tylko dla zaawansowanych użytkowników.

[email protected]@mrleszczynski


mailto:swolkiewicz%40getresponse.com?subject=Content%20Marketing%20Essentials%20for%202015

https://twitter.com/sararuthw

mailto:mleszczynski%40getresponse.com?subject=Content%20Marketing%20Essentials%20for%202015

https://twitter.com/mrleszczynski

27 | Podziel się:


O GetResponse:GetResponse to polska marka - lider wśród narzędzi email marketingowych - obsługująca ponad 350 000 klientów z blisko 183 krajów.

Oferuje wiele praktycznych rozwiązań niezbędnych do prowadzenia efektywnych kampanii email marketingowych z wykorzystaniem narzędzi takich jak: newslettery (ponad 500 gotowych do użycia szablonów), autorespondery, wideo emaile, 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ł GetResponseza jedną z najszybciej rozwijających się firm w Ameryce umieszczając ją na corocznej liście 5000 Inc.





https://www.youtube.com/watch?v=y_cAh-hMKsc

Content Marketing Jak projektować - GetResponse · 2016-06-15 · Wygląda na to, że dzięki...

Documents

Transcript of Content Marketing Jak projektować - GetResponse · 2016-06-15 · Wygląda na to, że dzięki...