Dołącz do czytelników
Brak wyników

UX/UI

16 lipca 2021

NR 58 (Czerwiec 2021)

Projektowanie i wdrażanie formularzy online. Jak zwiększyć konwersję?

12

Pracując z klientami z różnych branż, często spotykam się z pytaniami: Co zrobić, żeby zwiększyć rejestrację? Jak sprawić, aby konwersja w sklepie/systemie była wyższa? W poniższym tekście postaram się omówić istotne kwestie związane właśnie z tymi zagadnieniami. Mam nadzieję, że pomoże Ci to w ocenie Twoich formularzy i przy tworzeniu następnych, tak aby nic nie umknęło Twojej uwadze.

Najczęściej z formularzem spotykamy się w sklepie internetowym. W tym przypadku chyba nikomu nie trzeba tłumaczyć, po co zbierane są dane. Odpowiedź jest krótka i prosta – celem jest sprzedaż. Użytkownik w tym wypadku doskonale rozumie, w jakim celu pozostawia swoje dane, i jeśli w formularzu lub na stronie docelowej nie ma nieprawidłowości, to zazwyczaj nie ma on obiekcji i obaw związanych z uzupełnieniem informacji. Jednak w innych przypadkach warto zadbać o wiarygodność i odpowiednią argumentację, tak aby użytkownik nie miał wątpliwości, w jakim celu wypełnia formularz. Call to action to nie tylko KUP, ZAMÓW czy PRZEJDŹ DO PŁATNOŚCI. 
Wypełniając formularz, można realizować różne cele, np.:

POLECAMY

  • zarezerwować miejsce na warsztaty czy szkolenie, 
  • zapisać i przesłać swoje dane w celu otrzymania dodatkowych informacji,
  • obliczyć kalkulację oferty, która zostanie przesłana na adres mailowy,
  • pobrać e-booka. 

To tylko przykładowe cele – najważniejsze jest to, aby komunikat faktycznie był zgodny z tym, co się stanie w kolejnym kroku. 
 

Jak donosi HubSpot, najlepsze efekty przynoszą spersonalizowane wezwania do działania, które konwertują o 202% lepiej niż standardowe komunikaty. Przykładem może być choćby nagłówek przed formularzem zamiast: ,,Zostaw swoje dane – Wypełnij formularz”, można zastosować: ,,Wypełnij formularz – będziemy mogli z Tobą porozmawiać i poznać lepiej Twoje potrzeby, a także odpowiedzieć na wszelkie pytania” (źródło: https://blog.hubspot.com/). Dane mówią same za siebie – jest o co walczyć!


Komunikacja to ważna sprawa – przekazuj klarowne informacje

Jasny komunikat to podstawa! Pamiętaj o tym, że przestrzeń, którą masz do wykorzystania na formularzu, jest niewielka, a użytkownik będzie zwracał uwagę głównie na komunikaty pisane większym fontem. 
 

Nagłówek jest kluczem! Przeczyta go 90% osób odwiedzających stronę docelową – dlatego jest on tak ważny (źródło: https://www.marketingsherpa.com/) 


Skup się na zwięzłych i treściwych hasłach. Dobrym rozwiązaniem jest napisanie tekstów przed rozpoczęciem projektu od strony graficznej, tak aby kluczową kwestią stał się przekaz i cel, w jakim użytkownik ma wypełnić formularz. 
Powiedz o tym, dlaczego warto zostawić swoje dane kontaktowe. W jakim celu są one zbierane? Co zyska dana osoba, zostawiając informacje? Co się stanie dalej? Te krótkie, ale ważne komunikaty mogą w znaczący sposób wpłynąć na decyzję o wypełnieniu formularza. 
 

Rys. 1. Przykład formularza z jasno określonymi komunikatami w nagłówkach.
Źródło: https://www.mazda.pl/oferta-specjalna/promocje/


Nie wymagaj zbyt wiele – im mniej pól, tym lepiej 

Im mniej jest pól do wypełnienia, tym lepiej. Mniej wymaganych informacji znacząco poprawia konwersję, dlatego warto ograniczyć ich ilość do minimum. 
 

Według PageWiz zminimalizowanie pól formularza może zwiększyć konwersję nawet o 120%! (źródło: https://www.pagewiz.com


Dodatkowo pamiętaj o tym, aby odpowiednio oznaczyć pola obowiązkowe – najczęstszym i najpopularniejszym rozwiązaniem jest dodanie gwiazdki (rys. 2).
Kiedy kupujemy buty, decyzja może zapaść w kilka minut, natomiast gdy decydujemy się na inwestycję, która będzie się wiązała z większymi nakładami finansowymi lub będzie niosła ze sobą wiele skutków także w przyszłości, wtedy potrzebujemy więcej czasu.
W branżach związanych np. z edukacją czy budownictwem często dodane są bardzo długie formularze, które wymagają od potencjalnie zainteresowanego podania bardzo dużej ilości danych. Polecam zadbać o to, aby na początku wspólnej drogi nie odstraszać potencjalnego klienta!
 

Przykład formularza, gdzie pola obowiązkowe zaznaczone
są gwiazdkami. Źródło: https://www.eobuwie.com.pl/ )


Ogranicz liczbę pól. Poproś tylko o te dane, które umożliwią Ci rozmowę lub przekazanie informacji potencjalnemu odbiorcy. Jeśli ktoś jeszcze nie podjął decyzji, ale dopiero rozpoczyna poszukiwania, pozwól się poznać. 
Na starcie prześlij mu informacje o Twoim produkcie czy usłudze. Zachęć do pobrania e-booka czy folderu informacyjnego. Udostępnij mu szereg danych, tak aby mógł zebrać wszystkie niezbędne wiadomości, które odpowiedzą na jego kluczowe pytania. 
A jeśli użytkownik wyrazi także zgody na przetwarzanie informacji w celach marketingowych, wtedy w kolejnych krokach możesz przypomnieć mu o swojej ofercie w działaniach remarketingowych, kierowanych na konkretny adres mailowy (np. mailing czy kampanie Google Ads kierowane na listę CSV). 
 

Rys. 3. Przykład formularza z ograniczoną ilością pól.
Źródło: https://www.ekopark.pl/nowa-lipska/


Grupuj dane i zadbaj o układ 

Pokaż użytkownikowi, przez jakie etapy musi przejść. Kiedy potrzebujesz zebrać wiele danych, tak jak np. w sklepach internetowych, pogrupuj to na odpowiednie kroki. Nie wydłużaj drogi, ale spraw, aby była ona wygodna dla Twojego odbiorcy. 
Wiele badań wskazuje na to, że układy wielokolumnowe wprowadzają użytkownika w błąd, powodując pomijanie niektórych pól lub ich błędne uzupełnianie. Nasza uwaga jest rozpraszana, a wzrok wędruje w wielu kierunkach. Warto więc postawić na układ jednokolumnowy. 
Jeśli podzielimy pola tematycznie, to dana kolumna może odpowiadać za dany temat. Przykładowo, pierwsza kolumna to dane osobowe oraz kontakt, druga – dane adresowe. Warto nad kolumną umieścić nagłówek, który poprawi czytelność. Jeśli mamy dłuższy formularz, warto podzielić go na kroki i wtedy każdy powinien odpowiadać danej tematyce. Błędem jest jednak, kiedy mamy kilka kolumn, a pola są wymieszane (ułożone nietematycznie) jak na rysunku 4.
 

Rys. 4. Przykład z układem wielokolumnowym i jednokolumnowym, opracowanie własne


Uprość sprawę – podpowiedz, jak odpowiednio uzupełnić pola 

Rzeczy oczywiste, często jednak takie nie są. To, że dla Ciebie coś jest łatwe, nie oznacza, że dla użytkownika również takie będzie. Pomóż mu. Wskaż, jak poprawnie wypełnić dane pole. Takie podpowiedzi będą szczególnie cenne np. przy wpisywaniu NIP-u, numeru telefonu itp. Jeśli wymagane jest uzupełnienie, np. województwo czy kraj, przygotuj listę, z której użytkownik może je wybrać, a po wpisaniu pierwszej litery otrzymuje sugestię z odpowiednią nazwą. Wprowadź także funkcję automatycznego uzupełnienia z innego formularza i daj możliwość edycji danych. 

Etykiety 

W trakcie uzupełniania danych zadbaj o to, aby w polu etykiety znalazła się informacja, jakie pole jest właśnie uzupełniane. Jeśli akurat kurier zadzwoni do drzwi, a użytkownik odejdzie od komputera odebrać paczkę, po powrocie nie będzie miał wątpliwości, jakie dane wpisywał. 

Zadbaj o walidację formularza i wskaż, jak naprawić błąd 

W przypadku błędnie wypełnionego pola wskaż, gdzie użytkownik popełnił błąd i podpowiedz mu, jak go naprawić. Zamieść komunikat z przykładem, gdzie pokażesz, jak należy prawidłowo wpisać dane informacje. 
 

Rys. 5. Przykład formularza ze wskazówką, jak należy uzupełnić kod pocztowy
(źródło: https://www.agatameble.pl/)

 

Rys. 6. Przykład formularza z gotową listą, do wyboru odpowiedniego kraju
(źródło: https://4f.com.pl/)

 

Rys. 7. Przykład formularza ze wskazaniem błędu
(źródło: https://deezee.pl/)

 

Rys. 8. Przykład z hierarchią przycisków, opracowanie własne


Zwróć uwagę na to, aby komunikat o błędzie był widoczny i zamieszczony obok pola, w którym wystąpiła pomyłka. Zaznacz ten tekst odpowiednim kolorem, np. czerwonym, który jest powszechnie używany do wskazywania nieprawidłowości. 

Hierarchia przycisków – zasygnalizuj, co jest kluczowe 

Na formularzu powinno się wyróżniać CTA i nie pozostawiać wątpliwości, co należy kliknąć, aby przejść dalej. Zadbaj o to, aby przycisk wyróżniał się kolorem, a także by był umieszczony w odpowiednim miejscu. Jeżeli w pobliżu znajdują się jeszcze inne przyciski, np. taki, który pozwala użytkownikowi powrócić do poprzedniej strony, wtedy zadbaj o hierarchię. W takiej sytuacji CTA powinien w wyraźny sposób odróżniać się od reszty.

Zadbaj o responsywność 

W 2021 r. chyba nikogo nie powinna zaskoczyć informacja o tym, że ruch z urządzeń mobilnych jest większy niż z desktopowych.
 

Według Rankingu Gemius w lutym 2021 r. w Polsce ruch z telefonów był znacznie wyższy niż z komputerów: 58,27% – telefony, a 33,76% – PC (źródło: https://ranking.gemius.com/pl/


Kluczową sprawą jest więc to, aby formularz, a także cała strona, dobrze wyświetlały się na urządzeniach mobilnych. Przed udostępnie...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy