Jak zaprojektować responsywny landing page, który sprzedaje?

Sprawdź, jak zaprojektować responsywny landing page, aby użytkownicy mogli komfortowo przeglądać treść na mniejszym ekranie i wchodzili z nią w interakcje.

Internet stał się na tyle popularnym medium, że posiadanie firmowej strony to absolutne minimum, otwierające nowe możliwości rozwoju i reklamy.

Dlatego też coraz częściej tworzone są specjalne strony, tzw. landing page, które skierowane są głównie na pozyskiwanie klientów oraz sprzedaż.

Sukcesem tego typu strony jest również kwestia responsywności, czyli dostosowania układu strony do mniejszych ekranów. Jednak jak zaprojektować responsywny landing page, aby użytkownicy chętnie na nim przebywali i odczuwali przyjemność z użytkowania?

Niewątpliwie należy uprościć zawartość na mniejszym ekranie oraz odpowiednio ją przedstawić, ponieważ samo płynne skalowanie się elementów to zdecydowanie za mało. Szczególnie rozpatrując kwestię projektowania responsywnych stron docelowych pod kątem zwiększenia konwersji.

Jak zaprojektować responsywny landing page?

1. Inny sposób przeglądania strony.

Pierwsze, co należy uwzględnić przy procesie tworzenia strony, to zrozumienie, że przeglądanie serwisów na smartfonach wygląda zupełnie inaczej. Przede wszystkim korzystamy z nich najczęściej w sytuacjach, w których chcemy w jakikolwiek sposób zapełnić sobie czas – na spacerze z psem, podczas podróży, w kolejce, w momencie czekania na coś itd.

Jest to zazwyczaj sytuacja, w której mamy po prostu chwilę. Musimy więc przedstawić informację użytkownikom od razu. To, czego akurat szukają, ma zostać zaprezentowane bez zbędnego klikania lub przewijania, na które nie ma czasu.

Zatem jak zaprojektować responsywny landing page?

Należy skondensować maksymalnie treść

Mały ekran to przede wszystkim znacznie mniej miejsca niż na tradycyjnym ekranie monitora lub laptopa. Dlatego konieczna jest inna aranżacja treści, aby odbiorca skupił się tylko na głównym celu np. dokonaniu zakupu czy zapisaniu się do bazy e-mailowej.

Pomocne z pewnością będą takie działania, jak:

  • Skrócenie nagłówków do maksymalnie kilku słów. Mają być konkretne, trafiające w sedno, przekazujące najistotniejszą informację.
  • Unikanie rozwleczonej treści. Na małych ekranach urządzeń mobilnych dłuższe teksty są męczące. Odciągają tylko uwagę od głównego celu oraz niepotrzebnie wydłużają stronę. Należy przeredagować takie treści i zawrzeć najbardziej wartościowe informacje, które mogą zwiększyć sprzedaż, a nie być tylko sztucznym wypełniaczem.
  • Długie bloki tekstu należy przeobrażać w wypunktowane lub ponumerowane listy, a w razie możliwości sugeruję użyć ikon lub grafik.
  • Trzeba zmienić prezencję elementów, np. zamiast czterech kolumn na dużym ekranie, które na smartfonie układają się jedna pod drugą, zastosować slider. Użytkownik może szybciej przejrzeć materiał bez potrzeby przesuwania strony w dół, co jest znacznym ułatwieniem. Inny sposób to zwijanie treści w panele, które dopiero po kliknięciu ukazują pełną treść. W ten sposób ponownie zmniejszamy długość strony, a użytkownik może zobaczyć więcej treść jednocześnie, rozwijając tylko te działy, które go interesują.
  • Skup się tylko na konkretach, przedstawiając informacje, które są naprawdę wartościowe. Przedstaw mocne strony usługi / produktu, pokaż korzyści i wskaż, dlaczego warto skorzystać z oferty oraz co wyróżnia Cię od konkurencji. Nie bój się nawet chować większej części zbędnych informacji, które tylko użytkownicy będą pomijać. Pamiętaj, że z każdą kolejną pominiętą kwestią rośnie szansa na opuszczenie strony.
  • Mniejsza liczba pól w formularzu jest również atrakcyjnym wyjściem w oczach odbiorców. Wygoda wypełniania długiego formularza na smartfonie nie jest największa, więc jego optymalizacja poprzez zniwelowanie liczby pól jest najkorzystniejsza. W przypadku gdy jest to niemożliwie, można rozważyć podział formularza na etapy, gdzie pierwszy to tylko podanie adresu e-mail lub telefonu. W ten sposób użytkownik widzi stopniowo pola, a nie wszystko od razu.

2. Najistotniejsze informacje na samej górze.

Jak można zauważyć, powyższe informacje mają na celu skrócić i uprościć stronę. Dodatkowo dobrze jest na samej górze zamieścić najważniejsze sekcje, aby użytkownicy mogli zrealizować cel strony docelowej.

Chwytliwy nagłówek, USP, czyli unikalna propozycja sprzedaży, przycisk CTA wzywający do działania i istotne informacje warte odnotowania przed dokonaniem zakupu lub innej czynności na stronie. To są główne elementy, które mają pierwszeństwo w strukturze strony.

3. Design pozwalający oddychać.

Usilnie nakłaniam do minimalizacji strony, ponieważ prosta strona ma wiele zalet. Na urządzeniu mobilnym nie rozprasza uwagi, jest zorientowana na cel sprzedażowy, co podnosi konwersję oraz ułatwia sam sposób poruszania się po stronie.

Nie warto więc zapychać i tak małego oraz wąskiego ekranu urządzenia mobilnego na siłę. Wolne przestrzenie wprowadzą czystość, dodadzą elegancji, a przede wszystkim zwiększą swobodę korzystania.

4. Orientacja ekranu.

Żeby wiedzieć, jak zaprojektować responsywny landing page, trzeba mieć również na uwadze względy orientacji urządzenia.

Można je trzymać tradycyjnie pionowo lub poziomo. Podczas testowania dobrze jest o tym pamiętać, aby zniwelować możliwość błędów w wyświetlaniu strony.

5. Szybkość działania.

Sam fakt, że responsywny landing page powinien być szybki, nie jest niczym odkrywczym. Warte jest odnotowanie bardziej to, jak można odchudzić stronę z najbardziej obciążających elementów, czyli zdjęć.

Oto garść wskazówek:

  • Bezstratna kompresja zdjęć, pozwalająca oszczędzić naprawdę sporo miejsca, nie wpływając na jakość zamieszczonej grafiki. Polecam szybki i prosty konwerter online TinyPNG.
  • Należy rozważyć stosowanie ikon zamiast obrazów, które są nieporównywalnie mniejsze wagowo.
  • W sekcjach z tłem trzeba rozważyć ich zastąpienie jednolitym kolorem. Najczęściej tego typu sekcje i tak są prawie w całości zakryte przez treść.
  • Stosowanie lustracji zamiast tradycyjnej fotografii, jeśli efekt i sam przekaz będzie zachowany. Ilustracje posiadają znacznie mniej kolorów, co przekłada się na wagę obrazu. Są ponadto teraz bardzo modne.
  • W skrajnych przypadkach można w ogóle obrazów nie stosować. Nawet pojedyncza grafika może zmniejszyć ciężar strony o kilkanaście procent.

Odmiennym podejściem jest również zastosowanie techniki AMP, pozwalającej wczytywać stronę dosłownie w ułamku sekundy.

6. Przyciski dzwoniące.

Świetnym rozwiązaniem na smartfonach jest wykorzystanie potencjału tak zwanych przycisków „click to call”. Polega to na tym, że po kliknięciu przycisk nie przenosi nas tradycyjnie do innej części serwisu, a automatycznie wybiera numer i umożliwia natychmiastowy kontakt.

Jest to rozwiązanie właśnie pod mniejsze ekrany, gdzie można w bardzo szybki, łatwy i przede wszystkim efektywny sposób nawiązać kontakt z drugą stroną. Niewątpliwie może to okazać się bardzo pomocne pod kątem skuteczności responsywnego landing page’a.

Tego typu przycisk można ponadto przyczepić do dolnej części ekranu, który będzie widoczny cały czas, co jeszcze bardziej może podnieść jego skuteczność. Aczkolwiek w takich sytuacjach warto zachować zdrowy rozsądek i przemyśleć dobrze to rozwiązanie, ponieważ wszelkie tego typu elementy stałe mogą odbić się rykoszetem.

Część użytkowników po prostu może odebrać je negatywnie, jako element, który przesłania część ekranu. W takich sytuacjach najlepiej sprawdzą się testy A/B, które przedstawią faktyczne liczby i puszczą gdybanie o ich skuteczności w niepamięć.

Jak zaprojektować responsywny landing page, aby zarabiał?

Nie da się ukryć, że wskazówki co do tego, jak zaprojektować responsywny landing page, zmierzają ku minimalizacji, uproszczeniu i byciu konkretnym.

Na mniejszym ekranie trzeba trafić do odbiorcy szybko i dosadnie. Odbiorca powinien od razu widzieć, czego dotyczy strona, znać jej cel i szybko przyswajać informacje.

Tylko w ten sposób responsywny landing page ma szanse pozyskiwać adresy e-mail, sprzedawać czy zachęcać do większej interakcji ze stroną.

Artykuł oceniono na: 5 (głosy: 4)

Bartłomiej Kiljan

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Spodobają Ci się również: