Paweł Siwek

Użyteczność Aplikacji WWW – Część 1 – formularze

Aplikacje WWW (inaczej aplikacje Web’owe) – są to dynamiczne serwisy internetowe lub intranetowe działające najczęściej w oparciu o serwer aplikacji (np. PHP/ ASP / Java) generujący kod HTML/xHTML strony WWW wysyłany do przeglądarki internetowej w oparciu o dane zgromadzone w serwerze baz danych (najczęściej MySQL , PostgreSQL, Oracle i inne).

Aplikacją WWW może być:

• system CMS obsługujący portal internetowy (back-end np. Mambo, ezPublish) oraz aktywne obszary portali (różnego rodzaju formularze),
• sklep internetowy (np. os commerce , inne)
• system wspierający funkcjonowanie przedsiębiorstw (np.  dotProject, sugar CRM ).
• i inne

W aplikacjach webowych należy zwrócić szczególną uwagę na ergonomię formularzy.

Cechy dobrego formularza to:

• Tekst wprowadzający informujący użytkownika jaki jest cel jego wypełnienia i jakie będzie jego następstwo. Tekst ten nie powinien być jednak zbyt długi aby nie zniechęcić użytkownika do jego przeczytania.
• Intuicyjny układ formularzy w dwóch kolumnach gdzie w prawej kolumnie powinno znajdować się pole formularza, a w lewej:
  • Krótki opis pola (2-3 wyrazy np ‘Kod pocztowy’, ‘Twój wiek’),
  • Oznaczenie czy użytkownik musi wypełnić to pole formularza (np. gwiazdka),
  • Wskazany jest podpowiedź dla użytkownika formularza mówiąca o oczekiwanej poprawnej wartości pola (np. dla numeru NIP ‘10 cyfr rozdzielanych myślnikami np. 555-000-33-22′)
• W miarę możliwości pola formularzy powinny uniemożliwiać wpisanie niepoprawnych wartości. Można to osiągnąć stosując standardowe właściwości elementów HTML formularzy ze wsparciem ze strony Java Script. Dużą bazę gotowych kontrolek Java Script można znaleźć w bibliotekach JQuery.
  Przykłady pól narzucających wprowadzenie poprawnych wartości:
  • Maskowane pole tekstowe które narzuci wpisanie poprawnego np. kodu pocztowego czy numeru NIP (np. http://digitalbush.com/projects/masked-input-plugin/)
  • Pole tekstowe narzucające wprowadzenie wartości numerycznych (np. http://www.texotela.co.uk/code/jquery/numeric/),
• W przypadku pól tekstowych warto w miarę możliwości zastosować podpowiedzi do wprowadzanych wartości. Pozwoli to na uniknięcie literówek i innych błędów w wprowadzaniu danych i przyspieszy użytkownikowi wypełnianie formularza. Przykładem zastosowania podpowiedzi może być pole w które użytkownik ma wprowadzić nazwę miejscowości i podłączenie do niego listy podpowiedzi zawierających największe miasta w Polsce. Gotowe rozwiązanie również znajdziemy w bibliotece Jquery (http://www.dyve.net/jquery/?autocomplete),
• Powinna być sprawdzana poprawność danych formularza, najlepiej po przejściu do następnego pola lub po kliknięciu przycisku wysyłającego formularz (przed przeładowaniem strony za pomocą AJAX / Java scripts), Informacje o braku poprawności powinny znaleźć się przy błędnie wypełnionym polu. Komunikaty o błędach nie powinny być wyświetlane w osobnych oknach (pop-upach),
• Po wysłaniu formularza powinien zostać przedstawiony użytkownikowi komunikat o poprawnym / błędnym przetworzeniu danych z formularza. Jeżeli wystąpił błąd należy przedstawić użytkownikowi sugestię dalszych działań (np. prośbę o wysłanie formularza później, prośbę o poprawienie błędów w wypełnianiu formularza). Jeżeli operacja została przeprowadzona poprawnie dobrze wyświetlić użytkownikowi sugestię co może zrobić dalej w aplikacji (linki),
• W przypadku przeładowania już wysłanego formularza (zakończonego poprawną operacją) powinna zostać wyświetlona użytkownikowi informacja o tym że nie zostały podjęte żadne działania (odświeżenie strony). Zazwyczaj nie powinien zostać 2x dodana/zmodyfikowana/usunięta ta sama informacja.

Aplikacje WWW to oczywiście dużo więcej niż tylko formularze. Inne czynniki ergonomiczne omówię w kolejnych postach.