Podstawy: projektowanie formularzy mobilnych

Kupujący online coraz częściej korzystają z urządzeń mobilnych do odkrywania nowych sklepów, przeglądania produktów i dokonywania zakupów. W samych Stanach Zjednoczonych ponad 35% zakupów online dokonano za pomocą urządzenia mobilnego, a liczba ta rośnie z każdym rokiem. 

Aby upewnić się, że przekonwertujesz tych klientów na subskrybentów, ważne jest, aby Twój formularz rejestracyjny wyglądał tak dobrze na urządzeniach mobilnych, jak na komputerach stacjonarnych. 

Jeśli potrzebujesz więcej niż 3 pól, na przykład jeśli chcesz jednocześnie zbierać zgody na wysyłkę e-mail i SMS, rozważ formularz wieloetapowy. 

Wieloetapowy formularz pozwala zebrać więcej informacji bez przytłaczania potencjalnych subskrybentów. Ponadto, oddzielny krok dla SMS jest z przepisami najlepszą praktyką przy zbieraniu wielu rodzajów zgody w jednym formularzu. 

Alternatywnie, możesz dowiedzieć się więcej o swoim subskrybencie, kierując go ponownie na późniejszą ścieżkę klienta. Być może pytasz o datę urodzin swojego obecnego subskrybenta, pokazując mu kolejny formularz po 30 dniach, a może pytasz w ramach sekwencji powitalnej.

Nawet jeśli wszystkie pola w formularzu są wymagane, nadal dziwne jest pytanie o datę urodzenia przed imieniem i nazwiskiem. 

Ogólnie rzecz biorąc, pytaj o informacje od najmniej do najbardziej osobistych. Na przykład: 

1. Nazwa
2. e-mail lub numer telefonu
3. Urodziny

Pojedyncza kolumna oznacza, że wszystkie słupki wejściowe i przyciski znajdują się w jednej linii formularza. Chociaż formaty wielokolumnowe są dobre do użycia na komputerach stacjonarnych, mogą sprawić, że formularze mobilne będą wyglądać na zagracone lub zatłoczone. Formularze jednokolumnowe są również łatwiejsze do zeskanowania na urządzeniach mobilnych.

Formularz jednokolumnowy	Formularz wielokolumnowy

Przycisk CTA powinien znajdować się na końcu ścieżki skanowania przeglądarki, aby był ostatnią rzeczą, którą widzą. Nie chcesz, aby musieli przewijać stronę w górę, aby wypełnić formularz, ani szukać przycisku. 

Zazwyczaj przycisk CTA jest umieszczany na środku lub po lewej stronie. 

Powodem, dla którego przycisk zamykania musi znajdować się w prawym górnym rogu, jest to, że właśnie tam użytkownicy spodziewają się go zobaczyć. 

Jeśli umieścisz go w innym miejscu, na przykład w lewym górnym rogu lub w pobliżu dołu, użytkownicy mogą spędzać czas na szukaniu sposobu na zamknięcie formularza i frustrować się podczas szukania. Może to spowodować, że odejdą z negatywnym wrażeniem Twojej marki, co oznacza, że jest mniej prawdopodobne, że odwiedzą Twoją witrynę w przyszłości lub zostaną klientami.

Umieść etykietę bezpośrednio nad każdym polem formularza, która jasno opisuje, jakie informacje należy podać. 

Umieść również etykiety w pobliżu pól, które opisują, aby było jasne, że te dwa elementy są ze sobą powiązane.

Każda etykieta powinna zajmować mniej niż jedną linię, gdy jest wyświetlana na dowolnym urządzeniu mobilnym, więc zwięzłość jest kluczowa.

W każdym polu, w którym użytkownicy muszą wprowadzić tekst lub liczby, umieść symbole zastępcze, aby pokazać odbiorcom, jak powinny wyglądać ich dane wejściowe (np. przykładowy adres e-mail, imię i nazwisko, format daty itp.)

Pomaga to zmniejszyć liczbę błędów, które ktoś może popełnić. Współpraca z etykietami i symbolami zastępczymi ułatwia użytkownikom poruszanie się po Twoim formularzu. 

Pro-tip: przyciski powinny mieć również etykiety. Bycie bardziej opisowym w tekście przycisku również pomaga użytkownikowi. 

Na przykład, zamiast prostego "Prześlij" wezwanie do działania (CTA), powiedzenie "Zapisz się do newslettera" lub "Zarejestruj się na SMS" daje jaśniejsze wyobrażenie o tym, co robi przycisk. Ponadto może to pomóc Ci zaoszczędzić cenną przestrzeń w mniejszej formie. 

Poinformowanie klientów, które pola muszą wypełnić, a które nie, usprawnia obsługę. Możesz uczynić niektóre elementy formularza wymaganymi, a inne opcjonalnymi, 

Uwzględnij komunikat o powodzeniu po przesłaniu formularza, aby użytkownik wiedział, że odniósł sukces. 

Używanie czcionki o rozmiarze 16 lub więcej pikseli pomaga zapewnić czytelność tekstu. W ten sposób użytkownicy nie muszą powiększać obrazu, aby go przeczytać.

16 pikseli to minimalny rozmiar czcionki zalecany dla dowolnego tekstu w formularzu mobilnym, w tym etykiet, symboli zastępczych i tekstu przycisków. 

Pozostaw wystarczająco dużo miejsca między poszczególnymi działaniami w formularzu, aby użytkownicy nie mieli trudności z kliknięciem w żądane pole. W przeciwnym razie mogą zdecydować się odejść, zamiast kontynuować próby. 

Tworząc formularz, postaraj się jak najbardziej utrudnić użytkownikom popełnienie błędu. Przetestuj wrażenia użytkownika na różnych typach urządzeń. 

Wszelkie "cele dotykowe", takie jak słupy wejściowe lub przyciski, powinny być duże i łatwe do kliknięcia. 

Przeciętny palec dorosłego człowieka ma 11 rynków przedsiębiorstw średniej wielkości, czyli około 41,6 piksela. Najlepszą praktyką jest ustawienie celów dotykowych na co najmniej 48 pikseli. 

Skorzystaj z formularza teaser, aby użytkownicy mobilni mogli otwierać i zamykać formularz zgodnie z potrzebami podczas przeglądania, a formularz nie zasłaniał treści witryny.
Pamiętaj, że Google nakłada kary na witryny z natrętnymi reklamami pełnoekranowymi. teaser pomaga uniknąć tej kary, ale powinieneś również używać długiego opóźnienia czasowego z formularzami. 

Kontrast kolorów to różnica światła między tekstem lub obiektami na pierwszym planie i w tle. Dobry kontrast kolorów poprawia czytelność twojego formularza i jest kluczowym elementem dostępności. Użyj narzędzia do sprawdzania kontrast u kolorów, aby sprawdzić kontrast kolorów.

Najmniejszy kontrast wynosi 1:1 i jest niemożliwy do odczytania (pomyśl o białym tekście na białym tle). Najwyższy dostępny kontrast to 21:1, czyli czarny tekst na białym tle. Innymi słowy, im większy współczynnik, tym lepszy kontrast. 

Zgodnie z wytycznymi dotyczącymi dostępności treści internetowych (WCAG) minimalny kontrast kolorów wynosi 4,5:1 dla małego tekstu, obrazów i tekstu w obrazach oraz 3:1 dla dużego tekstu lub ważnych elementów. 

W idealnym przypadku kontrast powinien być jeszcze większy. Według WCAG lepszym minimum jest:

• 7:1 dla mniejszego tekstu, obrazów lub obrazów tekstu
• 4,5:1 dla większego tekstu, kluczowych elementów wizualnych itp. 

Ważne jest, aby każdy mógł docenić treści, nad którymi tak ciężko pracujesz. Użycie pewnych kombinacji kolorów może sprawić, że formularz będzie trudny lub nawet niemożliwy do odczytania dla niektórych grup. 

Jeśli chodzi o to, których nie używać , pamiętaj, że istnieje wiele rodzajów ślepoty barw (nie tylko czerwony i zielony).