Projektowanie użytecznych formularzy, część I

Zamiast recencji, kilka próbek Wroblewskiego (książka Web Form Design. Filling in the Blanks):

Podstawowe zasady projektowe

• Minimalizuj cierpienie użytkownika – formularz jest barierą, jaką stawiasz użytkownikowi na drodze do celu, dlatego staraj się ułatwić jego wypełnienie.
• Wskazuj drogę do wyjścia – umieściłeś formularz po to, by został wypełniony, informuj użytkownika jakie kroki musi wykonać, by ten cel został osiągnięty,
• Zwracaj uwagę na kontekst – formularze nie zostały zaprojektowane w oderwaniu od kontekstu, w jakim będą wykorzystywane – zarówno przez Twoją organizację, jak też – przede wszystkim – przez użytkownika. (Przykład: umieszczanie pytania o adres zamieszkania w ekranie powitalnym serwisu – właściwe w kontekście serwisu opartego na lokalizacji).
• Zapewniaj spójność komunikacji – formularze pośredniczą w komunikacji z użytkownikiem. Zwykle w organizacji istnieje wiele grup zainteresowanych kontaktem z użytkownikiem – upewnij się, że mimo tego ton Twojej komunikacji jest spójny.

Najlepiej nie pytaj

Twój użytkownik musi zrozumieć każde z zadanych pytań, sformułować, a następnie wprowadzić odpowiedź przy użyciu zaprojektowanych kontrolek. Najlepszym sposobem na przyspieszenie wypełniania formularza jest oczywiście redukcja liczby pytań – wbrew pozorom warto zastanowić się nad rzeczywistą potrzebą pozyskania poszczególnych danych.

Wroblewski sugeruje przeprowadzenie dyskusji pomiędzy departamentami w organizacji, zainteresowanymi zbieraniem informacji za pośrednictwem projektowanych formularzy. Umieszcza praktyczny framework, pomagający podejmować odpowiednie decyzje.

Nawiązuj dialog

Czy podalibyście swoje dane osobowe przypadkowemu nieznajomemu? Jeżeli nie chcecie, by formularze na stronie były traktowane jako przesłuchanie, myślcie o ich strukturze, jak o konwersacji z użytkownikiem. Przykład z książki: zamiast etykiety „issuing bank” lepsze jest sformułowanie „What bank issued You this document?”.

Organizacja formularzy

Podczas spotkania na Śniadaniu usability dyskutowaliśmy na temat zalet i wad dwóch metod organizowania dużej liczby sekcji w rozbudowanych formularzach. Podzieliliśmy się trochę na zwolenników krokowego wizarda i pojedynczej dynamicznie rozgałęzianej strony. Wroblewski każe zwracać uwagę na kontekst – należy zadać pytanie kto i w jakim celu wypełnia formularz? Zgodnie z zasadą dialogu pytania powinny układać się w wątki – kim jesteś,gdzie mieszkasz.

Duża liczba wątków może wymagać rozbicia na strony, ale są sytuacje, w których warto gromadzić wiele sekcji kosztem długości strony – jak w przypadku, kiedy poprzedzające sekcje wpływają na możliwe wybory w aktualnie wypełnianych. Dobrym przykładem mogą być konfiguratory usług telekomunikacyjnych, gdzie po wybraniu taryfy użytkownik dobiera pakiety dodatkowe. Powrót do zmiany taryfy wyposażonej w inny zestaw pakietów powoduje, że użytkownik może miec kłopoty z podjęciem właściwej dla siebie decyzji.

Z drugiej strony, pytanie w rodzaju „skąd dowiedziałeś się o naszych produktach” można spokojnie zadać po wypełnieniu i wysłaniu głównego formularza w myśl zasady minimalizacji cierpienia ;]

Jedna istotna uwaga na temat wizualnego oddzielania sekcji – należy posługiwać się takimi środkami, które wskazują na granice między sekcjami, nie wprowadzając wysokiego kontrastu pomiędzy nimi. Zbyt duży kontrast może utrudniać skanowanie strony. Subtelna wizualizacja pozwala skupić się na informacji.

Przykład wyposażenia sekcji w aż 15 niepotrzebnych elementów – boksów z ramkami o dwóch różnych kolorach tła. Może to powodować problemy ze skanowaniem etykiet.

Droga do wyjścia

Im dłuższy jest formularz, tym lepiej powinien być oznakowany. W przypadku konieczności przygotowania informacji, których użytkownik może nie znać na pamięć (np. numery dowodów, kart kredytowych), dobrze jest poinformować o tym zawczasu – najlepiej na początku formularza.

Wroblewski wskazuje na konieczność dbania o czystą ścieżkę skanowania na stronach formularza, która pozwala na szybsze jego ukończenie – ma to być zdaniem Wroblewskiego zbyt często ignorowana zasada. Należy także pamiętać o minimalizowaniu elementów odciągających uwagę użytkownika od wypełniania formularza.

Oczywista jest już chyba konieczność dobrego oznaczania wielostronnicowych fomularzy. Do standardu powinno należeć:

• wskazanie aktualnego miejsca w procesie wypełniania formularza,
• wskazanie liczby kroków pozostałych do przebycia,
• możliwość powrotu do poprzednich kroków bez utraty wprowadzonych danych

W następnych odcinkach napiszę o etykietach, kontrolkach formularzy i przyciskach akcji.