10 sposobów na bardziej użyteczne formularze

Tworzenie formularzy to szeroka dziedzina wiedzy. W jej skład wchodzi sztuka ograniczania liczby wymaganych danych, podstawy typografii oraz umiejętność tworzenia dostępnego kodu HTML i CSS. O wielu z tych sprawach pisaliśmy już na łamach naszych serwisów. Dzisiaj przedstawiamy 10 szybkich sposobów na zwiększenie użyteczności formularzy do zastosowania "od zaraz".

Podziel długi formularz na kilka stron

Długie formularze z dziesiątkami pól mogą irytować nawet wtedy, gdy użytkownik rozumie dobrze powód jego wypełniania. Warto więc pomyśleć o podzieleniu długiego formularza na kilka osobnych stron. Oczywiście użytkownik nadal będzie musiał wypełnić tyle samo pól, jednak efekt wizualny zmniejszający przytłoczenie użytkownika sprawi, że będzie to dla niego przyjemniejsze.

Wniosek kredytowy w Leonis.pl został podzielony na kilka kroków

Grupuj podobne pola

Pomimo podzielenia formularza na kilka stron na każdej z nich wciąż może znajdować się sporo elementów. Dlatego pola formularzy należy grupować razem i rozdzielić przy pomocy nagłówków. Będą to na przykład: adres zamieszkania, adres korespondencyjny czy login i hasło. Każda grupa pól musi stanowić logiczną całość.

Pola w formularzu rejestracyjny Yahoo! zostały zgrupowane w trzech grupach

Zadbaj o oznaczanie błędów

Błędy popełniane przez użytkowników podczas wypełniania formularzy świadczą o jego jakości. Dążenie do minimalizacji ich liczby jest więc bardzo ważne podczas optymalizacji formularza. Niemniej, nigdy nie da się uniknąć wszystkich możliwych błędów, więc duże znaczenie ma sposób informowania o nim. Źle wypełnione pole powinno zostać wyróżnione przy pomocy czerwonego koloru i odpowiedniego komunikatu. Jeśli sprawdzanie błędów nie odbywa się w czasie rzeczywistym przy użyciu JavaScriptu (co jest interesującym rozwiązaniem), a po stronie serwera, to niezbędne jest również wyświetlenie wyraźnego komunikatu ponad formularzem.

Formularz rejestracyjny w Netvibes.com sprawdza poprawność danych w czasie rzeczywistym. Gdyby pole z błędem zostało dodatkowo wyróżnione, to zachowanie formularza byłoby idealne

Zastosuj odpowiednie wyrównania

Istnieją trzy koncepcje oznaczania pól formularzy. Etykiety mogą się znajdować nad polami, po lewej stronie wyrównane do lewej lub wyrównane do prawej. Który z tych sposobów jest najlepszy? Z pewnością etykiety ponad polami sprawdzają się przy formularzach posiadających niezbyt dużą liczbę pól. Zbyt często lekceważy się możliwość wyrównania pól formularzy do prawej strony. Wbrew pozorom taki zabieg może znacznie zwiększyć czytelność formularza, a szczególnie w przypadku mniejszych formularzy.

Wyrównanie etykiet do prawej w formularzu rejestracyjnym rememberthemilk.com było zdecydowanie dobrym pomysłem

Oznacz poprawnie wypełnione pola

Gdy użytkownik poprawnie wypełni dane pole, warto dać mu o tym znać wyświetlając obok odpowiedni symbol graficzny. Dzięki temu formularz nie jest tylko statyczną stroną, ale wchodzi w płynną interakcję z użytkownikiem. Dłuższe zadanie wypełnienia formularza w umyśle użytkownika może być dzielone na większą liczbę małych zadań, które łatwiej zrealizować.

Formularz rejestracyjny w Yahoo! potrafi także oznaczyć poprawnie wypełnione pole

Ogranicz interpretacje

Użytkownik nie powinien sam interpretować formularza próbując zrozumieć "co oznacza to pole". Wolność wyboru w tym przypadku bywa przyczyną problemów. Ogranicz ją tak, jak to tylko możliwe. Na przykład do podawania dat używaj pól typu SELECT. Pola formularza o niejednoznacznym charakterze zawsze dodatkowo opisuj umieszczając krótki tekst pod nimi lub za nimi.

W formularzu na travelplanet.pl data jest wybierana przy pomocy pól typu SELECT. Dzięki temu użytkownicy nie muszą się zastanawiać nad tym, jaki format danych jest poprawny

Użyj adresu e-mail, jako loginu

Czy lubisz wymyślać nową nazwę użytkownika w każdym serwisie w którym się rejestrujesz? Obstawiam, że nie należy to do twoich ulubionych czynności. Dlatego warto pomyśleć o użyciu adresu e-mail, jako loginu.

W sklepie Merlin.pl adres e-mail jest wykorzystywany, jako login. Jest to ważne uproszczenie, które doceni wielu użytkowników

Wyświetl dodatkowe objaśnienia w dymkach

Jeżeli przy poszczególnych polach formularza pragniesz dodać dodatkowe, dłuższe komentarze, możesz wykorzystać dynamiczne "dymki" pokazujące się użytkownikowi, gdy najedzie kursorem myszy na dane pole formularza. Oczywiście nie należy przesadzać i dodawać komentarze, tylko wtedy, gdy jest to uzasadnione.

Osoby rejestrujące się w Photobucket.com widzą dodatkową poradę wyjaśniającą, jak stworzyć bezpieczne hasło

Zaznacz aktualnie wypełniane pole

Dobrym pomysłem jest specjalne oznaczenie pola aktualnie wypełnianego przez użytkownika, np. przez zmianę koloru jego tła lub obramowania. Sprzyja to większemu skupieniu na danym polu i polepsza ogólną satysfakcję użytkowników.

Podczas rejestracji w Zooomr.com aktualnie wypełniane pole jest specjalnie wyróżnione

Stwórz możliwość zapamiętania danych

W przypadku długich formularzy duże znaczenie dla użytkowników może mieć możliwość zapamiętania danych i dokończenia zadania później. Taką opcję udostępnia na przykład system transakcyjny mBanku, gdzie oczekując na kod potwierdzający wysyłany SMS-em możesz kliknąć w "Potwierdź później".

Możliwość późniejszego potwierdzenia transakcji jest bardzo dobrym pomysłem twórców systemu mBanku