Podstawy: projektowanie formularzy mobilnych

Kupujący online coraz częściej korzystają z urządzeń mobilnych, aby odkrywać nowe sklepy, przeglądać produkty i dokonywać zakupów. W samych Stanach Zjednoczonych ponad 35% zakupów online zostało dokonanych na urządzeniu mobilnym, a liczba ta rośnie z roku na rok.

Aby mieć pewność, że przekonwertujesz tych klientów na subskrybentów, kluczowe jest, aby formularze rejestracyjne wyglądały tak samo dobrze na urządzeniach mobilnych jak na komputerach.

Jeśli potrzebujesz więcej niż 3 pól, np. jeśli chcesz jednocześnie zbierać zgodę na e-mail i SMS, rozważ formularz wieloetapowy.

Formularz wieloetapowy pozwala zebrać więcej informacji bez przytłaczania potencjalnych subskrybentów. Co więcej, posiadanie osobnego kroku dla SMS to zgodna z przepisami najlepsza praktyka podczas zbierania wielu rodzajów zgód w 1 formularzu.

Możesz też dowiedzieć się więcej o subskrybentach, ponownie kierując do nich komunikację później na ścieżce klienta. Możesz na przykład zapytać o urodziny obecnych subskrybentów, wyświetlając im kolejny formularz po 30 dniach, albo zapytać o to w ramach sekwencji powitalnej.

Nawet jeśli wszystkie pola w formularzu są wymagane, i tak dziwnie jest prosić o datę urodzenia przed imieniem.

Ogólnie rzecz biorąc, zadawaj pytania, przechodząc od informacji najmniej do najbardziej osobistych. Na przykład:

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

Układ jednokolumnowy oznacza, że wszystkie pole wejściowe, pola i przyciski w formularzu są ułożone w jednej linii. Chociaż układy wielokolumnowe sprawdzają się na komputerze, mogą sprawić, że formularze mobilne będą wyglądać na zagracone lub zatłoczone. Formularze jednokolumnowe są też łatwiejsze do przejrzenia na urządzeniach mobilnych.

Formularz jednokolumnowy	Formularz wielokolumnowy

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

Zwykle przycisk CTA umieszcza się na środku lub po lewej stronie.

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

Jeśli umieścisz go gdzie indziej, np. w lewym górnym rogu lub blisko dołu, użytkownicy mogą tracić czas na szukanie sposobu zamknięcia formularza i frustrować się podczas poszukiwań. Może to sprawić, że opuszczą stronę z negatywną impresja o Twojej marce, co oznacza, że rzadziej odwiedzą witrynę w przyszłości lub zostaną klientami.

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

Umieść też etykiety blisko pól, których dotyczą, aby było jasne, że te dwa elementy są ze sobą powiązane.

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

W każdym polu, w którym użytkownicy muszą wprowadzić tekst lub liczby, uwzględnij tekst zastępczy, aby pokazać odbiorcom, jak powinien wyglądać ich wpis (np. przykładowy adres e-mail, imię, format daty itp.).

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

Wskazówka: przyciski też powinny mieć etykiety. Bardziej opisowy tekst przycisku pomaga też użytkownikowi.

Na przykład zamiast prostego wezwania do działania (CTA) „Prześlij” użycie „Zapisz się do newslettera” lub „Zarejestruj się na SMS” daje jaśniejsze wyobrażenie o tym, co robi przycisk. Dodatkowo może to pomóc zaoszczędzić cenne miejsce w mniejszym formularzu.

Informowanie klientów, które pola muszą wypełnić, a które nie, usprawnia korzystanie z formularza. Można ustawić, aby niektóre elementy formularza były wymagane, a inne opcjonalne,

Dodaj komunikat o powodzeniu po wysłaniu formularza, aby użytkownik wiedział, że wszystko przebiegło pomyślnie.

Użycie rozmiaru czcionki 16 pikseli lub większego pomaga zapewnić czytelność tekstu. Dzięki temu użytkownicy nie muszą powiększać, aby przeczytać.

16 pikseli to minimalny rozmiar czcionki zalecany dla dowolnego tekstu w formularzu mobilnym, w tym etykiet, tekstu zastępczego i tekstu na przyciskach.

Zostaw wystarczająco dużo miejsca między poszczególnymi działaniami w formularzu, aby użytkownicy nie mieli problemu z kliknięciem w wybrane pole. W przeciwnym razie mogą zdecydować się zrezygnować, zamiast dalej próbować.

Podczas tworzenia formularza staraj się maksymalnie utrudnić użytkownikom popełnienie błędu. Testuj wygodę użytkowania na różnych typach urządzeń.

Wszelkie „obszary dotykowe”, takie jak pole wejściowe lub przyciski, powinny być duże i łatwe do kliknięcia.

Przeciętny palec osoby dorosłej ma 11 rynek przedsiębiorstw średniej wielkości, czyli około 41,6 piksela. Aby to uwzględnić, dobrą praktyką jest ustawianie obszarów dotykowych na co najmniej 48 pikseli.

Użyj teaser, aby osoby odwiedzające na urządzeniach mobilnych mogły otwierać i zamykać formularz w razie potrzeby podczas przeglądania, oraz aby formularz nie zasłaniał treści Twojej witryny.
Pamiętaj, że Google nakłada karę na witryny z natrętnymi interstitialami. Teaser pomagają uniknąć tej kary, ale warto też ustawić długi czas opóźnienia w formularzach.

Kontrast kolorów to różnica w natężeniu światła między tekstem lub obiektami na pierwszym planie a tłem. Dobre kontrasty kolorów poprawiają czytelność formularza i są kluczowym elementem dostępności. Użyj narzędzia do sprawdzania kontrastu kolorów, aby sprawdzić kontrast kolorów.

Najmniejszy kontrast to 1:1 i jest niemożliwy do odczytania (np. biały tekst 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 jest kontrast.

Zgodnie z Web Content Accessibility Guidelines (WCAG) minimalny kontrast kolorów wynosi 4.5:1 dla małego tekstu, obrazów i tekstu na obrazach oraz 3:1 dla dużego tekstu lub ważnych elementów.

Najlepiej, aby kontrast był jeszcze większy. Według WCAG lepsze minimum to:

• 7:1 w przypadku mniejszego tekstu, obrazów lub obrazów zawierających tekst
• 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 niektórych kombinacji kolorów może sprawić, że formularz będzie trudny, a nawet niemożliwy do odczytania dla niektórych grup.

Kombinacje przyjazne dla osób z daltonizmem
Niebieski i pomarańczowy		Niebieski i żółty
Niebieski i czerwony		Pomarańczowy i żółty
Niebieski i brązowy

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

Kombinacje kolorów, których należy unikać
Zielony i czerwony		Niebieski i fioletowy
Czerwony i pomarańczowy		Niebieski i szary
Zielony i pomarańczowy		Fioletowy i czerwony
Czerwony i brązowy		Niebieskozielony i różowy
Zielony i brązowy		Niebieskozielony i szary
Zielony i niebieski		Żółty i różowy
Jasnozielony i żółty		Różowy i szary
Zielony i szary		Szary i brązowy
Zielony i czarny		Pomarańczowy i brązowy
Czerwony i czarny