2
Lip
formularze w sklepie internetowym

O czym pamiętać projektując formularz w sklepie internetowym

Ruch na stronie rośnie, a konwersja wciąż na tym samym poziomie lub spada? Powodów może być wiele, a jednym z nich formularz z błędami. Przeczytaj jak zaprojektować formularz w sklepie internetowym i nie tylko w nim – w końcu formularzy mamy wiele rodzajów!

Jak zaprojektować formularz w sklepie internetowym?

Prawdę mówiąc poniższe wskazówki dotyczą nie tylko formularzy w sklepie internetowym, a formularzy ogólnie, np. także tych, które wypełniamy podczas zakładania konta w banku czy w portalu społecznościowym. Każdy formularz powinien ułatwiać wykonanie pożądanej akcji, a nie ją utrudniać.

No, ale właśnie, jak zaprojektować formularz, który będzie uzupełniany, a nie porzucany?

Zapewne część wskazówek już znasz, część może Cię zaskoczy lub uświadomi, skąd taki odsetek porzuceń koszyków w Twoim sklepie internetowym. Jeśli z kolei uważasz, że coś jeszcze powinno się znaleźć na tej liście to podziel się tym proszę w komentarzu pod wpisem.

1. Ogranicz liczbę pól formularza i proś tylko o naprawdę niezbędne informacje

Zbyt długie formularze odstraszają. Z jednej strony nie chce nam się wypełniać dużej ilości pól (poniekąd jesteśmy leniwi, a ponadto szanujemy swój czas), z drugiej strony w głowie pojawia się pytanie: ale po co im znać moją płeć, liczbę dzieci czy datę urodzenia. Nawet jeśli nie mamy problemu z podaniem tych informacji to przebrnięcie przez długi formularz może już nas przerastać. Zwłaszcza jeśli formularz wypełniamy na urządzeniu mobilnym.

Oczywiście są rzeczy, o które musisz zapytać np. o adres w przypadku wysyłki kupionego przez klienta towaru. Jednak numer telefonu już nie jest tak oczywistym “must have”. Dlatego przy niektórych polach, takich właśnie jak nr telefonu, warto napisać do czego potrzebujemy tej informacji. Zapewnij klienta, że nie wykorzystasz jego numeru telefonu w celach wysyłania informacji marketingowych, a jedynie w przypadku konieczności kontaktu w sprawie zamówienia lub przekazania numeru kurierowi, aby mógł się z owym klientem skontaktować przed dostarczeniem paczki.

Formularz rejestracji - minimalna ilość pól do wypełnienia

Prosty formularz rejestracyjny w bdsklep.pl – informacje, które potem będą potrzebne, jak. np. adres wysyłki, są wymagane dopiero podczas składania zamówienia -kiedy faktycznie są niezbędne.

 

2. Zadbaj o responsywność formularz

Formularze powinny wyświetlać się dobrze na urządzeniach mobilnych, zwłaszcza, że obserwujemy ciągły wzrost zakupów mobilnych – wg. Raportu E-commerce w Polsce 2019 wzrost w porównaniu do poprzedniego roku wynosi 3 p.p. Niestety wciąż nie jest to regułą, a stron, a wypełnienie nieresponsywnych formularzy bywa “niezłą zabawą” – co kto lubi, nie oceniam 😉

Z małymi polami na wpisanie tekstu lub wręcz odwrotnie – polami widocznymi tylko w połowie ich długości, możemy sobie jakoś poradzić. Gorzej jednak, gdy nie mamy jak się dostać do przycisku CTA (np. w procesie zakupowym jest to “dalej” lub “potwierdzam i płacę”) lub pola do wypełnienia są widoczne tylko w ich środkowej części, a treść mówiąca o tym co należy w danym polu wpisać jest ucięta i nie ma się jak do niej dostać. Ratunkiem może być obrócenie ekranu do pozycji poziomej – zwykle to pomaga, choć pewnie nie zawsze.

nieresponsywny formularz

Zdj. Nieresponsywny formularz, ucięty na urządzeniu mobilnym.

 

Formularz na urządzeniu mobilnym z niewidocznym CTA

Formularz na urządzeniu mobilnym z niewidocznym CTA

 

3. Oznacz pola wymagane

Badania przeprowadzone przez Google dostarczają informacji, że ludzie oczekują informowania ich o tym, które pola są wymagane, a które nie.
W większości przypadków pola obowiązkowe oznaczone są gwiazdką i dobrze gdybyś się tego trzymał. Ludzie rozumieją znaczenie tego symbolu i nie utrudniaj sobie i im życia 😉

Przykładem takiego wyłamania się jest sklep Twojesoczewki.com, który na moje oko (bez soczewki) miał dobre intencje rezygnując z * na rzecz słowa “wymagane”, ale jest ono słabo widoczne i “inne” niż zwykle.

formularz w sklepie internetowym

Z drugiej strony uxmovement.com zaprezentowało teorię, aby nie oznaczać pól wymaganych tylko opcjonalne. Argumentują to założeniem, że użytkownicy widząc oznaczenie wymaganych pól pójdą po najmniejszej linii oporu i tylko te pola wypełnią. Jestem w stanie zgodzić się z tym założeniem, jednak z drugiej strony niesamowicie irytuje mnie, gdy wyskakują mi komunikaty błędów informujące, że nie wypełniłam jakiegoś pola, a ono nie było oznaczone jako wymagane. Tutaj już pozostawiam Tobie do decyzji co oznaczać, ja jednak uważam, że oznaczanie wymaganych pól jest powszechniejsze i znane użytkownikom.

pola wymagane w formularzu

Oznaczanie pól obowiązkowych i opcjonalnych

 

4.  Pokaż podpowiedzi jak wypełnić pola

Pomóż użytkownikom wypełnić formularz, zwłaszcza jeśli chodzi o proces zakupowy (chyba nie muszę tłumaczyć dlaczego? ;))  W okienku pola lub obok zamieść podpowiedź lub przykład jak wypełnić pole lub co w nim wpisać. Dotyczy to w szczególności pól na datę, kod pocztowy, numer telefonu czy NIP. Jeśli formularz wymaga konkretnego zapisu tych danych to nie każ użytkownikowi zgadywać jak to pole wypełnić.

Warto też poinformować użytkownika o wymaganej długości hasła czy innych wytycznych, jak np. zabronione znaki czy wymaganie wielkich liter.

5. Wyświetlaj zrozumiałe komunikaty błędów i włącz walidację w czasie rzeczywistym

Warto zadbać o walidację poprawności wypełnianych pól w czasie rzeczywistym, czyli wtedy gdy użytkownik je wpisuje. Może on na bieżąco korygować błędy. Dodatkowo przemyśl brzmienie komunikatów błędu i ich wyświetlania, czyli:

  • sformułuj je tak, aby były zrozumiałe
  • wyświetlaj je obok wypełnianych pól
  • spraw, aby były widoczne – np. w kontrastującym kolorze
  • wytłumacz co i jak poprawić.

Co ważne w przypadku błędnie wypełnionych pól w formularzu i wyświetlaniu komunikatów błędu (gdy nie ma walidacji w czasie rzeczywistym) nie dopuść do wyczyszczenia tych poprawnie wypełnionych.

asos komunikaty błędów na bieżąco walidacja

Walidacja poprawnego wypełnienia formularza w Asos.com

 

formularz w sklepie internetowym

Walidacja poprawnego wypełnienia formularza w CoffeeDesk.pl

 

6. Uzupełniaj formularze danymi z konta

Przykładowo w sklepie internetowym podczas realizacji transakcji nie proś użytkownika o wpisywanie adresu imienia i nazwiska, adresu e-mail czy innych danych jeśli są one zapisane na jego koncie. Niech formularz będzie już uzupełniony, a Ty jedynie pozwól na zmianę tych danych. Podobnie w przypadku gdy masz osobne formularze dot. osoby zamawiającej, adresu dostawy i danych do faktury – pozwól skopiować dane z innego formularza lub po prostu nie każ wypełniać tych formularzy, a zapytaj czy klient chce wprowadzić w nich zmiany.

formularz w sklepie internetowym

Trzeba od nowa wypełniać dane – adres może różnić się tylko jedną rzeczą – warto skopiować dane

 

7. Informuj o konieczności potwierdzenia rejestracji, zakupu lub innej akcji

Zapis do newslettera, wypełnienie formularza w celu pobrania ebooka, rejestracja na webinar w większości przypadków wymagają potwierdzenia, że potwierdzenia wykonania danej akcji. Odbywa się to na tej zasadzie, że na swoją skrzynkę e-mail otrzymuje wiadomość z linkiem aktywacyjnym, w który należy kliknąć, aby potwierdzić, że to ty podałeś ów adres e-mail. Nie wiem czy jasno to wytłumaczyłam, ale chyba wiesz o co chodzi prawda?

Nie wszyscy wiedzą, że jeszcze trzeba w coś klikać, coś potwierdzać, dlatego po kliknięciu przycisku CTA (zapisz, wyślij, kup teraz) pod formularzem pokaż komunikat: Kolego, a teraz sprawdź skrzynkę pocztową i potwierdź “zapis”. Komunikat ten wyświetl zwłaszcza jeśli wymagasz potwierdzenia złożenia zamówienia właśnie w ten sposób – jest to bardzo rzadka praktyka, tylko raz się z nią spotkałam, więc ludzie nie są do tego przyzwyczajeni i często nie czytają wiadomości z potwierdzeniem złożenia zamówienia – np. ja, rasowa zakupoholiczka internetowa, nie sprawdzam 🙂 Nie wiem co się stało, że ten jeden raz sprawdziłam… może jakiś mój anioł stróż mnie do tego skłonił. Ale nie przedłużając: informuj, że należy kliknąć w link w wiadomości i po temacie:)

formularz w sklepie internetowym

Zdj. Potwierdzenie rejestracji w sklepie muve.pl

 

8. Nie rozpraszaj i nie dopuść do wyczyszczenia formularza

O czyszczeniu formularza wspominałam już powyżej, w punkcie dotyczącym komunikatów błędów. To naprawdę bardzo irytujące, gdy już wypełniony formularz zostaje wyczyszczony. Stąd też nie rozumiem niektórych firm, które obok przycisku “Wyślij/Potwierdź” umieszczają przycisk “Wyczyść formularz”… przecież to proszenie się o porzucenie jego wypełniania. Niech się użytkownik pomyli, kliknie nie w to co trzeba i … wiesz co dalej pewnie się wydarzy.

Przycisk “Wyczyść” to jedno, drugie to umieszczanie innych przycisków obok. Np. “Powrót do zakupów/Wstecz”. Rozpraszają, mogą zmylić, wydłużą ścieżkę użytkownika. Zastanów się czy oby na pewno są takie istotne.

koszyk zakupowy formularz

9. Używaj jasnych nazw pól formularza – tzw. etykiet

Nazwy pól zwane też etykietami informują o tym co należy wpisać w danym polu. Znajdują się one zazwyczaj nad polem lub po lewej stronie formularza.
Przy mały rozdzielczościach dobrze sprawdzają się etykiety nad polami, ponadto one też ułatwiają szybkie przeskanowanie formularza oraz poprawności wypełnianych pól.
Dowodów za umieszczaniem etykiet nad polami dostarczają badania Google.

Formularz w e-sklepie

Formularz w Answear.com – wersja mobilna

 

Formularz w e-sklepie

Formularz w Answear.com – wersja desktopowa

 

10. Wszystkie pola formularza powinny być umieszczone w jednej kolumnie

Zgodnie z badaniami przeprowadzonymi przez Baymard Institute formularze są jednym z powodów porzucania koszyka zakupowego przez e-konsumentów. Chcąc sprawdzić co jest przyczyną takiego stanu rzeczy odkryli, że:

  • układy wielokolumnowe są często błędnie interpretowane,
  • użytkownicy pomijają niektóre pola (przykład poniżej – sklep Walmart), przez co nie mogą przejść dalej i nie wiedzą dlaczego,
  • wprowadzają dane do niewłaściwych pól
  • nie wiedzą czy mają wprowadzać dane wg. jakiejś konkretnej kolejności (o zgrozo! jeśli ktoś robi formularz wielokolumnowy i jeszcze ustala kolejność wypełniania poszczególnych pól, to… powinien to szybko zmienić!),
  • formularze wielokolumnowe wypełnia się dłużej i łatwiej się zniechęcić.
formularz w esklepie układ wielokolumnowy Baymard Institute

Zdj. W sklepie Walmart.com użytkownik przeskoczył z pola na nazwisko w I kolumnie do pola na adres w II kolumnie, a następnie wypełnił całą II kolumnę, pomijając pole na nr tel.. Źródło: Baymard Institute

 

 

A na koniec case z dzisiaj: zakupy bez rejestracji, a jednak hasło trzeba podać

formularz w sklepie internetowym

 

Mam nadzieję, że ten wpis o formularzach w sklepie internetowych (i w sumie nie tylko w sklepie) pozwoli Ci uniknąć błędów w ich projektowaniu, wyeliminować utrudnienia w już istniejących formularzach i ich konwersja wzrośnie – konwersja w sensie wykonanych akcji jakie formularz ma umożliwić 🙂

A może Ty dodasz tu coś od siebie? Jakie błędy w formularzach widziałeś? Jak najlepiej zaprojektować formularz w sklepie internetowym wg. Twoich obserwacji?

 

 

Zapisz się do newslettera i bądź na bieżąco

3
Dodaj komentarz

avatar
1 Comment threads
2 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Piotr MichalakAgata Chmielewska Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Piotr Michalak
Gość

Świetny artykuł, zebrane najważniejsze elementy dotyczące formularzy wraz z przykładami.

Osobiście zdarzało mi się wypełniać formularze, które po popełnieniu błędu w jednym z początkowych pól, wyświetlały notyfikacje dla pustych, które dopiero miałem wypełniać, to trochę odrzuca 🙂

KONTAKT

 

Wysyłając do mnie wiadomość powierzasz mi swoje dane osobowe. Będę dbać o ich bezpieczeństwo i wykorzystam je jedynie do korespondencji z Tobą. Więcej możesz przeczytać w polityce prywatności.