Najlepsze porady dotyczące projektowania stron docelowych na urządzenia mobilne, których nie znajdziesz nigdzie indziej

Istnieje wiele zasobów online, które dotyczą projektów mobilnych stron docelowych po kliknięciu, ale nie ma wielu szczegółowych instrukcji projektowania, jak faktycznie utworzyć stronę o wysokim współczynniku konwersji.

Jaki układ struktury jest zalecany do przeglądania mobilnego? Ile pikseli powinny mieć przyciski? Ile pikseli powinno oddzielać elementy? Czy powinieneś używać efektu „najechania”? Czy etykiety formularzy powinny znajdować się wewnątrz czy na zewnątrz?

Nazywam się Cosmin Serban, dyrektor ds. usług projektowych w Instapage. Możesz zapytać, co sprawia , że Cosmin ma kwalifikacje do pisania na temat mobilnego projektu strony docelowej po kliknięciu?

Uczę klientów o najlepszych praktykach w projektowaniu i konstruowaniu ich stron docelowych po kliknięciu w celu poprawy ich współczynników konwersji. Ponadto posiadam:

• Sprawdzono ponad 1000 stron docelowych po kliknięciu
• Współpracujemy z klientami, aby zapewnić, że ich przekaz dociera do odbiorców, a odwiedzający mają dobre wrażenia, które ostatecznie prowadzą do konwersji

Ponadto byłem częścią zespołu, który opracował ponad 200 zoptymalizowanych szablonów używanych do tworzenia i uruchamiania ponad 200 000 stron docelowych po kliknięciu, szablony można znaleźć tutaj.

Projekt mobilnej strony docelowej po kliknięciu: co warto wiedzieć przed rozpoczęciem

Niektóre koncepcje zawarte w tym artykule zostały opracowane wewnętrznie podczas tworzenia naszej biblioteki szablonów. Nie musi to oznaczać, że wszystkie te wskazówki powinny mieć zastosowanie do każdej tworzonej strony docelowej po kliknięciu. Każda strona docelowa po kliknięciu ma swój własny, unikalny zestaw wyzwań, ale zrozumienie tych podstawowych pojęć powinno zdecydowanie pomóc w zapewnieniu lepszych wrażeń osobom odwiedzającym witrynę za pomocą urządzenia mobilnego.

Zacznijmy od najważniejszych różnic między środowiskiem stacjonarnym a mobilnym.

Struktura

Nawet jeśli na początku projektu tak nie jest, posiadanie struktury, w której dostarczasz odpowiednią grupę elementów we właściwym czasie, jest bardziej krytyczne niż myślisz.

Pierwszą rzeczą, która przychodzi na myśl, jest zupełnie inny sposób, w jaki nasi odwiedzający będą skanować treści na stronach mobilnych. Wszyscy słyszeliśmy o wzorze F lub Z na stronach docelowych na komputery stacjonarne po kliknięciu, ale jak nazywa się wzorzec dla urządzeń mobilnych? Niekoniecznie nadajemy mu nazwę, ale najprawdopodobniej jest bardzo liniowy. Przewijanie w górę i w dół to jedyny sposób, aby zrozumieć, co oferuje strona docelowa po kliknięciu:

Ponieważ jest to jedno z najważniejszych ograniczeń w interakcji użytkowników ze stroną docelową po kliknięciu, sugerujemy trzymanie się układu jednokolumnowego zamiast próbowania wciskania dużej ilości treści w poziomie. (Nikt nie lubi szczypać i powiększać.)

W przypadku komputerów stacjonarnych marketerzy cyfrowi najczęściej zastanawiają się nad umiejscowieniem poszczególnych elementów i ich wpływem. Na urządzeniach mobilnych lepiej zrobić zmianę i pomyśleć o grupach elementów oraz o tym, jak ułożyć je jeden na drugim, aby uzyskać maksymalny efekt.

To bezpośrednie porównanie pokazuje strukturę strony na komputery w porównaniu ze stroną mobilną:

Zalecamy przejście od lewej do prawej i umieszczenie każdej grupy elementów pod sobą. Weźmy na przykład obszar nagłówka (nad zakładką). Na górze mamy logo, następnie grupę utworzoną z głównego nagłówka i pomocniczego nagłówka, a pod spodem całą grupę pól formularza.

Możliwość grupowania elementów tworzy natywnie mobilny, responsywny zestaw obiektów. Alternatywnie grupy można skonfigurować tak, aby blokowały proporcje złożonych aranżacji, aby zachować ich dokładne proporcje po konwersji na mobilną wersję strony.

Mobile Aspect Ratio Lock utrzymuje grupy warstwowe razem i blokuje proporcje, niezależnie od tego, czy znajdują się one w układzie na komputerze stacjonarnym, czy na urządzeniu mobilnym.

Jakiekolwiek dwa lub więcej elementów ściśle ze sobą powiązanych lub uzupełniających się powinny zawsze trzymać się razem. W tej sytuacji umieszczenie pola formularza na samej górze strony nie miałoby sensu, więc koncepcja umieszczania formularza w części górnej strony nie jest idealna. Przedstawienie odwiedzającemu kontekstu tego, co rejestruje jako pierwsze, jest ważniejsze niż tylko umożliwienie mu działania tak szybko, jak to możliwe.

Czas ładowania

Bez względu na urządzenie, z którego korzystają odwiedzający, szybkość ładowania strony jest bardzo ważna. Pamiętaj, że większość odwiedzających będzie korzystać z ograniczeń danych mobilnych i ponosić koszty, aby zobaczyć Twoją stronę, więc uważaj, jakiego rodzaju grafikę lub elementy dodajesz do stron. Wyobraź sobie, że otwierasz stronę i automatycznie odtwarzasz wideo.

Jeśli potrzebujesz dużo animacji do treści pomocniczych, sugerujemy pozostać przy prostych obrazach na urządzenia mobilne. Mówiąc prościej, mam na myśli, że musisz stworzyć niestandardowe obrazy tła dla określonej sekcji. Korzystanie z oprogramowania do edycji zdjęć w celu dostosowania rozmiaru lub układu zdjęcia może być warte dodatkowego czasu wymaganego, gdy oznacza to, że możesz przyspieszyć swoje strony.

To samo z obrazami tła, ponieważ nie potrzebujesz obrazu o szerokości 2000 pikseli, który ma 300 KB do załadowania w sekcji, sugeruję, aby projektant stworzył niestandardowy obraz, który możesz ustawić jako tło sekcji:

W większości przypadków utrzymanie strony mobilnej tak proste, jak to możliwe, jest zawsze dobrym pomysłem. Na przykład, jeśli masz wiele elementów graficznych, które przekazują tę samą wiadomość, po prostu pokaż jeden na urządzeniu mobilnym.

Ponieważ większość telefonów komórkowych dostosuje się do rozmiaru obszaru zawartości udostępnianego w programie do tworzenia telefonów komórkowych, dobrą zasadą jest posiadanie obrazu o szerokości co najmniej 400 pikseli, aby upewnić się, że po bokach nie ma pustych przestrzeni.

Utwórz stronę docelową AMP po kliknięciu

Stworzenie pozytywnej strony docelowej po kliknięciu na urządzeniach mobilnych jest niezbędne, ponieważ na stronie docelowej po kliknięciu następują konwersje. Jeśli Twoja strona ładuje się zbyt wolno lub tworzy chaotyczne wrażenia od reklamy do kliknięcia, użytkownicy będą się odrzucać.

Następnie weź pod uwagę, że Google traktuje jakość strony docelowej po kliknięciu jako jeden z czynników określających ranking reklamy, który ostatecznie wpływa na współczynnik klikalności. Zsumuj to wszystko, a marki mają poważny problem. Na szczęście istnieje framework AMP.

Zwłaszcza strony AMP są atrakcyjne dla reklamodawców, ponieważ zapewniają bardziej atrakcyjne wrażenia użytkowników mobilnych dzięki niemal natychmiastowemu czasowi wczytywania i płynnemu przewijaniu, a jednocześnie obsługują pewne dostosowywanie stylu i marki. Ponieważ AMP ogranicza HTML/CSS i JavaScript, umożliwia szybsze renderowanie strony docelowej po kliknięciu. W przeciwieństwie do tradycyjnych stron mobilnych, strony AMP są automatycznie buforowane przez Google AMP Cache, aby skrócić czas ładowania w Google.

Zalety frameworka AMP naprawdę przewyższają jego ograniczenia:

• Szybsze ładowanie strony na urządzeniach mobilnych
• Lepsze wrażenia użytkownika podczas przeglądania mobilnego
• Korzystanie ze stron AMP może pomóc w podniesieniu Wyniku Jakości
• Google będzie faworyzować strony korzystające z AMP

Od czerwca 2018 r. Instapage oferuje strony docelowe AMP po kliknięciu, na których marketerzy cyfrowi mogą tworzyć strony zgodne z AMP w aplikacji bez programisty. Ponieważ w końcu, jeśli strona nie ładuje się natychmiast, to nie jest wystarczająco szybkie.

Projektowanie dla dotyku

Jednym z największych wyzwań związanych z projektowaniem mobilnych stron docelowych po kliknięciu jest zapewnienie użytkownikom jak najłatwiejszego działania. Tą czynnością może być przesłanie formularza lub proste dotknięcie przycisku. Można by się spodziewać, że większość ludzi dokona pewnych zmian, ale nie zawsze tak jest.

Wszyscy mieliśmy do czynienia ze stronami, na których bardzo trudno jest coś dotknąć lub obsługa nie jest dostosowana do użytkowników mobilnych. Zwłaszcza linki tekstowe — dostosowanie rozmiaru dowolnego elementu tekstowego, który jest hiperlinkiem, jest bardzo pomocne. Twój gość nie powinien się powiększać, aby wykonać żądane działanie.

guziki

Jednak największym problemem, jaki zauważyliśmy, jest rozmiar przycisków na stronach docelowych po kliknięciu. Nasz zespół zaleca zaprojektowanie przycisków, które mają co najmniej 70 pikseli wysokości i nie bój się robić ich tak szerokich, jak to możliwe, ale nigdy nie rozciągaj ich do pełnej szerokości (400 pikseli), ponieważ mogą zostać pomylone z małą sekcją.

Efekt najechania jest miłym akcentem w przypadku stron na komputery, ponieważ sygnalizuje odwiedzającym, że mogą podjąć działania na tym konkretnym elemencie. Na urządzeniach mobilnych efekty najechania są zbędne.

Marże

W przypadku marginesów zalecamy zachowanie bezpiecznej strefy co najmniej 20 pikseli w pionie z każdej strony i unikanie napięć wizualnych, które mogą pojawić się, gdy elementy znajdują się zbyt blisko boków ekranu telefonu.

Pusta przestrzeń to coś, co jest tak samo ważne dla stron mobilnych, jak dla stron na komputery. Podstawowe koncepcje nadal obowiązują, po prostu staraj się wszystko rozłożyć i nie umieszczać elementów naprawdę blisko siebie. Dzięki temu unikniesz napięcia wzrokowego.

Posiadanie stałych marż z pewnością doprowadzi do lepszego doświadczenia użytkownika. Nasz zespół zwykle upewnia się, że każdy element ma co najmniej 20-40 pikseli. To, ile zdecydujesz, zależy od Ciebie, ponieważ każdy blok może mieć unikalną strukturę elementów.

Jest to dość subiektywne, ale po ustaleniu reguły spróbuj ją powielić na całej stronie, aby nadać jej bardziej nowoczesny wygląd:

Czytelność

Można by pomyśleć, że możliwość wyraźnego odczytania treści jest oczywista, ale zbyt wiele razy widzieliśmy strony docelowe po kliknięciu, na których tekst jest zbyt mały lub zbyt duży. Znalezienie odpowiedniej równowagi jest dość łatwe, dobrą zasadą dotyczącą rozmiaru czcionki używanej dla poszczególnych elementów są:

• Główny nagłówek: 28 pikseli
• Podtytuł: 22 piksele
• Akapity: 17 pikseli
• Inne szczegóły: 15 pikseli

Oczywiście możesz dostosować te rozmiary, ponieważ nie ma jednego rozmiaru, który pasowałby do wszystkich potrzeb. Powinna jednak służyć jako dobry punkt odniesienia przy projektowaniu mobilnej strony docelowej po kliknięciu.

Kolejną rzeczą, o której warto wspomnieć, jest wysokość linii z elementami tekstowymi.

W niektórych sytuacjach na komputerze warto mieć 1.0 lub nawet 1.2, budując mobilną stronę docelową post-click upewnij się, że wysokość linii dla elementów tekstowych wynosi co najmniej 1.4.

Dolna linia: Im mniejszy rozmiar czcionki, tym większa powinna być wysokość linii.

Formularze

Ponieważ formularze są najważniejszą częścią większości stron docelowych po kliknięciu, ułatwienie ludziom przesyłania informacji ma kluczowe znaczenie.

Na naszych stronach mobilnych zwykle rozciągamy pola formularza maksymalnie w poziomie i unikamy sytuacji, w których pole formularza i przycisk znajdują się w tej samej linii. To po prostu złe doświadczenie:

Kolejną rzeczą, która pojawia się bardzo często, jest zajmowanie się formularzami, które mają wiele pól.

Najlepszą praktyką, którą odkrył nasz zespół, jest to, że za każdym razem, gdy strona ma więcej niż 2 pola formularza, aby ustawić pozycję etykiety na zewnątrz, ułatwiając odwiedzającym zorientowanie się, jakie informacje są potrzebne, zamiast próbować zapamiętać, co należy wprowadzić:

Zwiększ liczbę konwersji mobilnych już dziś

Podobnie jak strony na komputery, projektowanie mobilnej strony docelowej po kliknięciu ma na celu przede wszystkim wygodę użytkownika i to, co przekona ludzi do zaangażowania i konwersji. Bez uwzględnienia powyższych sugestii prawdopodobnie ucierpi Twój współczynnik konwersji mobilnej, a ludzie będą się odbijać.

Rozważ wdrożenie zaleceń i zobacz, jak Twoje strony docelowe po kliknięciu przekształcają się w wysoce zoptymalizowane zasoby konwersji. Pobierz demo Instapage AMP już dziś.