blog.testowka.pl

„Inteligentne” formularze

opublikowany przez 31, Mar, 2009, w kategoriach Inne

Formularze html – główny sposób komunikacji pomiędzy użytkownikiem a serwisem internetowym, ba w dobie WEB 2.0 jedena z głównych dróg ingerencji użytkownika w wygląd i treść serwisu. Tylko dlaczego korzystanie z formularzy musi zajmować tyle czasu? Głównym problemem jest walidacja danych – nie możemy pozwalać użytkownikom na wpisywania w pola formularza bzdur – np nr telefonu powinien zawierać 9 cyfr (wraz z numerem kierunkowym), data urodzenia powinna zawierać dzień, miesiąc i rok, ale nikt nie każe nam narzucać użytkownikowi naszego formatu. Dlaczego na przykład nie mogę sobie wpisać daty urodzenia w spoób taki 8.10.2008, lub taki 2009.03.08, albo jeszcze inaczej 2007-10-12? Otuż dlatego, że komuś nie chciało się zaimplementować kilku rodzajów parsowania tych formatów. Oczywiście nie należy przesadzać z udostępnianiem użytkownikom zbyt wielu możliwości ale dopuszczenie kilku logicznych formatów jedynie ułatwi korzystanie z formularza. Problemem możeby być jedynie określenie kolejności, którą wypadałoby podać. Tak tu pojawia się drugi problem – format danych jeśli w ogóle ukazuje się moim oczom robi to przeważnie po ich błędnym wprowadzeniu. Kolejnym problemem który przeważnie powoduje moje całkowite zniechęcenie do danego serwisu jest czyszczenie pól formularzy gdy podaje błędne dane. Nie ma nic gorszego niż wypełnienie 10 pól w formularzu, kliknięcie „OK” i zobaczenie tych samych pustych pól z komunikatem że coś tam było błędne. Podobnie wypełnienie jednego pola ale wymagającego podania dużej ilości danych, np. wpisanie całego adresu. Człowiek istota myśląca, więc popełnia błędy, a im wcześniej mu je pokażemy tym więcej jego czasu zaoszczędzimy. Kolejne cenne sekundy marnuje na odszukanie pól w których popełniłem błąd.

Podsumujmy „Inteligentny” formularz to taki, który nie wymaga ode mnie myślenie (główna zasada usability), dopuszcza różne formaty danych, za wczasu informuje mnie o poprawnym formacie danych, informacje o błędach walidacji wyświetla w czasie rzeczywistym (walidacja po stronie klienta np. JS), zachowuje wprowadzone już dane – nawet te niepoprawne, ustawia focus w miejscu w który napotkał pierwszy błąd (dobrym rozwiązaniem na które ostatnio wpadłem jest ustawianie tabindex po błednej walidacji tylko na polach które zawierają błędy), tam gdzie to możliwe i nie ma zbyt dużego wyboru podsuwa mi listę a nie każe wpisywać oczywistych danych, fajnym podejściem jest sugerowanie domyślnych danych zwłaszcza w przypadku list (np. podczas rejestracji użytkownika w krajowym serwisie, kóra wymaga ode mnie wybrania kraju pochodzenia domyślnie powinna być ustawiona Polska a nie pozycja „wybierz kraj” czy „—-„), ale także dla zwykłych pól formularza.

I co ciężko było? Jak widać dla chcącego nic trudnego, także koleżanki i koledzy projektanci, specjaliści od QA, a także programiści, menagerowie i cała reszta spróbujcie w prosty sposób uczynić życie prostego użytkownika Waszych stron łatwiejszym.


2 Comments for this entry

  • maki

    Im większa dowolność w formularzu użytkownika, im większa „przyjacielskość”, tym większy wkład pracy programisty. Po prostu. Łatwiej nakazać wpisanie daty w konkretnym formacie niż domyślać się, co autor ma na myśli.
    Walidator, który określa dobrze zasady, pozwala ominąć takie błędy ortograficzne jak widniejący w tekście „otuż”, bo tu już pisownia nie jest tak dowolna jak np. w przypadku daty.

  • streser

    W tym poście chodziło właśnie o pokazanie tego, że programowanie, a zwłaszcza programowanie użytkowe nie ma być łatwe dla jego twórców, ale właśnie dla użytkowników. Tak wydawałoby się mało znaczące zmiany jak wspomniane umożliwienie wprowadzania daty w dowolnym formacie (co niestety nie jest do końca możliwe ze względu na to, że w wielu przypadkach nie da się zgadnąć co użytkownik miał na myśli, możliwe byłoby natomiast umożliwianie wprowadzania dowolnych separatorów), czy możliwość podania numeru dowodu z małymi lub wielkimi literami w serii, numeru konta ze spacjami w odpowiednich miejscach, czy numeru NIP z myślnikami, a nawet takie przyszłościowe ficzery jak automatyczne tłumaczenie domen ze znakami narodowymi z UNICODE na ASCII i odwrotnie tam gdzie to potrzebne (bo zupełnie inaczej wygląda xn--testwka-o0a.pl niż testówka.pl) razem sprawiają, że korzystanie z wielu stron internetowych i aplikacji staje się znacznie łatwiejsze, przyjemniejsze i szybsze, a dzięki temu użytkownicy chętniej zostawiają swoje pieniądze na takiej stronie.

    PS. Co do ortografii to faktycznie nie jest ona moją mocną stroną… Dzięki za zauważenie błędu… Wszelkie inne uwagi jak zawsze mile widziane :).

Skomentuj