Formularze to niezbędna funkcjonalność serwisów internetowych. To za ich pomocą zbiera się wiele danych o użytkownikach, czy to podczas rejestracji, czy składania zamówienia. Niewiele rzeczy potrafi też tak zrazić klientów do e-sklepu jak nieprzyjazne formularze. Dlatego projektując własny serwis, warto zwrócić uwagę na sposób ich działania.
W tym wpisie skupię się na moim zdaniem najważniejszych funkcjach, które usprawnią korzystanie z formularzy i przyczynią się do pozytywnego odbioru platformy przez klientów.
Etykiety w formularzach
Etykiety w formularzach to informacje, jakich danych oczekuje się od użytkownika. Mogą to być proste komunikaty, np. „imię”, „hasło” lub pytania w stylu: „Jak dużo czasu spędzasz każdego dnia, korzystając z komputera?”.
Wypełniając formularze, można spotkać z czterema rodzajami umiejscowienia etykiet. Każdy z nich jest odpowiedzią na inne potrzeby:
- Wyrównane do lewej strony – służy do formularzy, w które wprowadza się ważne informacje. Trudniej skanuje się oczami taki formularz, poświęcając na to więcej czasu, ale dzięki temu umożliwia on dokładne przemyślenie odpowiedzi. W takim układzie można szybko przejrzeć wszystkie etykiety;
- Wyrównane do prawej strony – szybko się je wypełnia, dlatego z powodzeniem można je stosować do większości formularzy, jak np. rejestracja użytkowników. Trudniej jednak znaleźć konkretną etykietę, gdy jest dużo pól do wypełnienia;
- Nad polami – tę opcję stosuje się, gdy jest ograniczona ilość miejsca, np. w wersjach mobilnych stron czy w aplikacjach mobilnych. Dzięki temu każde pole jest czytelnie podpisane i użytkownik nie ma wątpliwości co do niego wpisać;
- W polach tekstowych – wciąż spotyka się tego rodzaju etykiety. Pozwalają one oszczędzić miejsce, jednak mają dużą wadę użytkową – podczas wprowadzania danych etykieta znika, przez co ciężko sprawdzić ich. Jest to jednak dobry sposób na umieszczenie podpowiedzi dotyczących zawartości pola tekstowego, np. przykładowego adresu e-mail.
Inputy w formularzach
Inputy to pola służące do wprowadzania danych przez użytkowników. Mogą mieć różnoraką formę, np.:
- pole tekstowe — do wprowadzania tekstu za pomocą klawiatury;
- radio-button — pozwalające wybrać jedną z wyświetlonych opcji;
- lista rozwijana – pozwalające wybrać jedną z opcji, stosowane dla większej ich ilości;
- check-box — do wyboru jednej i więcej opcji z przedstawionych;
- spinner — do wyboru wartości liczbowych, z możliwością ich zmniejszania i zwiększania poprzez klikanie w odpowiednie przyciski.
Warto pamiętać, by dostosować inputy do treści, jakie chce się w nich umieścić, aby użytkownicy nie mieli wątpliwości, o jakie dane chodzi twórcy. Pola na imię mogą być krótsze od tych na nazwisko, a pola na kod pocztowy powinny zmieścić dokładnie 5 cyfr i jeden znak.
Do numeru telefonu zawsze stosuję listę rozwijaną z numerem kierunkowym do kraju oraz polem na dziewięć cyfr — dzięki temu klienci wprowadzają dane zawsze w tym samym formacie, nie zastanawiając się, czy podawać numer kierunkowy, czy nie.
W niektórych polach wyboru (nietekstowych) dobrze jest przyjąć zasadę, by domyślnie zaznaczona była opcja najbardziej popularna, co ułatwi wielu użytkownikom wybór, np. numer kierunkowy do Polski.
Czytelne komunikaty w formularzach
Każda czynność użytkownika powinna zakończyć się informacją zwrotną. Dzięki temu użytkownik jest w stanie stwierdzić, czy zadanie się powiodło, czy coś powinien zrobić inaczej. Dotyczy to zarówno błędów, jak i sukcesów.
Zawsze po wysłaniu formularza, zapisania się do newslettera lub dodania produktu do koszyka klient musi zobaczyć, że operacja się powiodła.
To samo dotyczy niepowodzeń. Jeśli pole nie zostało wypełnione lub jego zawartość jest błędna, użytkownik musi się o tym dowiedzieć. Komunikat w rodzaju „Nie udało się wysłać formularza” albo „Wprowadź wszystkie niezbędne dane” to za mało, użytkownik potrzebuje znać szczegóły. Dzięki temu jest w stanie szybko namierzyć błąd, poprawić go i ponowić próbę wysłania formularza. W przeciwnym razie, zamiast przeszukiwać samemu kolejne pola, może zrezygnować z dalszego wypełniania i po prostu zamknąć stronę.
W tym miejscu warto do formularza dodać autowalidację, czyli sprawdzanie każdego pola od razu po wypełnieniu. Dzięki temu użytkownik na bieżąco dostaje informację, co należy poprawić i nie musi potem szukać miejsc z błędnym wpisem.
Pytanie tylko o niezbędne informacje w formularzach
Korzystając z różnych stron internetowych, niejednokrotnie natknąłem się na formularze, które zawierały prośby o mnóstwo dodatkowych informacji. Tworząc kwestionariusz, dobrze jest minimalizować ilość pól do wypełnienia, tak by znalazły się tylko te, których obecność ma uzasadnienie.
Warto pamiętać, że nie wszystkie informacje są niezbędne na każdym etapie korzystania z serwisu. Na przykład rejestrując się do sklepu internetowego, podanie adresu ma sens. Jednak bez problemu te pola można wypełnić dopiero składając zamówienie, nie są to opcje niezbędne do korzystania z innych funkcji e-sklepu, takich jak przeglądanie produktów, dodawanie do koszyka, czy zapisywanie ich na listach życzeń.
Pomoc w formularzach
Użytkownikom wypełniającym formularze warto zaoferować jakąś formę pomocy, tak by wiedzieli dokładnie, o jakie dane są proszeni. Oczywiście nie dotyczy to wszystkich pytań, jednak tam, gdzie jest miejsce na wątpliwości, warto upewnić się, że klienci będą wiedzieli co wpisać.
Popularną formą pomocy jest wpisanie przykładowych wartości w pola tekstowe, tak by można je było wypełnić, nie zerkając na etykiety. Znacznie przyspiesza to zarówno szybkość wypełniania formularzy, jak i trafność danych. Innym sposobem jest umieszczenie przy polach informacji o tym, na jakie dane liczy właściciel formularza. Może to być opis pod etykietą, może być również ikona z rozwijanym polem zawierającym wszelkie niezbędne informacje.
Układ formularza
Aby pola formularza były czytelne, powinny znajdować się w jednej kolumnie. Użytkownicy przeglądając informacje na stronach internetowych, nie zagłębiają się we wszystkie dostępne pola, tylko skanują tekst, najwięcej uwagi poświęcając lewej stronie formularza (dla narodów czytających od lewej strony do prawej). Dlatego przechodzenie do kolejnych pół formularza w dół jest bardziej naturalną czynnością niż szukanie ich po bokach.
Dodatkowo ułożenie informacji w jednej kolumnie pomaga zachować porządek w formularzu, gdzie kolejne pola mają związek z poprzednimi.
Grupowanie pytań w formularzu
W przypadku długich formularzy, jak w procesie zamawiania albo skomplikowanej rejestracji, warto pogrupować pytania i widocznie je rozdzielić. Dzięki temu użytkownik, zamiast zobaczyć jeden ogromny kwestionariusz, widzi kilka krótkich. Łatwiej wypełnia się takie formularze, ponieważ wyraźnie widać ile części zostało do końca.
Dobrym rozwiązaniem, stosowanym w większości procesów zakupowych, jest rozdzielenie grup pytań na strony, reprezentujące konkretne kroki procesu. Dzięki temu użytkownik cały czas widzi elegancko zobrazowany pasek postępu i wie, czego spodziewać się w kolejnych etapach.
Przyciski formularza
Z różnymi akcjami na formularzu wiąże się potrzeba kliknięcia odpowiedniego przycisku. Przyciski te powinny podlegać wszystkim zasadom dotyczącym tzw. Call-To-Action (z ang. Wezwań do akcji), czyli sugerować najbardziej preferowane działanie. Najważniejszy przycisk na stronie, czyli przesłanie formularza, powinien również być najbardziej widocznym przyciskiem, odróżniającym się od innych. Te mniej ważne akcje można oznaczyć mniej kontrastującymi kolorami, a najlepiej umieścić je w formie zwykłego hiperłącza. Dzięki temu użytkownik nawet nie musi wnikać w treść na przycisku, by wiedzieć co nacisnąć.
Tworząc przyciski, warto też pamiętać, by etykiety znajdujące się na nich odzwierciedlały dokładnie następną akcję. Zwykły napis „Dalej” nie mówi użytkownikowi. Dlatego w procesach zakupowych najlepiej wykorzystywać konkretne przyciski, np. „Płatność”, „Wybór dostawy”, etc. Nie pozostawia to wątpliwości czego spodziewać się po jego wciśnięciu.
Podsumowanie
Dobry formularz to formularz prosty w wypełnianiu, czytelny dla użytkowników, z podziałem na konkretne grupy pytań, a także niepozostawiający wątpliwości, jakie dane należy w nim zawrzeć. Należy przy tym pamiętać, że każdy formularz jest inny, różne cele im przyświecają i dlatego różne rozwiązania mogą być stosowane, by usprawnić ich wypełnianie. Ja wspomniałem o moim zdaniem najważniejszych z nich, czyli takich, które łatwo jest wprowadzić w życie, i z których wprowadzenia zadowoleni będą zarówno użytkownicy, jak i właściciele platformy.
