close search bar
Wróć

Dobre praktyki w projektowaniu formularzy

3 min czytania

Opierają się one przede wszystkim na ludzkich przyzwyczajeniach, związanych niekiedy z kulturą w której żyjemy (np. czytamy od lewej do prawej, z góry na dół) lub z percepcją (niektóre kolory są lepiej widoczne od innych, bo dawniej człowiek musiał wytężać wzrok i wypatrywać niebezpieczeństwa/pożywienia).

W projektowaniu elementów, jakimi są formularze, jest to szczególnie istotne, bowiem tu warstwa wizualna podporządkowana jest aspektom użytecznościowo-biznesowym. Jeżeli formularz będzie nieintuicyjny i sprzeczny z ogólno przyjętymi normami, to użytkownicy nie będą chcieli/potrafili go wypełniać. Efekt → wskaźnik konwersji będzie słaby.

Przyjrzyjmy się zatem, jak powinien wyglądać optymalny proces projektowy.

1. “Less is more”
Pierwsze, co należy zrobić, to analiza danych wsadowych. Czy na pewno wszystkie pola są niezbędne? Często spotyka się formularze w których istnieje podział na pola obowiązkowe i opcjonalne. Doprowadza to czasami do sytuacji w której 80% formularza stanowią pola opcjonalne. Efekt → dodatkowe pola to dodatkowe ryzyko wyjścia ze strony.

2. Struktura
Korzystaj z jednokolumnowego układu pól. W tym porządku oczy poruszają się w naturalnym, pionowym kierunku. Układ wielokolumnowy wymusza skakanie po polach, przez co wydłuża się czas potrzebny na ich wypełnienie, doprowadzając czasami nawet do porzucenia/ucieczki ze strony.

Etykiety pól powinny także znajdować się nad polami po lewej stronie (chyba, że kultura czytania na rynku docelowym wymaga czytania od prawej do lewej).

Jeżeli ilość pól jest duża i istnieje możliwość podzielenia ich na grupy, to należy to zrobić (dane osobowe, dane kontaktowe, dane konta itd.). Wewnątrz grup musi być zachowana następująca sekwencja pól: Imię → Nazwisko → Data urodzenia, Nazwa użytkownika → Hasło → Powtórz hasło).

3. Komunikaty, alerty, podpowiedzi, walidacja

W celu uniknięcia błędów przy wprowadzaniu nietypowych danych, warto dodać podpowiedzi sugerujące odpowiedni format danych (cyfry, data). Można wykorzystać do tego tooltipy – tekstowe podpowiedzi  wewnątrz pól lub pod polami.

Komunikaty muszą być precyzyjne i sugerować rozwiązanie danego problemu, np. “Something went wrong!” → “Wrong data format. Use only alphanumeric symbols”.

Wykorzystaj natychmiastową walidację. Zdarza się, że dane w formularzach są sprawdzane dopiero po wysłaniu formularza. To duży błąd. Powtórne wypełnienie formularza może być zniechęcające i doprowadzić do ucieczki. Walidacja LIVE skutecznie eliminuje ten problem.

4. Dopasowany rodzaj inputa do wsadu

Staraj się zaprojektować taki formularz, który będzie się wypełniało naturalnie/intuicyjnie. Wykorzystaj do tego różne rodzaje pól formularzy i nie pozwól, żeby użytkownik miał wątpliwość czy wprowadzony format jest poprawny (np. data ma swoją własną strukturę).

Niektóre z podstawowych pytań mają ograniczoną ilość odpowiedzi. Jeżeli jest ich mniej niż 6, to warto zastosować radial button. Jeśli to z kolei numer telefonu, dodaj numer kierunkowy jako maskę. Pomyśl o tym, jak usprawnić każde pole i maksymalnie zredukować ewentualne wątpliwości userów.

5. CTA

Przyciski CTA muszą być odpowiednio zhierarchizowane. Odróżnij akcję  pierwszorzędną od drugorzędnej. Wykorzystaj do tego rozmiary i kolory przycisków. Zadbaj, aby przyciski były dobrze opisane. Muszą one sygnalizować, gdzie zostaniesz przekierowany po naciśnięciu lub co jest celem formularza. Np. gdy celem jest rejestracja użytkownika, to copy w CTA powinno brzmieć: “Zarejestruj się” lub “Utwórz konto”. Nie powinno to być: “Wyślij” czy “Przejdź dalej”.

Mamy nadzieję, że ten mini przewodnik wskaże Wam odpowiednie kierunki działania. 🙂 Pamiętajcie, less is more – nikt z nas nie lubi wypełniania formularzy, dlatego starajmy się uprościć ten proces, aby uzyskać możliwie najwyższe współczynniki konwersji. Dobry formularz powinien pozostawać w zgodzie ze standardami UX/UI. To bardzo ważny element interfejsu, od którego na dużą skalę zależy powodzenie celów biznesowych strony. Do dzieła więc! Formułujcie!

Następny artykuł

WordPress 5.0 i Gutenberg – krótka historia

Nowy edytor Wszystko zaczęło się na początku 2017 roku, kiedy to Matt Mullenweg (szef Automattic i jeden z twórców WordPressa) wraz z zespołem rozpoczęli prace nad nowym edytorem, który miał dać użytkownikom i developerom większą…

Zróbmy to!

Popracujmy nad wspólnym projektem.

Jesteś ciekaw, co możemy zrobić dla Twojego biznesu? Chcesz skorzystać z zalet marketingu online, potrzebujesz graficznej obsługi firmy, planujesz uruchomić sklep internetowy albo kampanię reklamową adwords?

Skontaktuj się z nami i zobacz, jakie działania podejmiemy, by nasz wspólny projekt zrealizował Twój cel biznesowy.

Skontaktuj się