Gdy użytkownik otwiera formularz, oznacza to, że już coś postanowił: poprosić o wycenę, zapisać się na listę albo sfinalizować zakup.
Ten krok nie powinien skłaniać go do zmiany zdania, jednak wystarczy jedno pole za dużo, niejasny komunikat o błędzie albo przycisk, który nie wyjaśnia, dlaczego jest zablokowany, aby porzucił sesję.
Formularz zgodny z dobrymi praktykami UX poprawnie wypełnia za pierwszym razem niemal 8 na 10 osób; formularz bez nich – 4 na 10. Różnica nie tkwi w tym, o co się pyta, lecz w tym, jak się pyta.
W tym artykule omawiamy koszt źle zaprojektowanego formularza, to, co zmienia się po zastosowaniu dobrych praktyk UX, oraz najczęstsze błędy, których należy unikać przed publikacją.
Ile traci Państwa firma przez źle zaprojektowany formularz
Nie każdy formularz traci tyle samo, gdy zawodzi. Formularz kontaktowy traci leady, zakupowy – sprzedaż, subskrypcyjny – bazę adresową, a skutki bardzo zależą od typu.
Przeciętnie formularz kontaktowy kończy nieco ponad jedna trzecia osób, które go zaczynają (37,9%), zakupowy – niewiele ponad połowa (58,2%), a formularz zapytania o wycenę lub demo – prawie trzy czwarte (74,5%).
Proszę odnieść to do własnego lejka sprzedaży: ile ze 100 osób, które dochodzą do kasy, kończy zakup? Różnica między tą liczbą a 100% to żadna tajemnica: to sprzedaże niemal domknięte, które zostały po drodze. Po pomnożeniu przez średnią wartość koszyka widać, że problem ma bardzo konkretną cenę w Państwa wynikach finansowych.
W B2B sytuacja wygląda inaczej, ale pytanie pozostaje to samo: ile ze 100 firm, które zaczynają wypełniać Państwa formularz zapytania o wycenę, dochodzi do jego wysłania? Nie chodzi tu o koszyk za 50 €, lecz o leady, z których każdy może być wart tysiące euro, więc utrata nawet kilku z nich bezpośrednio wpływa na lejek sprzedażowy.
Dlatego warto sprawdzić każdą decyzję dotyczącą formularza:
- Czy to pole jest niezbędne do realizacji zamówienia?
- Czy komunikat o błędzie mówi, co zrobić, a nie tylko że coś poszło nie tak? Czy formularz karty budzi wystarczające zaufanie, by wpisać 16-cyfrowy numer?
- Czy żąda Pan/Pani dokładnej wyceny, zanim użytkownik zdąży obdarzyć firmę zaufaniem?
- Czy zmusza Pan/Pani użytkownika do podania telefonu, choć wolałby zacząć od e-maila?
- Czy jest jasne, co dzieje się po wysłaniu formularza, czy dane znikają w pustce bez potwierdzenia?
Dlaczego formularze są porzucane: bezpieczeństwo, długość i zbędne pytania
Najczęściej wskazywanym powodem porzucenia nie jest cena ani produkt, lecz brak zaufania przy danych wrażliwych: prawie 3 na 10 osób rezygnuje z obawy o bezpieczeństwo. Następna jest długość formularza – nieco ponad 1 na 4 osoby – a na końcu pytania, które nie wydają się związane z tym, co użytkownik chce zrobić – 1 na 10.
Kluczowe elementy dobrego formularza
Widoczne etykiety i logiczne grupowanie pól
Etykieta (label) wskazuje, jakie informacje należą do danego pola, i zawsze powinna znajdować się nad nim, nigdy nie zastępowana placeholderem (tekstem przykładowym), który znika, gdy tylko użytkownik zacznie pisać.
Grupowanie powiązanych pól (adres, płatność, kontakt) w bloki wizualne sprawia, że formularz wydaje się krótszy, nawet jeśli ma te same pola – wykorzystuje się tu zasady grupowania wizualnego z psychologii Gestalt.
Mniej pól, mniejsze tarcie i wyższa konwersja
Przeciętna kasa potrafi pokazywać prawie dwa razy więcej pól, niż naprawdę potrzeba do złożenia zamówienia. W każdym aktywnym formularzu warto najpierw zapytać, czy brak któregoś pola uniemożliwiłby przetworzenie danych lub dostarczenie zamówienia.
Walidacja w odpowiednim momencie, nie za wcześnie
Idealna walidacja następuje wtedy, gdy użytkownik skończy wypełniać pole, a nie gdy jeszcze pisze. Zbyt wczesna walidacja frustruje: jeśli pole e-mail zgłasza błąd zaraz po pierwszych literach, ostrzega o usterce, zanim użytkownik skończył pisać. Zastosowana w odpowiednim momencie ogranicza liczbę błędów nawet o 22% i wyraźnie skraca czas wypełniania.
Pokazywanie postępu w długich lub wieloetapowych formularzach
Gdy formularz ma więcej niż 8–10 pól, podział na kroki z wyraźnym wskaźnikiem, np. „Krok 2 z 4”, pomaga użytkownikowi wiedzieć, ile mu zostało, i nie porzucić formularza w połowie. Sam podział na kroki nie poprawia konwersji: w krótkim formularzu może dodać zbędne tarcie, ale w długim lub zawierającym kilka decyzji czyni go łatwiejszym do ogarnięcia.
Formularz w jednej kolumnie
Formularz w jednej kolumnie wypełnia się średnio o 15 sekund szybciej niż wielokolumnowy, ponieważ użytkownik nie musi wzrokowo przeorientowywać się między polami. Na komputerze można umieszczać w jednym wierszu krótkie, powiązane pola, takie jak miejscowość i kod pocztowy, bez zaburzania kolejności czytania.
Wskazówka: warto prawidłowo podłączyć i mierzyć formularz
Choć w tym artykule skupiamy się na doświadczeniu użytkownika, dobrze zaprojektowany formularz na nic się nie zda, jeśli dane nie trafiają w żadne miejsce lub nie są prawidłowo mierzone. Jeśli sklep działa na PrestaShop, pomocny będzie moduł Google Tag Manager + Google Analytics 4 (GA4) PRO, który ułatwia rejestrowanie zdarzeń w sklepie.
Warto pamiętać: projekt i dane zawsze muszą iść w parze. Przed publikacją warto sprawdzić te cztery punkty:
Rodzaje formularzy według struktury
Formularz na jednym ekranie a wieloetapowy
Formularz na jednym ekranie sprawdza się lepiej, gdy zakup lub rejestracja są proste i nie ma zbyt wielu pól do wypełnienia: użytkownik widzi wszystko na raz i kończy proces bez przerw.
Formularz wieloetapowy ma natomiast sens, gdy trzeba podjąć kilka decyzji lub podać różne bloki informacji (dane osobowe, wysyłka, płatność): podział zmniejsza wrażenie długiego formularza, ale dodaje wizualne tarcie, które jest uzasadnione tylko wtedy, gdy wymaga tego treść.
Komunikaty o błędach: konkretne czy ogólne
Konkretny komunikat o błędzie wskazuje dokładnie, czego brakuje lub co jest nie tak, zamiast ograniczać się do informacji, że coś się nie powiodło. Jeśli problem ma rozwiązanie alternatywne, na przykład dana już istnieje w systemie, należy to zaproponować wprost (zamiast po prostu odrzucać całą daną), aby rozwiązać sprawę konkretnymi wskazówkami i uniknąć porzucenia formularza.
Czytelny wskaźnik postępu
W długich formularzach lub podzielonych na kroki pokazanie, w którym miejscu jest użytkownik („Krok 2 z 4”), pomaga ograniczyć porzucanie w połowie drogi. Format może być różny (liczba kroków, procent, pasek postępu), ale funkcja zawsze ta sama: użytkownik ma wiedzieć, ile mu zostało, zanim zacznie się niecierpliwić.
Uwaga: nie warto przekraczać czterech kroków. Od tego momentu każdy dodatkowy ekran zmniejsza prawdopodobieństwo, że użytkownik ukończy formularz.
Błędy, które nasilają porzucanie w każdym formularzu (i jak je ograniczyć na stronie)
Pytanie o zbędne informacje przed zakończeniem akcji
Każde dodatkowe pole zwiększa wysiłek potrzebny do ukończenia formularza. Zanim zostanie zachowane, warto zapytać, czy jego brak uniemożliwiłby wykonanie akcji: drugi numer telefonu, data urodzenia niezwiązana z zakupem czy pytanie o preferencje handlowe zwykle można przenieść na późniejszy etap, uczynić opcjonalnymi lub po prostu usunąć.
Niejasne komunikaty o błędach
Komunikat typu „nieprawidłowa dana” informuje, że jest problem, ale nie pomaga go rozwiązać. Klient musi zgadywać, które pole jest błędne i jakiego formatu się oczekuje, podczas gdy komunikat powinien wskazać problem i podpowiedzieć, jak go poprawić, zawsze przy odpowiednim polu.
Wyłączone przyciski bez wyjaśnienia
Zablokowany przycisk bez żadnej wskazówki zostawia użytkownika bez wiedzy, czego jeszcze brakuje. Pozostawienie przycisku zawsze aktywnym i wskazanie brakujących pól po próbie przejścia dalej jest czytelniejsze niż szary przycisk bez kontekstu.
Przycisk, który kasuje wszystko, co użytkownik wpisał
Przyciski „resetuj” lub „wyczyść formularz” nie rozwiązują żadnego realnego problemu użytkownika, a niosą ryzyko utraty pracy przez przypadkowe kliknięcie. Jeśli formularz zbiera dane wrażliwe, a użytkownik chce świadomie zrezygnować, wystarczy przycisk „anuluj”, zawsze znacznie mniej wyeksponowany niż przycisk wysyłania.
Formularz niedostępny i niedający się obsłużyć klawiaturą
Formularz powinien dać się wypełnić bez użycia myszy, z logiczną kolejnością tabulacji i poprawnie powiązaną etykietą przy każdym polu. Błędy muszą też być odczytywane przez czytniki ekranu i powiązane z odpowiednim polem, a nie tylko oznaczone kolorem.
Lista kontrolna ograniczania porzucania formularzy
Przed opublikowaniem dowolnego formularza na stronie warto zadać sobie te kluczowe pytania:
- Czy każde pole jest niezbędne do ukończenia akcji, czy można je usunąć, odłożyć lub oznaczyć jako opcjonalne?
- Czy etykiety pozostają widoczne, gdy użytkownik wypełnia i sprawdza dane?
- Czy błędy pojawiają się przy danym polu i wyjaśniają, jak je poprawić?
- Czy formularz przetestowano na prawdziwym telefonie, z autouzupełnianiem i klawiaturą odpowiednią do każdego typu danych?
- Czy można go w całości wypełnić klawiaturą, z logiczną kolejnością fokusu?
- Czy postęp jest czytelny, gdy formularz podzielono na kilka kroków?
- Czy mierzy się, w których polach pojawia się najwięcej błędów lub porzuceń, aby ustalić priorytety poprawek?
Warto pamiętać: nic z tego nie wymaga całkowitej przebudowy strony. Najczęściej wystarczy przejrzeć formularz pole po polu: o co się pyta, kiedy pojawia się błąd i ile czasu użytkownik potrzebuje, by dotrzeć do końca.
Jeśli nie wiedzą Państwo, od czego zacząć, w Línea Gráfica analizujemy Państwa stronę w ramach naszej optymalizacji konwersji (CRO) i wskazujemy dokładnie, co hamuje konwersje.
Źródła
FormStory — Form Abandonment Statistics: https://formstory.io/learn/form-abandonment-statistics/
FinancesOnline — 109 Online Form Abandonment Statistics: https://financesonline.com/form-abandonment-statistics/
Nielsen Norman Group — Website Forms Usability: Top 10 Recommendations: https://www.nngroup.com/articles/web-form-design/
Feathery — 150 Online Form Statistics: https://www.feathery.io/blog/online-form-statistics
Marketing4ecommerce — Los 5 mejores checkouts del eCommerce español (po hiszpańsku): https://marketing4ecommerce.net/formularios-de-checkout-y-registro-de-5-grandes-ecommerces/
uiFromMars — Diseño de formularios: por qué el 67% los abandona (y cómo evitarlo) (po hiszpańsku): https://uifrommars.com/diseno-formularios-reducir-abandono/
CXL — Form Design Principles: 13 Empirically Backed Best Practices: https://cxl.com/blog/form-design-best-practices/
WPForms — 101 Unbelievable Online Form Statistics & Facts: https://wpforms.com/online-form-statistics-facts/
Stripe — Proceso de compra de una página vs. de varios pasos (po hiszpańsku): https://stripe.com/mx/resources/more/one-page-checkout-vs-multistep-checkout
Shopify — Pago en una página (po hiszpańsku): https://www.shopify.com/es/blog/pago-en-una-pagina
