Formularze wieloetapowe — jak je projektować, żeby użytkownicy je kończyli
Długi formularz na jednej stronie odstrasza już przy pierwszym spojrzeniu. Ten sam zestaw pytań podzielony na kilka krótkich kroków potrafi być wypełniany znacznie chętniej — pod warunkiem, że podział jest przemyślany. Źle zaprojektowany formularz wieloetapowy ukrywa za to prawdziwą długość procesu, gubi dane przy powrocie i zniechęca w połowie drogi. Wniosek kredytowy, wycena usługi, rejestracja konta firmowego czy zamówienie z konfiguracją — wszędzie tam sposób podziału na kroki wpływa bezpośrednio na liczbę ukończonych zgłoszeń.
Krótka odpowiedź: formularz warto podzielić na kroki, gdy ma dużo pól, pytania tworzą naturalne grupy albo kolejne pytania zależą od wcześniejszych odpowiedzi. Dobry formularz wieloetapowy zaczyna od pytań łatwych, pokazuje postęp, sprawdza dane na bieżąco w każdym kroku, pozwala wrócić bez utraty danych i zapisuje stan, żeby można było dokończyć później.
Podział na kroki nie zmniejsza liczby pytań. Najpierw usuń zbędne pola, dopiero potem dziel resztę.
Kiedy formularz wieloetapowy ma sens
| Sytuacja | Jedna strona | Kilka kroków |
|---|---|---|
| Formularz kontaktowy z kilkoma polami | Tak | Nie — dodatkowe kliknięcia bez korzyści |
| Kilkanaście pól tworzących grupy tematyczne | Możliwe | Zwykle lepiej |
| Pytania zależne od wcześniejszych odpowiedzi | Trudne do czytelnego pokazania | Tak |
| Wycena lub konfigurator | Nie | Tak |
| Proces wymagający dokumentów lub danych, których użytkownik może nie mieć pod ręką | Nie | Tak, z zapisem stanu |
| Użytkownicy porównujący wszystkie pola przed rozpoczęciem | Tak | Z podglądem całości |
Zanim zdecydujesz o podziale, przejrzyj każde pole i zadaj pytanie: co stanie się z tą informacją i czy jest potrzebna na tym etapie? Wiele formularzy zbiera dane, które przydadzą się dopiero po rozmowie z klientem. Ogólne zasady optymalizacji formularzy opisujemy w tekście o optymalizacji formularza kontaktowego.
Kolejność kroków
Kolejność pytań ma duży wpływ na to, ilu użytkowników dotrze do końca. Działa tu prosty mechanizm psychologiczny: kto zaczął i włożył w proces trochę wysiłku, chętniej go kończy.
- Zacznij od pytań łatwych i angażujących — wybór rodzaju usługi, zakresu, potrzeby. Kliknięcie w kafelek jest łatwiejsze niż wpisanie numeru telefonu.
- Dane kontaktowe na końcu — gdy użytkownik już zainwestował czas i widzi sens podania danych.
- Pytania wrażliwe po zbudowaniu zaufania — budżet, dane finansowe, informacje osobiste.
- Grupuj tematycznie — jeden krok, jeden temat, z czytelnym nagłówkiem.
- Pytania warunkowe tuż po pytaniu, od którego zależą — żeby związek był oczywisty.
- Podsumowanie przed wysłaniem w procesach, w których błąd ma skutki, na przykład w zamówieniach i wnioskach.
Uwaga praktyczna: umieszczenie danych kontaktowych na końcu ma jedną wadę — użytkownik, który porzuci formularz w połowie, nie zostawi żadnych danych. W procesach sprzedażowych o dużej wartości czasem opłaca się zapytać o adres e-mail w pierwszym lub drugim kroku, z jasną informacją, że posłuży do zapisania postępu. Warto przetestować oba warianty.
Ile kroków i ile pól w kroku
Nie ma uniwersalnej liczby. Są jednak wskazówki, które sprawdzają się w większości przypadków.
- Od trzech do sześciu kroków w typowych procesach. Więcej sprawia wrażenie niekończącej się drogi.
- Kilka pól na krok, tak żeby cały krok mieścił się na ekranie telefonu bez długiego przewijania.
- Jedno pytanie na ekran sprawdza się przy prostych wyborach i angażujących konfiguratorach, ale męczy przy danych adresowych.
- Krok nie może być pusty — nie dziel sztucznie, żeby zwiększyć liczbę kliknięć.
- Pola logicznie połączone razem — imię i nazwisko, kod pocztowy i miejscowość.
Wskaźnik postępu
Użytkownik musi wiedzieć, ile jeszcze przed nim. Nieznana długość procesu to jeden z głównych powodów porzuceń.
| Rodzaj wskaźnika | Kiedy stosować |
|---|---|
| Nazwane kroki | Stała liczba kroków o wyraźnych tematach — pokazuje, co jeszcze będzie |
| Numer kroku | Stała liczba kroków, mało miejsca na ekranie |
| Pasek procentowy | Liczba kroków zależna od odpowiedzi |
| Informacja o czasie | Na początku procesu — „zajmie około trzech minut" |
Przy pytaniach warunkowych liczba kroków może się zmieniać. Pasek, który cofa się lub skacze, frustruje. Lepiej zaprojektować go tak, żeby zawsze postępował do przodu, nawet jeśli tempo nie jest równe.
Walidacja w każdym kroku
Błąd wykryty dopiero po wysłaniu całego formularza zmusza użytkownika do szukania, w którym kroku coś jest nie tak. Dane trzeba sprawdzać w momencie przejścia do następnego kroku, a najlepiej już przy opuszczeniu pola.
- Komunikat przy polu, a nie zbiorczy na górze strony.
- Konkretna treść — „Kod pocztowy powinien mieć format 00-000" zamiast „Nieprawidłowa wartość".
- Brak błędów przed wpisaniem — pole nie powinno świecić na czerwono, zanim użytkownik zdążył cokolwiek wpisać.
- Tolerancja formatów — numer telefonu ze spacjami, myślnikami lub bez nich przyjmowany bez problemu.
- Sprawdzenie po stronie serwera — walidacja w przeglądarce to wygoda, nie zabezpieczenie.
- Automatyczne uzupełnianie — miejscowość z kodu pocztowego, dane firmy z numeru NIP.
Nawigacja i powrót
- Przycisk „Wstecz" w formularzu, zachowujący wszystkie wpisane dane.
- Obsługa przycisku wstecz w przeglądarce — użytkownicy go używają, a formularz, który wtedy traci dane, jest częstą przyczyną porzuceń.
- Edycja z podsumowania — kliknięcie w sekcję przenosi do właściwego kroku i z powrotem.
- Główny przycisk zawsze w tym samym miejscu, z opisem następnego kroku — „Dalej: dane firmy".
- Brak rozpraszających elementów — w trakcie procesu warto ograniczyć nawigację serwisu i reklamy.
Zapisywanie stanu
W dłuższych procesach użytkownik może nie mieć pod ręką wszystkich informacji — numeru umowy, danych technicznych, dokumentu do załączenia. Formularz, który pozwala wrócić później, nie traci takich osób.
- Automatyczny zapis w przeglądarce po każdym kroku, żeby odświeżenie strony nie kasowało danych.
- Zapis na serwerze z linkiem wysyłanym na e-mail w procesach wymagających więcej czasu.
- Informacja o zapisaniu — użytkownik wie, że może przerwać.
- Ograniczony czas przechowywania niedokończonych danych i jasna informacja o tym.
- Brak danych wrażliwych w pamięci przeglądarki na współdzielonych komputerach.
Przechowywanie niedokończonych zgłoszeń to przetwarzanie danych osobowych, które wymaga podstawy prawnej i informacji w polityce prywatności. Szerzej piszemy o tym w tekście o RODO na stronie internetowej.
Dostępność
- Etykiety powiązane z polami, a nie tylko tekst zastępczy znikający po kliknięciu.
- Przeniesienie fokusu na nagłówek nowego kroku po przejściu dalej.
- Ogłaszanie błędów czytnikom ekranu.
- Pełna obsługa klawiaturą, także kafelków wyboru.
- Brak limitów czasu albo możliwość ich wydłużenia.
Więcej o wymaganiach dostępności piszemy w tekście o WCAG i dostępności strony.
Mierzenie porzuceń
Największa zaleta formularza wieloetapowego z punktu widzenia optymalizacji to możliwość zobaczenia, gdzie dokładnie użytkownicy rezygnują. Każdy krok można śledzić jako osobne zdarzenie.
| Wskaźnik | Co wskazuje |
|---|---|
| Odsetek przechodzących z kroku do kroku | Krok, który zniechęca najbardziej |
| Czas spędzony w kroku | Pytania trudne lub niejasne |
| Błędy walidacji według pola | Zbyt restrykcyjne reguły lub mylące etykiety |
| Powroty do poprzednich kroków | Użytkownicy nie rozumieją, jak odpowiedzi wpływają na dalszą część |
| Porzucenia według urządzenia | Problemy z działaniem na telefonach |
Gdy wiadomo, który krok jest problemem, można testować warianty: inną kolejkę pytań, mniej pól, inną formę wyboru. Narzędzia do takich testów opisujemy w tekście o testach A/B.
Najczęstsze błędy
- Dane kontaktowe w pierwszym kroku bez uzasadnienia.
- Utrata danych po kliknięciu wstecz w przeglądarce.
- Brak informacji o długości procesu.
- Walidacja dopiero na końcu.
- Pola obowiązkowe, które nie są potrzebne na tym etapie relacji z klientem.
- Brak potwierdzenia po wysłaniu, z informacją, co wydarzy się dalej i kiedy.
Formularz na telefonie
Większość użytkowników wypełnia formularze na telefonie, a tam każda niedoskonałość jest bardziej dotkliwa. Warto zadbać o właściwy typ klawiatury dla każdego pola — numeryczną dla telefonu i kodu pocztowego, z symbolem małpy dla adresu e-mail. Przyciski powinny być duże i umieszczone w zasięgu kciuka, a klawiatura ekranowa nie może zasłaniać przycisku przejścia dalej. Kafelki wyboru sprawdzają się lepiej niż długie listy rozwijane. Warto też przetestować formularz na starszym, wolniejszym telefonie, bo opóźnienia przy przejściu między krokami zniechęcają szybciej niż na komputerze.
Dobrą praktyką jest też sprawdzenie formularza z włączonym trybem ciemnym i powiększonym tekstem systemowym, bo wielu użytkowników korzysta z takich ustawień, a formularze rzadko są na nie przygotowane.
Kilka minut takich testów przed publikacją oszczędza wielu frustracji użytkownikom, którzy inaczej po prostu zamknęliby stronę bez słowa.
Podsumowanie
Formularz wieloetapowy pomaga, gdy pytań jest dużo, tworzą naturalne grupy lub zależą od siebie. Działa najlepiej, gdy zaczyna od łatwych pytań, pokazuje postęp, sprawdza dane w każdym kroku, pozwala wracać bez utraty danych i zapisuje stan w dłuższych procesach. Jego ukrytą zaletą jest precyzyjny pomiar, który wskazuje dokładnie, gdzie użytkownicy rezygnują.
Jeśli masz już długi formularz, zacznij od usunięcia pól, bez których możesz się obejść, a dopiero potem podziel pozostałe na kroki i ustaw śledzenie każdego z nich. Po kilku tygodniach dane pokażą, gdzie szukać dalszych usprawnień. O innych sposobach poprawy skuteczności strony piszemy w tekście o optymalizacji konwersji.
Najczęstsze pytania
Gdy formularz ma kilkanaście lub więcej pól, pytania tworzą wyraźne grupy tematyczne, kolejne pytania zależą od wcześniejszych odpowiedzi lub użytkownik może potrzebować czasu na zebranie informacji. Krótkiego formularza kontaktowego nie warto dzielić.
Zaczynać od pytań łatwych i angażujących, na przykład wyboru usługi, następnie przechodzić do szczegółów, pytania wrażliwe umieszczać po zbudowaniu zaufania, a dane kontaktowe zwykle na końcu. W procesach o dużej wartości warto przetestować wcześniejsze pytanie o e-mail.
W typowych procesach od trzech do sześciu, z kilkoma polami w każdym kroku, tak by krok mieścił się na ekranie telefonu. Kroków nie należy dzielić sztucznie, a użytkownik powinien od początku wiedzieć, ile ich jest i ile czasu zajmie wypełnienie.
Zapisywać dane po każdym kroku w przeglądarce, obsługiwać przycisk wstecz bez kasowania wpisanych informacji, a w dłuższych procesach zapisywać stan na serwerze i wysyłać link umożliwiający powrót, z ograniczonym czasem przechowywania.
Śledząc każdy krok jako osobne zdarzenie i analizując odsetek użytkowników przechodzących dalej, czas spędzony w kroku, błędy walidacji według pola, powroty do poprzednich kroków oraz różnice między komputerami i telefonami.
Bezpłatna wycena Twojego projektu
Opisz w kilku zdaniach, co chcesz zbudować — stronę, aplikację czy sklep. Odpowiadamy w ciągu 24 godzin roboczych konkretną propozycją zakresu i harmonogramu. Konsultacja i wycena są bezpłatne, bez zobowiązań.