Czy zdarzyło Ci się wypełniać formularz na telefonie i patrzeć, jak pola się nie kończą? Odpowiadasz na jedno pytanie, klikasz dalej, a tam kolejne. I kolejne. Po piątym czy szóstym ekranie bez końca w zasięgu wzroku po prostu odchodzisz. Nie kończysz formularza. Szukasz konkurencji, która robi to łatwiej. Tak się dzieje nieustannie przy źle zaprojektowanych formularzach wieloetapowych. Ale gdy formularz wieloetapowy jest zbudowany dobrze, dzieje się coś innego. Użytkownicy przechodzą przez niego błyskawicznie. Kończą go szybciej niż jeden długi formularz. Konwersja rośnie o 86 procent w porównaniu z pytaniem o wszystko na jednej stronie.
Ten rozdział pokazuje, jak działają formularze wieloetapowe, kiedy ich używać (a kiedy nie), jak ułożyć kroki, żeby więcej osób je kończyło, i co odróżnia dobrze zaprojektowany formularz krok po kroku od takiego, który gubi użytkowników w połowie. Jeśli masz formularz z więcej niż siedmioma polami albo złożoną ścieżkę z różnymi potrzebami danych na różnych etapach, to Twój przewodnik, jak zrobić to dobrze.
Czym jest formularz wieloetapowy?
Formularz wieloetapowy to formularz podzielony na kilka ekranów lub stron. Zamiast pokazywać wszystkie pola naraz, pokazuje w każdym kroku ich część. Odwiedzający wypełnia pierwszy ekran, klika dalej, widzi drugi ekran i tak aż do końca. Nazywa się go też formularzem krok po kroku, formularzem kreatorowym (wizard) albo formularzem progresywnym, choć te określenia znaczą nieco co innego w zależności od budowy formularza.
Termin formularz kreatorowy oznacza formularz, w którym kroki są kolejne i obowiązkowe. Krok 1 prowadzi do kroku 2, krok 2 do kroku 3 i nie da się niczego pominąć. Sprawdza się to w procesach aplikacyjnych, wdrożeniu nowych użytkowników albo kwalifikacji kontaktów, gdzie każdy krok opiera się na poprzednim. Formularz progresywny jest inny. Pokazuje pola dynamicznie na podstawie wcześniejszych odpowiedzi na tym samym ekranie albo ładuje pola warunkowo bez przechodzenia na nową stronę. Niektóre formularze progresywne rozgałęziają się na różne ścieżki zależnie od odpowiedzi, więc dwie osoby mogą zobaczyć zupełnie inne kroki.
W tym rozdziale dla jasności traktujemy formularze wieloetapowe i kreatorowe jako to samo. Kluczowa zasada jest taka, że formularz jest podzielony na kilka ekranów, każdy z częścią pól. Odwiedzający przechodzi przez kroki po kolei, tylko do przodu albo z możliwością powrotu i poprawienia odpowiedzi.
Kiedy użyć formularza wieloetapowego, a kiedy jednostronicowego?
Powszechna mądrość mówi, że formularze wieloetapowe zawsze konwertują lepiej. To nie do końca prawda. Formularze wieloetapowe konwertują lepiej, gdy masz dużo danych do zebrania albo złożoną ścieżkę klienta. Ale jeśli masz prosty formularz, który mieści się na jednym ekranie bez przewijania, podział na kroki często zabija konwersję zamiast ją poprawiać.
Użyj formularza wieloetapowego, jeśli formularz ma więcej niż siedem pól. Jeśli masz siedem pól lub mniej i wszystkie mieszczą się na jednym ekranie bez przewijania, zostaw jedną stronę. Narzut wielu kroków (przeładowania stron, złożoność, kwestie postępu) nie jest wart marginalnego zysku. Ale jeśli masz dziesięć, piętnaście lub dwadzieścia pól, formularz wieloetapowy jest prawie zawsze lepszy. Dobrze to pokazuje przykład firmy z branży finansowej. Formularz pozyskiwania kontaktów podzielony z jednej strony z wieloma pytaniami na cztery skoncentrowane kroki zwiększył konwersję z jedenastu do czterdziestu sześciu procent. Na tym polega siła formularzy wieloetapowych, ale działa to tylko wtedy, gdy formularz jest na tyle długi, żeby kroki miały sens.
Użyj formularza wieloetapowego, jeśli formularz zbiera różne rodzaje informacji na różnych etapach. Formularz aplikacyjny może pytać o podstawowe dane (imię, e-mail), potem o szczegóły sytuacji (na co aplikujesz, dlaczego), a potem o dane wrażliwe (referencje, historia wynagrodzeń). Rozbicie tego na kroki grupuje powiązane pytania, co wydaje się bardziej naturalne niż mieszanie ich na jednej stronie.
Unikaj formularzy wieloetapowych, jeśli Twoi odbiorcy mają wysoką intencję i są gotowi działać. Klient, który zdecydował się kupić Twój produkt i chce szybko iść dalej, będzie zirytowany trzyetapowym formularzem zamówienia. Chce sfinalizować zakup najszybszą drogą. Dlatego transakcje B2B o wysokiej wartości często używają formularzy jednostronicowych. Klient wie, czego chce, i nie potrzebuje formularza, który prowadzi go za rękę przez kroki.
Unikaj formularzy wieloetapowych przy prostych działaniach transakcyjnych. Zapis do newslettera nie potrzebuje kroków. Reset hasła nie potrzebuje kroków. Formularz "skontaktuj się z nami" z czterema polami nie potrzebuje kroków. Jeśli formularz jest prosty i wszystkie pola mieszczą się na jednym ekranie, lepszy jest jeden krok. Nie dodawaj kroków tylko dlatego, że możesz.
Ile kroków powinien mieć formularz wieloetapowy?
Odpowiedź nie jest magiczną liczbą. Właściwa liczba kroków zależy od jednej zasady. Każdy krok powinien przedstawiać jedno odrębne zadanie poznawcze, a nie dowolne zgrupowanie pól. Nie dziel formularza na kroki tylko po to, żeby zmniejszyć liczbę widocznych pól. Dziel go, gdy odwiedzający musi mentalnie zmienić kontekst.
W większości formularzy optymalne jest od trzech do pięciu kroków. Dwa kroki to tak, jakby można było użyć jednej strony. Siedem lub więcej kroków powoduje zmęczenie. Użytkownicy zaczynają się zastanawiać, ile jeszcze ekranów muszą przejść. Im dłuższa ścieżka, tym więcej osób rezygnuje. Trzymaj się trzech do pięciu, chyba że Twój formularz ma bardzo szczególną strukturę, która wymaga więcej.
Co liczy się jako jeden krok? Krok to jedno zadanie poznawcze. Krok, w którym poznajesz status osoby (podstawowe dane, dane kontaktowe, rola), to jedno zadanie. Krok, w którym dowiadujesz się o jej problemie, to jedno zadanie. Krok, w którym opisuje obecne rozwiązanie, to jedno zadanie. Krok, w którym podaje budżet i termin, to jedno zadanie. Każdy z nich to odrębny kontekst mentalny, dlatego podział na osobne kroki wydaje się naturalny, a nie przytłaczający.
Dlaczego logika warunkowa ma znaczenie w formularzach wieloetapowych
Nie każdy odwiedzający musi zobaczyć każdy krok. Osoba ubiegająca się o pożyczkę nie potrzebuje tych samych pytań co osoba prosząca o demo. Osoba kupująca podstawowy pakiet nie potrzebuje tych samych kroków co osoba kupująca pakiet dla dużych firm. Tu logika warunkowa staje się kluczowa. Logika warunkowa pozwala pokazywać różne kroki zależnie od odpowiedzi odwiedzającego. Zmniejsza łączną liczbę kroków, które widzi, i sprawia, że formularz wydaje się spersonalizowany, a nie ogólny.
Bez logiki warunkowej zmuszasz wszystkich do tej samej ścieżki. Osoba, która odpowie nie na pytanie otwierające dalszą część, nie potrzebuje kolejnych pytań, ale i tak musi zobaczyć i pominąć następne pięć pól. To tarcie się sumuje. Dzięki logice warunkowej przenosisz ją od razu do odpowiedniego kroku. Formularz dostosowuje się do jej potrzeb. Dlatego logika warunkowa to nie tylko miła funkcja. Jest niezbędna w każdym formularzu wieloetapowym z rozgałęzionymi ścieżkami lub różnymi przypadkami użycia.
Kluczową zasadą logiki warunkowej jest przejrzystość. Jeśli przenosisz odwiedzającego z kroku drugiego od razu do kroku piątego, musi on rozumieć, dlaczego i co się stało. Jeśli logika jest zepsuta lub myląca, odwiedzający rezygnują, bo czują się zagubieni. Nie wiedzą, czy pomylili się w odpowiedzi, czy formularz nie działa. Zawsze dokładnie testuj rozgałęzienia przed uruchomieniem. Upewnij się, że każda możliwa ścieżka odpowiedzi prowadzi do właściwego kroku.
Jak zbudować i uporządkować kroki w formularzu wieloetapowym?
Kolejność prezentowania informacji ma znacznie większe znaczenie niż liczba kroków. Działa tu zasada psychologiczna. Gdy ktoś zainwestuje wysiłek w Twój formularz, wypełniając krok, chętniej przejdzie do następnego. Im dłużej z Tobą zostaje, tym większa szansa, że skończy. Pierwszy krok to więc nie zwykły krok. To punkt zaangażowania, w którym użytkownicy decydują, czy iść dalej, czy porzucić cały formularz.
Pierwszy krok: zacznij od łatwych, niewrażliwych pytań
Pierwszy krok formularza wieloetapowego powinien mieć jak najniższą barierę wejścia. Zapytaj o imię, e-mail albo proste pytanie o preferencje. Nie zaczynaj od numeru telefonu, budżetu, referencji ani niczego, co wymaga zaufania lub głębszego namysłu. Odwiedzający widzi pierwszy krok i podejmuje szybką decyzję. Jeśli wydaje się łatwy i szybki, kończy go. Jeśli wydaje się natarczywy lub złożony, odchodzi.
Psychologia nazywa to efektem nadanego postępu (endowed progress effect). Gdy ktoś zacznie Twój formularz, już zainwestował. Podjął decyzję, żeby się z Tobą zaangażować. Następny krok wydaje się mniej zniechęcający, bo zainwestował już w krok pierwszy. Dlatego pierwszy krok musi być najłatwiejszy. Spraw, żeby ludzie od razu czuli, że robią postęp. Po ukończeniu pierwszego kroku 90 procent osób, które zaczęły, przejdzie do drugiego. Po ukończeniu drugiego 85 procent przejdzie do trzeciego. Ale jeśli pierwszy krok jest trudny i złożony, nigdy nie dojdziesz do drugiego.
Kroki środkowe: grupuj powiązane informacje, odkładaj wrażliwe pytania
W krokach środkowych zbierasz większość danych. Tutaj pytasz o problem klienta, jego sytuację, obecne rozwiązanie i ograniczenia. Grupuj powiązane pola razem. Jeden krok może obejmować sytuację i problemy. Inny termin i budżet. Trzeci zespół i proces decyzyjny.
Oto kluczowa zasada. Nie pytaj o informacje wrażliwe we wczesnych krokach, nawet jeśli są istotne. Odłóż pytania o budżet, numery telefonu i wszystko, co wymaga ujawnienia danych osobistych, do kroku trzeciego lub czwartego. Dlaczego? Bo w kroku trzecim odwiedzający już zainwestował. Wypełnił dwa kroki informacji. Poniesiony koszt tworzy psychologiczne zobowiązanie. Chętniej odpowiada na wrażliwe pytania, bo porzucenie formularza teraz wydaje się marnowaniem wykonanej pracy. Ta zasada nazywa się efektem zaangażowania (skin in the game). Im bardziej odwiedzający jest zaangażowany, tym chętniej podaje informacje, którymi normalnie wahałby się dzielić.
Ostatni krok: potwierdzenie, płatność i dane wrażliwe
Ostatni krok powinien zawierać wszystko, co kończy transakcję lub przypieczętowuje zobowiązanie. Jeśli zbierasz płatność, tu trafia pole płatności. Jeśli potrzebujesz podpisu lub zgody, to ostatni krok. Jeśli masz wrażliwe pytania o budżet lub dane osobiste, których unikano we wcześniejszych krokach, tu je umieść. W ostatnim kroku odwiedzający ukończył większość formularza. Jest zaangażowany. O wiele chętniej odpowie na pytania i dokończy cały proces.
Ostatni krok może też zawierać ekran potwierdzenia, który pokazuje odwiedzającemu, co wpisał. Pozwól przejrzeć odpowiedzi przed ostatecznym wysłaniem. Poprawia to dokładność i buduje pewność, że dane są poprawne. Służy też jako sygnał postępu. Odwiedzający widzi ekran potwierdzenia i wie, że formularz jest prawie gotowy. To psychologiczne domknięcie zwiększa odsetek ukończeń.
Wskaźniki postępu i nawigacja
Bez wskaźnika postępu odwiedzający nie wiedzą, jak długo potrwa formularz. Zaczynają, wypełniają krok, klikają dalej i zastanawiają się, czy przed nimi jest jeszcze dziesięć kroków. Niepewność powoduje porzucenia. Niektórzy po prostu rezygnują, bo nie chcą zobowiązywać się do nieznanej liczby kroków. Wskaźnik postępu rozwiązuje to, pokazując, gdzie są i ile kroków zostało.
Są trzy popularne style. Numerowane kroki pokazują krok drugi z czterech tekstem albo jako wskaźniki kroków na górze. Paski procentowe pokazują wizualne wypełnienie, które rośnie wraz z postępem odwiedzającego. Wskaźniki w postaci kropek pokazują aktywny krok z linią lub wizualnym połączeniem między nimi. Każdy z nich działa, ale badania pokazują, że numerowane kroki i paski procentowe są nieco skuteczniejsze niż kropki, bo jasno komunikują całość. Gdy ktoś widzi krok pierwszy z czterech, wie, że są jeszcze trzy. Gdy widzi pasek wypełniony w dwóch procentach, nie ma tej samej jasności.
Sam wskaźnik postępu ma efekt psychologiczny. Pokazywanie postępu w formularzu faktycznie zwiększa liczbę ukończeń. Formularz, który pokazuje, że jesteś w czterdziestu procentach, ma więcej ukończeń niż formularz bez wskaźnika, nawet jeśli łączny wysiłek jest identyczny. To znowu efekt nadanego postępu. Odwiedzający czują, że robią postęp, co motywuje ich do kontynuowania.
Zawsze dodaj przycisk wstecz, który pozwala poprawić poprzednie odpowiedzi. Odwiedzający może zauważyć, że źle odpowiedział na pytanie, albo chcieć zmienić wcześniejszą odpowiedź. Jeśli zmuszasz go do ruchu tylko naprzód, czuje się uwięziony. Uwięzieni użytkownicy rezygnują. Użytkownicy, którzy mogą swobodnie nawigować, częściej kończą, bo czują kontrolę. Przycisk wstecz poprawia też jakość danych. Jeśli odwiedzający może wrócić i poprawić błędy, zbierasz dokładniejsze informacje.
Strategia pól w każdym kroku
Skoro omówiliśmy ogólną strukturę kroków, przyjrzyjmy się polom w każdym z nich. Ile pól na każdym ekranie? Jaki układ działa najlepiej? Jak obsłużyć walidację i komunikaty o błędach?
Ogranicz każdy krok do maksymalnie trzech do pięciu pól. To nie twarda reguła, ale praktyczna wskazówka. Krok z jednym lub dwoma polami wydaje się ledwo postępem. Krok z ośmioma polami wydaje się przytłaczający. Celuj średnio w trzy do czterech pól na krok. Daje to dość miejsca na zebranie ważnych informacji bez tego, żeby jakikolwiek krok był ciężarem.
Używaj układu jednokolumnowego dla każdego pola. Nigdy nie używaj układów wielokolumnowych w kroku. Brzmi to oczywiście, ale wiele zespołów próbuje zmieścić więcej pól na ekranie, używając dwóch lub trzech kolumn. W praktyce użytkownicy pomijają pola, bo przepływ wzrokowy jest zaburzony. Użytkownik czytający stronę w dół podąża za naturalnym wzorcem z góry na dół. Gdy pola są ułożone w kolumnach, użytkownicy pomijają pola. Badania nad użytecznością testowały to szeroko. Formularze jednokolumnowe mają znacznie wyższy odsetek ukończeń niż wielokolumnowe z dokładnie tymi samymi polami.
Umieszczaj etykiety nad polami, nigdy z boku. Gdy etykiety są po lewej stronie pola, zajmują miejsce poziomo i spychają pola w dół strony. Gdy etykiety są nad polami, są tuż obok, gdy użytkownik skupia się na polu. Co ważniejsze, etykiety umieszczone w polu jako tekst zastępczy znikają, gdy użytkownik kliknie w pole. Etykiety nad polami pozostają widoczne, więc użytkownik nigdy nie zapomina, co wypełnia.
Waliduj pola po opuszczeniu pola przez użytkownika, nigdy podczas pisania. Gdy walidujesz w trakcie pisania, użytkownicy się frustrują. Widzą komunikaty o błędach, zanim skończą wpisywać dane. Wygląda to tak, jakby formularz ich oceniał lub krytykował wpis. Waliduj po przejściu do następnego pola. Daje to czas na dokończenie i pozwala sprawdzić wpis bez przerywania przepływu. Osoba wpisująca numer telefonu nie musi widzieć błędu, gdy jeszcze pisze. Pozwól skończyć, a potem sprawdź, czy jest poprawny.
Ogranicz pola z tekstem otwartym. Pola z tekstem otwartym wymagają pisania akapitów. Znacznie zmniejszają liczbę ukończeń, bo pisanie zajmuje czas i wysiłek. Ogranicz formularz do nie więcej niż dwóch pól z tekstem otwartym łącznie. Do wszystkiego innego używaj list rozwijanych, przycisków opcji, pól wyboru lub skal ocen. Lista rozwijana z pytaniem o branżę jest szybsza niż prośba o wpisanie branży. Przycisk opcji z wielkością firmy (mała, średnia, duża, korporacja) jest szybszy niż prośba o wpisanie wielkości firmy. Używaj uporządkowanych pól wszędzie, gdzie to możliwe.
Częste błędy, które zabijają liczbę ukończeń formularzy wieloetapowych
Możesz idealnie stosować każdą zasadę z tego rozdziału i mimo to zabić liczbę ukończeń, jeśli popełnisz jeden z tych błędów.
Nie pytaj o informacje wrażliwe zbyt wcześnie. Jeśli pierwszy krok pyta o numer telefonu lub roczny przychód, stracisz odwiedzających, zanim zaangażują się na tyle, żeby zaufać Ci z danymi wrażliwymi. Zostaw to na krok trzeci lub późniejszy.
Nigdy nie usuwaj przycisku wstecz. Niektóre formularze pozwalają tylko na ruch naprzód. Nie rób tego. Użytkownicy utykają, czują się uwięzieni i rezygnują. Formularz z nawigacją wstecz zawsze radzi sobie lepiej niż bez niej.
Nie waliduj podczas pisania przez użytkowników. Tworzy to ciągłą informację zwrotną i frustrację. Poczekaj, aż przejdą do następnego pola.
Nie stosuj wskaźników postępu, które znikają lub nieoczekiwanie się zmieniają. Jeśli pasek postępu pokazuje krok drugi z pięciu, a nagle zmienia się na krok drugi z sześciu, odwiedzający tracą zaufanie. Czują, że formularz ukrywa informacje. Utrzymuj stałą łączną liczbę kroków w całym formularzu.
Nie używaj wielokolumnowych układów pól. Stracisz ukończenia pól, bo użytkownicy pomijają pola, których nie widzą w naturalnym przepływie czytania.
Nie zapominaj o zapisywaniu postępu między krokami. Jeśli odwiedzający wypełni trzy kroki, a potem opuści stronę, jego praca powinna zostać zapisana. Gdy wróci do formularza, wcześniej wpisane dane powinny nadal tam być. Gdy dane przepadają, odwiedzający muszą wpisywać wszystko od nowa albo rezygnują. To zabija konwersję. Niektóre kreatory formularzy używają pamięci lokalnej do zapisywania postępu, więc jeśli odwiedzający zamknie przeglądarkę i wróci później, jego dane nadal tam są. To silny czynnik ukończeń.
Nie używaj zepsutej logiki warunkowej, która kieruje ludzi do złych kroków. Jeśli odwiedzający odpowie na pytanie trzecie opcją A, a Twoja logika ma go przenieść do kroku piątego, ale zamiast tego pokazuje krok szósty, zrezygnuje. Zawsze testuj, czy rozgałęzienia działają poprawnie przed uruchomieniem.
Jak WEMASY pomaga w budowaniu formularzy wieloetapowych
Kreator formularzy WEMASY pozwala tworzyć formularze wieloetapowe z logiką warunkową, automatycznym śledzeniem postępu i zintegrowaną analityką. Zbuduj pięcioetapowy formularz pozyskiwania kontaktów i zobacz, w którym kroku jest najwięcej porzuceń. Kieruj różnych odwiedzających do różnych kroków na podstawie ich odpowiedzi. Zapisuj postęp odwiedzających, żeby po zamknięciu przeglądarki i powrocie ich dane były nienaruszone. Wszystkie zgłoszenia z formularzy trafiają do Twojego panelu, gdzie możesz przeglądać odpowiedzi, eksportować dane i łączyć zgłoszenia z CRM. Możesz też śledzić wskaźniki skuteczności formularza, takie jak odsetek ukończeń na krok, czas spędzony na stronie i punkty porzucenia. Więcej o tym, jak formularze wpływają na wyniki firmy i wpisują się w ogólną strategię strony, znajdziesz w naszym poradniku o formularzach na stronie i ich znaczeniu.