Użytkownicy nie lubią formularzy. Ich wypełnianie jest jedną z mniej lubianych czynności w Internecie. Często porzucają decyzję o zakupie znalezionego wcześniej produktu, gdyż przejście przez wszystkie etapy formularza jest zbyt czasochłonne.
Zbyt długi, źle zaprojektowany formularz może generować spadek motywacji wypełniającego –
Zbyt długi, źle zaprojektowany formularz może generować spadek motywacji wypełniającego.
powoduje to, że użytkownik kupuje przedmiot u konkurencji, bądź szuka go w serwisie w którym przeszedł już proces rejestracji, ewentualnie szuka sklepu gdzie rejestracja nie jest wymagana.
Pamiętajmy jednak, że formularze to nie tylko „proces rejestracji” a również: rezerwacja biletów lotniczych, zakupy w sklepach internetowych, zapytania ofertowe, wnioski o produkty bankowe, zgoda na przesyłanie danych (newsletter) czy zawężanie kryteriów wyszukiwania w wyszukiwarce.
Internauci traktują często formularz jako przeszkodę na drodze do celu. Zadaniem projektanta (architekta informacji) jest maksymalne uproszczenie formularza – zmniejszenie irytacji użytkownika.
Niniejszy tekst ma za zadanie przybliżyć i pokrótce opisać dobre praktyki projektowania formularzy.
Etap założeń
Projektowanie formularza nie polega tylko na jego narysowaniu. Osoby projektujące formularz powinny zastanowić się nad kontekstem (celami biznesowymi serwisu, potrzebami użytkownika), w którym formularze będą wykorzystywane. Często będą to rozmowy z klientem (przekonywanie klienta), że nie wszystkie informacje o użytkowniku są potrzebne.
W sytuacji idealnej użytkownik podawałby jedynie login i hasło, a sam proces rejestracji byłby funkcjonalnością opcjonalną (dającą większe możliwości) – coraz powszechniejsze są tzw. szybkie zakupy w sklepach internetowych gdzie do dokonania transakcji nie jest wymagana rejestracja.
Zrzut 1. Empik.com Podczas Rejestracji w sklepie internetowym empik.com wystarczy podać mail, hasło i login.
Samo rozróżnienie między zalogowaniem a rejestracją powinno być dobrze opisane. Powinno się wskazać zalety korzystania z serwisu po rejestracji – użytkownicy oczekują czegoś w zamian. Rejestracja powinna generować dodatkowe korzyści.
Zrzut 2. Zappos.com Dobrze rozróżnienie logowania i rejestracji
Na podstronie, na której prosimy użytkownika o wypełnienie formularza nie powinno być elementów rozpraszających uwagę – reklam, odnośników pozwalających na przejście do kolejnych podstron (powinno znajdować się jedynie menu nawigacji z odnośnikami do opcji formularza).
Formatowanie formularzy
Jak wcześniej wspomniałem formularz powinien posiadać tytuł i etykiety (etykietą nazywam krótki opis pola np. nazwisko, imię).
Ważne jest również by formularz był podzielony na sekcje tematyczne. A sam układ formularza powinien być jednokolumnowy (układ taki ułatwia czytanie i wypełnianie).
Zrzut 3. Millennium Bank Etykieta, pole formularza, podtytuł
Formularz powinien być przejrzysty co gwarantują właściwe odstępy między polami. Odpowiedni odstęp między poszczególnymi polami formularza zmniejsza ryzyko pomylenia przez użytkownika pól.
Pola formularza powinny być dopasowane do wymaganych informacji. Zabieg ten przyśpiesza wypełnianie formularza przez użytkowników i eliminuje zastanawianie się użytkownika czy wpisał dobrą informację (dzieje się tak gdy pola są za krótkie, bądź zbyt długie).
Zrzut 4. Yahoo.com Źle dopasowane pole formularza „Year” – wystarczyłaby przestrzeń w polu input na 4 znaki.
Pola formularza muszą posiadać właściwie wyrównane etykiety (między etykietą a polem formularza powinna przebiegać oś symetrii, do której powinna być wyrównana etykieta – do prawej i pole formularza – wyrównane do lewej, patrz Zrzut 5), a odstęp między etykietą a polem formularza nie powinien być zbyt wielki. Pytaniach mogące sprawić trudność użytkownikom powinny posiadać opis i przykłady proszonych informacji (prawidłowe formaty wpisywanych danych)
Pamiętać trzeba, że w prawidłowo zaprojektowanych formularzach wszystkie pola formularza powinny być jednakowo wyrównane. A odnośniki (przyciski) akcji powinny być rozmieszczone zgodnie z tym układem. Prezentuje to poniższy zrzut:
Zrzut 5. Yahoo.com Wyrównane pola formularza
Opisywanie formularzy: tytuł, etykieta, opis
Ważne jest to, by na początku znajdowała się tytuł formularza i informacja mówiąca użytkownikowi czemu ma podjąć wysiłek związany z jego wypełnieniem. Pamiętać również trzeba, że część z przyszłych użytkowników (future user) może nie posiadać dużej wiedzy o serwisie, dlatego nad formularzem powinna znajdować się krótka notka informacyjna mówiąca użytkownikowi czym serwis się zajmuje.
W przypadku, kiedy użytkownik będzie proszony w formularzu o podanie informacji, których może nie pamiętać (np. numeru dowodu osobistego, numeru PESEL, bądź numeru karty kredytowej) powinien o tym zostać na początku poinformowany – zwiększa to szanse wypełnienia formularza.
Zrzut 6. Alior Bank Informacja mówiąca co podczas wypełniania formularza będzie potrzebne,
Dobrze zaprojektowany formularz powinien mieć informacje ile czasu zajmuje wypełnienie go. Na początku formularza powinna znajdować się również informacja do czego wpisywane przez użytkownika dane będą wykorzystywane.
Zrzut 7. Millenium Bank Informacja ile czasu zajmie wypełnianie formularza i jakie dokumenty będą potrzebne.
Etykiety pól formularzy nie powinny mieć formy pytań. Zadawania pytań w formularzach należy unikać (użytkownicy często nie rozumieją pytań, bądź źle je interpretują). W formularzach powinniśmy prosić o informację.
Zrzut 8.Zappos.com Etykiety w formie pytań – większe ryzyko niezrozumienia
Istotnym elementem podczas projektowania formularza są etykiety pól. Mogą one znajdować się zarówno nad, po prawej stronie, bądź w polu formularza (umieszczanie etykiet w polu formularza – input labels, jest dobrym rozwiązaniem jedynie dla krótkich formularzy).
Najbezpieczniejszym rozwiązaniem, jest używanie etykiet po lewej stronie pola formularza – w naszym kręgu kulturowym czytamy od lewej do prawej.
Nad polami formularza należy umieścić nagłówek sekcji, której dotyczą pola poniżej.Pod polami można dodać dodatkowy opis bądź przykładowe informacje podpowiadające czego i w jakiej formie oczekuje się danym polu.
Zrzut 9.LegacyLocker.com Opis pod polem formularza
Zrzut 10. GoldenLine.pl Opis nad polem formularza
Po prawej stronie pola formularza znajdują się czasem infotipy – odnośniki sugerujące pomoc, które w stanie OnMouseOver opisują dane pole. Pojawiać się one również mogą kontekstowo (automatycznie) podczas przechodzenie do pola, które posiada taką formę opisu – np. formularz rejestracyjny Yahoo.
Tooltipsy znajdować się powinny tylko przy pytaniach na które, odpowiedź może sprawić trudność. Pytaniem takim może być np. pytanie o numer weryfikacyjny karty kredytowej.
Zrzut 11. Infotip obrazujący miejsce gdzie szukać potrzebnej informacji
Zrzut 12.Allegro.pl Infotip pod polem formularza
W momencie kiedy chcemy uzyskać większą ilość informacji o użytkowniku a informacje te nie są niezbędne podczas wypełnienia formularza należy je odróżnić. Najlepszy rozwiązaniem jest oznaczenie obowiązkowych pól formularza. Podział taki generuje u użytkownika poczucie wiary, że ma wybór a to zgodnie z teorią reaktancji (http://pl.wikipedia.org/wiki/Reaktancja%28psychologia%29 ) przekłada się na częstsze wypełnianie formularzy nieobowiązkowych (opcjonalnych).
Oznaczenie pól obowiązkowych to:
- kolorowe gwiazdki w opisie pola formularza
- pogrubiony font w etykiecie pola formularza
- font innego koloru odróżniający pole obowiązkowe formularza od pola nieobowiązkowego
- informacja, że dane pole jest obowiązkowe
Pamiętać trzeba, że użytkownik powinien uzyskać potwierdzenie wysłania formularza. Prawidłowo wysłany formularz powinien być opisany komunikatem jak i podziękowaniami. Powinna znajdować się również informacja mówiąca użytkownikowi jakie dalsze działania powinien podjąć (np. kliknąć w link aktywacyjny, sprawdzić pocztę czy czekać na kuriera).
Zrzut 13. Interaktywnie.com Potwierdzenie wysłania formularza
Miejsce użytkownika w formularzu
W momencie kiedy rzeczywiście potrzebujemy od użytkownika dużo informacji – formularz jest bardzo długi, rozważyć trzeba podział formularza na kroki. Przenosząc formularz na kolejny krok pamiętać trzeba, że jest on podzielony na grupy tematyczne (sekcje ). Nie można rozdzielać grupy tematycznej formularza i – lepiej by formularz był dłuższy, niż żeby jedna z jego sekcji była na paru podstronach. Formularz powinien składać z dobrze oznaczonych kroków.
Użytkownik powinien widzieć gdzie znajduje się obecnie w formularzu – na którym jest kroku, ile kroków już przebył i ile kroków mu zostało.
Zrzut 14. Millennium Bank Oznaczenie kroku (pozycji użytkownika) w formularzu
Rozwiązania funkcjonalne w formularzach
Formularze to nie tylko opisane pola do wypełnienia (text box). Istnieje szereg rozwiązań funkcjonalnych pozwalających na szybki wybór opcji spośród kafeterii możliwych odpowiedzi. Poniżej znajdują się przykłady, z krótkim opisem zastosowania:
- Radiobutton – trafne rozwiązanie w wypadku wyboru jednej opcji z paru (maksymalnie z 2/3 opcji np. Płeć)
- Drop-down – dobre rozwiązanie przy wyborze jednej z paru opcji kafeterii np. wybór miesiąca
- List Box – fajne rozwiązanie w momencie kiedy użytkownik ma wybór jednej z opcji z kafeterii, a formularz jest krótki
- Check Box – warto stosować gdy istnieje możliwy wybór paru opcji z kafeterii.
Mówiąc o rozwiązaniach funkcjonalnych warto wspomnieć również o:
- zastosowaniu autouzupełniania pól (np. w przypadku wpisywania nazwy miasta)
- natychmiastowym sprawdzaniu danych (np. przy podawaniu nazwy użytkownika)
- wykorzystywaniu podanych przez użytkownika danych (np. datę urodzenia można pobrać z numeru PESEL, bądź pozwolić na skorzystanie z już raz wpisanego adresu – do adresu korespondencyjnego, bądź adresu zamieszkania współmałżonki podczas wpisywania danych do rezerwacji biletu lotniczego)
Walidacja formularzy
Architekci informacji powinni pamiętać również o komunikacji błędów w formularzach. Komunikat o błędzie powinien być dobrze widoczny a miejsce popełnienia błędu wyraźnie zaznaczone.
Dobrą praktyką walidacji jest zaznaczanie czerwonym kolorem pola gdzie użytkownik popełnił błąd jak i krótkim opisem czemu „jest źle” – informacja ta powinna również sugerować w jaki sposób naprawić/poprawić błąd.
Zrzut 15. Expedia.com Przykład źle oznaczonej walidacji – nie wiadomo którego pola formularza uwaga dotyczy.
Projektując opisy i sposoby zaznaczania błędów w formularzach dobrze zastanowić się nad zastosowaniem ikony błędu. W taki sposób pole formularza, które zostało źle wypełnione będzie szybciej dostrzeżone i dobrze widoczne nawet dla osób mających wadę wzroku, np. problem z odróżnianiem kolorów.
Zrzut 16. Millenium Bank Walidacja formularza – opis pod polem, ikona błędu
Akcje w formularzach
Projektując formularz pamiętać trzeba o odróżnieniu akcji głównej (kolorem, symbolem) od akcji drugiego rzędu (primary and secondary action) Projektant wyodrębnić powinien wyraźnie odnośnik pozwalający na przejście do kolejnego kroku formularza, jak i odnośnik pozwalający na wysłania formularza – kiedy został wypełniony (primary action).
Akcje drugiego rzędu to porzucenie wypełniania formularza, bądź odłożenie wypełniania na później.
Zrzut 17. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. Primary/Secondary action.
Pamiętać trzeba, że odnośniki akcji (najczęściej button) powinny znajdować się pod formularzem w miejscu, które sugeruje, że dotyczą one wypełnianej aplikacji – nie zawsze będzie możliwe umieszczenie ich na całej szerokości strony.
Istotnie jest również umozliwienie powrotu do poprzedniego kroku, by użytkownik mógł poprawić wprowadzone dane.
Zrzut 18. Expedia.com Primary and secondary action
Źródła
Nielsen J., Loranger H. (2007) Optymalizacja funkcjonalności serwisów internetowych
Kasperski M., Boguska – Torbicz A . (2008) Projektowanie stron WWW. Użyteczność w praktyce
Wroblewski L. (2008) Web for design. Fill in Blanks
UX User Experience. The Magazin of Usability vol.8 2ed quarter 2009
o autorze:
Paweł Majnert – Information Architect w UseLab. Ukończył socjologię w Szkole Wyższej Psychologii Społecznej w Warszawie. Swoje początki w branży usability rozpoczynał jako metodolog badań. Prywatnie interesuje się gotowaniem, sportem i swoją dziewczyną;) Kocha podróżować.
