Jak projektować użyteczne formularze

Uzupełnianie przeróżnych formularzy, czy to w serwisach internetowych, czy też w rozbudowanych systemach klasy enterprise, jest codzienną czynnością każdego z nas. Moje doświadczenia pokazują, że pomimo poprawy w tym zakresie, formularze nadal nie są przyjazne dla użytkowników.

Jak zatem projektować formularze, które nie będą sprawiały problemów użytkownikom? Poniżej kilka podstawowych podpowiedzi, jak niewielkim nakładem pracy można poprawić ich użyteczność.

Pole opcjonalne czy wymagane?

Jeżeli chcemy użyć „gwiazdki” do oznaczenia pól obowiązkowych, należy umieścić w widocznym miejscu wyjaśnienie jej znaczenia. Dobrą praktyką będzie opisanie słowem pól opcjonalnych – słowem, nigdy gwiazdką.

[su_row][su_column size=”1/2″ center=”no” class=””]

[/su_column] [su_column size=”1/2″ center=”no” class=””]

[/su_column][/su_row]

W przypadku bardziej złożonych formularzy, można przyjąć zasadę, że jeżeli większość pól jest wymagana – oznaczamy tylko pola wymagane i odwrotnie, jeżeli większość pól jest opcjonalna – oznaczamy opcjonalne.

Poza samym wyglądem formularza, warto także przemyśleć, czy naprawdę wszystkie jego pola są niezbędne. O tym ile jest warte każde dodatkowe pole możecie się przekonać na przykładzie firm Expedia i Marketo. Pierwsza z nich straciła 12 milionów USD rocznie, zadając jedno dodatkowe pytanie w formularzu rezerwacji – o nazwę firmy. Druga – Marketo, która odkryła, że kilka nieistotnych pól znacząco wpłynęło na zwiększenie kosztu pozyskania leada (Lead – osoba lub firma, która jest zainteresowana produktem lub usługą i zostawiła swoje dane kontaktowe poprzez formularz na stronie).

Etykiety pól

Odpowiednio dobrany rodzaj wyrównania etykiet pól w powiązaniu z celem formularza, wpływa na jego całkowitą użyteczność.

I tak, lewostronne wyrównanie etykiet pozwala na szybkie skanowanie formularza wzrokiem, co ułatwia namierzenie konkretnych pól. Pomaga również, gdy dane do wprowadzenia są skomplikowane i wymagana jest szczególna uwaga użytkownika.

Lewostronne wyrównanie etykiet, źródło: www.labor.ny.gov.

Wyrównanie prawostronne, dzięki czytelnemu połączeniu etykiety z polem, ułatwia szybkie wypełnianie formularza. Sprawdza się w przypadku krótkich i zrozumiałych etykiet.

Prawostronne wyrównanie etykiet, źródło: www.labor.ny.gov.

A co z etykietami w środku pola? Przede wszystkim mogą one mylić się z już wprowadzonymi treściami – przy skanowaniu formularza wzrokiem po prostu nie widać, które pola zostały już uzupełnione. Ponadto w momencie wprowadzania tekstu w danym polu, tekst zastępczy znika, co zmusza użytkownika do czegoś, czego nie lubi, a więc do zapamiętania nazwy pola. Rozwiązaniem, które rekomenduję to wraz z rozpoczęciem edycji, przesunięcie etykiety nad pole.

Przed wprowadzeniem treści, nie widać czy pola są już uzupełnione czy są to pokazane domyślne wartości; źródło własne.

Po wprowadzeniu treści, etykieta ze środka przesunięta nad pole; źródło własne.

Etykiety nad polami są dobre dla małych rozdzielczości i sprawdzają się, gdy mamy mało miejsca w poziomie – pomagając w szybkim wypełnianiu typowych i prostych informacji. Badacze UX z Google odkryli, że miejsce umieszczenia etykiet względem pola, ma dla użytkownika istotne znaczenie. Badanie okulograficzne (eye tracking) pokazało, że użytkownicy przed przesłaniem formularza, na którym etykieta znajdowała się powyżej pola, potrzebowali mniejszej liczby utrwaleń, krótszego czasu fiksacji (Fiksacja – relatywnie stała pozycja gałki ocznej, w trakcie której następują niewielkie drgania; przyjmuje się, że w trakcie fiksacji następuje proces poznawczy, tzn. informacje docierają do mózgu i są świadomie przetwarzane) oraz mniejszej liczby sakkad (Sakady – intensywne ruchy gałki ocznej, polegające na bardzo szybkim przemieszczaniu punktu koncentracji wzroku z jednego miejsca w inne; przyjmuje się, że podczas ich trwania bodźce docierające do mózgu nie są analizowane i nie zachodzi proces poznawczy). Więcej informacji o etykietach nad polami znajdziecie tutaj.

Walidacje

Dynamiczna walidacja ułatwia użytkownikowi poruszanie się po formularzu, ponieważ na bieżąco wskazuje, które pola muszą być poprawione. Poza dynamicznym i kontekstowym prezentowaniem informacji zwrotnych, należy pamiętać o treści komunikatów walidacyjnych. Przede wszystkim muszą być zrozumiałe dla każdego użytkownika, a tam gdzie użytkownik może mieć wątpliwości, zawierać podpowiedź np. w jakim formacie powinny być wprowadzone treści w danym polu.

Formularz Uber.com, przykład dobrego umiejscowienia (przy polu) i poprawnej treści komunikatu walidacyjnego.

Zalecana jest także elastyczność weryfikacji, tzn. jeśli istnieje wiele różnic w sposobie, w jaki użytkownicy wypełniają dane pole (np. wprowadzają numer telefonu +48345678912, +48 345678912, 048345678912), powinniśmy zastosować regułę, która na końcu skonwertuje je do spójnego formatu.

Grupowanie informacji

Jeśli formularz zawiera więcej niż sześć pól, dobrą praktyką jest grupowanie ich w logiczne sekcje lub etapy. Można dodać też ikony, odpowiednie do zawartości sekcji lub oddzielić sekcje wizualnie np. kolorem.

[su_row][su_column size=”1/2″ center=”no” class=””]

[/su_column] [su_column size=”1/2″ center=”no” class=””]

[/su_column][/su_row]

Przy grupowaniu nie zapominajmy o prawie bliskości, które mówi o tym, że nasz umysł grupuje sąsiadujące ze sobą elementy. Przybliżenie powiązanych ze sobą pól i oddalenie od reszty może pomóc użytkownikowi zrozumieć kontekst wprowadzania poszczególnych treści. Ian Everdell na przykładzie formularza jetblue.com pokazał, że w pierwotnej wersji formularza było niejasne, których pól dotyczy opis „OR” (lub).

Zastosowanie prawa bliskości dla poprawy użyteczności formularza na przykładzie jetblue.com.

Przyciski akcji

W temacie przycisków pamiętajmy o afordancjach (Afordancje – według D. Normana postrzegane i rzeczywiste właściwości rzeczy, które określają, w jaki sposób można tej rzeczy używać). Warto zadbać o to, aby przycisk wyglądał jak element „do kliknięcia” a nie jak inne pola (w tej kwestii należy być ostrożnym przy projektowaniu we flat design).

Poniżej przykład, gdzie płaski przycisk można łatwo pomylić z nagłówkiem lub stopką. Obraz po prawej stronie pokazuje, że zmniejszenie szerokości przycisku i dodanie zaokrąglonych narożników zapewnia większą afordancję (przy jednoczesnym zachowaniu dużej powierzchni do dotyku).

(wyszukiwarka mobilna nieruchomości, źródło: www.listapart.com)

Projektując przyciski akcji dla formularzy pamiętajmy o prawie Fittsa – im mniejszy cel i im dalej się znajduje, tym większa trudność aby w niego trafić.

Ponadto zwróćmy uwagę, czy akcje pierwszorzędne są wyróżnione np. kolorem lub stylem. Wizualne wyróżnienie przycisków jest jedną z lepszych metod sugerowania najbardziej typowych i pożądanych akcji oraz zapobiegania przypadkowym błędom krytycznym, takim jak np. wybranie akcji nieodwracalnej.

Formularz Facebook z wyróżnioną akcją, po stronie lewej aby użytkownik wybrał opcję bardziej świadomie.

Zostaje jeszcze kwestia nazywania przycisków wezwania do akcji (call to action). Dobrą zasadą jest odpowiedzieć na pytanie „chcę …” z perspektywy użytkownika. Na przykład, jeśli jest to formularz zapytania o bezpłatną konsultację, nazwa przycisku może brzmieć „Wyślij prośbę o bezpłatną konsultację”.

W badaniu Unbounce.com okazało się, że zmiana nazwy przycisku z „rozpocznij okres próbny”, na „rozpocznij mój okres próbny” spowodowała wzrost kliknięć przycisku o 90%.

Radiobutton czy checkbox?

Ważną rolę w formularzach odgrywają przyciski radiowe, pola wyboru i listy rozwijane.

Ogólną zasadą jest, że przyciski opcji powinny być używane wtedy, kiedy istnieje szereg opcji i można wybrać tylko jedną z nich, zaś pola wyboru – gdy można wybrać więcej niż jedną opcję.

Tam, gdzie to możliwe, zamiast list rozwijanych należy używać pól wyboru i przycisków opcji, ponieważ mają one mniej funkcji poznawczych do przetworzenia. List rozwijanych najlepiej używać, gdy istnieje więcej niż sześć opcji do wyboru.

Podsumowanie

Dobrze zaprojektowany formularz, nie tylko poprawia doświadczenie użytkownika w pracy z systemem, aplikacją czy stroną internetową, ale też realnie wpływa na rezultaty biznesowe jakie za pomocą danego formularza chcemy osiągnąć. Dlatego tym bardziej zachęcam do przyjrzenia się własnym formularzom i poprawy nawet z pozoru nieznaczących błędów. Efekty mogą was zaskoczyć.

Autor: Katarzyna Suwała, Starszy Projektant UX w Altkom Software & Consulting