Jak zoptymalizować formularze popup i menu rozwijane poziomo dla urządzeń mobilnych?

Czego się dowiesz

Dowiedz się, jak zaprojektować mobilny formularz rejestracyjny z uwzględnieniem najlepszych praktyk Klaviyo, aby upewnić się, że formularze popup i menu rozwijane poziomo są zoptymalizowane pod kątem użytkowników mobilnych. 

Kupujący online coraz częściej używają swoich urządzeń mobilnych do odkrywania nowych sklepów, przeglądania produktów i dokonywania zakupów, więc ważniejsze niż kiedykolwiek jest upewnienie się, że Twoja witryna wygląda tak dobrze na urządzeniach mobilnych, jak na komputerach stacjonarnych, a to obejmuje Twój formularz rejestracyjny. 

Kilka słów na początek

W Klaviyo możesz tworzyć formularze, które wyświetlają się na wszystkich urządzeniach (co oznacza, że są widoczne na komputerach stacjonarnych i urządzeniach mobilnych) lub możesz tworzyć formularze tylko dla urządzeń mobilnych, które wyświetlają się tylko na urządzeniach mobilnych.

Jeśli Twój formularz jest ustawiony na wyświetlanie 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; chociaż ten przewodnik obejmie dodatkowe najlepsze praktyki, o których należy pamiętać. Użyj selektora widoku w prawym górnym rogu kreatora formularzy, aby przełączać się między widokiem stacjonarnym i mobilnym podczas tworzenia formularza. Ikona na pulpicie pokaże, jak formularz wygląda dla kupujących na komputerach, podczas gdy ikona mobilna pokazuje, co widzą kupujący na urządzeniach mobilnych.

W tym przewodniku omówimy najlepsze praktyki dotyczące tworzenia formularzy popup i menu rozwijanych poziomo, które pojawiają się na urządzeniach mobilnych. Są one pomocne niezależnie od tego, czy Twój formularz wyświetla się na wszystkich urządzeniach, czy tylko na urządzeniach mobilnych. Aby uzyskać bardziej szczegółowy przegląd formularzy rejestracyjnych specjalnie na urządzeniach mobilnych, przejdź do podstaw: projektowanie formularzy mobilnych.

Ogólne najlepsze praktyki dotyczące formularzy

Wiele z najlepszych praktyk dotyczących formularzy na komputery stacjonarne ma również zastosowanie do urządzeń mobilnych: 

• Postaraj się, aby formularz był krótki i zwięzły: jeśli masz wiele pól, rozważ formularz wieloetapowy.
  • Jeśli Twój formularz zbiera zgodę na wysyłkę SMS, zbierz e-mail w pierwszym kroku, a następnie SMS w drugim kroku z Inteligentną zgodą 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 byli sfrustrowani i nie opuścili Twojej witryny. 
  • Korzystanie z formularza teaser daje kupującym możliwość zamykania i ponownego otwierania formularza w zależności od potrzeb.
• Jeśli Twój formularz jest ustawiony na wyświetlanie na wszystkich urządzeniach (co oznacza, że wszyscy kupujący na komputerach stacjonarnych i urządzeniach mobilnych będą go widzieć) i zawiera obraz boczny, pozostaw obraz boczny, aby był wyświetlany tylko na urządzeniach mobilnych. 
  
• Używaj zwięzłych etykiet dla każdego pola wejściowego (np. adres e-mail, numer telefonu itp.), które mieszczą się w jednej linii, aby kupujący mogli łatwo zobaczyć, o jakie informacje prosisz.

SEO i formularze mobilne 

Ważne jest, aby wziąć pod uwagę najlepsze praktyki SEO dla urządzeń mobilnych, szczególnie podczas tworzenia formularzy na stronie głównej lub innej stronie docelowej. Formularze, które pojawiają się na popularnej stronie docelowej wyszukiwania organicznego, nie powinny zasłaniać treści Twojej witryny ani zakłócać doświadczenia odwiedzającego; w przeciwnym razie strona może zostać ukarana przez algorytmy wyszukiwania. Dowiedz się więcej o natrętnych reklamach pełnoekranowych i SEO.

Aby tego uniknąć:

• W zakładce Targetowanie i zachowania ustaw czas formularza na Oparty na regułach, a następnie ustaw dłuższe opóźnienie (np. gdy użytkownik opuszcza stronę).
• Dodaj etykietę teaser która wyświetla się przed wyświetleniem formularza.

Optymalizacja wyskakujących okienek

Wyskakujące okienko formularza pojawia się na środku ekranu kupującego, często zakrywając znaczną część strony i utrudniając mu interakcję z innymi elementami strony, gdy formularz jest otwarty. Sprawia to, że wyskakujące okienka są bardziej uciążliwe, ale także zapewniają wyższą konwersję. 

Aby zoptymalizować działanie wyskakujących okienek na urządzeniach mobilnych:

1. wyłącz zamykanie formularza, gdy klient mobilny kliknie poza obszarem formularza, aby zmniejszyć liczbę przypadkowych zamknięć formularza.
   • Przejdź do opcji Kierowanie i zachowania.
   • Przewiń w dół do pozycji Urządzenia.
   • W sekcji Kliknij poza formularzem, aby zamknąć, wyłącz przełącznik Mobile.
     
2. Upewnij się, że ikona zamknięcia formularza (przycisk X) jest wystarczająco duża, nawet na małym ekranie, takim jak urządzenie mobilne.
   • Kliknij ikonę zamknięcia w podglądzie formularza, aby dostosować jego rozmiar.
   • Przetestuj wygląd formularza na własnym urządzeniu mobilnym, aby upewnić się, że łatwo go znaleźć i kliknąć.
     Na przykład ikona zamknięcia w formularzu po lewej stronie może być trudna do kliknięcia na urządzeniu mobilnym. Jednak ikona zamknięcia w formularzu po prawej stronie jest większa i łatwa do znalezienia. 
     
3. Wizualnie oddziel wyskakujące okienko od reszty witryny, używając koloru nakładki, cienia lub obu.
   • Przejdź do zakładki Style.
   • W sekcji Tło formularza ustaw Kolor nakładki, aby użyć półprzezroczystej nakładki w celu przyciągnięcia uwagi do formularza i przyciemnienia zawartości witryny, gdy formularz jest otwarty.
   • Skonfiguruj cień, aby zapewnić subtelne cieniowanie wokół formularza w celu oddzielenia go od otaczającej zawartości.
4. Dostosuj marginesy formularza, aby wyglądał bardziej jak wyskakujące okienko formularza na urządzeniach mobilnych i nie przechodził od krawędzi do krawędzi.
   
   1. Na karcie Style przewiń w dół Style formularza.
   2. Zwiększ lewy/prawy margines w zależności od tego, jak wygląda on w podglądzie.

Optymalizacja wysuwanych okien 

Gdy pojawia się formularz menu rozwijanego poziomo, użytkownicy mobilni nadal mogą wchodzić w interakcje z Twoją witryną za formularzem, chyba że włączona jest nakładka mobilna. Mogą oni zamknąć formularz, wypełnić go lub pozostawić otwarty podczas dalszego przeglądania. Ogólnie rzecz biorąc, sprawia to, że flyouty są mniej uciążliwe niż wyskakujące okienka. 

Aby zoptymalizować Twoje menu rozwijane poziomo dla urządzeń mobilnych:

1. Ustaw formularz tak, aby wysuwał się z góry lub z dołu ekranu.
   • Przejdź do sekcji Style.
   • Wybierz opcję Menu mobilne rozwijane poziomo Position, a następnie wybierz opcję Dock to Bottom lub Dock to Top.
     Po wybraniu tego ustawienia Twój formularz będzie wysuwał się z górnej lub dolnej części ekranu i obejmował część ekranu od krawędzi do krawędzi.
     
2. Wizualnie oddziel swoje menu rozwijane poziomo od reszty witryny za pomocą nakładki mobilnej, cienia lub obu.
   • Przejdź do zakładki Style.
   • Przejdź do ustawień tła formularza.
   • Włącz nakładkę mobilną, aby klienci mobilni nie mogli klikać żadnych innych elementów w Twojej witrynie, dopóki nie wypełnią lub nie zamkną formularza. Zwróć uwagę, że nakładka Mobile nie pojawi się, gdy formularz menu rozwijanego poziomo jest wyświetlany na komputerze stacjonarnym.
   • Włącz opcję Drop Shadow, aby zapewnić subtelne cieniowanie wokół formularza w celu oddzielenia go od otaczającej zawartości. Pamiętaj, że ustawienia Drop shadow mają wpływ zarówno na mobilną, jak i stacjonarną wersję Twojego formularza.
     

Kolejne kroki

Po zoptymalizowaniu formularzy pod kątem urządzeń mobilnych, wypróbuj Testy A/B, aby lepiej zrozumieć preferencje odwiedzających Twoją witrynę. 

Dodatkowe źródła 

• Pierwsze kroki z formularzami rejestracyjnymi
• Zrozumienie ustawień zwalniania formularzy 
• Podstawy: projektowanie formularzy mobilnych
• Jak używać wyskakującego formularza do zbierania zgody na wysyłkę SMS