Przeczytaj artykuł i dowiedz się jak stworzyć formularz zgodny z zasadami UX. Dzięki temu wzrośnie konwersja na Twojej stronie wśród nowych użytkowników.
Buszując po Internecie, niemal codziennie spotykamy się z koniecznością wypełniania formularzy. Zgadujemy (na bazie własnych doświadczeń), że tych które zawierają błędy, niepoprawne opisy i brak instrukcji, jest więcej niż mniej. A szkoda, bo złe formularze są przyczyną stresów użytkowników, powodują frustrację, nierzadko atak szału, a bardzo często zaprzestanie wypełniania i wyjście ze strony. Bez powrotu. Na amen.
Jeśli nie chcesz wybrać drogi bez powrotu (użytkowników), stwórz formularz zgodny z zasadami UX. Dzięki temu wzrośnie konwersja na stronie wśród nowych użytkowników, a dodatkowo nowi użytkownicy staną się powracającymi.
Zasada 1. Twórz jasne i adekwatne etykiety
Etykieta, czyli opis tego co mamy wpisać w pole, powinna być jednoznaczna i czytelna. Najlepszym rozwiązaniem jest umieszczenie etykiety nad polem do wypełnienia (w formie nagłówka). Jest to szczególnie użyteczne dla użytkowników korzystających z Internetu na telefonach, gdyż miejsce jest tam mocno ograniczone. Dobrą praktyką jest też umieszczenie etykiety po lewej stronie od pola z danymi, ale na tyle blisko, aby nie było wątpliwości, czego on dotyczy.
Zasada 2. Skracaj lub dziel
Formularze zawierające nieskończoną ilość pół koniecznych do wypełnienia, mogą skutecznie zniechęcić użytkownika. Zatem gdy tylko jest to możliwe, przy tworzeniu formularza należy usuwać pozycje zbędne, a część z nich przenosić do edycji konta. Wówczas użytkownik będzie mógł je uzupełnić w późniejszym terminie.
Jeśli formularz wymaga sporej ilości pól, warto je pogrupować. Grupy podobnych danych nie przerażają tak bardzo, jak długi, jednolity formularz, gdyż użytkownik ma wrażenie zmniejszenia ich ilości.
Zasada 3. Zadbaj o poprawną walidację błędów
Sprawne i wyraźne informowanie o błędach jest kluczowym elementem poprawnego działania formularzy na stronach internetowych. Jeśli chcesz, aby użytkownicy z łatwością poprawiali popełniane przez nich błędy, jasno im to zakomunikuj:
- pole, które jest źle wypełnione powinno zostać podświetlone lub obramowane wyraźnym kolorem, najlepiej czerwonym
- opis błędu powinien znaleźć się przy polu, którego dotyczy
- możesz komunikować błąd także graficznie, np. używając wykrzyknika
- ważne, aby przy komunikacie informującym o błędzie, umieścić notatkę, na temat prawidłowego sposobu wypełnienia, wraz z przykładem
- komunikować należy w czasie rzeczywistym – po wpisaniu loginu od razu powinna wyświetlać się informacja, iż jest już zajęty/ przy wpisywaniu hasła, że zawiera zbyt mało znaków itp. Użytkownicy, którzy poświęcą dłuższą chwilę na wypełnienie formularza i dowiedzą się, że coś wypełnili źle w momencie wysłania formularza, mogą zaniechać ponownego działania.
Zasada 4. Uwidocznij Call To Action (CTA)
Button, który ma finalizować wypełnienie formularza, musi być jasny, widoczny, oraz klarownie komunikować, do czego służy, aby nie pomylić go z butonem zupełnie odwrotnym (Akceptuj/Odrzuć). Warto także pokazać użytkownikowi, który przycisk to akcja pierwszego rzędu, a który jest mniej znaczący, tak, aby nie było wątpliwości, co należy nacisnąć. Treści CTA powinny także nawiązywać do etykiet nagłówków, aby tworzyły spójną całość (Nie masz konta? Zarejestruj się: … [zarejestruj]).
Zasada 5. Sformatuj pole do wypełnienia
Uzupełnianie danych można ułatwić użytkownikom przez odpowiednie sformatowane pola wpisywania, tak, aby sugerowało jaki typ danych wpisać oraz np. ile jest dozwolonych znaków. Dla przykładu, pole na wpisanie kodu pocztowego powinno umożliwić wpisanie tylko 2 znaków, po czym (po myślniku) 3 kolejnych. Przeskoczenie kursora powinno odbywać się automatycznie. Boxy do wpisania dłuższej informacji np. wiadomości do sprzedawcy, powinny być także dostosowane odpowiednio dużą wielkością.
Zasada 6. Uwzględnij pola wymagane
Kolejną dobrą praktyką tworzenia formularzy jest jasne oznaczenie, które pola są wymagane. Dzięki temu użytkownik wie, co musi wypełniać, a co może (jeśli ma na to czas i ochotę). Ukrycie pól wymaganych i podanie ich dopiero przy próbie wysłania formularza, spowoduje konieczność wypełniania całego formularza lub jego fragmentów, a to może skutecznie zniechęcić użytkownika.
Zasada 7. Powiedz nie Captcha
Weryfikacja antyspamowa w formie przepisywania liter z obrazków, czy układania puzzli przy wypełnianiu formularzy jest tylko i wyłącznie utrudnieniem dla użytkowników. Odsiewaniem robotów powinien zajmować się sam serwis, a nie zrzucać to na użytkowników i utrudniać im kroki formularza. Skomplikowana weryfikacja captcha powoduje złość użytkowników i zwiększa ilość odrzuceń formularza. Nie mówiąc już o niewidomych i niedowidzących dla których taka forma sprawdzenia czy nie są robotami, jest często barierą nie do przejścia.
Zasada 8. Zarezerwuj kolor czerwony
Dobrą praktyką jest zarezerwowanie koloru czerwonego tylko i wyłącznie do komunikacji błędów. Warto zrezygnować z używania koloru czerwonego do etykiet, czy nagłówków (gdy nie dotyczą błędu), aby nie mylić osoby wypełniającej dany formularz.
Zasada 9. Poinstruuj
Jeżeli wypełnienie formularza wiąże się ze skomplikowanym lub wieloetapowym procesem, warto udostępnić użytkownikowi swego rodzaju tutorial w zakładce pomocy. Naoczne wskazówki z przykładami, jak krok po kroku przejść przez formularz, pozwolą użytkownikowi uniknąć błędów, a tym samym podniosą wskaźnik konwersji.
Zasada 10. Zaprzyjaźnij się z Social Media
Aby ułatwić, a także dać wybór użytkownikom, należy umożliwić im logowanie poprzez różne kanały. Większość użytkowników, szczególnie tych , woli jednym kliknięciem zalogować się przez serwisy społecznościowe, takie jak: Facebook, czy Twitter, niż wpisywać po raz kolejny listę danych osobowych.
Zasada 11. Rób to bezpiecznie
Użytkownicy często mają opór przed podawaniem swoich prywatnych danych i jeśli tylko mogą, to ich nie podają. Kiedy konieczne jest podanie przez użytkownika wrażliwej informacji (np. numeru telefonu), należy uargumentować to w odpowiedni sposób, wyjaśniając do czego dana informacja będzie potrzebna, a także zapewnić o usera o bezpieczeństwie (np. „podany numer telefonu pomoże kurierowi skontaktować się z tobą. Nie będzie on użyty do żadnych innych celów.”)
Ponadto warto zapewnić konsumenta, że dane nie wypłyną z bazy danych oraz, że rzeczywiście będą chronione i bezpieczne. Sytuacja w której dane zostałyby wykradzione i użyte w jakikolwiek sposób jest niedopuszczalna i należy jej zapobiegać w każdy możliwy sposób.
Zasada 12. Informuj o korzyściach
Aby zachęcić odwiedzającego stronę do założenia konta, a przy tym do wypełnienia długiego formularza, należy poinformować go o realnych korzyściach, wynikających z podania przez niego swoich danych. Rabaty i zniżki (nawet jeśli użytkownik ich nie wykorzysta) mogą okazać się dobrą zachętą i przyśpieszyć proces decyzyjny dotyczący zapisu do newslettera lub rejestracji.
Zasada 13. Pozwól używać tabulatora
Aby skrócić czas potrzebny do uzupełnienia formularza, oraz zwiększyć płynność, należy umożliwić użytkownikowi przechodzenie do kolejnych pól za pomocą naciśnięcia tabulatora. Obecnie jest to powszechnie stosowana praktyka, do której zdążyli się już przyzwyczaić użytkownicy. W przypadku nie działania opcji tabulatora, użytkownik jest zmuszony używać kursora myszy, przez co wydłuża się proces wypełniania formularza i wzrasta frustracja.
Zasada 14. Uzupełniaj automatycznie
Tak jak tabulator, również automatycznie uzupełnianie, czy podpowiedzi przy wypełnianiu formularza znacznie usprawniają jego uzupełnianie. Zapamiętywanie e-maili, czy możliwość zapisania hasła, zmniejsza czas, a przy tym zwiększa zadowolenie użytkownika.
Zasada 15. Przypominaj hasło
Absolutną koniecznością przy formularzu logowania jest możliwość przypomnienia hasła użytkownikowi poprzez wiadomość e-mail. Ludzie mają swoje konta na wielu różnych serwisach i stronach internetowych, a zapamiętanie wszystkich haseł jest praktycznie niemożliwe. W sytuacji zapomnienia hasła, należy umożliwić jego przypomnienie.
Zasada 16. Na żądanie pokazuj hasło
Użytkownik nie zawsze ma pewność, czy dobrze wpisał hasło. W takich sytuacjach opcja pokazania hasła wydaje się niezbędna. Wizualna weryfikacja hasła użytkownika hasła pozwoli mu bez komplikacji przejść przez formularz.
Zasada 17. Używaj przystępnego języka
Użytkownik wypełniając formularz nie może mieć wątpliwości, co dokładnie ma wpisać w kolejne pola. Język stosowany do opisu pól, powinien być dopasowany do użytkownika. Profesjonalny i specjalistyczny, jeśli tego wymaga odbiorca, oraz prosty i zrozumiały, jeśli nie jest to konieczne.
Zasada 18. Przeprowadź testy z użytkownikami
Jeśli spełniłeś wszystkie powyższe zalecenia, lecz mimo to nadal spora część użytkowników porzuca formularz w trakcie jego wypełniania- możesz przeprowadzić badania na użytkownikach. Dzięki temu sprawdzisz jak odwiedzający poruszają się po stronie, co sprawia im trudności oraz czy formularz jest dla nich przyjazny, łatwy do wypełnienia i zrozumiały.
Na zakończenie
Tworząc formularze pamiętaj, że najważniejszy jest użytkownik. Formularze należycie skonstruowane oraz user-centered (UCD), będą wysoko konwertować, gromadzić większą ilość danych, a współczynnik ich odrzuceń będzie wyraźnie mniejszy.
Powodzenia!
