Formularze i onboarding
Zasady projektowania formularzy, walidacji i onboardingu. Jak zbierać dane bez frustracji użytkownika.
Wszystkie zasady
Czytelne formularze Readable Forms
Formularz powinien być czytelny na pierwszy rzut oka: jedno pole w linii (jednokolumnowy layout), logiczna kolejność pól (imię, nazwisko, email), wyraźne grupowanie sekcji. Formularz dwukolumnowy wygląda krótszy, ale użytkownicy pomijają prawą kolumnę.
Etykiety pól Field Labels
Każde pole formularza musi mieć widoczną etykietę (label) NAD polem, nie wewnątrz jako placeholder. Placeholder znika po wpisaniu tekstu i użytkownik nie pamięta, czego oczekiwało pole. Etykiety nad polami są szybciej skanowane niż obok pól.
Walidacja inline Inline Validation
Waliduj dane w trakcie wypełniania, nie po kliknięciu 'Wyślij'. Jeśli email jest niepoprawny, pokaż błąd od razu pod polem, a nie na górze strony po submicie. Walidacja inline zmniejsza liczbę prób wypełnienia formularza i redukuje frustrację.
Komunikaty błędów i sukcesu Error and Success Messages
Komunikat o błędzie powinien pojawić się bezpośrednio przy polu, którego dotyczy, nie na górze strony. Powinien mówić, co jest źle i jak to naprawić. Komunikat sukcesu powinien potwierdzić, co się stało ('Konto utworzone') i co dalej ('Sprawdź maila').
Kontrola wpisywania Input Constraints
Ogranicz to, co użytkownik może wpisać, do tego, co jest prawidłowe. Pole na numer telefonu powinno przyjmować tylko cyfry. Pole na datę powinno mieć date picker. Pole na kwotę powinno mieć mask input (np. 1 000,00 zł). Zapobieganie jest lepsze niż walidacja po fakcie.
Ograniczona liczba kroków Limited Number of Steps
Formularz wieloetapowy powinien mieć jak najmniej kroków, ale nie mniej niż potrzeba. Każdy krok to bariera, za którą część użytkowników rezygnuje. Idealny checkout ma 1-3 kroki. Rejestracja powinna wymagać minimum danych na start, a resztę zbierać później.
Progresywny onboarding Progressive Onboarding
Onboarding powinien wprowadzać użytkownika do produktu stopniowo, nie zasypywać wszystkim na raz. Pierwszy ekran to najważniejsze zadanie, nie tour po wszystkich funkcjach. Pokaż tooltippy i wskazówki w kontekście, kiedy użytkownik napotka nową funkcję.