fbpx Case study Jak wygenerowaliśmy 600 tys przychodu dla sklepu obuwniczego? 📈
logo white logo unia
Dofinanowanie ze środków Europejskiego Funduszu Rozwoju Regionalnego

8 dobrych praktyk w projektowaniu formularzy

Z formularzami stykamy się każdego dnia – robiąc zakupy online, zakładając konta w portalach społecznościowych, wypełniając dokumenty. Jeśli formularz ma nam pomóc w osiągnięciu wybranego celu biznesowego to musimy zadbać o to, by był on jak najlepiej zoptymalizowany pod kątem użytkownika – wszak nikt nie lubi wypełniać dokumentów. Zapoznaj się z poniższymi poradami i uczyń swoje formularze bardziej przyjaznymi dla Twoich użytkowników.

Pytaj tylko o niezbędne dane

Im więcej pól w formularzu, tym większa niechęć do jego wypełnienia. Zbyt długi formularz jest jedną z najczęstszych przyczyn porzuconych koszyków, dlatego też proś użytkownika wyłącznie o dane, które są Ci niezbędne do osiągnięcia Twojego celu biznesowego.
Pytaj tylko o niezbędne dane

Grupuj pola w logiczne bloki

Szczególnie w przypadku bardziej rozbudowanych formularzy warto pomyśleć nad podzieleniem układu na logiczne bloki, np. informacje o dostawie wyraźnie oddzielone od sekcji z danymi osobowymi. Ułatwi to użytkownikom wypełnienie całego formularza.
Grupuj pola w logiczne bloki

Formularz w jednej kolumnie

Jednokolumnowy formularz jest czytelny, mocno ogranicza możliwość pominięcia któregokolwiek pola oraz wygląda najlepiej na urządzeniach mobilnych. Istnieją oczywiście momenty, w których optymalnie jest umieścić kilka pól obok siebie (np. ulica a obok nr domu/mieszkania), dlatego zawsze trzeba dopasowywać ułożenie pól do własnych potrzeb, ale jeśli patrzymy na układ całego formularza to jedna kolumna jest najbardziej optymalnym rozwiązaniem.
Formularz w jednej kolumnie

Dostosuj długość pola do ilości treści

W nawiązaniu do poprzedniego punktu, zawsze staraj się dopasować rozmiar pola formularza do ilości treści, którą trzeba wprowadzić. Wszystkie pola tej samej szerokości mogą wprowadzić użytkownika w zakłopotanie, gdy pole do wpisania nazwy ulicy będzie miało taką samą długość jak to dla numeru mieszkania. Poza tym, skracając wybrane pola, zaoszczędzisz trochę miejsca dzięki umieszczeniu ich w jednej linii.

Dostosuj długość pola do ilości treści

Czytelna walidacja

Jeżeli zależy Ci na zaprojektowaniu formularza przyjaznego użytkownikowi, zadbaj o proste i logiczne komunikaty w przypadku błędów. Wyraźnie oznacz błędnie wypełnione pole i wytłumacz użytkownikowi w zrozumiały sposób jak poprawnie wypełnić formularz.

Czytelna walidacja

Pomyśl o etykietach

Projektując formularz zwróć uwagę na etykiety formularzy. Zadbaj o prosty, krótki komunikat etykiety oraz umiejscowienie jej nad polem do wypełnienia. Pamiętaj też o zachowaniu odpowiednich odstępów, tak aby nie było problemów z rozróżnieniem, która etykieta odpowiada za które pole.

Pomyśl o etykietach

Call to action

Unikaj ogólnikowych komunikatów w przyciskach. Zawsze staraj się, aby teksty w CTA były czytelnymi komunikatami i jasno tłumaczyły jaki będzie efekt kliknięcia w przycisk.

Call to action

Radio button zamiast rozwijanego menu

Przyjmuje się, że jeśli opcji wyboru jest mniej niż 6, lepiej sprawdzą się radio buttony umieszczone jeden pod drugim niż menu rozwijane, które wymaga dodatkowej czynności, aby zobaczyć wszystkie dostępne opcje.

Radio button zamiast rozwijanego menu

Tworzenie stron internetowych to bardzo skomplikowany proces wymagający wiedzy z wielu dziedzin. Jeśli czujesz, że potrzebujesz z tym pomocy, nasza agencja interaktywna chętnie wspomoże Cię na każdym etapie planowania biznesu w internecie.

Dawid Kabała

Autor: Dawid Kabała

Team Leader Creative Designer

Spotkajmy się na żywo:

Wszystkie wydarzenia
26.04.2024

Konferencja E-wolucja

20.03.2024

ProstoDoKasy Fly Offline

15.03.2024

eMarketing Event

14.03.2024

Ecommerce.pl Event 2.0

08.03.2024

Konferencja E-wolucja

13-16.11 2023

Web Summit 2023

30-31.10.2023

Madrid Tech Show 2023

27.10.2023

24. Targi eHandlu

17.10.2023

Ecommerce.pl Event 1.0

07.09.2023

PrestaShop Connect

10-19.03 2023

SXSW 2023

18-20.10 2022

Techcrunch 2022

30.05-02.06 2022

Hannover Messe 2022

European Union
Ta strona wykorzystuje pliki Cookies do poprawnego działania. Polityka Cookies