Czego się dowiesz?
Dowiedz się, jak projektować formularz rejestracyjny na urządzenia mobilne zgodnie z najlepszymi praktykami Klaviyo, aby mieć pewność, że formularz pop-up i formularz rozwijany poziomo są zoptymalizowane pod kątem odwiedzających korzystających z urządzeń mobilnych.
Kupujący online coraz częściej używają urządzeń mobilnych do odkrywania nowych sklepów, przeglądania produktów i robienia zakupów, dlatego ważniejsze niż kiedykolwiek jest dopilnowanie, aby Twoja witryna wyglądała tak dobrze na urządzeniach mobilnych, jak na komputerach stacjonarnych — a to obejmuje również formularze rejestracyjne.
Kilka słów na początek
W Klaviyo możesz tworzyć formularze, które wyświetlają się na wszystkich urządzeniach (czyli są widoczne na komputerach i urządzeniach mobilnych), albo możesz tworzyć formularze tylko na urządzenia mobilne, które wyświetlają się wyłącznie na urządzeniach mobilnych.
Jeśli formularz jest ustawiony tak, aby wyświetlał się na wszystkich urządzeniach, Klaviyo automatycznie optymalizuje niektóre elementy, takie jak rozmiary czcionek i obrazy, aby poprawić jego wygląd dla kupujących na urządzeniach mobilnych; jednak ten przewodnik obejmie dodatkowe sprawdzone praktyki, o których warto pamiętać. Użyj selektora widoku w prawym górnym rogu kreatora formularzy, aby podczas tworzenia formularza przełączać się między widokiem na komputerze a widokiem mobilnym. Ikona pulpitu pokaże, jak formularz wygląda dla kupujących na komputerze, a ikona telefonu pokaże, co widzą kupujący na urządzeniach mobilnych.
Ten przewodnik obejmuje najlepsze praktyki tworzenia wyskakujących i rozwijanych poziomo formularzy, które wyświetlają się na urządzeniach mobilnych. Są pomocne niezależnie od tego, czy formularz wyświetla się na wszystkich urządzeniach, czy tylko na urządzeniach mobilnych. Aby zapoznać się z bardziej szczegółowym omówieniem formularzy rejestracyjnych na urządzeniach mobilnych, przejdź do podstaw: projektowanie formularzy mobilnych.
Ogólne najlepsze praktyki dotyczące formularzy
Wiele najlepszych praktyk dotyczących formularzy na komputery stacjonarne ma zastosowanie także na urządzeniach mobilnych:
- Krótko i na temat: jeśli masz dużo pól, rozważ wielostopniowy formularz.
- Jeśli Twój formularz zbiera zgodę na SMS, zbierz adres e-mail w pierwszym kroku, a następnie SMS w drugim kroku za pomocą Inteligentna zgoda opt-in, aby odwiedzający na urządzeniach mobilnych mogli subskrybować w najprostszy sposób.
- Upewnij się, że łatwo ją zamknąć, aby odwiedzający nie frustrowali się i nie opuszczali witryny.
- Korzystanie z teasera formularza daje kupującym możliwość zamknięcia i ponownego otwarcia formularza, kiedy chcą.
- Jeśli formularz jest ustawiony tak, aby wyświetlał się na wszystkich urządzeniach (czyli zobaczą go zarówno użytkownicy komputerów, jak i urządzeń mobilnych) i zawiera obraz boczny, pozostaw obraz boczny ustawiony tak, aby wyświetlał się tylko na urządzeniach mobilnych.
- Używaj zwięzłych etykiet dla każdego pola wejściowego (np. adres e-mail, numer telefonu itd.), które mieszczą się w jednym wierszu, aby kupujący mogli łatwo zobaczyć, o jakie informacje prosisz.
SEO i formularze mobilne
Warto wziąć pod uwagę najlepsze praktyki SEO na urządzenia mobilne, szczególnie podczas tworzenia formularzy na stronie głównej lub innych stronach docelowych. Formularze, które pojawiają się na popularnych stronach docelowych z bezpłatnych wyników wyszukiwania, nie powinny zasłaniać treści witryny ani zakłócać wrażeń odwiedzających; w przeciwnym razie algorytmy wyszukiwania mogą nałożyć karę na stronę. Dowiedz się więcej o inwazyjnych stronach przejściowych i SEO.
Aby tego uniknąć:
- W zakładce Targetowanie i zachowania ustaw czas wyświetlania formularza na Na podstawie reguł, a następnie ustaw dłuższe opóźnienie (np. gdy odwiedzający opuszcza stronę).
- Dodaj teaser, który wyświetla się Przed wyświetleniem formularza.
Optymalizacja wyskakujących okienek
Formularz pop-up pojawia się na środku ekranu kupującego, często zakrywając dużą część strony i utrudniając interakcję z innymi elementami strony, gdy formularz jest otwarty. To sprawia, że formularze pop-up są bardziej uciążliwe, ale też lepiej konwertują.
Aby zoptymalizować działanie wyskakujących okienek na urządzeniach mobilnych:
- Wyłącz zamykanie formularza, gdy kupujący na urządzeniu mobilnym kliknie poza obszarem formularza, aby ograniczyć przypadkowe zamknięcia formularza.
- Przejdź do Targetowanie i sposób działania.
- Przewiń w dół do Urządzenia.
- W sekcji Kliknij poza formularzem, aby zamknąć wyłącz przełącznik Mobilne.
- Upewnij się, że ikona zamknięcia formularza (przycisk X) jest wystarczająco duża, nawet na małym ekranie, np. na urządzeniu mobilnym.
- Kliknij ikonę zamykania w podglądzie formularza, aby dostosować jego rozmiar.
- Sprawdź, jak formularz wygląda na Twoim urządzeniu mobilnym, aby upewnić się, że łatwo go znaleźć i kliknąć. Na przykład ikona zamykania w formularzu po lewej stronie może być trudna do kliknięcia na urządzeniu mobilnym. Natomiast ikona zamykania w formularzu po prawej stronie jest większa i łatwa do znalezienia.
- Wyróżnij wizualnie wyskakujące okienko na tle reszty witryny, używając koloru nakładki, cienia lub obu tych elementów.
- Przejdź do zakładki Style.
- W sekcji Tło formularza ustaw Kolor nakładki, aby użyć półprzezroczystej nakładki, która zwróci uwagę na formularz i przyciemni treści witryny, gdy formularz jest otwarty.
- Skonfiguruj Cień, aby dodać subtelne cieniowanie wokół formularza i oddzielić go od otaczającej treści.
- Dostosuj marginesy formularza, aby bardziej przypominał formularz pop-up na urządzeniach mobilnych i nie rozciągał się od krawędzi do krawędzi.
- Na karcie Style przewiń w dół do sekcji Style formularza.
- Zwiększ lewy/prawy margines w zależności od tego, jak wygląda to w podglądzie.
Te ustawienia będą widoczne zarówno w wersji formularza na komputer, jak i na urządzenia mobilne.
Optymalizowanie wysuwanych okienek
Gdy pojawi się formularz rozwijany poziomo, odwiedzający korzystający z urządzeń mobilnych nadal mogą korzystać z witryny za formularzem, chyba że włączono opcję Nakładka mobilna. Mogą zamknąć formularz, wypełnić go lub pozostawić go otwartym podczas dalszego przeglądania. Ogólnie rzecz biorąc, sprawia to, że formularze rozwijane poziomo są mniej natrętne niż formularze pop-up.
Aby zoptymalizować formularz rozwijany poziomo pod kątem urządzeń mobilnych:
- Ustaw formularz tak, aby wysuwał się z góry lub dołu ekranu.
- Przejdź do sekcji Style.
- Wybierz Pozycja rozwijane poziomo na urządzeniach mobilnych, a następnie wybierz Zadokuj u dołu lub Zadokuj u góry. Po wybraniu tego ustawienia formularz będzie rozwijane poziomo od góry lub dołu ekranu i zakryje część ekranu od krawędzi do krawędzi.
- Wizualnie oddziel formularz rozwijany poziomo od reszty witryny, używając nakładki mobilnej, cienia lub obu tych elementów.
- Przejdź do zakładki Style.
- Przewiń do ustawień Tło formularza.
- Włącz Nakładkę mobilną, aby klienci mobilni nie mogli klikać żadnych innych elementów w Twojej witrynie, dopóki nie wypełnią formularza lub go nie zamkną. Pamiętaj, że Nakładka mobilna nie pojawi się, gdy formularz rozwijany poziomo jest wyświetlany na komputerze.
- Włącz Drop Shadow, aby dodać delikatne cieniowanie wokół formularza i oddzielić go od otaczających treści. Pamiętaj, że ustawienia Drop shadow dotyczą zarówno wersji mobilnej, jak i desktopowej formularza.
Kolejne kroki
Gdy zoptymalizujesz formularze pod kątem urządzeń mobilnych, wypróbuj testy A/B projektów formularzy, aby lepiej zrozumieć preferencje odwiedzających witrynę.
Dodatkowe źródła
- Formularze rejestracyjne: pierwsze kroki
- Zrozumienie ustawień odrzucania formularza
- Podstawy: projektowanie formularzy mobilnych
- Jak używać formularzy pop-up do pozyskiwania zgody na wysyłkę SMS