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.

 

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.

 

 

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.

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.

 

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.

 

 

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.

 

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:)

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.

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.

 

 

Jeśli uważasz, że ten wpis jest przydatny dla Ciebie i chcesz dostawać informacje o innych ciekawych treściach na blogu i w Internecie to dołącz podaj swój adres e-mail, a ja obiecuję spełnić obietnicę. 

Aha! Na początek dostaniesz kilka fajnych prezentów 🙂

 

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ć.

 

 

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

 

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?