Projektowanie formularzy: strategie UX i najlepsze praktyki

Spis treści

W jaki sposób zaprojektować formularze tak, by gwarantowały wysoki wskaźnik konwersji? Jak skonstruować je w sposób czytelny, intuicyjny i prosty dla odbiorcy? Zapoznaj się z przygotowanym przez nas artykułem i zobacz, jak powinien wyglądać prawidłowy formularz.

Ilość pól i ich oznaczenie – na co zwrócić uwagę?

W formularzach najważniejsze są pola do uzupełnienia, które dostarczają nam później niezbędnych informacji o klientach i osobach zainteresowanych ofertą. Muszą być więc sensownie skonstruowane.

Czego unikać podczas tworzenia i oznaczania pól?

  • przeanalizuj, czy aby na pewno wszystkie pola są niezbędne – sprawdza się tu zasada „im mniej, tym lepiej”. Zminimalizowany formularz nie będzie odstraszał swoją zawiłością i czasochłonnością, dzięki czemu znacznie więcej osób będzie skorych uzupełnić go do końca;
  • używanie gwiazdek jako oznaczenia niezbędnych okienek bez przedstawienia legendy i wytłumaczenia ich znaczenia jest praktyką niewskazaną, ze względu na brak czytelności. Najlepiej jest umieszczać obok nazwy danych (np. imię, nr telefonu, adres zamieszkania) nawias z opisem „opcjonalne” lub „obowiązkowe”, w zależności od tego, ile okienek danej kategorii będzie znajdować się w formularzu (zwykle dodatkowo opisuje się mniejszość). Dzięki temu osobie wpisującej łatwiej będzie się zorientować, które pola może bez problemu pominąć.

Co zrobić w przypadku, gdy pól będzie za dużo?

Jeżeli nie jesteś w stanie ograniczyć ilości pól w formularzu do niezbędnego minimum, a celem ankiety jest pozyskanie jak najwięcej informacji o danych osobowych i preferencjach potencjalnego klienta, staraj się grupować dane w sensowne kategorie. Dzięki temu łatwiej będzie przeskanować całość wzorkiem.

Struktura i ułożenie pól do uzupełnienia

Według badań najlepiej sprawdza się ułożenie danych w pojedynczej kolumnie. Wzrok naturalnie podąża w dół strony, użytkownicy również przyzwyczaili się do tego typu przeglądania witryn internetowych. Dlatego ważne jest, oprócz sensownego ułożenia następujących po sobie grup danych, ustawienia ich jedna pod drugą.

Etykiety pól – w jaki sposób umieszczać opisy pola?

Wyróżniamy trzy podstawowe sposoby umieszczania opisów danych pól w formularzu:

  • obok okienka – dosyć czytelne, pozwala na szybkie przeskanowanie całości wzrokiem; szczególnie polecana przy bardzo skomplikowanych formularzach z wieloma polami;
  • w okienku – czytelne, jednak wyłącznie do pewnego czasu. Wymusza na użytkowniku krótkotrwałe zapamiętywanie nazwy pola, z tego względu, iż po kliknięciu pola opis zwykle znika. Przy dużej ilości okienek może mylić się z już uzupełnionymi danymi, co wymusza większe skupienie się na skanowaniu wzrokiem całej ankiety;
  • nad okienkiem – czytelne, wygodne i dobrze się prezentuje. Dzięki umieszczaniu etykiet nad polem czytelnik mniej skupia się na analizie danych, szybciej i łatwiej przychodzi mu uzupełnianie treścią.

Komunikaty w przypadku nieprawidłowo uzupełnionych danych

Warto jest stworzyć czytelny i jasny system walidacji wpisywanych treści w okienka formularza. Dzięki temu unikniesz nieprawidłowości, które mogą uniemożliwić ci kontakt lub wykorzystanie danych klienta w późniejszym czasie. Również osoba uzupełniająca formularz poczuje się pewniej, gdy wyświetlą jej się komunikaty mówiące o ewentualnych błędach.

Pamiętaj jednak, by wyskakujące alerty miały jasny przekaz. Jeżeli wpisany adres e-mail jest nieprawidłowy, warto stworzyć komunikat typu „zły format adresu e-mail” lub „błąd – sprawdź, czy dobrze wpisałeś swój e-mail”. Nie używaj ogólników, takich jak „Coś poszło nie tak” – musisz podpowiedzieć, jaki rodzaj pomyłki mógł zostać popełniony.

Różne formaty i sposoby na uzupełnienie ankiety

By klient nie miał problemów i wątpliwości podczas wypełniania formularza, dobrze jest określić z góry format zapisywania danych, np. umieszczając przykład w okienku lub obok etykiety pola.

Najlepiej jednak narzucić formę uzupełniania poprzez wykorzystanie odpowiedniego formatu, np. rozwijanych list z opcjami do wyboru (sprawdzają się w przypadku wyboru płci, ustawienia daty urodzenia czy innych, ograniczonych ilościowo możliwości) lub pól wyboru do odhaczenia poprzez pojedyncze kliknięcie (tzw. radial buttons).

Przyciski CTA, czyli Call to action – jak je prawidłowo zaprojektować?

To w zasadzie najważniejszy element, który pozwala na przesłanie danych do firmy lub rezygnację z uzupełniania formularza. Ważne jest więc, by przyciski te były doskonale widoczne i zhierarchizowane.

Jak uwidocznić przyciski akcji, tak by użytkownik bez problemu mógł na nie trafić? Wystarczy wyróżnić je kolorystycznie oraz graficznie tak, by rzeczywiście wyglądały na obiekt do kliknięcia. Dobrze sprawdza się lekkie cieniowanie dające efekt 3D oraz zastosowanie kontrastowej barwy kafelka.

Istotne z punktu widzenia celowości formularza jest rozróżnienie przycisków służących do wysłania danych od tych, które służą do rezygnacji lub innej akcji, nieprzynoszącej tobie, żadnych korzyści. Dlatego kolorem należy podkreślać jedynie te kafelki, na których kliknięcie liczymy.

Ważny jest także napis, zachęcający do podjęcia danej czynności. Musi sygnalizować on wyraźnie, co nastąpi po jego kliknięciu, np. „Wyślij”, „Zapisz się do newslettera”, „Szukaj”.

Tworzenie prawidłowego formularza — krótkie podsumowanie

Projektując formularz do uzupełnienia, musisz pamiętać o kilku ważnych kwestiach — w jakim celu powstał, do kogo jest kierowany i jakie korzyści ma przynieść firmie. Najważniejsza z punktu widzenia użytkownika jest natomiast czytelność, minimalizm i jasny przekaz.

Źródło

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Masz pytanie? Napisz do nas

Uzupełnij formularz poniżej, a nasz zespół skontaktuje się z Tobą w przeciągu jednego dnia roboczego.