Formularze na stronach internetowych potrafią być naprawdę wkurzające. Zresztą – ile znacie osób, które lubią wypełniać formularze? Dzisiaj zajmiemy się przez chwilę tym, jak zrobić je trochę mądrzej. Przed Wami kilka prostych tricków, które pozwolą Wam robić trochę lepsze formularze.
Ach – i jest film na ten temat na kanale. Możecie go obejrzeć na YouTube.
Jedna kolumna jest lepsza niż dwie
O ile w przypadku krótkich formularzy (np. zapisu do newslettera) pól nie ma zbyt wiele, tak formularze, które zbierają np. dane do wysyłki w sklepie internetowym, potrafią być bardziej rozbudowane. Projektując taki widok, często aż prosi się żeby rozmieścić je w miarę blisko siebie, często w dwóch, a nawet trzech kolumnach. I o ile potrafi to wyglądać czasem całkiem nieźle, tak dla użytkownika, uzupełnianie takiego formularza jest trochę mniej przyjemne.
Wynika to z tego, że ciężko skanuje się wzrokiem taki formularz i łatwo pogubić się w kolejności pól. Dlatego właśnie często przeczytacie, że dłuższe formularze powinny być zdecydowanie rozmieszczane w jednej kolumnie.
Dzięki temu od razu widzimy kolejność pól i zachowujemy rytm w projekcie, a także w czasie uzupełniania formularza, nie rozpraszają nas elementy, które znajdują się zaraz obok.
Etykiety pól
Etykiety formularzy (zwane także labelkami) mówią użytkownikom jakiego typu informacje muszą uzupełnić – np. imię, nazwisko, numer telefonu. Ważne jest ich ułożenie względem pól. Jako najlepsze rozwiązanie podaje się ułożenie jedno pole pod drugim.
Ułożenie etykiet obok pól wymaga bowiem od użytkownika dłuższego skanowania wzrokiem całego formularza. I choć z punktu widzenia projektu, czasem aż prosi się żeby pola poukładać obok siebie, po prostu tego nie róbmy. Tak wiecie – dla dobra naszych użytkowników.
Grupowanie pól
Jeżeli macie więcej pól do opracowania, zastanówcie się czy nie pogrupować ich tematycznie, a na pewno, nadajcie im odpowiednią kolejność. Prześledźcie dane jakie strona powinna zebrać i pomyślcie jak ułożyć je, by uzupełnianie pól było logiczne. Wiecie, jeśli chcecie zebrać informacje adresowe, to między wypełnianiem miasta i ulicy, nie poprosicie o ulubiony kolor czy imię kota.
Przy bardzo długich formularzach możecie też zastanowić się nad wydzieleniem etapów uzupełniania. To częsty zabieg w sklepach internetowych, gdzie działania użytkownika dzieli się właśnie na kroki – założenie konta, uzupełnienie danych do wysyłki, danych do płatności i przechodzimy do informacji, że produkty udało się kupić. Bardzo ważne jest jednak żeby w takim scenariuszu pokazać ilość kroków i odpowiednio je nazwać, by użytkownik wiedział od razu jak długa droga go czeka.
Walidacje
Walidacje, choć wydają się prostym tematem, potrafią tymczasem mocno uprzykrzyć życie użytkowników. Dlatego dobrze żebyśmy jako projektanci, odpowiednio je zaprojektowali. Oczywiście – idealny scenariusz to taki, w którym użytkownicy nie muszą z walidacji korzystać, bo interfejs jest na tyle elastyczny i prosty w obsłudze, że błędy się nie zdarzają. Ale nie żyjemy w idealnym świecie i walidacje musimy projektować. Najlepiej tak, by umożliwiły użytkownikom, jak najszybsze poprawienie błędów.
Dlatego w pierwszej kolejności zastanówcie się jak powinny brzmieć komunikaty błędów i gdzie się wyświetlać. Jeżeli błędy dotyczą danych umieszczonych w konkretnych polach, powinniśmy wyraźnie zaznaczyć, o które pola chodzi. Najlepiej wyświetlając komunikaty zaraz obok pól.
Oprócz wyświetlenia informacji, że coś poszło nie tak, powinniśmy również wytłumaczyć użytkownikowi, co właściwie powinien poprawić.
Więcej o projektowaniu UI?
Formularze są z pozoru bardzo prostym elementem interfejsu. Kilka pól ułożonych na jakiejś przestrzeni. Tymczasem potrafią spektakularnie skopać doświadczenia użytkownika i sprawić, że ten po prostu podda się w trakcie wypełniania i pójdzie do konkurencji. Dlatego jako projektanci interfejsów, musicie zwracać na nie szczególną uwagę.
Zastanawiam się, czy w ogóle taka forma wpisów, poświęcona konkretnym rozwiązaniom UI’owym Was interesuje? Dajcie znać co myślicie i czy chcielibyście więcej wpisów tego typu!
