W poprzednim artykule pisałem o sposobach analizy formularzy w celu poprawy ich skuteczności. Dzisiaj przedstawię Wam listę 15 zasad tworzenia dobrych formularzy z którą warto się zapoznać przed rozpoczęciem procesu optymalizacji konwersji.
Skupię się na 15 ogólnych zasadach dobrych formularzy – o tych elementach powinniśmy pamiętać zawsze projektując lub pracując nad poprawą konwersji danego formularza.
Najszybciej użytkownicy wypełniają formularze, jeśli ich nazwy pól znajdują się bezpośrednio ponad nimi. Zazwyczaj jednak takie formularze zajmują zbyt dużo miejsca, dlatego decydujemy się umieszczać nazwy pól po ich lewej stronie.
W takich przypadkach należy pamiętać o wyrównaniu do prawej strony nazw pól formularza. Ułatwia to użytkownikom skanowanie tekstu oraz usprawnia proces wypełniania formularza. Niezastosowanie się do tej zasady powoduje, że czytelność formularza może znacznie się pogorszyć:
Pamiętaj o używaniu jedynie czcionek, które są czytelne na ekranie komputera, czyli tych z rodziny sans-serif (np. Verdana).
Białe tło sygnalizuje automatycznie użytkownikowi, że dane pole jest przeznaczone do wypełnienia. Zastosowanie innego koloru może wprowadzić użytkownika w zakłopotanie, sugerując mu np. że danego pola nie da się edytować:
Nie ma nic gorszego niż zlewające się kolory użyte w formularzu. Źle dobrane kolory sukcesywnie utrudniają każdemu użytkownikowi wypełnienie formularza.
W dobraniu odpowiednich kolorów pomogą Ci 2 narzędzia: color wheel, który dobiera odpowiednie kolory oraz checkmycolours, który sprawdzi zastosowane w designie kolory.
Jeżeli Twój formularz poprzedzony jest szczegółową instrukcją wypełniania, najlepszym krokiem będzie, jeśli tą instrukcję usuniesz. Tak czy owak nikt jej nie przeczyta!
Unikaj stosowania skrótów w tworzonym formularzu nawet jeśli ich powszechne zastosowanie wydaje Ci się oczywiste. Ktoś może źle rozszyfrować Twoje intencje i wtedy będzie miał spory problem z domyśleniem się co tak naprawdę miałeś na myśli.
Pytanie o nieistotne z punktu widzenia użytkownika dane bardzo negatywnie wpływa na zaufanie użytkownika do wypełnianego formularza. Przykładem może być tutaj wymagane podanie daty urodzenia w formularzu kontaktowym.
Jeżeli naprawdę potrzebujesz takich informacji – powiedz użytkownikowi dlaczego.
Jeżeli Twój formularz pyta o nieszablonowe kwestie (jak np. numer PESEL), dobrze jest poinformować o tym użytkownika na początku, aby mógł przygotować sobie niezbędne dokumenty. Zapewnia to, że nie będzie musiał przerywać procesu wypełniania formularza, by znaleźć brakujące dane.
Dzięki jasnemu oznaczeniu wymaganych pól przyspieszamy użytkownikowi proces wypełniania formularza i dajemy mu możliwość skanowania. Ta rada jest oczywiście najbardziej użyteczna, gdy pól wymaganych jest stosunkowo mało.
Tematyczne grupowanie poszczególnych pól formularza pomaga nam odpowiednio go zorganizować, a użytkownikowi zrozumieć potrzebę wymaganych danych. Istotnym jest, by używać jak najmniejszej liczby ozdobników, które pomogą nam wizualnie stworzyć grupy.
Jednym z najważniejszych zadań każdej witryny internetowej jest zbudowanie zaufania. Jeśli chcesz, by użytkownik podał Ci swoje dane, przekonaj go, że może Ci zaufać. Umieść informacje o certyfikatach, bezpieczeństwie i dodaj link do polityki prywatności Twojego serwisu.
Bezstresowe i wyczerpujące informowanie klienta o popełnionych przez niego w trakcie wypełniania formularza błędach jest bardzo istotne. Jednym z najgorszych tego sposobów jest wyświetlanie pop-upów – używając tej metody możesz mieć pewność, że użytkownik nie będzie dokładnie wiedział o co Ci chodzi (formularz rejestracyjny w Electro pokaże Ci jak nie informować użytkownika o błędach).
Natomiast jeśli chcesz mieć pewność, że Twój użytkownik szybko i w pełni zrozumie popełniony błąd – zastosuj walidację inline (więcej na temat walidacji inline przeczytasz na blogu Lindy Bustos).
Nie wymagaj od użytkownika stosowania odpowiedniego formatu liczb. Przykładek może być numer identyfikacji podatkowej (NIP). Automatyczne przerabianie formatu liczby z 1231231212 na 123-123-12-12 jest znacznie lepszym rozwiązaniem niż informowanie użytkownika post factum o błędnie wypełnionej rubryce.
Wielokrotnie możemy zmniejszyć liczbę pól, które musi uzupełnić użytkownik. Przykładowo, gdy uzyskamy kod pocztowy, możemy automatycznie wygenerować nazwę miejscowości. Podobnie jest przy wprowadzaniu numeru karty kredytowej, który umożliwia nam identyfikację jej rodzaju.
Pamiętajmy przy tym o pozostawieniu użytkownikowi możliwości późniejszej zmiany automatycznie wygenerowanych wartości (w przypadku błędów).
Wypełnianie formularzy jest niemiłym dla użytkownika procesem samym w sobie. Dodatkowo możemy go utrudnić poprzez zastosowanie kilku przycisków call-to-action. Najlepszym rozwiązaniem jest pozostawienie jedynie pojedynczego przycisku – np. „wyślij”. Odradzam umieszczanie dodatkowych przycisków, takich jak „wróć do początku” lub „wyczyść”.
Jeśli już musimy zastosować dwa różne przyciski call-to-action, postarajmy się, by główny znacząco się wyróżniał.
Powyżej przedstawiona lista zawiera 15 najlepszych praktyk o których powinniśmy pamiętać tworząc formularze. Czy po przeczytaniu tego artykułu przychodzą Ci do głowy inne elementy o których trzeba pamiętać? Jeśli tak, podziel się z nami w komentarzach.
Pamiętajmy jednak, że każdy formularz można poprawiać i stosując nawet wszystkie istniejące na świecie spisy najlepszych praktyk, nie uda nam się stworzyć idealnego formularza, który perfekcyjnie trafiał by w język i potrzeby naszych użytkowników.
Każdy formularz trzeba usprawniać. O elementach formularzy, na które należy zwrócić uwagę podczas testów napiszę w artykule w przyszłym tygodniu.
Tagi:
Historie sukcesów
Ostatnie wpisy na blogu
