Projektowanie formularzy, które zwiększają konwersję

Formularz jako punkt konwersji: cel, pomiar i analityka

Formularz kontaktowy, zapis i zamówienie mogą zamienić zainteresowanie ofertą w konkretne działanie. Projektowanie zacznij od określenia celu, a następnie dobierz pola, ich etykiety, komunikaty i przycisk tak, by prowadziły do wysłania.

Współczynnik konwersji formularza dotyczy konkretnego działania, takiego jak zapis do newslettera, wysłanie zapytania lub zamówienie. Mierz wysłania w odniesieniu do osób, które rozpoczęły wypełnianie, zamiast utożsamiać konwersję z samym przejściem na inną podstronę.

Analityka formularzy to narzędzia i metody badania, jak użytkownicy wchodzą w interakcję z formularzami — od prostych zapisów do newslettera po wieloetapowe procesy zamówienia. Jej wskaźniki to między innymi współczynnik porzucania formularza i czas w polu. Narzędzie do analityki formularzy musi być zgodne z przepisami o ochronie danych, w tym z RODO.

Współczynnik konwersji sprzedaży odnosi się do osób, które podejmują działania przybliżające firmę do zwiększenia przychodów. Formularz może prowadzić do działania takiego jak zapis do newslettera, prośba o ofertę lub zamówienie.

Google Analytics śledzi osobno konwersje sesji i użytkowników i może być pomocny przy obliczaniu współczynnika konwersji sprzedaży. W tym ujęciu wypełnienie formularza to konwersja sama w sobie. Formularz zapisu, kontaktowy czy zamówieniowy nie obsługuje ścieżki, lecz jest jej celem.

Czy użytkownik dotrze do formularza i go wyśle, zależy od całej ścieżki. Powody rezygnacji to mylący interfejs, niejasna ścieżka użytkownika, wolne ładowanie strony i trudność ze znalezieniem produktów. Aby temu zapobiec, poświęć czas na znalezienie tego, co sprawia kupującym najwięcej trudności.

Przy planowaniu formularza ustal, jakie informacje są niezbędne do wykonania danego działania. W formularzu zamówienia zbieraj tylko dane konieczne do sfinalizowania zamówienia.

Formularz kontaktowy, zapisu i zamówienia projektuj razem ze ścieżką, która do niego prowadzi. Zanim dodasz pole, sprawdź, czy jest potrzebne do osiągnięcia celu formularza, a jego etykietę i kolejność dopasuj do zadania użytkownika.

Porównaj formularz z celem, dla którego użytkownik go otwiera: zapytaniem o ofertę, zapisem lub złożeniem zamówienia. Zbędne pola usuwaj, a potrzebne informacje o formacie lub warunkach wpisywania umieszczaj przy odpowiednim polu.

Zadbaj, by etykieta jasno określała, jakich danych oczekujesz, i była czytelnie powiązana z polem.

Powiąż każdą etykietę programowo z polem i jasno nazwij jego cel. Gdy kilka kontrolek tworzy grupę, opisz tę grupę etykietą lub legendą.

Jeśli pole wymaga określonego formatu, podaj instrukcję przy etykiecie albo połącz ją z polem jako opis. Dzięki temu użytkownik wie, jak poprawnie wprowadzić dane.

Ułatw wpisywanie danych przez autouzupełnianie.

Wskaźniki analityczne formularzy

Poznaj użytkownika, zanim narysujesz pierwsze pole

Badania eksploracyjne wyjaśniają, kim jest użytkownik, jak pracuje z obecnymi systemami i jaki cel chce osiągnąć. Prowadzi się je metodami etnograficznymi: wywiadem indywidualnym (IDI) i obserwacją uczestniczącą.

Zakres obejmuje potrzeby, problemy, oczekiwania, przyzwyczajenia oraz obawy, niepewności i wątpliwości (FUD) budzone przez interfejs. W projektowaniu formularza pytanie brzmi nie „jakie pola dodać”, ale „po co ktoś go wypełnia i czego się przy tym obawia”.

Najpierw określ, kto wypełnia formularz i jaki rezultat chce osiągnąć. Następnie dobierz do tego zadania pola, etykiety i wskazówki, uwzględniając obawy, które mogą powstrzymać użytkownika przed wysłaniem.

Częsty błąd w e-commerce: projektowanie wyłącznie na danych ilościowych — analityce i specyfikacji funkcji sklepu — bez znajomości klientów i ich potrzeb. Przykład: dwie osoby w tym samym wieku, z rodzinami, wybierają to samo miejsce wakacji, ale różnią je zawód, styl życia, a nawet wyznanie. To przekłada się na zachowania zakupowe i oczekiwania wobec formularza.

Badania UX różnią się od marketingowych: marketingowe opierają się w większej mierze na deklaracjach użytkowników, a UX bada, jak użytkownik faktycznie pracuje i w jakim kontekście. Przy formularzu zapisu, kontaktowym i zamówieniowym ustal, kto go wypełnia i po co. Obawy (FUD) budzone przez interfejs dotyczą pól, etykiet i komunikatów, zanim użytkownik kliknie wyślij.

Zamień cel użytkownika w konkretne zadanie testowe, na przykład zapis do newslettera albo wysłanie zapytania. Obserwuj, przy którym polu uczestnik się zatrzymuje i czy potrafi dokończyć formularz.

Badania pozwalają wskazać błędy popełniane przez użytkowników, błędy występujące w aplikacji oraz miary sukcesu, takie jak poprawność wykonywanych zadań i finalizacja zadań. Dla formularza ta miara to wysłanie.

Ogranicz wysiłek potrzebny do przejścia od pierwszego pola do wysłania. Czytelne etykiety, logiczna kolejność i krótkie instrukcje pomagają użytkownikowi zrozumieć, co ma zrobić dalej.

Tarcie rośnie, gdy użytkownik musi zgadywać, jakich danych oczekujesz lub w jakim formacie ma je wpisać. Sprawdź te miejsca podczas testu formularza i popraw etykietę albo dodaj instrukcję przy polu.

Dobieraj metodę do pytania: test użyteczności pokaże, gdzie użytkownik ma trudność z zadaniem, a test A/B pozwoli porównać warianty formularza. Nagrania sesji i click tracking pomagają wskazać miejsca, w których warto dokładniej sprawdzić zachowanie użytkowników.

Diagnoza tarcia: gdzie formularz traci użytkownika

Analityka pokazuje moment porzucenia ścieżki, ale nie jego przyczynę — tę daje badanie UX. Zasada: zbierz oba rodzaje danych razem. Moment porzucenia i jego przyczyna to dwie różne informacje o formularzu.

Problemy w warstwie interakcji wykrywają: nagrania sesji, testy użyteczności, testy A/B, click tracking, eye-tracking i cognitive walkthrough.

Uzupełniają je wskaźniki ilościowe z analityki formularzy, w tym współczynnik porzucania formularza i czas w polu, które wskazują, przy którym polu użytkownik się zatrzymuje.

Nagrania wideo sesji odwiedzających pozwalają ustalić, które ulepszenia są dla użytkowników najistotniejsze i którymi zająć się w pierwszej kolejności.

Test użyteczności to badanie jakościowe: uczestnik wykonuje konkretne zadania w serwisie lub aplikacji, a badacz obserwuje jego zachowanie — gdzie się zatrzymuje, co pomija — a nie deklaracje o wyglądzie strony. Zadania formułuje się na podstawie realnej pracy użytkownika z obecnymi systemami.

Błąd nazwij przy właściwym polu i krótko wyjaśnij, co użytkownik ma poprawić. Krótki, zrozumiały komunikat pomaga przejść do następnego kroku.

Informuj o błędzie przy polu, by użytkownik mógł od razu poprawić wpisane dane.

Projektowanie pól i ścieżki: etykiety, zgody RODO i formularze wieloetapowe

UX to nie UI. UI (web design) jest projektem wizualnym, a UX design to proces projektowania relacji między użytkownikiem a marką, z użytkownikiem w centrum uwagi.

Przed projektowaniem wyglądu ustal, jak użytkownik przejdzie od wezwania do działania do wysłania. Dopiero do tej ścieżki dobierz kolejność pól, etykiety, komunikaty i treść przycisku.

Wnioski z badań weryfikacyjnych — na szkicach, prototypach lub działającym systemie — mogą dotyczyć elementów drobnych, np. etykiet pól, oraz fundamentalnych, takich jak system nawigacji czy architektura strony.

Zaplanuj kroki od wezwania do działania do potwierdzenia wysłania, zanim przygotujesz makietę. Dla każdego kroku określ, jakie pole lub komunikat pomaga użytkownikowi ruszyć dalej.

Zaplanuj formularz wieloetapowy jako przemyślaną sekwencję kroków, która zmniejsza obciążenie poznawcze i prowadzi użytkownika przez złożone wymagania. Przy złożonych procesach wieloetapowość sprzyja wyższej konwersji.

Układaj pola w kolejności zgodnej z zadaniem użytkownika, a pola powiązane grupuj razem. Przy każdej etykiecie jasno określ cel pola i dodaj instrukcję, jeśli poprawne wpisanie danych wymaga dodatkowych wyjaśnień.

Przy formularzu wieloetapowym zadbaj o czytelną strukturę i zrozumiały przebieg, tak aby użytkownik wiedział, co będzie dalej. Pasek postępu lub ścieżka okruszkowa pokazują ukończone etapy i liczbę pozostałych kroków.

Od wezwania do działania (CTA) do potwierdzenia wysłania prowadź jedną ścieżkę. W obszarze koszyka lista Best Practices for e-Commerce (BP4eC) od IDEACTO wskazuje kryterium: podstrona koszyka ma przyciski „Przejdź do zamówienia/Złóż zamówienie” lub podobny.

Dla pól adresowych i danych osobowych stosuj podpowiedzi i standaryzację formatów, ale nie zakładaj jednego schematu nazwisk czy ulic. Przy numerach telefonów używaj prefiksów krajowych, a dla krajów i regionów udostępnij listy wyboru.

Przycisk wysyłki w formularzu zamówienia powtarza wzorzec z koszyka: „Przejdź do zamówienia/Złóż zamówienie” lub podobny. Ten sam czasownik i ta sama nazwa kroku zmniejszają niepewność przed kliknięciem.

Przy formularzu zbierającym dane osobowe spełnij obowiązek informacyjny z art. 13 RODO. Klauzula informacyjna mówi, kto przetwarza dane, w jakim celu, na jakiej podstawie i jakie prawa przysługują osobie.

Przykład: w widoku koszyka informacja o możliwej darmowej przesyłce, np. „Brakuje Ci 20 zł do darmowej przesyłki”. To konkretny tekst, który informuje o warunku przed przejściem do formularza.

Zgoda i klauzula informacyjna to dwie różne rzeczy, a każdy cel wymaga osobnej zgody. Zgoda musi być dobrowolna, konkretna, świadoma i jednoznaczna, a administrator informuje o swojej tożsamości oraz o możliwości jej wycofania.

Tekst przycisku powinien nazywać działanie, które wywołuje. W obszarze zamówienia przykładem z listy BP4eC jest „Przejdź do zamówienia/Złóż zamówienie” lub podobny.

Wzór klauzuli: Administratorem Twoich danych osobowych jest [pełna nazwa i adres firmy]. Dane podane w tym formularzu przetwarzamy w celu [konkretny cel]. Okno z treścią zgody umieść tak, by było widoczne przy formularzu.

Formularz mobilny i desktopowy: dostępność i kontekst

Badania UX aplikacji mobilnych i desktopowych nie muszą dawać się prowadzić tymi samymi metodami. Rośnie złożoność funkcji, kontekstów i celów użycia, a wzorce użytkowania zmieniają się z roku na rok — metody badawcze dostosowuje się do przedmiotu badania.

Przygotuj osobne scenariusze testowe dla telefonu i komputera. Na urządzeniach mobilnych sprawdź, czy pola i instrukcje pozostają czytelne oraz czy użytkownik może wygodnie wpisać potrzebne dane.

Dostępność formularza obejmuje m.in. odpowiednie rozmiary czcionek, kontrast i obsługę klawiatury; warto zadbać o te elementy jako część jakości formularza.

Znaczenie mobile rośnie: telefony komórkowe stają się podstawowymi urządzeniami, służą nie tylko rozrywce, ale także pracy. Dlatego badania — zwłaszcza aplikacji mobilnych — będą nabierały na znaczeniu.

Planując test formularza, uwzględnia się, że użytkownik mobilny wypełnia go w innym kontekście niż osoba przy komputerze. Tę różnicę odzwierciedla się w zadaniach badawczych.

Formularz, który działa w jednym kraju, może frustrować użytkowników w innym. Dla każdego rynku przygotuj osobną wersję formularza i przetestuj ją z rodzimymi użytkownikami.

Sprawdź etykiety, kolejność pól, komunikaty i przycisk wysyłki na obu typach urządzeń. Zadbaj, by pola były dostosowane do sposobu wprowadzania danych na danym urządzeniu.

Na małych ekranach redukuj marginesy, powiększ obszar klikalny przycisków i prowadź użytkownika liniowym przepływem, unikając układów wielokolumnowych.

Badania formularza wykorzystują w równym stopniu metody jakościowe i ilościowe. Ich wyniki racjonalizują proces projektowy, dostarczając danych, wniosków i analiz.

Testowanie formularza: iteracje i problemy użytkowników

Reguła pięciu użytkowników pochodzi z modelu matematycznego opublikowanego w 1993 roku przez Jakoba Nielsena i Thomasa Landauera. Siedem lat później spopularyzował go artykuł Nielsena dla Nielsen Norman Group.

Model zakłada, że przeciętny problem z użytecznością napotyka około 31% użytkowników. Przy tym założeniu pięciu uczestników ujawnia około 85% problemów w interfejsie.

Model zakłada też, że każdy napotkany problem jest problemem wartym naprawy. Jeżeli jedna osoba nie potrafi wysłać formularza, nie potrzeba stu kolejnych, by uznać to za błąd do usunięcia.

Przełożenie na formularz: pojedynczy problem z etykietą, kolejnością pól, komunikatem lub przyciskiem wysyłki, który napotka jedna osoba, jest problemem wartym naprawy.

Pierwszy uczestnik dostarcza najwięcej informacji, bo wszystko, co napotka, jest nowe. Drugi powtarza część obserwacji i dokłada niewielką pulę nowych, a przy piątym rozmówcy większość wątków zaczyna się dublować.

W sklepie internetowym pięć osób liczy się na jeden segment klientów i w kilku iteracjach — nie pięć osób na cały sklep. Gdy sklep obsługuje kilka odrębnych segmentów albo ma rozbudowane, równoległe ścieżki zakupowe, pięciu użytkowników to za mało.

Pięcioosobowy test jakościowy może ujawnić problemy z użytecznością. Nie pozwala jednak określić skali problemu w populacji klientów.

Rzetelność reguły sprawdziła Laura Faulkner: przetestowała aplikację na 60 użytkownikach, wylosowała z tej puli sto zestawów pięcioosobowych i sprawdziła, ile problemów wykryłby każdy osobno.

Średni wynik zgodził się z modelem i wyniósł około 85%, ale najgorszy zestaw pięciu osób wykrył zaledwie 55% problemów. Przy dziesięciu uczestnikach średnia rośnie do około 95%, a najgorszy wynik do 80%; przy dwudziestu średnia przekracza 95%, a najgorszy wynik sięga 95%.

Większa liczba użytkowników nie przekłada się na większą liczbę wniosków ani nie podnosi ich jakości. Dlatego pięć osób na segment powtarza się w kolejnych iteracjach, zamiast rozbudowywać jedną próbę.

Koszt takiego badania bywa niższy, niż sugeruje nazwa. Pojedyncze badanie może trwać 30 minut, a pięć wywiadów — 2,5 godziny. Całość wraz z przygotowaniem prototypu, scenariusza i logistyki zamyka się poniżej pięciu dni.

Maciej Maj, CEO Openfield, wskazuje, że pięć wywiadów pozwala zbudować główne wątki odpowiadające za zachowanie klienta.

Formularz poprawia się w kilku iteracjach — testy użyteczności, testy A/B, kolejne prototypy — zamiast wdrożyć raz i uznać temat za zamknięty. Formularz testuj na zadaniach: zapis do newslettera, wysłanie formularza kontaktowego, złożenie zamówienia.

Iteruj elementy formularza: etykiety, kolejność pól, komunikaty i przycisk wysyłki. Każda iteracja kończy się wnioskiem o wysłaniu. Miary sukcesu formularza: poprawność wykonywanych zadań i finalizacja zadań. Dla formularza ta miara to wysłanie.

Formularz zamówienia: dane, zgoda i spójne CTA

Best Practices for e-Commerce (BP4eC) od IDEACTO to zbiór list kontrolnych do punktowego porównania własnego serwisu ze sprawdzonymi standardami UX — między innymi w obszarze koszyka.

BP4eC umożliwia wejście w szczegóły własnej witryny według profesjonalnych wskazań. Przechodząc punkt po punkcie można zweryfikować zgodność projektu sklepu ze sprawdzonymi standardami.

Przykładowe kryterium: podstrona koszyka ma przyciski „Przejdź do zamówienia/Złóż zamówienie” lub podobny. Wśród praktyk oznaczonych jako „warto rozważyć” jest informacja o możliwej darmowej przesyłce w widoku koszyka, np. „Brakuje Ci 20 zł do darmowej przesyłki”.

W formularzu zamówienia powtórz ten przycisk jako krok do złożenia zamówienia. Komunikat „Brakuje Ci 20 zł do darmowej przesyłki” umieść w widoku koszyka.

Formularz zamówienia jest ogniwem łańcucha: przycisk dodania do koszyka, koszyk, kasa. Mylący interfejs oraz niejasna ścieżka użytkownika należą do wymienianych powodów rezygnacji z tych działań.

W formularzu zamówienia zbieraj dane adekwatne do celu: imię i nazwisko, adres e-mail, adres dostawy i numer telefonu. Każde pole obowiązkowe musi być niezbędne do wykonania umowy lub spełnienia obowiązku prawnego.

Spójność etykiet i przycisków między koszykiem a formularzem — ten sam czasownik, ta sama nazwa kroku — sprawia, że użytkownik wie, co stanie się po kliknięciu. Mylące lub zbędne elementy w tym miejscu działają przeciwko konwersji niezależnie od tego, jak dobrze zaprojektowano sam koszyk.

Ta sama nazwa kroku i ten sam czasownik obowiązują w etykietach i przycisku wysyłki. Dzięki temu użytkownik wie, co stanie się po kliknięciu.

Administrator sam ustala okres przechowywania danych. Wskazanie tego okresu lub kryteriów jego ustalenia jest częścią obowiązku informacyjnego; ogólne stwierdzenie, że dane będą przechowywane tak długo, jak jest to niezbędne, nie wystarcza.

Przed publikacją sprawdź, czy każde pole ma jasną etykietę, czy wymagany format jest objaśniony, czy komunikat błędu wskazuje poprawkę i czy przycisk nazywa działanie. Na koniec przetestuj całą drogę od CTA do potwierdzenia wysłania na telefonie i komputerze.