Dobre i złe praktyki walidacji formularzy mobilnych w czasie rzeczywistym – Inline Validation
Aplikacje mobilne umożliwiają wykonywanie coraz bardziej rozbudowanych czynności. Za pomocą nowej aplikacji banku Meritum możemy już założyć konto osobiste lub firmowe – wszystko bez konieczności odwiedzin w oddziale banku czy wysyłania umowy kurierem. Rezultatem wprowadzania takich funkcjonalności często są bardziej skomplikowane elementy interfejsu, a zwłaszcza formularzy.
To skomplikowanie zwiększa z kolei prawdopodobieństwo popełnienia błędu. Problemy pojawiają się nawet podczas wypełniania prostych, dwuelementowych formularzy logowania. Tym bardziej jesteśmy na nie narażeni podczas wprowadzania większej ilości danych.
Ważnym elementem solidnie zaprojektowanego formularza są mechanizmy walidacyjne. Na temat walidacji formularzy napisano już wiele, osobiście polecam artykuł Marcina Tredera, który solidnie i wyczerpująco opisuje temat.
Ja natomiast postanowiłem przedstawić przykłady rozwiązań, które wspomagają użytkowników w prawidłowym wypełnieniu formularzy mobilnych. W opisywanych formularzach zastosowano walidację w czasie rzeczywistym (ang. Inline Validation), która następuje natychmiast po wypełnieniu pola formularza.
W aplikacji Flipboard wykorzystano dwa sposoby komunikowania błędu. Po wpisaniu nazwy użytkownika, która jest już zajęta, w polu pojawia się czerwona symbol. Niestety, mechanizm ten nie wspomaga użytkownika. Nie wie on jaki błąd popełnił, ani jak go poprawić.
O wiele lepiej wygląda sytuacja, kiedy wpiszemy np. zbyt krótkie hasło. W takim przypadku wyświetlana zostaje informacja „zbyt krótkie” (ang. Too short). Użytkownik od razu wie, w czym tkwi problem. Wątpliwości budzi szary kolor czcionki komunikatu. Czerwień jest bardziej adekwatną barwą w tego typu komunikatach.
Skype
Bardziej przyjazna użytkownikom jest walidacja formularza w aplikacji Skype. Jeśli pole zostanie wypełnione niepoprawnie, pokazany zostaje czerwony symbol oraz rzucający się w oczy dymek objaśniający przyczyny problemów i sposób ich naprawy.
Plusem tego rozwiązania jest oszczędność przestrzeni. Dymki pojawiają się na warstwie, dzięki czemu nie ingerują one w rozmieszczenie elementów formularza.
W aplikacji Twitter po podaniu poprawnych danych, przy prawej krawędzi pola pojawi się odpowiedni symbol (tzw. „ptaszek”). Jeśli dane są niepoprawne, komunikat o błędzie pojawia się pomiędzy polami formularza.
Dobrym rozwiązaniem jest zmiana koloru czcionki niepoprawnie wprowadzonych danych na czerwony. Komunikaty o błędzie pojawiają się bardzo płynnie, bez wrażenia „rozjeżdżania” się formularza. Mogłyby jednak wyróżnia
również kolorem – obecnie wydają się łatwe do przeoczenia.
Nike+
Mniej użyteczny jest mechanizm walidacji formularza w aplikacji Nike+. Komunikaty o błędach wyświetlane zostają, podobnie jak w przypadku Twittera, pod polami formularza. Formularz jest jednak tak skonstruowany, że dla niektórych pól komunikaty nie mogą zostać wyświetlone bezpośrednio pod elementami, których dotyczą.
Ciekawym rozwiązaniem w aplikacji Nike+ jest natomiast automatyczne weryfikowanie siły hasła. Pod polem, w którym wpisywane jest hasło wypisane są kryteria, które powinno ono spełniać. Podczas wpisywania hasła poszczególne elementy zostają automatycznie „odhaczane”. Mechanizm ten ułatwia wymyślenie hasła, które zostanie zaakceptowane przez system.
Sports Tracker
W aplikacji Sports Tracker połączono mechanizm dymków zastosowanych w aplikacji Skype oraz sposób automatycznego weryfikowania danych w Nike+. Podczas wpisywania danych w chmurkach pojawiają się komunikaty, które pokazują stan uzupełnianych w danym momencie pól.
Mechanizm ten jest jednak irytujący. Np. podczas wpisywania adresu e-mail, dopóki nie podamy właściwego formatu danych, wyświetlany zostaje komunikat „wpisz poprawny adres e-mail” (ang. Provide a valid email address).
Z opisanych powyżej przykładów walidacji, najwyżej oceniam formularz aplikacji Skype. Dzięki zastosowanej kolorystyce dymki są wyraźne i nie sposób ich przeoczyć. Umieszczenie komunikatów na warstwie nie ogranicza nas w konstruowaniu treści, ani nie zmienia rozmieszczenia pól formularza.
Zdecydowanie najmniej użytecznym sposobem walidacji błędów jest czerwony symbol wyświetlany po wpisaniu niewłaściwej nazwy użytkownika w aplikacji Flipboard. Brak podania przyczyn błędu uniemożliwia użytkownikowi jego naprawę.
Zainteresowanych zgłębieniem tematu formularzy mobilnych odsyłam do artykułów:
- Removing Stumbling Blocks In Mobile Forms (http://www.smashingmagazine.com/2012/05/03/removing-stumbling-blocks-in-mobile-forms-2/), Theresa Neil, Rich Malley
- 4 rules for displaying error messages from a user experience perspective (http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/), Nomensa
- The Ultimate UX Design of Form Validation (http://designmodo.com/ux-form-validation/), Marcin Treder
- How to Make Your Form Error Messages More Reassuring (http://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/), Anthony
Autor artykułu:
Krzysztof Kozak
krzysztof.kozak@symetria.pl
UX Specialist, Symetria
Logistyk z wykształcenia. Karierę w spedycji porzucił dla poszukiwania błędów w interfejsach. Szczególnie zainteresowany badaniem technologii mobilnych oraz projektowaniem na urządzenia przenośne.
Symetria:
Agencja Symetria – jedyna polska firma zrzeszona w ramach UX Alliance (międzynarodowego stowarzyszenia, skupiającego czołowe agencje user experience). Od 1998 roku eksperci Symetrii realizują projekty dla największych polskich i zagranicznych firm, między innymi: Orange, Philipp Morris International, Credit Agricole, BZ WBK, Link4, Eurobank. http://www.symetria.pl
Zdjęcie tytułowe:
MK-Photo © Więcej zdjęć na Fotolia.pl
