5 wskazówek dotyczących projektowania formularzy przyjaznych dla urządzeń mobilnych

Formularze kontaktowe są kluczowym elementem wielu stron internetowych. Chociaż zazwyczaj są one proste pod względem funkcjonalności, nadal musisz upewnić się, że są łatwe w użyciu, jeśli chcesz gromadzić potencjalnych klientów i pozostawać w kontakcie z użytkownikami. Zwykle nie jest to problem z ruchem na komputerach, ale korzystanie z formularzy może być trudne, jeśli korzystasz z urządzenia mobilnego.

W tym artykule omówimy znaczenie projektowania formularzy przyjaznych dla urządzeń mobilnych. Następnie przedstawimy Ci pięć wskazówek, dzięki którym Twoje formularze będą działały bez zarzutu na urządzeniach mobilnych.

Chodźmy do pracy!

Dlaczego ważne jest, aby Twoje formularze były przyjazne dla urządzeń mobilnych

Formy mają różne kształty i rozmiary. Najczęściej będziesz miał do czynienia z formularzami kontaktowymi:

Formularze rejestracji (lub opt-in) są również niezwykle popularne, ponieważ umożliwiają zbieranie wiadomości e-mail i targetowanie ich podczas kampanii:

Jednak formularze mogą być używane do wszelkiego rodzaju innych celów. Na przykład możesz chcieć zbierać informacje za pomocą ankiety lub quizu online, w którym to przypadku będziesz potrzebować formularzy, w których użytkownicy będą mogli wprowadzać odpowiedzi.

Innymi słowy, formularze są bardzo wszechstronne i prawie każda witryna korzysta z formularzy w taki czy inny sposób. Dlatego zapewnienie łatwości korzystania z formularzy ma kluczowe znaczenie (chyba że chcesz zapewnić odwiedzającym frustrujące wrażenia).

Korzystanie z formularzy z komputera stacjonarnego lub laptopa jest zwykle bardzo proste. Masz mysz i pełną klawiaturę, więc wybranie pola, którego chcesz użyć i wprowadzenie danych nie powinno stanowić problemu. Jednak przeglądanie sieci ze smartfona lub innego urządzenia o niewielkich rozmiarach powoduje komplikacje.

Podczas pracy z palcami na małym ekranie interakcja z formularzami może być czasami uciążliwa z powodu niewłaściwych decyzji projektowych. Jest to coś, czego należy unikać we własnych projektach. W końcu, jeśli użytkownicy mobilni nie mogą wchodzić w interakcję z formularzami, możesz stracić na konwersjach, potencjalnych klientach lub po prostu zdenerwować odwiedzających.

Ważne jest również, aby zrozumieć, że ruch mobilny jest teraz tak samo – jeśli nie ważniejszy – jak źródła na komputerach stacjonarnych. W rzeczywistości ruch mobilny już przewyższył ten ostatni w ciągu ostatnich kilku lat. Oznacza to, że zaprojektowanie witryny przyjaznej dla urządzeń mobilnych powinno być Twoim głównym celem podczas uruchamiania nowego projektu.

5 wskazówek dotyczących projektowania formularzy przyjaznych dla urządzeń mobilnych

Na szczęście projektowanie formularzy przyjaznych dla urządzeń mobilnych nie jest tak trudne, jak mogłoby się wydawać. W większości przypadków wystarczy pamiętać o pewnych podstawach i dokładnie przetestować formularze przed ich udostępnieniem. Porozmawiajmy o tym, jak to zrobić!

1. Usuń niepotrzebne sekcje

Im więcej pól zawierają Twoje formularze, tym trudniej będzie z nich korzystać na urządzeniach mobilnych. Dzieje się tak, ponieważ korzystanie z formularzy na urządzeniach mobilnych jest po prostu bardziej skomplikowane, jakkolwiek dobrze zaprojektowane. Zmniejszając liczbę pól lub sekcji, które zawierają Twoje formularze, możesz zmaksymalizować szanse na wypełnienie ich przez odwiedzających.

Oto krótki przykład formularza kontaktowego z kilkoma dodatkowymi polami, bez których mógłby się obejść:

W większości przypadków wszystko, czego potrzebujesz do doskonałego formularza kontaktowego, to imię i nazwisko, adres e-mail i treść wiadomości, którą chcesz otrzymać. Wszystko inne zależy od tego, jaki rodzaj witryny prowadzisz i czy starasz się zbierać leady.

Ostatecznie im mniej pól zawiera Twój formularz, tym łatwiej będzie z nich korzystać użytkownicy mobilni. W końcu wybranie pola za pomocą ekranu dotykowego może być trudne, nawet jeśli jest dobrze zaprojektowane, więc chcesz zminimalizować liczbę „skoków”, które muszą wykonać użytkownicy.

Twoim celem na tym etapie jest przyjrzenie się istniejącym formularzom w Twojej witrynie. Przejrzyj każdą z ich sekcji i zastanów się, czy naprawdę potrzebujesz dodatkowych pól poza tymi, o których wspomnieliśmy wcześniej. Jeśli jest zbyteczne pole, po prostu je wytnij.

2. Jeśli to możliwe, korzystaj z list rozwijanych

Większość z nas swobodnie pisze na urządzeniach mobilnych i korzysta z ekranów dotykowych. Jednak wysyłanie SMS-ów do znajomego i wypełnianie formularza kontaktowego to dwa bardzo różne doświadczenia. W przypadku tych ostatnich istnieje duże prawdopodobieństwo, że będziesz sfrustrowany, jeśli będziesz musiał wpisać dużo informacji.

Jednym ze sposobów na ułatwienie życia użytkownikom mobilnym jest uproszczenie wyborów, których muszą dokonać w odniesieniu do elementów witryny. Aby zorientować się, o czym mówimy, skorzystajmy z naszego wcześniejszego przykładu rezerwacji restauracji:

Aby dokonać rezerwacji, prawdopodobnie będziesz musiał podać imię i nazwisko, adres e-mail, telefon i wskazać godzinę, a także liczbę osób, które będą uczestniczyć. Istnieją dwa sposoby utworzenia pola formularza w celu sprawdzenia czasu rezerwacji:

1. Skonfiguruj pole, które akceptuje tylko dane liczbowe.
2. Zaprojektuj listę rozwijaną zawierającą wszystkie dostępne terminy rezerwacji.

Jak można sobie wyobrazić, ta ostatnia jest bardziej przyjazna dla użytkowników mobilnych. Dzięki takiemu podejściu nie będą musieli wpisywać liczb i mogą po prostu wybrać to, co najlepiej dla nich działa, spośród dostępnych opcji.

Pomysł, aby przyjrzeć się swoim formularzom i sprawdzić, czy zawierają one pola, które można zastąpić rozwijanymi menu. Nie zawsze tak będzie, ponieważ nie można używać menu rozwijanych do zbierania nazwisk lub adresów e-mail, ale istnieją inne opcje, w których mogą one działać.

Niezależnie od tego, jaki jest ich przypadek użycia, chcesz się upewnić, że menu rozwijane zawierają opcje, które można łatwo wybrać na urządzeniach mobilnych. Innymi słowy, spraw, aby menu było na tyle duże, aby nikt nie musiał grzebać, aby wybrać odpowiednią opcję.

3. Upewnij się, że przyciski przesyłania są łatwe w dotyku

Ta wskazówka jest dość prosta, ale nadal warto o niej wspomnieć. Każdy projektowany formularz będzie musiał zawierać sposób, w jaki użytkownicy mogą potwierdzić, że chcą przesłać wprowadzone dane. W większości przypadków oznacza to utworzenie przycisku przesyłania:

Kiedy używasz zwykłego komputera, kliknięcie przycisku przesyłania jest najbardziej naturalną rzeczą na świecie. Natknęliśmy się jednak na kilka formularzy na urządzeniach mobilnych, w których naciśnięcie przycisku jest znacznie trudniejsze niż powinno.

Jeśli Twoi goście nie mogą przesłać informacji, które wprowadzili do Twoich formularzy, wszystkie Twoje wysiłki pójdą na marne. Ponadto nic nie wygląda tak nieprofesjonalnie, jak przycisk Prześlij , który nie działa zgodnie z przeznaczeniem.

Aby zaprojektować lepsze przyciski przesyłania na urządzenia mobilne, oto trzy krótkie wskazówki, o których musisz pamiętać:

1. Upewnij się, że są wystarczająco duże, aby z łatwością zaprasować je podczas korzystania z urządzenia mobilnego.
2. Nie umieszczaj przycisków zbyt blisko innych elementów, aby użytkownicy nie trafili w niewłaściwy.
3. Wyróżnij swoje przyciski w jakiś sposób, na przykład używając kontrastowych kolorów lub kreatywnej typografii.

Poza tym będziesz chciał również dokładnie przetestować swoje przyciski, zanim Twoja witryna zostanie uruchomiona. Za chwilę omówimy bardziej szczegółowo, jak to zrobić. Na razie porozmawiajmy o wydajności.

4. Upewnij się, że Twoje formularze ładują się szybko

W kilku naszych artykułach dużo mówimy o wydajności witryny i to nie dlatego, że potrzebujemy szybkości. Faktem jest, że większość ludzi nie lubi powolnych stron internetowych, co ma absolutny sens.

Ponieważ prędkość Internetu rośnie, zbyt długie czekanie na załadowanie strony internetowej może być uciążliwe. Ponadto prędkości mobilnego internetu różnią się znacznie bardziej niż zwykłe połączenia domowe. Oznacza to, że Twoja witryna będzie musiała być wysoce zoptymalizowana pod kątem urządzeń mobilnych, jeśli chcesz zadowolić tych użytkowników, ponieważ nie wszyscy będą mieli odpowiedni (tj. szybki) dostęp do Internetu.

Ta konkretna wskazówka może dotyczyć całej witryny, ale jest również ważna w przypadku stron mobilnych, na których są wyświetlane formularze. Jeśli te części Twojej witryny ładują się zbyt długo, stracisz potencjalnych klientów i możliwości nawiązania kontaktu z odwiedzającymi. Zasadą jest, że ładowanie strony internetowej nie powinno trwać dłużej niż dwie sekundy. Gdy przekroczysz tę linię, współczynniki odrzuceń mają tendencję do dramatycznego wzrostu, co jest dla ciebie straszną wiadomością.

Biorąc pod uwagę charakter przeglądania na urządzeniach mobilnych, skrócenie tego czasu tak bardzo, jak to możliwe, jest dobrodziejstwem. Mając to na uwadze, istnieje wiele sposobów na zwiększenie ogólnej wydajności witryny. Możesz na przykład przejść na lepszy plan hostingowy, użyć responsywnego motywu zoptymalizowanego pod kątem szybkości i skompresować obrazy. Oczywiście pomogą one wszystkim użytkownikom, ale przyniosą szczególne korzyści osobom korzystającym z mniejszych urządzeń.

5. Przetestuj swoje formularze, zanim je opublikujesz

Biorąc pod uwagę, że formularze są tak kluczowym elementem większości stron internetowych, warto dokładnie przetestować swoje przed opublikowaniem. W przypadku WordPressa ten proces jest dość prosty. Możesz śmiało projektować określone strony, aby wyświetlać formularze i nie publikować ich, dopóki nie zostaną w pełni przetestowane.

Oczywiście wtyczka lub motyw, którego chcesz użyć, zależy od Ciebie (o ile może pomóc w tworzeniu witryn mobilnych). Jednak jeśli chodzi o fazę testowania, zalecamy zachowanie prostoty i użycie czegoś takiego jak Chrome Dev Tools, aby wykonać zadanie.

Przejdźmy do szybkiego przykładu. Jeśli używasz Chrome, śmiało i wyświetl podgląd strony zawierającej formularz, który chcesz przetestować. Następnie kliknij prawym przyciskiem myszy w dowolnym miejscu tej strony i wybierz opcję Sprawdź . Chrome pokaże Ci zestaw narzędzi, których możesz użyć do przeglądania i edycji kodu źródłowego strony po prawej i lewej stronie, możesz zobaczyć podgląd, jak będzie wyglądał na urządzeniu mobilnym:

U góry ekranu znajduje się menu, za pomocą którego możesz przełączać się między różnymi rozdzielczościami. Chrome zawiera ustawienia dla kilku popularnych urządzeń mobilnych, ale możesz też wprowadzić niestandardową rozdzielczość.

W tym momencie powinieneś sprawdzić, jak wygląda i zachowuje się Twój formularz kontaktowy na wielu urządzeniach. Weźmy poniższy przykład – formularz działa idealnie, ale widać, że nie skaluje się tak, jak powinien. Zwróć szczególną uwagę na tekst i ikony, które znajdują się zbyt blisko krawędzi ekranu:

Jednym ze sposobów uniknięcia tego problemu jest uproszczenie formularzy, jak wspomnieliśmy w pierwszej wskazówce. W poniższym przykładzie formularz korzysta z wielu list rozwijanych i wymaga tylko trzech pól. Dzięki temu jest łatwy w użyciu, a co ważniejsze, formularz jest tak prosty, że powinien idealnie skalować się na każdym urządzeniu:

Jeśli napotkasz problemy z którymkolwiek ze swoich formularzy, powinieneś je oczywiście natychmiast naprawić. W przeciwnym razie ryzykujesz wyobcowanie swoich odbiorców mobilnych, czego staramy się przede wszystkim unikać!

Wniosek

Zapewnienie, że Twoja witryna jest przyjazna dla urządzeń mobilnych, ma kluczowe znaczenie dla utrzymania ruchu i nie frustrowania odwiedzających. W szczególności Twoje formularze muszą być łatwe w użyciu na urządzeniach mobilnych, jeśli nie chcesz przegapić otrzymywania wiadomości lub zbierania wartościowych potencjalnych klientów.

Jeśli chodzi o projektowanie formularzy przyjaznych dla urządzeń mobilnych, oto pięć krótkich wskazówek, które ułatwią Ci życie:

1. Usuń wszelkie niepotrzebne sekcje.
2. Jeśli to możliwe, korzystaj z list rozwijanych.
3. Upewnij się, że przyciski przesyłania są łatwe do naciśnięcia.
4. Upewnij się, że Twoje formularze ładują się szybko.
5. Przetestuj swoje formularze przed ich opublikowaniem.

Czy masz pytania dotyczące tworzenia formularzy przyjaznych dla urządzeń mobilnych za pomocą Divi? Zapytaj w sekcji komentarzy poniżej!

Obraz miniatury artykułu autorstwa Iriny Adamovich / shutterstock.com.