Jak projektować formularze na stronie | UX bez żargonu #4

Aby użytkownik zapisał się do newslettera, musi wypełnić formularz. Aby zarejestrować się na stronie, musi wypełnić formularz. Aby wypróbować darmową wersję oprogramowania, musi wypełnić, oczywiście, formularz.

Co zrobić, aby ten ważny element był skuteczny i najmniej uciążliwy dla użytkownika? W tym artykule opowiem Ci o UX formularzy zapisu.

Budowa formularza

Formularz jest ostatnim krokiem do spełnienia celu na stronie. Jeśli użytkownik go wypełni, to w sumie można już otwierać szampana.

Ale zacznijmy od początku. Z jakich komponentów składa się formularz? Zwykle występuje ich 5. Są to:

  • struktura,
  • inputy (pola do wpisywania danych),
  • etykiety pól,
  • przycisk akcji,
  • feedback (informacja zwrotna).

Struktura formularza

Przede wszystkim zadbaj o logiczną kolejność. Pogrupuj informacje tak, aby całość była spójna i ułatwiała intuicyjne uzupełnianie. Pytania umieść w jednej kolumnie – dzięki temu ścieżka poruszania się oczu po formularzu będzie uproszczona.

Przykładem, jak tego nie robić, może być formularz rejestracji na stronie apteka-melissa.pl. Składa się z dwóch kolumn, co utrudnia orientację w treściach i niepotrzebnie wydłuża czas wypełnienia poszczególnych pól.

formularz rejestracji

Pamiętaj też, aby wymagać tylko niezbędnych informacji np. przy zapisie na newsletter nie pytaj o adres, numer buta, stan cywilny, danie na obiad... itd. W ten sposób nie tylko odciążysz użytkownika, ale też zyskasz więcej wiarygodności. Dziś już mało kto podaje dane, które nie są konieczne do wypełnienia celu.

Pola do wpisywania

Postaraj się ograniczyć liczbę pól do minimum. Np. nie rób osobnych inputów na imię i nazwisko, a poproś o te dane w jednym polu. Analogicznie możesz postąpić z datą urodzenia – zamiast osobnego wyboru dnia, miesiąca i roku, umożliw użytkownikowi wybór daty z kalendarza. Co ważne, unikaj pól opcjonalnych, a jeśli z jakiegoś powodu jest to niemożliwe, wyraźnie je oznacz.

Przykładem skąpego w pola formularza jest ten do rejestracji w serwisie Allegro, ale jeśli się przyjrzysz, zauważysz, że można było go jeszcze bardziej skompresować. Osobne pola na dzień, miesiąc i rok są zupełnie niepotrzebne!

formularz rejestracji allegro

Dokładnie przemyśl również sprawę wartości domyślnych. Dodawanie ich jest uzasadnione tylko wtedy, gdy 90% użytkowników udzieli takiej odpowiedzi. W innym przypadku zmiana wartości domyślnych będzie uciążliwa i zniechęci do wypełnienia formularza.

Pamiętaj też o takich "szczegółach", jak dopasowanie formularza do użytkowników wypełniających go za pomocą klawiatury. Przeskakiwanie z pola do pola za pomocą przycisku TAB jest niezwykle pomocne. Na mobile zwróć uwagę na dopasowanie klawiatury do rodzaju danych, np. jeśli klawiatura, to tylko numeryczna. Postaraj się też w jakiś sposób wyróżnić pole, które jest aktualnie wypełniane (np. za pomocą innego koloru ramki).

Etykiety

Im krótsze, tym lepsze, ale pamiętaj o tym, aby połączyć zwięzłość z jasnością. Ponadto, zadbaj o widoczność etykiet. Powinny być zauważalne i w momencie wypełniania, i po przejściu do następnego pola. Umiejscowienie na środku pola? Z tego lepiej zrezygnuj.

Jeśli formularz jest prosty, umieść etykiety nad polami, wyrównane do lewej strony (to też dobre rozwiązanie na formularz mobile). Jeśli formularz jest bardziej skomplikowany, umieść etykiety z lewej strony pól. Dzięki temu użytkownik zwróci na nie większą uwagę i prawidłowo wszystko wypełni.

Uważaj na placeholdery! Do zasugerowania użytkownikowi, jak powinien wypełnić pola, są bardzo dobre, ale nie powinny zastępować etykiet. Tak, niestety, robi sprawny marketing w formularzu zapisu na newsletter.

formularz zapisu na newsletter

Przyciski akcji

Temu, jak powinny wyglądać przyciski akcji w ogóle, poświęciłam cały artykuł. Tutaj skupię się na tych w formularzach.

Przyciski akcji w formularzach powinny być podzielone na 2 rodzaje: przycisk główny i pomocniczy. Najlepiej, aby pierwszy znalazł się na wysokości pola do wprowadzania informacji, a drugi poza polem widzenia (np. przycisk wstecz przy formularzach składających się z kilku kroków).

Unikaj generycznych tekstów na przyciskach. Zwykłe "zapisz" możesz zamienić na "chcę otrzymać wersję próbną". Dzięki temu formularz będzie ciekawszy.

I jeszcze jedno – zapomnij, że przycisk "resetuj formularz" istnieje. Umieszczenie go może być katastrofalne w skutkach. Dlaczego? Jeśli użytkownik kliknie na niego przypadkiem, wyczyści sobie cały formularz. Szanse na to, że wypełni go ponownie są nikłe. O taką pomyłkę łatwo np. na stronie CEIDG.

formularz z przyciskiem resetowania

Feedback

Na koniec warto poinformować użytkownika, że formularz został prawidłowo wysłany. To go uspokoi, a może nawet polepszy jego doświadczenie, jeśli wykorzystasz to miejsce np. na dodanie animacji z podziękowaniami.

Podsumowując, formularz to ostatni element na ścieżce konwersji. Oznacza to, że jego dopieszczenie jest niezwykle ważne. Po prostu WSZYSTKO powinno być w nim w porządku!

Ale... No właśnie. Nie zapomnij, że pozostałe elementy na stronie też muszą być przyjazne użytkownikowi. O tym, jak to zrobić, dowiesz się z serii UX bez żargonu. Już teraz wszystkie tematy w formie video są dostępne na YouTubie!