9 tricków jak stworzyć skuteczny formularz kontaktowy

Formularze kontaktowe to jedno z podstawowych narzędzi na każdej stronie www – bez względu czy jest to landing page, e-commerce, blog czy regularna witryna. Jak go przygotować, aby zwiększyć szanse na konwersje?

28 czerwca 2017

Jak działamy?

Wdrażamy narzędzia i poprawiamy UX

Kontakt

Porozmawiajmy o Twoich potrzebach

Formularz kontaktowy a UX

Wielu programistom czy designerom wydaje się, że przygotowanie formularza kontaktowego to dziecinnie prosta sprawa, a jego formatowanie i styl nie ma znaczenia. Często zapominają jednak, że użytkownicy mają swoje wymagania i przyzwyczajenia, które, jeśli się ich nie spełni, wpłyną negatywnie na konwersje związane z wysyłką wiadomości.

W rzeczywistości jakikolwiek formularz powinien być dobrze przemyślany i zaprojektowany. Konieczne jest zadanie sobie takich pytań, jak chociażby: Czy nagłówki powinny znajdować się nad polami tekstowymi czy pod nimi? Ile pól powinno znaleźć się w formularzu? W jaki sposób umieszczać podpowiedzi dotyczące pól? I tak dalej…

Tego rodzaju zagadnienia można mnożyć jeszcze długo. Kto jednak zna na nie odpowiedzi? Z pomocą przychodzi nam tutaj dziedzina taka jak UX (user experience), wraz ze swoją bogatą i empiryczną wiedzą. W sieci łatwo jest znaleźć materiały dotyczące projektowania stron i aplikacji z uwzględnieniem wytycznych UX. I część zmian można wprowadzić lub testować we własnym zakresie. W razie wątpliwości warto jednak zwrócić się do specjalistów, którzy przeprowadzą stosowne analizy i badania.

Wśród wielu narzędzi wykorzystywanych przez nich warto wspomnieć chociażby o Google Analytics, tzw. ocenie eksperckiej, testach A/B, badaniach opartych o scenariusze czy aplikacji Hotjar, pozwalającej gromadzić informacje o aktywności użytkownika na stronie. Możliwości, tak jak i elementów, które można optymalizować, jest całkiem sporo.

Dlaczego jednak warto je testować i badać? Po pierwsze, nie ma rozwiązań uniwersalnych. Coś co sprawdza się z powodzeniem dla jednej strony, niekoniecznie będzie odpowiednie w przypadku innej. Użytkownicy nie są osobami „zero-jedynkowymi” i są zmienni. Po drugie, ciągła optymalizacja poszczególnych elementów strony jest podstawowym sposobem na poprawianie użyteczności i przyjazności serwisu, a w konsekwencji podnoszenie współczynników konwersji na stronie.

Dzisiaj skupimy się na formularzu kontaktowym na stronie i przedstawimy parę tricków, które sprawią, że użytkownicy chętniej go wyślą.

Jak zaprojektować dobry formularz kontaktowy?

Istnieje kilka prostych zasad, o których warto pamiętać projektując lub modyfikując funkcjonujący już formularz. Być może jesteście zadowoleni z ilości realizowanych celów na stronie i osiąganego współczynnika konwersji. Zawsze jednak może być lepiej! Warto gromadzić odpowiednie dane i informacje o użytkownikach oraz rozważyć wprowadzenie odpowiednich zmian.

A jeśli nie jesteście pewni czy podążacie w dobrym kierunku? Zawsze możecie skorzystać z testów A/B, które pozwolą Wam zweryfikować efektywność różnych rozwiązań i dostarczyć cennej wiedzy o odbiorcach. A jeśli efekt testów nie będzie zadowalający, zawsze można zostać przy dotychczasowym wariancie.

1. Wskazówki od badaczy

3 lata temu badacze ze Szwajcarii przy wsparciu Google, przeprowadzili badania w sieci. Ich efektem było stworzenie listy 20 wskazówek, jak prawidłowo przygotować internetowy formularz. Wśród nich znalazły się takie porady jak np.:

Należy pytać tylko o to co jest konieczne, a sam formularz powinien być tak krótki i prosty, jak to tylko możliwe
Nagłówki powinny znajdować się nad polami tekstowymi
Formularz powinien być sformatowany w jednej kolumnie
Należy zadawać tylko jedno pytanie jednocześnie – złożone pytania są karygodnym błędem
Jeśli wpisywanie daty jest konieczne używaj jednego pola tekstowego z oznaczeniem formatu daty jako podpowiedzi wewnątrz pola (np. dzień.miesiąc.rok) lub w ostateczności rozwijanego menu (dzień/miesiąc/rok)
Informacje o błędach w wypełnieniu formularzu powinny być zakomunikowane w uprzejmym lub przepraszającym tonie
Jeśli komunikat o błędnym wypełnieniu formularza pojawia się w momencie jego wysyłania, nie może wiązać się to z wyczyszczeniem poprawnie uzupełnionych pól
System powinien automatycznie blokować przycisk „Wyślij” po pierwszym kliknięciu, aby uniknąć wielokrotnego wysłania formularza
Zrezygnuj z przycisku „Wyczyść formularz”, który może zostać kliknięty przez przypadek.

Pełny raport możecie znaleźć tutaj.

2. Ograniczaj ilość pól

Użytkownicy nie przepadają za długimi formularzami – nie mają czasu ani ochoty na ich wypełnianie. Potrzebują szybkiej i wygodnej formy kontaktu z firmą. Poza tym, często korzystają z urządzeń mobilnych, a tam wypełnienie złożonego arkusza, jest naprawdę męczące.

Quicksprout i Hubspot na konkretnych danych pokazują, jak duże znaczenie dla konwersji ma wielkość formularza. Quicksprout udowadnia, że zredukowanie ilości pól z 11 do 4 powoduje wzrost współczynnika konwersji nawet o 120%. Przy czym najbardziej optymalne są 3 pola (średnie CR = 25%).

Źródło: quicksprout.com

Niemal identyczne wnioski przedstawia Hubspot, rozszerzając swój raport o bardziej szczegółową analizę. Wynika z niej, że najwyższe wskaźniki konwersji mają miejsce gdy:

są 3 pola formularza (CR=25%)
są 2-3 pola tekstowe (CR=20%)
jest 1 (duży) obszar tekstowy (CR=20%) – przy czym każdy kolejny obszar powoduje drastyczny spadek współczynnika konwersji
jest 1 pole wyboru / menu rozwijane (CR=16%)

3. Usuń CAPTCHA

Część z Was, może pokiwać z niedowierzaniem głową. Przecież CAPTCHA to jedno z najpopularniejszych, anty-spamowych rozwiązań. Nie znaczy to jednak, że jest idealne. Przeprowadzone badania pokazują, że współczynnik konwersji, przy aktywnej CAPTCHA może spaść nawet o 3,2%. Czy to dużo? Mało?

Załóżmy na potrzeby przykładu, że wysłany formularz kontaktowy wiąże się dla marki ze sprzedażą. Załóżmy też, że miesięcznie wysyłanych jest 1000 wiadomości, CR wynosi 20%, a każdy formularz wart jest 100 zł. W takim układzie oznacza to, że mamy średnio 20 000 zł przychodu. Jeśli wskaźnik spadnie o 3,2%, miesięcznie tracimy już ponad 3 000 złotych.

Dlaczego jednak CAPTCHA zniechęca? W większości przypadków frustrację wywołuje fakt, że tekst z obrazów jest niemal niemożliwy do odcyfrowania. Rzeczywiście badania (wnioski można znaleźć tutaj) pokazują że zabezpieczenie redukuje SPAM o blisko 88%, niestety zwiększa ilość nieudanych konwersji.

Co więc można zrobić aby przysłowiowy wilk był syty i owca cała? W sieci można znaleźć różne propozycje rozwiązań, chociażby takie jak:

4. Oryginalność przycisku „Wyślij”

Dość zaskakujący wniosek przedstawił parę lat temu Hubspot. Otóż przeprowadzone testy pokazały, że opisywanie przycisku do wysyłania formularza w najbardziej oczywisty sposób, czyli „Wyślij” ma negatywny wpływ na współczynniki konwersji (spadki nawet do 3%)!

Z czego to może wynikać? Prawdopodobnie z generyczności. Jako użytkownicy wszędzie widzimy te same CTA, które nie działają pobudzająco ani angażująco. Z drugiej strony, niektórzy zapewne powiedzą, że skoro konsument ma wysłać formularz, to i tak go wyśle, bez względu na to co będzie napisane. Oczywiście, że tak. A ile z tego powodu go nie wyśle?

Ciężko jednoznacznie wyrokować czy zmiana CTA w formularzu będzie miała wpływ na współczynnik konwersji w przypadku Waszych stron. Ale od czego są testy A/B? Naszych klientów zawsze zachęcamy do testowania i eksperymentowania z różnymi rozwiązaniami.

Clicks by Button

5. Nie proś o numer telefonu

Użytkownicy zazwyczaj nie mają problemu, żeby udostępnić swój adres e-mail, dane osobowe, a nawet fizyczny adres korespondencyjny. Jednak numer telefonu jest w ich odczuciu rzeczą zastrzeżoną. Zazwyczaj wynika to z faktu, że gwarantuje on możliwość bezpośredniego kontaktu z przekazem reklamowym. Nikt z nas chyba nie lubi denerwujących SMS albo jeszcze bardziej irytujących telefonów z call center? No właśnie, nie róbmy drugiemu tego, czego sami nie chcemy.

ClickTale przeprowadziło kiedyś we własnym zakresie eksperyment dotyczący tego jakich danych można domagać się od użytkowników. Test pokazał, że blisko 39% użytkowników rezygnowało z procesu rejestracji na etapie uzupełniania danych osobowych. Dalsza analiza pokazała, że przyczyną był jeden element. Właśnie numer telefonu. Mimo tego, że nie był oznaczany jako pole wymagane, użytkownicy podświadomie zakładali, że w rzeczywistości jest potrzebny i porzucali proces.

W efekcie tego eksperymentu ClickTale przeprowadził jedną drobną zmianę. W formularzu zaznaczono wyraźnie, że numer telefonu jest opcjonalny (czyli zmieniono opis pola). To spowodowało niemal 2-krotny wzrost współczynnika konwersji. Warto wyciągnąć wnioski z tego przykładu. Jeśli koniecznie chcecie mieć szansę na pozyskanie telefonu klienta, oznaczcie to pole jako opcjonalne. Jeśli będzie obowiązkowe, ryzykujecie drastyczny spadek konwersji z formularzy. A generalnie warto się zastanowić, czy rzeczywiście kontakt telefoniczny jest dla Was aboslutnie niezbędny.

6. Układ formularza musi być pionowy

Pionowy układ formularza gwarantuje najszybszy sposób do jego wypełnienia przez użytkownika. W przeciwieństwie do układu horyzontalnego wymaga mniejszego wysiłku i jest zdecydowanie bardziej intuicyjny.

Układ formularza

Żródło: uxmovement.com

Jak widać na powyższej grafice pionowy układ obejmuje 5 etapów, na których zatrzymuje się i skupia wzrok oraz jeden kierunek czytania. Poziomy układ wymaga o wiele więcej „pracy”, aby dotrzeć do końca. W niektórych przypadkach może powodować porzucanie procesu przez użytkownika.

Realnie jedyną zaletą drugiego układu jest bardziej skompresowana forma i oszczędność powierzchni.

7. Unikaj oznaczania wymaganych pól

Zasada kryjąca się za tym wnioskiem opiera się na dość prostym mechanizmie z jakim działa ludzka percepcja. Zazwyczaj w formularzach więcej pól jest obowiązkowych niż opcjonalnych. Jeśli zaznaczymy każde z nich, tylko podkreślimy jak wiele danych osobowych muszą nam udostępnić użytkownicy. A trzeba założyć, że robią to zazwyczaj dość niechętnie.

Sposób na obejście tego problemu jest równie prosty. Oznaczajmy wyłącznie pola opcjonalne i unikajmy jednocześnie agresywnych kolorów. Np. tak jak poniżej.

Bad Good

Źródło: uxmovement.com

8. Ostrożnie z rozwijanymi menu

W założeniu rozwijane menu ma ułatwiać użytkownikowi wypełnianie formularzy. W rzeczywistości jednak, liczne przykłady pokazują, że jest wręcz przeciwnie. Istnieje kilka przyczyn i parę podstawowych błędów, które są przyczyną takiego stanu rzeczy:

paradoksalnie użytkownik spędza więcej czasu na rozwijanym menu niż na polu tekstowym
rozwijane menu zaburza styl wypełniania formularza (użytkownik używa klawiatury, a kiedy pojawia się menu, musi przesunąć jedną rękę na myszkę)
minimalne odstępy między poszczególnymi opcjami w menu utrudniają czytanie, a także wybór odpowiedniej pozycji (szczególnie na urządzeniach mobilnych)
zbyt duża ilość opcji do wyboru utrudnia się z ich zapoznaniem i wybraniem (szczególnie na urządzeniach mobilnych)

Czy są zatem inne rozwiązania, które pozwalają obejść „udogodnienia” rozwijanego menu? Zdecydowanie lepszym sposobem jest np. checklista albo pole tekstowe z mechanizmem autouzupełniania / autopodpowiedzi.

9. Podpowiedzi po najechaniu kursorem

Oczywistym jest, że chcemy pomóc naszym klientom wypełnić formularz. Zależy nam na tym, dlatego chcemy dołożyć wszelkich starań, aby zrobili to dobrze i bez problemów. Dlatego przy trudniejszych pytaniach powinniśmy zamieścić podpowiedzi lub przykłady prawidłowego wypełnienia pola.

I tu pojawia się rzecz, na którą trzeba szczególnie zwrócić uwagę. Podpowiedzi powinny wyświetlać się po najechaniu kursorem myszy (np. na znak zapytania lub pole formularza). Użytkownik nie może być zmuszony do klikania czegokolwiek. Dlaczego? W jego świadomości pojawia się obawa, że kliknięcie czegokolwiek, spowoduje przeładowanie strony i wyczyszczenie formularza. Z drugiej strony, jeśli nie dostarczymy mu podpowiedzi, gotów jest porzucić proces wysyłki, w obawie przed złym uzupełnieniem danych.

Problemem pojawia się niestety w przypadku urządzeń mobilnych, które nie mają możliwości „najechania” kursorem. Wykorzystać można natomiast inną mechanikę taką jak – przytrzymanie. Oczywiście musimy poinformować odbiorcę o tym, ze przytrzymanie palca w odpowiednim miejscu wyświetli dodatkowe informacje. Pamiętajmy, że póki co użytkowanie urządzeń mobilnych nie jest jeszcze dla wszystkich tak intuicyjne jak w przypadku komputerów.

webinar form

Źródło: neilpatel.com

W określonych przypadkach można wykorzystać także graficzne nakładki na formularz – jak np. robi to Neil Patel na swoim blogu.

AUTOR

Mateusz Bober

Senior UX/UI Designer, Team Leader

tel.723 988 859

Napisz do mnie

UDOSTĘPNIJ

Średnia ocen użytkowników 1.7 na podstawie 6 ocen

Tagi:

user experience