Connect with us

Cześć, czego szukasz?

Internet Maker

10 sposobów na bardziej użyteczne formularze

Formularz w serwisie internetowym może być miejscem budującym w użytkownikach frustrację lub sprzyjającym zwiększeniu ich satysfakcji. Dlatego uczynienie formularzy bardziej użytecznymi może mieć duże znaczenie dla sukcesu serwisu.

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”.

{ikona-nc01}

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.

{ikona-nc02}

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ść.

{ikona-nc03}

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.

{ikona-nc04}

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.

{ikona-nc05}

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ć.

{ikona-nc06}

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.

{ikona-nc07}

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.

{ikona-nc08}

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.

{ikona-nc09}

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.

{ikona-nc10}

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”.

Prowadzący bloga poświęconego użyteczności oraz właściciel firmy realizującej audyty serwisów internetowych.

Może cię też zainteresować

Internet Maker

Wśród trendów user experience w 2011 roku będziemy obserwować pogłębienie zjawisk obecnych w internecie w poprzednim roku. Możemy więc liczyć na dalszy rozwój rynku mobile, zwiększenie roli elementów społecznościowych...

Internet Maker

Zbieranie informacji zwrotnych (ang. feedback) od użytkowników serwisu może mieć duże znaczenie dla rozwoju twojego serwisu. Dlatego warto poznać kilka narzędzi, które na różne sposoby umożliwiają zbieranie...

Internet Maker

Coraz więcej właścicieli biznesów internetowych stara się definiować i analizować konwersje dla swojego biznesu. Zdefiniowanych takiego wskaźnika pozwala na porównywanie efektywności poszczególnych źródeł ruchu internetowego pod kątem...

Internet Maker

W teorii wyszukiwanie jest bardzo prostą funkcją serwisu internetowego. Jednak w praktyce budowa sprawnej wyszukiwarki może nastręczać rozmaitych trudności, a liczba dostępnych możliwości jego ulepszenia jest tak duża,...