Konferencje

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.

Flipboard

flipboard_2 flipboard_3 Formularz rejestracji w aplikacji Flipboard

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

 skype_1 skype_3 skype_2

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.

Twitter

twitter_1  twitter_2  Twitter_3

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+

nike_1 nike_2 nike_3

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.

nike_4 nike_5

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.

Sports Tracker_1 Sports Tracker_2 Sports Tracker_3

Sports Tracker_4Mechanizm 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:

Autor artykułu:

KKKrzysztof 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:
symetriaAgencja 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

Udostępnij
Zobacz także