ul. Warszawska 24, 31-155 Kraków tel/fax (+48 12) 628 20 41 e-mail: [email protected] internet: www.iigw.pl
INSTYTUT INŻYNIERII I GOSPODARKI WODNEJ
POLITECHNIKA KRAKOWSKA im. TADEUSZA KOŚCIUSZKI
Joanna Burawa
PROJEKTOWANIE FUNKCJONALNYCH I DOSTĘPNYCH APLIKACJI
INTERNETOWYCH NA PRZYKŁADZIE BAZY POMIARÓW
HYDROMETEOROLOGICZNYCH
praca magisterska
studia dzienne kierunek studiów: informatyka specjalność: informatyka stosowana w inżynierii środowiska promotor: dr inż. Robert Szczepanek nr pracy: 2068
data złożenia: ................................
KRAKÓW 2007
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
2
1. WSTĘP ...................................................................................................................................... 4 2. PODSTAWOWE POJĘCIA ................................................................................................. 6
2.1. UŻYTECZNOŚĆ SERWISÓW INTERNETOWYCH ..................................................................... 6 2.2. DOSTĘPNOŚĆ SERWISÓW INTERNETOWYCH ....................................................................... 8
3. ZASADY TWORZENIA FUNKCJONALNYCH, UŻYTECZNYCH I DOSTĘPNYCH INTERFEJSÓW ............................................................................................... 13
3.1. NAWIGACJA....................................................................................................................... 13 3.1.1. Rodzaje systemów nawigacyjnych .................................................................... 13 3.1.2. Nawigacja strukturalna ......................................................................................... 14 3.1.3. Nazewnictwo serwisów internetowych ............................................................. 15 3.1.4. Odnośniki jako elementy nawigacji ................................................................... 15 3.1.5. Zwiększanie funkcjonalności schematu nawigacyjnego .............................. 16
3.2. KASKADOWE ARKUSZE STYLÓW........................................................................................ 16 3.2.1. Kaskadowe arkusze stylów jako element zwiększający dostępność witryny..................................................................................................................................... 17
3.3. KOLORY............................................................................................................................. 18 3.3.1. Zasady doboru kolorów......................................................................................... 19 3.3.2. Kontrast ..................................................................................................................... 22
3.4. TYPOGRAFIA ...................................................................................................................... 23 3.5. FORMULARZE .................................................................................................................... 27
3.5.1. Projektowanie defensywne podczas tworzenia formularzy ........................ 28 3.5.2. Walidacja formularzy ............................................................................................. 32
3.6. KLAWISZE SKRÓTU ........................................................................................................... 34 3.6.1. Skróty klawiszowe i ich implementacja w przeglądarkach internetowych 34 3.6.2. Standardy tworzenia skrótów klawiszowych .................................................. 37 3.6.3. Sposoby informowania o klawiszach skrótu ................................................... 37
4. TECHNOLOGIE STOSOWANE PODCZAS TWORZENIA APLIKACJI.............. 39 4.1. PHP .................................................................................................................................. 39 4.2. MYSQL ............................................................................................................................. 40 4.3. JAVASCRIPT ...................................................................................................................... 40 4.4. CSS .................................................................................................................................. 42 4.5. AJAX ................................................................................................................................ 43
5. OPIS ZAPROJEKTOWANEJ APLIKACJI ................................................................... 48 5.1. NAWIGACJA W OBRĘBIE APLIKACJI................................................................................... 48
5.1.1. Konwencje w nawigacji, struktura nawigacji globalnej............................... 49 5.1.2. Nawigacja jako element architektury informacji........................................... 51 5.1.3. Systemy nawigacji lokalnej ................................................................................. 52 5.1.4. Nawigacja strukturalna ......................................................................................... 54
5.2. CSS .................................................................................................................................. 54 5.3. KOLORYSTYKA ZAPROJEKTOWANEJ APLIKACJI .................................................................. 56
5.3.1. Kontrast, zasady doboru kontrastu pomiędzy tekstem a tłem ................. 56 5.3.2. Dobór kolorystyki aplikacji ze względu na osoby z upośledzeniami wzroku58
5.4. TYPOGRAFIA W APLIKACJI................................................................................................. 60 5.4.1. Zasada doboru rozmiarów fontów ..................................................................... 60 5.4.2. Zasady doboru kroju pisma a czytelność ........................................................ 61 5.4.3. Relatywny schemat rozmiarów czcionek ......................................................... 63 5.4.4. Dobór fontów ze względu na użytkowników z upośledzeniami wzroku .. 64
5.5. FORMULARZE JAKO PODSTAWOWY ELEMENT APLIKACJI.................................................... 65 5.5.1. Elementy języka HTML wpływające na funkcjonalność formularza......... 65 5.5.2. Logiczna sekwencja elementów formularza. .................................................. 67
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
3
5.5.3. Auto-wypełnianie pól tekstowych formularza treścią. ................................. 69 5.5.4. Funkcjonalność formularzy .................................................................................. 70
5.6. UŻYCIE KLAWISZY SKRÓTU............................................................................................... 74 6. TESTY FUNKCJONALNOŚCI ZAPROJEKTOWANEJ APLIKACJI ..................... 77
6.1. PLANOWANIE TESTÓW ...................................................................................................... 77 6.2. CZAS TRWANIA TESTÓW ................................................................................................... 78 6.3. TWORZENIE, PRZEPROWADZANIE TESTÓW....................................................................... 79
7. PODSUMOWANIE .............................................................................................................. 83 8. WNIOSKI .............................................................................................................................. 85
BIBLIOGRAFIA: .......................................................................................................................... 88 ZASOBY INTERNETOWE: ........................................................................................................ 90 SPIS RYSUNKÓW:...................................................................................................................... 91 SPIS TABEL: ................................................................................................................................. 93 ABSTRAKT ..................................................................................................................................... 94
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
4
1. Wstęp
Użytkownicy w dzisiejszych czasach stawiają coraz to wyższe
wymagania w stosunku do serwisów internetowych, przez co stają się coraz
mniej tolerancyjni na wszelkie błędy i niedopatrzenia projektantów.
Spowodowało to, że temat tworzenia funkcjonalnych, dostępnych serwisów
internetowych stał się bardzo popularny.
Funkcjonalność ma kluczowe znaczenie dla użytkowników, jest
atrybutem jakości, miarą tego jak szybko i łatwo użytkownik nauczy się
korzystać z aplikacji, jak efektywny jest podczas jej używania. Ponadto określa
jak bardzo komfortowe dla użytkownika jest korzystanie z danej aplikacji i czy
jest ona pozbawiona błędów.
Drugim ważnym zagadnieniem poruszonym w pracy jest dostępność
aplikacji internetowych. W ostatnich latach wzrosła świadomość, że aplikacje
internetowe powinny być dostępne dla wszystkich niezależnie od fizycznych
oraz sprzętowych ograniczeń. W niektórych krajach powstały uregulowania
prawne zabraniające publikacji stron nie spełniających zasad dostępności.
Dostępność dotyczy wszystkich, a szczególnie osób starszych,
niepełnosprawnych, korzystających ze starszych wersji przeglądarek
internetowych, dysponujących wolnymi łączami internetowymi.
Celem niniejszej pracy jest zgromadzenie i zaprezentowanie teorii
związanej z tworzeniem funkcjonalnych, dostępnych aplikacji internetowych
oraz stworzenie przykładowego systemu, którego budowa oparta jest na tychże
zasadach. Praca opisuje oraz tłumaczy zagadnienia projektowania użytecznych
oraz dostępnych interfejsów, przedstawia niezbędne informacje pozwalające na
zaprojektowanie ergonomicznego systemu.
Stworzenie ergonomicznego serwisu wymaga od projektanta znajomości
teorii funkcjonalności oraz nakłada pewne ograniczenia bez spełnienia których
aplikacja traci swoją użyteczność. Projektując funkcjonalny oraz dostępny
system, projektant musi wziąć pod uwagę wiele czynników takich jak:
kolorystyka aplikacji, dobór czcionek, zaprojektowanie nawigacji zgodnie
z oczekiwaniami użytkownika, zaprojektowanie prostych w obsłudze
formularzy, zadbanie o to, aby treści znajdujące się na stronie były czytelne
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
5
oraz przejrzyste. Najważniejszym elementem zaprojektowanego systemu są
formularze oraz tabele pozwalające na wprowadzanie danych
hydrometeorologicznych. Zaprojektowano je tak, aby maksymalnie ułatwić
użytkownikowi wprowadzanie danych.
Rozdział pierwszy stanowi wstęp do pracy.
Rozdział drugi opisuje pojęcia dostępności oraz funkcjonalności
serwisów internetowych.
Rozdział trzeci przedstawia teorię związaną z zasadami tworzenia
użytecznych oraz funkcjonalnych interfejsów. Opisano w nim zasady odnoszące
się do projektowana nawigacji, formularzy, dobierania czcionek, kolorów.
Rozdział czwarty przedstawia technologie, których użyto do budowy
aplikacji będącej ważną częścią serwisu. Przedstawiono wady oraz zalety
wybranych technologii.
Rozdział piąty opisuje zaprojektowaną aplikację oraz zastosowane
techniki, które pozwalają na zwiększenie funkcjonalności oraz dostępności.
Rozdział szósty opisuje testy funkcjonalności przeprowadzone na grupie
pięciu użytkowników. Celem testów było sprawdzenie przedstawionych tez
odnoszących się do funkcjonalności aplikacji.
Rozdział siódmy zawiera wnioski oraz podsumowanie pracy.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
6
2. Podstawowe pojęcia
Użyteczność (ang. usability, web-usability) - nauka zajmująca się
ergonomią i funkcjonalnością urządzeń oraz aplikacji. W Polsce pojęcie
użyteczności stosowane jest zazwyczaj w odniesieniu do ergonomii serwisów
WWW oraz aplikacji użytkowych. Norma ISO 9241 definiuje użyteczność jako
miarę, zgodnie z którą dany produkt może być używany dla osiągnięcia celów
użytkowników w sposób wydajny, efektywny i zadowalający. Funkcjonalność
jest synonimem słowa użyteczność [Nielsen, 2004].
Dostępność (ang. accessibility) - jest zbiorem standardów oraz dobrych
praktyk opisujących metody i wytyczne tworzenia serwisów WWW w sposób
umożliwiający wygodny dostęp jak najszerszemu gronu odbiorców, w tym
użytkownikom, którzy oczekują ułatwień w dostępie [Nielsen, 2007]:
Osoby niewidzące i niedowidzące.
Osoby starsze.
Użytkownicy mniej popularnych przeglądarek.
Użytkownicy nowoczesnych urządzeń przenośnych.
2.1. Użyteczność serwisów internetowych
Funkcjonalność jest cechą jakości, która pozwala oszacować w jakim
stopniu interfejs użytkownika jest prosty w użytkowaniu. Odnosi się do metod,
które pozwalają na ulepszenie użyteczności interfejsu.
Łatwość korzystania z interfejsu, jego użyteczność jest definiowana przy
pomocy pięciu cech:
Czytelność interfejsu - określana jest na podstawie tego jak prosta dla
użytkownika jest realizacja podstawowych zadań wykonywanych
podczas użytkowania interfejsu, z którymi dany użytkownik zetknął się po
raz pierwszy
Wydajność, efektywność - polega na sprawdzeniu jak szybko użytkownicy
będą w stanie wykonywać zadania, gdy nauczy się ich obsługiwać
interfejs
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
7
Zdolność zapamiętywania w jaki sposób należy obsługiwać interfejs -
polega na sprawdzeniu jak proste będzie dla użytkownika biegłe
obsługiwanie interfejsu po pewnym okresie czasu, w którym użytkownik
nie miał z nim styczności
Błędy - sprawdzamy jak wiele błędów robi użytkownik podczas użytkowania
interfejsu, jak poważne są to błędy, jak szybko użytkownik jest sobie
w stanie poradzić z tymi problemami Zadowolenie z pracy z interfejsem - polega na określeniu komfortu
korzystania z serwisu
Prócz wymienionych powyżej cech, związanych z jakością projektu,
można by wymieniać jeszcze wiele innych. Klucz do stworzenia przyjaznego dla
użytkownika interfejsu jest jeden, mianowicie - musi on być użyteczny.
Użyteczności i funkcjonalność są bardzo istotnymi cechami interfejsu. Źle
zaprojektowany system hipotetycznie jest w stanie robić to, czego od niego
oczekujemy, niestety nie jesteśmy w stanie efektywnie z niego korzystać.
Jeżeli chodzi o aplikacje internetowe - funkcjonalność jest warunkiem
przetrwania serwisu. Jeżeli serwis internetowy jest skomplikowany w użyciu -
użytkownicy rezygnują z jego odwiedzania. Jeżeli na stronie głównej serwisu są
częste awarie, bądź jej zawartość jest nieczytelna lub uszkodzona -
użytkownicy rezygnują z wizyt. Jeżeli informacje zamieszczone na stronie są
nieczytelne, użytkownik nie jest w stanie odnaleźć interesującej go informacji,
opuszcza serwis.
Jeżeli chodzi o aplikacje intranetowe, funkcjonalność wpływa na
wydajność pracy osób obsługujących interfejs. Jeżeli użytkownik aplikacji
będzie musiał spędzić dużo czasu na myśleniu; w jaki sposób działa dana
aplikacja oraz w jak należy wykonać zadanie - jego praca będzie nieefektywna.
Osobom zlecającym zaprojektowanie aplikacji oraz projektantom zaleca
się, aby przeznaczyli 10% z budżetu na planowanie oraz testowanie
użyteczności.
Istnieje wiele sposobów poprawiania funkcjonalności, jednak
najpopularniejszą metodą są testy przeprowadzane na użytkownikach które
składają się z trzech etapów:
Zebranie kilku reprezentatywnych użytkowników danej aplikacji
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
8
Poproszenie użytkowników, żeby wykonywali pewnie zadania, związane
z funkcjonalnością zaplanowanego interfejsu
Obserwowanie zachowań użytkowników, ze zwróceniem szczególnej
uwagi na to, czy udaje się im sprawnie korzystać z interfejsu, gdzie najczęściej
pojawiają się problemy.
Ważną rzeczą jest, aby testy przeprowadzać indywidualnie, jeżeli
użytkownik napotka na jakąś trudność - powinniśmy mu pozwolić ją rozwiązać
samemu. Jeżeli zaczynamy pomagać użytkownikowi, bądź kierunkujemy go
w stronę rozwiązania, nasz test nie przyniesie poprawnego rezultatu.
Zazwyczaj do testów funkcjonalności wybiera się grupę pięciu osób,
w praktyce, taka ilość testerów jest wystarczająca do zidentyfikowania
najważniejszych problemów związanych z użytecznością, dostępnością.
Bardziej skuteczne jest stosowanie dużej ilości małych testów niż dużych,
drogich i czasochłonnych studiów. Po wykonaniu małego testu, jeżeli wykaże
on, iż należy poprawić jakiś aspekt użyteczności, można od razu dokonać
zmiany. Pozwoli to na sukcesywne eliminowanie słabych punktów
zaprojektowanego interfejsu. Interaktywne projektowanie interfejsu jest
najlepszą drogą do zwiększenia funkcjonalności. Im więcej wersji oraz
pomysłów będziemy testowali na użytkownikach, tym lepszy będzie
zaprojektowany przez nas interfejs. Podczas testowania funkcjonalności zaleca
się obserwowanie czynności wykonywanych przez użytkownika, jego interakcji
z interfejsem. Wysłuchanie tego, co użytkownicy mają do powiedzenia czasem
bywa mylące, o wiele lepsze rezultaty przynosi obserwacja ich działań.
2.2. Dostępność serwisów internetowych
Wytyczne dotyczące dostępności serwisów internetowych zostały
opisane w dokumencie W3C1 - Web Content Accessibility Guidelines.
1 World Wide Web Consortium, w skrócie W3C, to organizacja, która zajmuje się ustanawianiem standardów pisania i przesyłu stron WWW. Została założona 1 października 1994 roku przez Tima Berners-Lee, twórcę WWW oraz autora pierwszej przeglądarki internetowej i serwera WWW. W3C jest obecnie zrzeszeniem ponad 400 organizacji, firm, agencji rządowych i uczelni z całego świata. Publikowane przez W3C rekomendacje nie mają mocy prawnej, nakazującej ich użycie, pozycja w środowisku IT organizacji nie pozwala się z nią nie liczyć.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
9
Istnieje 14 zaleceń dotyczących dostępności i zostały one podzielone na
trzy grupy priorytetów.
Poniżej znajduje się lista zaleceń podzielona ze względu na grupy
priorytetów, lista ta jest tłumaczeniem angielskiej wersji dokumentu „Web
Content Accessibility Guidelines 1.0” dostępnego w oryginalnej wersji pod
adresem: http://www.w3.org/TR/WCAG10/. Na tychże zaleceniach opiera
się teoria budowania dostępnej nawigacji, formularzy, budowania kaskadowych
arkuszy stylów, teoria doboru fontów, projektowanie dostępu do strony za
pomocą myszki i klawiatury.
Tabela 2.2.1 Zestawienie priorytetów pierwszego poziomu sformułowanych przez organizację
W3C
Priorytety pierwszego poziomu
1.1 Należy zapewnić tekstowy odpowiednik dla każdego nie-tekstowego elementu (np. poprzez "alt")
1.2
Konieczne jest zdublowanie odnośnikiem tekstowym każdego aktywnego elementu mapy odsyłaczy generowanych po stronie serwera. (np. jeżeli ustawimy odsyłacz do pod strony będący obrazkiem musimy zapewnić dla niego odnośnik tekstowy)
2.1 Należy mieć pewność, że wszystkie informacje wyrażone kolorem są dostępne także bez koloru, np wynikają z kontekstu lub znacznika.
5.1 Tabele danych muszą mieć określone nagłówki wierszy i kolumn.
5.2
Tabele danych posiadające dwa lub więcej poziomy logiczne nagłówków wierszy lub kolumn muszą mieć zdefiniowane znaczniki by powiązać komórki danych z komórkami nagłówków.
6.1 Dokumenty muszą być czytelne bez arkuszy stylów.
6.2
Odpowiedniki dynamicznej zawartości muszą być aktualizowane zawsze, kiedy zmienia się dynamiczna zawartość. (np. jeżeli na stronie znajduje się jakaś grafika powiązana z tekstem, w przypadku zmiany tekstu musimy zmienić grafikę)
6.3 Strony muszą być funkcjonalne również kiedy skrypty, aplety lub inne obiekty programistyczne są wyłączone lub nie wspierane.
12.1 Każda ramka musi być zatytułowana aby ułatwić identyfikację ramek i nawigację.
14.1 Należy używać możliwie najbardziej przejrzystego i prostego języka, stosownie do treści witryny.
Priorytety pierwszego poziomu muszą być stosowane. W przeciwnym
razie, niektóre z osób nie będą miały dostępu do informacji zawartych w obrębie
serwisu. Chodzi tu o użytkowników z różnego rodzaju upośledzeniami, osoby
posiadające starsze wersje przeglądarek internetowych, pracujące na różnych
systemach operacyjnych, korzystające z wolnych łącz internetowych. Aplikacja
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
10
internetowa, w obrębie której zostały zastosowane wytyczne zamieszczone
w (Tab. 2.2.1), osiąga minimalny poziom dostępności.
Tabela 2.2.2 Zestawienie priorytetów drugiego poziomu sformułowanych przez organizację
W3C
Priorytety drugiego poziomu
2.2
Upewnij się, że różnica pomiędzy kolorem elementu a kolorem tła zapewnia dostateczny kontrast także dla osób mających zaburzenia widzenia kolorów oraz kiedy jest widziana na czarno-białym wyświetlaczu.
3.1 Zalecane jest użycie języka znaczników jeżeli istnieje właściwy niż obrazu do przekazywania informacji.
3.2 Zaleca się tworzenie dokumentów z formalnie poprawną składnią.
3.3 Zaleca się używanie arkuszy stylów do utworzenia projektu graficznego i określenia wyglądu.
3.4 Powinno się stosować raczej relatywne niż absolutne jednostki wielkości w wartościach atrybutów języka znaczników i wartościach własności arkuszy stylów.
3.5 Zalecane jest używanie elementów nagłówka do wyrażenia struktury dokumentu i używanie ich zgodnie ze specyfikacją.
3.6 Należy we właściwy sposób tworzyć zarówno listy jak i elementy.
3.7
Zalecane jest używanie właściwych znaczników dla oddania cytatów. Nie używaj znaczników określających cytaty dla uzyskania efektów formatowania tekstu, jak np. do uzyskania wcięć.
5.3
Nie jest zalecane używanie tabel do tworzenia graficznego projektu jeżeli po rozciągnięciu nie zachowuje on odpowiedniego wyglądu. W przeciwnym wypadku należy zachować alternatywny odpowiednik.
5.4 Jeśli tabela jest użyta do tworzenia projektu graficznego, nie należy używać żadnych znaczników strukturalnych w celu uzyskania formatowania wizualnego.
6.4 Należy upewnić się, że skrypty i aplety korzystają z przechwytywania zdarzeń niezależnego od urządzeń.
6.5 Należy mieć pewność, że dynamiczna zawartość spełnia wymogi dostępności lub zapewnić alternatywną prezentację lub stronę.
7.3 Dopóki oprogramowanie nie pozwala na wyłączenie poruszania się ruchomej zawartości, należy unikać ruchu na stronach.
7.4 Dopóki oprogramowanie nie zapewni możliwości zatrzymania odświeżania nie należy tworzyć samoczynnie odświeżających się stron.
7.5
Dopóki oprogramowanie nie zapewni możliwości zatrzymania automatycznego przekierowania, nie należy używać znaczników pozwalających na automatyczne przekierowanie stron. Zamiast tego zaleca się konfigurację serwera w taki sposób, aby on sam wykonywał przekierowania.
8.1 Skrypty i aplety same w sobie powinny spełniać wymogi dostępności bądź powinny być kompatybilne
9.2 Funkcjonalność elementów posiadających własny interfejs powinna być niezależna od sprzętu.
9.3 W skryptach używaj przechwytywania zdarzeń opartego raczej na warunkach logicznych niż zależnego od sprzętu.
10.1 Jeżeli nie ma możliwości wyłączenia wyskakujących okien nie zaleca się ich używania, ponadto nie należy zmieniać bieżącego okna nie informując o tym użytkownika.
10.2
Jeżeli oprogramowanie nie będzie w stanie wyrazić powiązań pomiędzy etykietami, a polami formularza zawsze kiedy istnieje pomiędzy nimi związek - należy umiejscawiać etykietę w taki sposób aby powiązanie było czytelne i jasne dla użytkownika.
11.2 Technologii W3C należy używać kiedy są dostępne i kiedy jest to właściwe dla zadania.
12.2 Opisz cel/przeznaczenie każdej ramki i ich wzajemne powiązania, o ile nie wynika to w oczywisty sposób z samych ich tytułów.
12.3 Zaleca się dzielenie większych bloków informacji na mniejsze, bardziej czytelne grupy tam, gdzie jest to naturalne i właściwe.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
11
12.4 Etykiety formularza muszą być powiązane w wyraźny sposób z polami formularza do których się odnoszą.
13.1 Cel każdego odnośnika musi być określony w przejrzysty sposób. 13.2 Zapewnij metadane by dodać semantyczną informację do stron i witryn.
13.3 Zaleca się umieszczenie informacji o ogólnej budowie witryny (np. mapa strony lub spis treści).
13.4 Mechanizmy nawigacyjne muszą być używane w konsekwentny sposób.
Priorytety drugiego poziomu powinny być stosowane. W przeciwnym
razie, niektóre grupy osób będą miały utrudniony dostęp do informacji
zawartych w obrębie serwisu internetowego. Spełnienie wymogów tego punktu
w znacznym stopniu usuwa bariery związane z dostępem do dokumentów
zawartych w Internecie. Aplikacja internetowa, w obrębie której zostały
zastosowane wytyczne zamieszczone w (Tab. 2.2.2), osiąga rozszerzony
poziom dostępności.
Tabela 2.2.3 Zestawienie priorytetów trzeciego poziomu sformułowanych przez organizację
W3C
Priorytety trzeciego poziomu
4.2 Należy określić rozwinięcie każdego skrótu lub akronimu tam, gdzie pojawia się po raz pierwszy w dokumencie.
4.3 Zaleca się zadeklarowanie głównego języka naturalnego dokumentu. 9.4 Należy utworzyć logiczny porządek tabulacji odnośników, pól formularza i obiektów.
9.5 Należy zapewnić skróty klawiaturowe do ważnych odnośników (także tych w mapach odsyłaczy wykonywanych po stronie klienta), pól formularza i grup pól formularza.
10.4
Jeżeli oprogramowanie nie będzie w stanie w poprawny sposób poradzić sobie z pustymi polami formularza należy umieścić domyślne, zajmujące miejsce wartości w polach edycyjnych i tekstowych.
10.5
Jeżeli oprogramowanie nie będzie w stanie odczytać sąsiadujących odnośników oddzielnie, zaleca się umieszczenie pomiędzy nimi drukowalnych (otoczonych spacjami) znaków, które nie są odnośnikami.
11.3 Informacja musi być udostępniona w taki sposób aby użytkownicy mogli otrzymać dokumenty zgodnie z ich preferencjami (np. język, typ zawartości itp.).
13.5 Należy zapewnić paski nawigacyjne, żeby podkreślić i udostępnić mechanizmy nawigacji. 13.6 Powiązane ze sobą odnośniki muszą być zgrupowane.
13.7 Jeśli udostępnione są funkcje przeszukiwania powinno się umożliwić różne typy przeszukiwań, uwzględniające różnice umiejętności i potrzeb.
13.8 Zaleca się wyróżnienie w wyraźny sposób początków nagłówków, paragrafów, list itp.
13.9 Zalecane jest udostępnienie informacji o zbiorach dokumentów (np. dokumentów podzielonych na wiele stron).
14.3 Styl prezentacji musi być konsekwentny na wszystkich stronach.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
12
Priorytety trzeciego poziomu mogą być stosowane przez projektanta. Ich
zastosowanie oznacza, że w żaden sposób nie utrudnia się dostępu do
zawartości witryny. Zastosowanie priorytetów trzeciego poziomu dodatkowo
poprawia funkcjonalność.
Zależnie od stopnia realizacji priorytetów pierwszego, drugiego
i trzeciego stopnia wyróżnia się trzy standardy dla serwisów internetowych
[ http://www.w3.org/TR/WCAG20/]:
Zgodność poziomu A – zgodność ze wszystkimi priorytetami poziomu
pierwszego
Zgodność poziomu AA – zgodność ze wszystkimi priorytetami
pierwszego i drugiego poziomu
Zgodność poziomu AAA – zgodność ze wszystkimi priorytetami
pierwszego, drugiego i trzeciego poziomu
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
13
3. Zasady tworzenia funkcjonalnych, użytecznych
i dostępnych interfejsów
Tworzenie funkcjonalnych, użytecznych oraz dostępnych aplikacji
wymaga od projektanta znajomości wielu reguł, metod i zasad. W rozdziale
omówione zostaną zasady związane z funkcjonalnym i dostępnym
projektowaniem takich elementów interfejsu jak: nawigacja, formularze,
klawisze skrótu. Ponadto przedstawiono reguły związane z typografią oraz
doborem kolorów.
3.1. Nawigacja
Systemy nawigacyjne są częścią składową architektury informacji.
Struktura większości witryn jest hierarchiczna, jej kolejne poziomy zawierają
coraz bardziej szczegółowe informacje. Prócz struktury hierarchiczną istnieje
również struktura tabelaryczna, cechuje ona strony uporządkowane według
różnych atrybutów czy też parametrów.
Funkcje nawigacji pomagają nam w odnalezienie tego, czego szukamy,
informują nas, gdzie aktualnie się znajdujemy. Nawigacja przekazuje informacje
o tym, co zawiera witryna. Ponadto, mówi w jaki sposób należy korzystać
z witryny. Dobrze przemyślany system nawigacji jest jednym z najważniejszych
czynników, które pomagają wzbudzić zaufanie wśród użytkowników.
3.1.1. Rodzaje systemów nawigacyjnych
W większości serwisów internetowych stosowane są trzy typy
wbudowanych systemów nawigacyjnych [Rosenfeld, 2003].
Nawigacja globalna – odnosi się do całego serwisu WWW, wskazane jest aby
znajdowała się na każdej stronie. Wyjątkiem są: strona główna – jej
konstrukcja różni się od konstrukcji pozostałych stron, formularze – na
stronach wymagających wypełniania formularzy, nawigacja może
w pewien sposób rozpraszać użytkownika. Najczęściej stosowana jest
w postaci paska nawigacyjnego umieszczonego na górze strony.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
14
Umożliwia bezpośredni dostęp do głównych obszarów serwisu
niezależnie od tego, na jakim poziomie hierarchii serwisu użytkownik
aktualnie się znajduje
Nawigacja lokalna – odpowiada za interakcję w obrębie zawartości danej pod
strony, niektóre serwisy internetowe integrują ze sobą elementy
nawigacji globalnej i lokalnej
Nawigacja kontekstowa – czasem niektóre elementy nie dają się dopasować
do podziału na kategorie, czyli do systemów globalnej i lokalnej
nawigacji. Stąd wzięła się potrzeba stworzenia nawigacji kontekstowej.
Łącza nawigacji kontekstowej są odwołaniami do stron z podobnymi
usługami, produktami, tematami.
3.1.2. Nawigacja strukturalna
Nawigacja strukturalna są to zwyczajowo nazwane ścieżki powrotu.
Przez długi czas ścieżki powrotu były wykorzystywane jedynie przez witryny
będące wielkimi bazami danych. Ostatnio, coraz częściej zaczynają się
pojawiać w większej ilości serwisów, pełniąc rolę jednego z elementów
nawigacji.
Najważniejsze zasady dotyczące projektowania ścieżek powrotu:
umieszczanie ścieżek powrotu na górze strony, testy przeprowadzone na
użytkownikach wykazały, iż najlepiej spełniają one swoją rolę, gdy umieści się
je na samej górze strony, ponad wszystkim innym, umieszczenie ich niżej
powoduje, że użytkownik musi się zastanawiać z którego elementu
nawigacyjnego powinien skorzystać (nawigacji globalnej czy też ze ścieżek
powrotu)
używanie znaku (>) pomiędzy kolejnymi poziomami hierarchii, czasami
projektanci interfejsu stosują (:) bądź (/), te znaki separacji są poprawne jednak
testy na użytkownikach wykazały, że znak (>) jest najbardziej intuicyjny
zalecane jest używanie niewielkich rozmiarów czcionek, jeżeli ścieżki
powrotu nie są głównym elementem nawigacji na stronie
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
15
ostatni element wyróżniamy pogrubioną czcionką, ostatnia pozycja listy
powinna być wyróżniona pogrubioną czcionką, a jednocześnie powinna być
nazwą bieżącej strony
Ostatniego elementu ścieżki powrotu nie powinniśmy traktować jako
zmiennika dla nazwy strony, tego typu rozwiązanie nie sprawdza się,
użytkownicy oczekują, aby nagłówki będące tytułami stron były wyrównane do
lewej bądź wyśrodkowane.
3.1.3. Nazewnictwo serwisów internetowych
Obowiązują cztery zasady dotyczące nazw stron internetowych:
każda strona powinna mieć swoja nazwę, wyróżnienie nazwy strony
w elementach nawigacyjnych nie wystarcza
nazwa strony musi być umieszczona w odpowiednim miejscu,
w hierarchii strony powinna otaczać swoją konstrukcyjną zawartość, która jest
charakterystyczna dla tej strony
nazwa strony musi się wyróżniać, dzięki położeniu, rozmiarowi i kolorowi
czcionki, krojowi pisma
nazwa strony musi być zgodna z nazwą linka, na który się kliknęło
3.1.4. Odnośniki jako elementy nawigacji
Na stronach internetowych można wyróżnić następujące rodzaje
odnośników [Nielsen, 2004]:
Odnośniki osadzone – zwykły tekst najczęściej wyróżniony poprzez
podkreślenie, wskazujący, że możemy znaleźć więcej informacji dany
temat
Odnośniki strukturalne – wskazują na inny poziom struktury witryny oraz na
strony równorzędne i podrzędne w hierarchii. Ważne jest, aby na każdej
stronie umieszczone były takie same donośniki, aby użytkownik wiedział,
jakich elementów nawigacji może się spodziewać.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
16
Odnośniki asocjacyjne – dają możliwość przejścia do stron powiązanych
z witryną
Najlepszą praktyką jest prezentacja odnośników w formie podkreślonego
tekstu, zaleca się również zachowanie standardowego koloru. Problemy
z funkcjonalnością występują również w przypadku odnośników innych niż
zwykły tekst, chodzi tu na przykład o menu rozwijalne, odnośniki graficzne. Te
elementy ze względu na to, że nie posiadają cech odnośników tekstowych,
mogą powodować problemy w rozumieniu sposobu ich działania przez
użytkownika.
3.1.5. Zwiększanie funkcjonalności schematu nawigacyjnego
W interfejsie nawigacyjnym nie da się przedstawić konkretnych obiektów.
Aby zwiększyć funkcjonalność stosuje się pewnie metody poprawiające
uporządkowanie elementów [Nielsen, 2004]:
Grupowanie (agregacja) – wyświetlenie pojedynczego obiektu
reprezentującego grupę obiektów, łatwa do wprowadzenia w obrębie
pojedynczej witryny Streszczanie – sposób przedstawiania większej ilości danych za pomocą
mniejszej ilości informacji, obejmuje również użycie mniejszych obrazków
w celu przedstawienia większych Filtrowanie – usuwanie całych zbiorów niepotrzebnych informacji, szczególnie
ważne jest filtrowanie według jakości - polega na wyświetlaniu tylko tych
informacji które użytkownicy uznali za przydatne, wartościowe Odwzorowania oparte na przykładach – polega na pokazaniu kilku
reprezentatywnych przykładów zamiast wyświetlania całej treści
3.2. Kaskadowe arkusze stylów
Na początku Internetu istniał sam tekst, dostępne były jedynie
przeglądarki tekstowe. Gdy pojawiły się przeglądarki graficzne, projektanci
odkryli, że w przeciwieństwie do technik składu tekstu, gdzie posiadano pełną
kontrolę nad wszystkim, co znajduje się na danej stronie, HTML nie posiadał
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
17
dostatecznie dobrej kontroli nad formatowaniem strony. HTML w zamierzeniu,
został opracowany jedynie po to, aby za jego pomocą prezentować dokumenty
naukowców. Polecenia do formatowania tekstu były stosunkowo prymitywne.
Precyzyjne umieszczanie elementów na stronie było w niektórych przypadkach
niezmiernie trudne. Niejednokrotnie, ta sama strona wyglądała zupełnie inaczej
w każdej z dostępnych przeglądarek internetowych. Aby odzyskać kontrolę nad
zawartością strony, projektanci interfejsu oraz programiści zaczęli stosować
tabele, pomagające w definiowaniu wyglądu stron. Przez wiele lat jedynym
sposobem kontroli położenia elementów było ich umieszczanie w tabelach,
a tych tabel w innych tabelach, co bardzo zaciemniało strukturę. Programiści
zaczęli stosować komendy HTML niezgodnie z ich pierwotnym
przeznaczeniem, aby uzyskać większą kontrolę nad formatowaniem.
W 1998r, grupa projektantów pod nazwą The Standard Project, zaczęła
przekonywać projektantów przeglądarek do wspierania standardów
internetowych. Zaczęli oni tworzyć interfejsy niekompatybilne z poprzednimi
wersjami przeglądarek. Starsze wersje przeglądarek nie obsługiwały
popularnych standardów takich jak CSS. Dzięki takiemu postępowaniu
zachęcali innych do stosowania kaskadowych arkuszy stylów.
Twórcy witryny CSS Zen Garden2 udowodnili, że możliwe jest tworzenie
świetnie wyglądających, profesjonalnych stron internetowych za pomocą CSS
(ang. Cascading Style Sheets). Opis technologii CSS zamieszczono
w rozdziale czwartym - Technologie zastosowane podczas tworzenia aplikacji.
3.2.1. Kaskadowe arkusze stylów jako element zwiększający
dostępność witryny
Kaskadowe arkusze stylów są obecnie obsługiwane przez prawie
wszystkie przeglądarki internetowe. Korzyści z ich stosowania są bardzo duże.
W dzisiejszych czasach praktycznie nie tworzy się serwisów internetowych bez
ich wykorzystania. Podstawowe zalety kaskadowych arkuszy stylów:
w ogromnym stopniu zwiększają kontrolę nad formatowaniem elementów
witryny 2 Wygląd pojedynczej strony internetowej którą możemy znaleźć pod adresem http://ww.csszengarden.com był zależny od wybranego przez użytkownika arkusza stylów
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
18
są niezwykle elastyczne, pojedyncza zmiana w arkuszu może zmienić
wygląd całej witryny lub wygenerować liczne jej odmiany
zachowują się podobnie w różnych przeglądarkach internetowych
Zastosowanie kaskadowych arkuszy stylów pozwala na realizację funkcji
zwiększających dostępność:
podział zawartości strony na logiczne części, CSS pozwala na
umieszczenie treści w określonym porządku w plikach źródłowych, taki podział
nie ogranicza w żaden sposób pozycjonowania elementów
możliwość zmiany wielkości czcionki, pozwalają na korzystanie
z relatywnego schematu rozmiaru czcionek
3.3. Kolory
Aby opisać zasady doboru kolorów w serwisach internetowych oraz
problemy związane z tym zagadnieniem należy zapoznać się z kilkoma
ważnymi terminami związanymi z teorią barw.
Terminy: kolor i barwa są w języku polskim synonimami. Barwa jest
wrażeniem zmysłowym, reakcją zmysłu wzroku na padającą na receptory
siatkówki falę elektromagnetyczną z zakresu 400-700 nm [Popularna
Encyklopedia Powszechna, 1999]
Rys. 3.3.1 Spektrum fal elektromagnetycznych widzianych przez oko ludzkie [źródło: http://www.colorsontheweb.com/]
Koło barw (Rys. 3.3.2) jest graficznym modelem poglądowym służącym
do objaśnienia zasad mieszania i powstawania barw. Barwy znajdujące się po
przeciwnych stronach koła nazwane są barwami komplementarnymi. Takie
barwy nałożone na siebie w syntezie addytywnej dają barwę białą, a w syntezie
subtraktywnej barwę czarną, zmieszane dają neutralną szarość [Itten, 1974].
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
19
Rys 3.3.2 Koło barw [źródło: http://www.colorsontheweb.com/]
Koło barw składa się z barw podstawowych oraz barw pochodnych [Itten, 1974]:
Barwy podstawowe – zestaw trzech barw, których nie można uzyskać przez
mieszanie innych. Kolorami podstawowymi są czerwony, zielony, niebieski,
wszystkie inne barwy, zwane barwami pochodnymi, mogą być tworzone przez
połączenie barw podstawowych w odpowiednich ilościach.
Wśród barw pochodnych wyróżniamy: Barwy drugorzędne – powstają w wyniku zmieszania dwóch sąsiadujących
kolorów podstawowych.
Barwy trzeciorzędne – kolory trzeciorzędne uzupełniają koło kolorów, są to te
kolory, które leżą pomiędzy kolorami podstawowymi i drugorzędnymi, powstają
przez dalsze mieszanie sąsiadujących kolorów.
3.3.1. Zasady doboru kolorów
Powszechnie stosowaną regułą jest dobór trzech barw [Itten, 1974]:
Barwa podstawowa (ang. Primary color) – jest ona dominującym kolorem na
stronie, zajmuje większość powierzchni, ustawia tonacje interfejsu jako całości
Barwa pochodna (ang. Secondary color) – jest drugim po podstawowym
kolorem na stronie, jest zwykle kolorem bardzo zbliżonym do podstawowego
Barwa rozświetlająca (ang. Highlight color) – jest kolorem służącym do
uwydatniana, podkreślania, akcentowania pewnych fragmentów strony. Zaleca
się używanie tego koloru w umiarze.
Poniżej zamieszczone zostały powszechnie stosowane oraz zalecane
kombinacje barw:
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
20
Barwy analogiczne
Dobieramy barwy zbliżone do siebie, leżące obok siebie na kole barw. Takie
schematy barw można często zaobserwować w naturze. Strona
zaprojektowana w takiej konwencji sprawia wrażenie harmonijnej.
Rys. 3.3.3 Koło barw, przykład barw analogicznych [źródło: http://www.colorsontheweb.com/]
Rys. 3.3.4 Przykład serwisu korzystającego ze schematu barw analogicznych
Barwy komplementarne
Barwy te usytuowane są dokładnie naprzeciwko siebie na kole barw. Barwy
komplementarne są kontrastowe i odznaczają się w
stosunku do innych. Zalecane jest stosowanie
komplementarnych barw jako barw rozświetlających.
Rys. 3.3.5 Koło barw, przykład barw komplementarnych [źródło: http://www.colorsontheweb.com/]
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
21
Rys. 3.3.6 Przykład serwisu wykorzystującego schemat barw komplementarnych
Barwy komplementarne rozdzielone
Dobór barw polega na wyborze kontrastujących ze sobą kolorów oraz odcienia
zbliżonego do którejś z wybranych barw. Wybór takiej
palety barw powoduje stworzenie projektu graficznego
z dużymi kontrastami, a jednocześnie nie tak wyraźnie
zaznaczonego jak w schemacie opisanym powyżej.
Rys. 3.3.7 Koło barw, przykład barw komplementarnych rozdzielonych [źródło: http://www.colorsontheweb.com/]
Triada barw
Dobieramy barwy usytuowane na kole barw w jednakowej odległości od siebie.
Taka kombinacja jest zalecana jeżeli chcemy
zaprojektować interfejs kolorowy
Rys. 3.3.8 Koło barw, przykład triady barw [źródło:
http://www.colorsontheweb.com/ ]
Oprócz podstawowych kombinacji kolorów opisanych powyżej często
stosuje się inne zestawianie barw:
Monochromatyczne - dobieramy jedną barwę i jej odcienie manipulując
odcieniem i saturacją. Specjalną odmianą schematu monochromatycznego jest
schemat barw składający się jedynie z kolorów neutralnych, wybranych spośród
odcieni pomiędzy czernią i bielą.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
22
Rys. 3.3.9 Przykład barw monochromatycznych
3.3.2. Kontrast
Kontrast to różnica w poziomie jasności dwóch sąsiadujących ze sobą i
oświetlonych powierzchni. Barwy mogą kontrastować pomiędzy sobą
w odcieniu, wartości i saturacji [Itten, 1974].
Przykłady stosowanych kontrastów:
Kontrast w odcieniu jest bezpośrednio powiązany z
kombinacjami kolorów opisanymi powyżej. Kolory
najbardziej odległe od siebie w kole barw tworzą
pomiędzy sobą największy kontrast. Komplementarna
kombinacja kolorów jest najbardziej kontrastowa,
natomiast analogiczna najmniej. Jeżeli chodzi o
czytelność tekstu, kontrast w odcieniu nie jest
wystarczający, aby tekst stał się czytelny, potrzebne jest
zastosowanie jeszcze innego rodzaju kontrastu.
Rys. 3.3.10 Przykłady kontrastów w odcieniu w kolejności: wysoki kontrast, niski kontrast, ciepły i chłodny kontrast [źródło: http://www.colorsontheweb.com/]
Kontrast w wartości przykładem takiego kontrastu jest
czarny i biały kolor. Jest on najbardziej efektywny w
przypadku dużych kontrastów. Mały kontrast może być
wykorzystywany do zaznaczenia subtelniejszych różnic na
przykład w pewnych elementach tła.
Rys 3.3.11 Przykłady kontrastu w wartości kolejno, wysoki kontrast, niski kontrast [źródło:
http://www.colorsontheweb.com/]
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
23
Kontrast w saturacji powinien być używany do projektowania tych elementów
widoku których nie chcemy akcentować, uwidaczniać.
Wykorzystanie kolorów z różną saturacją ustawionych na
szarym tle sprawia wrażenie przeźroczystości, daje bardzo
interesujące i funkcjonalne efekty wizualne.
Rys. 3.3.12 Przykład kontrastu w saturacji kolejno, wysoki kontrast, niski kontrast [źródło:
http://www.colorsontheweb.com/]
3.4. Typografia
Elementy takie jak typografia czy schematy kolorów odgrywają ważną
rolę w serwisach internetowych. Właściwie dobrane są elementami
niezbędnymi w dobrym projekcie wizualnym.
Typografia to szereg zagadnień związanych z użyciem znaków
pisarskich między innymi:
prezentacją znaków na ekranie monitora
układ i wygląd tekstu
projektowaniem liter i innych znaków pisarskich oraz wzajemnych relacji
pomiędzy znakami i grupami znaków
projektowaniem układu strony
estetyką szaty graficznej strony
układem graficznym strony WWW, marginesami, odstępami pomiędzy
poszczególnymi paragrafami, justowaniem tekstu
Najważniejsze terminy związane z typografią [Bringhurst, 1997]:
Czcionka – komplet znaków, którymi można złożyć jednolity fragment tekstu.
Jedna czcionka to komplet znaków o tych samych, trzech zasadniczych
parametrach: krój pisma, stopień pisma, odmiana pisma.
Krój pisma - spośród tych trzech parametrów, krój jest najważniejszym
elementem określającym charakterystyczny wygląd i unikalność każdej rodziny
czcionek czy fontów. Stanowi o konkretnym, rozpoznawalnym wyglądzie
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
24
niezależnie od wielkości znaków, czy ich atrybucie pogrubienia, pochylenia,
szerokości itp.
Stopień pisma - wielkość, wysokość wyrażana w punktach typograficznych.
Odmiana pisma - odmiana jest modyfikacją kroju danego fontu poprzez
zmianę grubości jego kresek oraz zmianę szerokości i pochylenia całych
znaków.
Font - cyfrowy nośnik pisma, czyli elektroniczny, komputerowy następca
czcionki drukarskiej. W ujęciu informatycznym font to jeden lub więcej plików
w których zawarte są dane do używania znaków o konkretnym wspólnym
wyglądzie. Font, tak samo jak czcionka, cechuje się krojem i odmianą.
W typowych, komputerowych fontach wielkość znaków, czyli stopień zależy od
ustawień użytkownika.
Odnosząc się do użyteczności, funkcjonalności istnieje kilka zasad,
których przestrzeganie pozwoli na stworzenie poprawnego projektu graficznego
serwisu:
Zaleca się unikanie tekstu zawartego w grafice.
Wybór podstawowych, prostych, czytelnych fontów
Użycie ograniczonej ilości czcionek
Zastosowanie dobrego, wystarczającego kontrastu pomiędzy tłem
a tekstem
Unikanie małych rozmiarów fontów
Użycie relatywnych schematów rozmiarów
Ograniczenie ilości tekstów pogrubionych, pochylonych, pisanych
drukowanymi literami
Zaleca się unikanie migającego bądź poruszającego się tekstu.
Największe problemy związane z użytecznością źle zaprojektowanego
tekstu to zbyt mały, nieczytelny tekst. Ponadto często zdarza się, że kolor
tekstu nie stanowi wystarczającego kontrastu dla tła, nie można zmienić
rozmiaru tekstu, tekst jest nieczytelny ze względu na elementy graficzne oraz
elementy tła, które go zaciemniają.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
25
Czcionki klasyfikuje się w rodziny na podstawie ich charakterystyk.
Najważniejszymi rodzinami czcionek są szeryfowe, bezszeryfowe, kursywne,
fantasy, monospace.
Dwoma najpopularniejszymi grupami czcionek są szeryfowe
i bezszeryfowe:
Czcionki szeryfowe charakteryzują się poziomymi kreskami na
końcówkach każdej litery lub innych złożeń.
Rys. 3.4.1 Rysunek przedstawia elementy wyróżniające czcionki szeryfowe [źródło:
http://www.webaim.org/techniques/fonts/]
Czcionki bezszeryfowe są proste i nie mają elementów
dekoracyjnych. Od czcionek szeryfowych różnią się grubością
kresek.
Rys 3.4.2 Rysunek przedstawia elementy charakterystyczne dla czcionek bezszeryfowych
[źródło: http://www.webaim.org/techniques/fonts/]
Czcionki szeryfowe ze względu na to, że mają dużo detali doskonale
nadają się do książek i magazynów charakteryzujących się typografią o bardzo
wysokiej jakości. Przeprowadzone badania wykazały, że ludzie o wiele szybciej
czytają czcionki szeryfowe niż bezszeryfowe.
Zarówno rodzina czcionek: szeryfowa jak i bezszeryfowa posiada
czcionkę specjalnie zaprojektowaną dla potrzeba Internetu odpowiednio:
Georgia oraz Verdana.
Czcionki szeryfowe
Georgia – tradycyjny wygląd, bardziej nowoczesna i czytelniejsza niż
Times New Roman. Najlepsza czcionka szeryfowa do wykorzystania
w serwisach internetowych. Aby była czytelna musi być nie mniejsza niż 10
punktów.
Times New Roman – wygląd tradycyjny, nie zaleca się jej do zastosowań
profesjonalnych, ogólnie nie jest preferowana przez użytkowników. Czcionka
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
26
dobra do materiałów drukowanych. Czytelność na ekranie znacznie spada dla
małych rozmiarów, dobra jedynie przy wysokości nie mniejszej niż 12 punktów
Rys. 3.4.3 Porównanie trzech głównych czcionek szeryfowych [źródło:
http://www.webaim.org/techniques/fonts/]
Czcionki bezszeryfowe
Arial, Arial Black – czcionka niezwykle nowoczesna, prosta, lubiana
przez użytkowników, czytelna przy rozmiarach co najmniej 10 punktów
Impact – pogrubiona nie nadaje się do bloków tekstowych, może być
używana do krótkich nagłówków. Najczęściej używana do druku, nie zalecana
do korzystania z niej na stronach internetowych, ponieważ cechuje się słabą
czytelnością nawet przy znacznych rozmiarach.
Trebuchet MS – nowoczesna, prosta, kanciasta, bardzo czytelna przy
rozmiarze co najmniej 10 punktów
Verdana – nowoczesna, prosta, profesjonalna, preferowana przez
użytkowników. Zalecana do tekstów na stronie głównej. Najbardziej czytelna
czcionka do zastosowań w sieci. Czytelna nawet przy małych rozmiarach.
Rys. 3.4.4 Zestawienie najpopularniejszych czcionek bezszeryfowych [źródło:
http://www.webaim.org/techniques/fonts/]
Podsumowując - czcionki bezszeryfowe są bardziej nowoczesne
i czytelniejsze nawet przy małych rozmiarach, najlepszą czcionką do użycia
w sieci jest Verdana. Natomiast jeżeli skłaniamy się do użycia czcionki
szeryfowej najlepszym wyborem będzie Georgia.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
27
3.5. Formularze
Formularze są narzędziem najczęściej wykorzystywanym do interakcji
pomiędzy użytkownikiem, a serwisem internetowym. Generalizując, poprawne
projektowane jest procesem polegającym na upraszczaniu – symplifikacji,
zaprojektowaniu przejrzystego formularza, łatwego w obsłudze dla użytkownika.
Zaprojektowany formularz powinien mieć jedynie niezbędne elementy,
posiadające poprawne oraz przejrzyste etykiety.
Wyróżniamy kilka ważnych aspektów, które należy wziąć pod uwagę
projektując formularz:
Użycie prostego języka. Przejrzyste i zrozumiałe komunikaty mówiące
użytkownikowi, które informacje są wymagane.
Użycie właściwego języka podczas tworzenia etykiet. Użytkownik nie
może mieć wątpliwości jakich informacji się od niego wymaga.
Dostarczenie użytkownikowi przykładów wypełnienia pól, co do których
może mieć wątpliwość. Niektóre informacje muszą być wprowadzone
w określonym formacie, jeżeli dojdzie do wprowadzenia informacji
w niewłaściwym formacie zaleca się raczej przetwarzanie jej do właściwego
formatu niż żądanie od użytkownika powtórnego wprowadzenia informacji
Oznaczanie wymaganych pól. Przejrzyste wyróżnienie pola, którego
wypełnienie jest konieczne do przesłania danych z formularza.
Grupowanie powiązanych elementów. Stworzenie sekcji elementów,
które przynależą do tej samej kategorii
Unikanie redundancji. Nie zalecane jest tworzenie formularzy, podczas
wypełniania których, kilkakrotnie prosi się użytkownika o wprowadzenie tych
samych informacji.
Dostarczanie szczegółowych informacji. Jeżeli pole wymaga długiego
opisu - nie zaleca się pomijania detali tylko ze względu na oszczędzanie
miejsca w obrębie formularza
Zaleca się dostosowanie do ustanowionych konwencji kolejności
zbierania informacji: imię, nazwisko, firma, adres, etc.. Ze względu na
użytkowników, którzy korzystają jedynie z klawiatury, w celu uzyskania dostępu
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
28
do formularza zaleca się, aby kolejność dostępu do elementów była taka sama
jak kolejność wizualna.
3.5.1. Projektowanie defensywne podczas tworzenia formularzy
Projektowanie defensywne (ang. defensive design), określane również
czasami jako projektowanie ubezpieczone, jest to sposób podejścia do
projektowania ukierunkowany na przewidywanie ewentualnych problemów, na
które mogą natrafić użytkownicy podczas korzystania z aplikacji internetowych
[Linderman, 2005].
Istnieje kilka zasad sprawiających, że formularze stają się łatwiejsze,
szybsze do wypełnienia, bardziej funkcjonalne oraz użyteczne. Warto
zaznaczać pola, których wypełnienie jest obowiązkowe, aby odróżnić je od pól
opcjonalnych. Wypełnienie formularza ułatwi określenie formatu
wprowadzanych danych. Warto umieszczać przykłady wypełnienia formularza
oraz listy rozwijalne, pola wyboru, pola opcji, przyciski. Jeżeli pole wymaga
określonej liczby wprowadzonych znaków zawsze warto informować o tym
użytkownika. Ponadto, zaleca się przechowywanie danych wpisanych
w formularzach, aby wypełniający mieli możliwość powrotu później
i dokończenia.
Formularze powinny jasno informować, które pola są obowiązkowe,
a które opcjonalne. Istnieje kilka technik umożliwiających odróżnienie pól
opcjonalnych od obowiązkowych, najpopularniejsze to:
Umieszczanie gwiazdki lub innej ikony obok pola obowiązkowego
Opis pola: „Wymagane”, „Opcjonalne”
Wytłuszczenie etykiet pól, których wypełnienie jest obowiązkowe
Dobrą praktyką jest ograniczenie ilości pól wymaganych. Dzięki temu
zyskujemy gwarancję, że otrzymamy tylko i wyłącznie dane, które są nam
niezbędne. Natomiast, z punktu widzenia użytkownika, konieczność
wprowadzenia tylko i wyłącznie wymaganych informacji zmniejsza czas
wypełnienia formularza. Jednocześnie pozwala użytkownikowi na dokonanie
wyboru, czy warto poświęcić czas na wpisywanie dodatkowych danych.
Oznaczanie wymaganych pól pozwala na uniknięcie sytuacji, kiedy użytkownik
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
29
będzie musiał wracać do uzupełniania formularza z powodu brakującej
informacji.
Rys. 3.5.3 Przykład formularza rejestracyjnego z poprawnym oznaczeniem pól obowiązkowych
[źródło: http://www.dell.com/, polska wersja]
Niektóre dane mogą być wprowadzane w wielu formatach, dobrym
przykładem jest data, która może być wprowadzana do formularza na różne
sposoby. Dni, miesiące oraz lata mogą być oddzielane kreskami bądź
ukośnikami, rok może być wprowadzany za pomocą dwóch cyfr bądź czterech.
Użytkownicy, wypełniający formularz, będą używali różnych formatów
wpisywania danych. Dlatego ważne jest, aby formularze akceptowały wszystkie
popularne formaty. W ten sposób uchronimy użytkowników przed koniecznością
wpisywania danych w określonym formacie. Pozwoli to, na szybsze
wprowadzanie informacji oraz zmniejszy ilość błędów.
Bardzo powszechną niedogodnością, związaną z nieprawidłowym
projektem formularza, jest informowanie użytkownika o tym, iż wprowadził
nieprawidłową daną po wypełnieniu formularza, w związku z czym, musi
wypełniać go jeszcze raz. Dlatego warto informować użytkownika
o dopuszczalnych możliwościach wpisywania danych. Możemy podawać
przykłady prawidłowego wypełnienia, tworzyć listy rozwijalne, zawierające
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
30
dopuszczalne opcje oraz zamieszczać w formularzu wskazówki dotyczące
formatowania danych. Istnieje kilka podstawowych zaleceń:
Narzędzia takie jak menu rozwijalne, pola list, pola wyboru i przyciski
opcji są bardzo efektywnym sposobem ograniczania zakresu dopuszczalnych
danych.
Rys 3.5.4 Przykład formularza ograniczającego możliwość wprowadzania danych do zakresu
dopuszczonego przez projektantów [źródło: http://szukaj.onet.pl/]
Podczas wypełniania formularza zamieszczonego na (Rys. 3.5.4),
użytkownik nie ma możliwości wpisania daty w niewłaściwym formacie
ponieważ wybór ogranicza menu rozwijalne, podobnie jest z rozmiarem, czy też
sposobem sortowania. Prócz tego, zakres danych możliwych do wprowadzenia
ograniczają pola wyboru i przyciski opcji.
Kolejną techniką pomagającą użytkownikowi w poprawnym wypełnieniu
formularza jest podawanie przykładów poprawnego formatowania (Rys. 3.5.5).
Rys. 3.5.5 Przykład pola formularza obrazujący w jaki sposób należy podawać przykład prawidłowego formatowania [źródło: https://sklep.vobis.pl/]
Ponadto, istnieje możliwość zaprojektowanie formularza w ten sposób,
aby sam jego układ eliminował możliwość popełnienia błędu (Rys. 3.5.6).
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
31
Rys. 3.5.6 Przykład pól formularza zaprojektowanych tak aby ich układ eliminował możliwość popełnienia błędu [źródło: http://www.dell.com/]
W przykładzie przedstawionym powyżej, projektanci użyli zestawu pól
tekstowych, który zmniejsza możliwość popełnienia błędu podczas
wprowadzania numeru telefonu klienta.
Jeśli dane wprowadzone do formularza nie powinny przekraczać pewniej
określonej liczby znaków należy o tym wyraźnie poinformować użytkownika.
Użytkownicy cenią możliwość zaplanowania tekstu przed jego wpisaniem,
dlatego warto informować ich o wszelkich ograniczeniach rozmiaru. Język
HTML umożliwia nam ograniczenie ilości wprowadzonych znaków za pomocą
atrybutu maxlength. W ten sposób możemy mieć pewność, że użytkownik nie
wprowadzi zbyt długiego tekstu. Jeżeli użytkownik wprowadzi zbyt długi tekst,
należy jasno wyjaśnić na czym polega błąd oraz w jaki sposób można go
poprawić.
Czasem zdarza się sytuacja, w której użytkownik jest zmuszony do
przerwania wypełniania formularza w trakcie. Poprawnie zaprojektowana
witryna oraz formularz powinny zachowywać wprowadzone przez użytkownika
dane. Dobrą praktyką jest automatyczne zachowywanie na bieżąco
wprowadzonych danych. Informowanie użytkownika, że dane zostały
zachowane przy pomocy komunikatu mówiącego o możliwości powrotu do
formularza, którego wypełnianie zostało przerwane. Ponadto zaleca się
ułatwianie dostępu do niedokończonych formularzy poprzez szybkie
powracanie pozwalające na dokończenie wypełniania.
Omyłkowe klikniecie przycisku „Resetuj” może powodować usunięcie
wprowadzonych danych, dwukrotne kliknięcie przycisku „Wyślij” może
spowodować powtórne wysłanie informacji.
Stosowanie przycisku „Resetuj” („Wyczyść”, „Anuluj”) kasującego dane
formularza bardzo rzadko przynosi pożądane skutki. Prowadzi bardzo często do
omyłkowego usunięcia uprzednio wprowadzonych danych. Użytkownicy, którzy
chcą wyczyścić dane z całego formularza mogą użyć przycisku „Odśwież”
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
32
przeglądarki internetowej, bądź wpisać dane na nowo jeśli chcą poprawić tylko
niektóre pola.
Użytkownikom często zdarza się dwukrotne kliknięcie przycisku Wyślij.
Aby zapobiec dublowaniu informacji nie wystarczające jest wyświetlanie
komunikatu ostrzegawczego, który zazwyczaj jest pomijany przez
wypełniającego. Bardzo prostym, a zarazem efektywnym rozwiązaniem jest
zastosowanie JavaScript, który umożliwi dezaktywacje przycisków zaraz po ich
kliknięciu. Można zmienić wygląd przycisku tuż po jego kliknięciu, bądź zmienić
jego etykietę.
3.5.2. Walidacja formularzy
Walidacja form nie jest sama w sobie typowym elementem użyteczności,
funkcjonalności. Metoda wywołująca mechanizm walidacji musi być
funkcjonalna. Przykładowo, jeżeli wykorzystamy walidację po stronie klienta,
proces ten musi być dostępny dla wszystkich użytkowników. Jeżeli forma
korzysta z JavaScript do walidacji, z uwagi na to, iż nigdy nie mamy pewności,
że przeglądarka internetowa klienta wspiera JavaScript, forma musi być
również wysyłana jeżeli JavaScript jest niedostępny. Jako rozwiania
alternatywnego możemy użyć skryptu DOM (ang. Document Object Model) –
pozwala on na walidację formularza bez użycia kodu wewnątrz ciała strony.
Jeżeli korzystamy z wykrywania błędów w formularzach zarówno po
stronie serwera, jak i klienta, istnieją trzy kroki przetwarzania form, które
sprawią, że będą one użyteczne, funkcjonalne oraz przystępne:
Powiadamiamy użytkownika o zaistnieniu błędu w widoczny i przystępny
sposób
Zapewniamy użytkownikowi łatwy dostęp do elementów formularza, które
maja być zmodyfikowane
Pozwalamy na ponowne wysłanie oraz sprawdzenie formularza
Pierwszym krokiem jest poinformowanie użytkownika, że wystąpił błąd.
Wiadomość o błędzie powinna być umieszczona w widocznym miejscu jej
zadaniem jest dokładne informowanie, użytkownika o miejscu wystąpienia
błędu.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
33
Jeżeli do walidacji używamy skryptów po stronie serwera, mamy
możliwość wyświetlenia wiadomości o błędzie zanim dane z formularza zostaną
wysłane. Nie zaleca się rozwiązania, polegającego na wyświetleniu wiadomości
o błędzie na oddzielnej stronie, gdyż użytkownik zmuszony jest do ponownego
powrotu do formularza aby naprawić błędy. Ponadto, funkcjonalność taka
wymaga zapamiętania przez użytkownika wszystkich błędów, powrotu do
poprzedniej strony i znalezienia miejsc, w których wystąpiły. Jeżeli zdecydujemy
się na zastosowanie takiego rozwiązania ważne jest, aby forma wyglądała tak
samo, jak wcześniej, ważne jest aby dane wcześniej wprowadzone poprawnie,
pozostały niezmienione.
Wiadomość o błędzie powinna wyświetlać się jako pierwsza na stronie
albo element formularza, który jest błędny, powinien być aktywny, co ułatwi
szybkie naprawienie błędu, natychmiastowy dostęp do pola bez konieczności
wyszukiwania. Jeżeli występuje tylko jeden błąd na stronie, bardziej pomocne
dla użytkownika może być wyświetlenie wiadomości o błędzie obok pola
w którym wystąpił. W jednym momencie może być aktywne tylko jedno pole -
dlatego też, jeżeli wystąpi kilka błędów na stronie, informacje o nich powinny
być zgrupowane razem, prócz tego możemy zastosować wyświetlanie
wiadomości jako odnośnika który po kliknięciu spowoduje, że element, w którym
mamy błędne informacje, będzie aktywny. Użycie do tego celu skryptów po
stronie klienta jest prostsze i bezpieczne.
We wszystkich przypadkach testy przeprowadzone na użytkownikach
mogą ostrzec projektanta o trudnościach oraz problemach związanych
z użytecznością formularza, walidacją i mechanizmem informowania o błędach.
Powyżej zostały przedstawione tylko niektóre możliwości, pozwalające na
optymalizację użyteczności form, walidację, wykrywanie błędów. Aby walidacja
w obrębie form spełniała swoje zadanie powinniśmy zastosować kilka zasad:
Tworzenie form, które są proste w użyciu oraz ich obsługa jest intuicyjna,
zapewnienie użytkownikowi wszystkich niezbędnych instrukcji, podpowiedzi,
wskazówek
Zapewnienie dostępu do formularza przez klawiaturę
Zaleca się wykorzystanie JavaScript-u do wysyłania danych z
formularza, walidacji i usuwania błędów, jednak nie może on być jedynym
narzędziem do wykonywania tychże zadań
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
34
Zawiadamianie użytkownika o błędach występujących w obrębie
formularza w sposób dostępny. Wyświetlanie informacji o błędach
Zapewnienie użytkownikowi prostego i szybkiego dostępu do elementu
formularza, w którym wystąpił błąd
Pozwolenie użytkownikowi na ponowne wysłanie I walidację danych
znajdujących się w obrębie formularza
3.6. Klawisze skrótu
Jednym z głównych wymogów pozwalających na zachowanie
uniwersalnej funkcjonalności jest dostępność do strony za pomocą klawiatury.
Część użytkowników preferuje ten rodzaj dostępu, natomiast dla innych jest on
wymogiem ze względu na różnego rodzaju upośledzenia. Jeżeli serwis jest
zaprojektowany prawidłowo musi umożliwiać dostęp do niego tylko i wyłącznie
przez klawiaturę, bez użycia myszy. Dostępność do strony poprzez klawiaturę
rozszerza podstawową funkcjonalność, a ponadto musi być logiczna, jasna dla
użytkownika, spełniać oczekiwania użytkownika.
3.6.1. Skróty klawiszowe i ich implementacja w przeglądarkach
internetowych
Implementacja zależy od rodzaju przeglądarki oraz systemu
operacyjnego. Użytkownicy mają określony dostęp do skrótów klawiszowych
w przeglądarce internetowej, której używają, jednak jeżeli zdecydują się na
zmianę, muszą uczyć się na nowo zasad obowiązujących w innej przeglądarce.
Atrybuty języka HTML ACCESSKEY i TABINDEX zostały specjalnie
zaprojektowane, aby ułatwić projektantom implementację dostępu do strony
poprzez klawiaturę. ACCESSKEY definiuje klawisz dostępu dla danego
elementu. Po wybraniu klawisza dostępu i innego klawisza specjalnego
w zależności od przeglądarki internetowej następuje jedna z dwóch akcji:
Aktywacje odpowiedniego pola, jeżeli klawisz dostępu został przypisany
do elementu formularza
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
35
Przeglądarka przejdzie do adresu umieszczonego w atrybucie href,
jeżeli klawisz dostępu został przypisany do odnośnika
Klawisze skrótu są standardową cechą związana z użytecznością
zaimplementowaną w większości systemów operacyjnych. We wszystkich
programach bazujących na systemie operacyjnym Windows dostęp do menu
Plik możemy uzyskać wybierając skrót Alt + F. Innym powszechnie stosowanym
przykładem skrótu klawiszowego jest Ctrl + C – kopiowanie, Ctrl + V wklejanie
zawartości bufora. Microsoft zestandaryzował klawisze skrótu aby uczynić
dostęp do serwisu prostszym oraz szybszym bez konieczności użycia myszki.
Bardzo zbliżone klawisze skrótu istnieją w rodzinie systemów MacOS.
Częścią konwencji zestandaryzowania klawiszy skrótu w Windows jest
podkreślanie litery wykorzystywanej w skrócie. Litera P w słowie Plik jest
podkreślona aby pokazać użytkownikowi, że wybranie tej litery pozwoli na
aktywację skrótu.
Atrybut ACCESSKEY może być w prosty sposób dodawany do elementów
HTML:
<a href="http://przykład.pl/" accesskey="z">Przykład</a>
<input type="text" id="stacja" accesskey="s"/>
W przykładzie zamieszczonym powyżej "W" ACCESSKEY przenosi nas
do adresu http://przykład.pl/ natomiast "N" ACCESSKEY do pola tekstowego.
Atrybut TABINDEX ustala pozycję danego elementu w kolejności jego
aktywowania przy nawigacji klawiaturą za pomocą klawisza Tab.
Przykład użycia:
<input type="text" id="nazwa" tabindex="20" />
Nowe przeglądarki, z wyjątkiem Firefox dla MacOS, dosyć dobrze
wspierają TABINDEX, Opera 7+ wspiera TABINDEX w sposób odmienny od
innych przeglądarek. Domyślnie Opera pozwala na dostęp za pomocą klawisza
Tab jedynie do elementów formularza, natomiast dostęp do linków odbywa się
poprzez klawisze skrótu.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
36
Głównym problemem podczas stosowania atrybutu TABINDEX jest
stworzenie nielogicznej sekwencji poruszania się pomiędzy elementami
formularza. Dodanie TABINDEX może być nieco kłopotliwe dla użytkowników
korzystających z przeglądarki Opera z uwagi na odmienną implementację.
Jednym z najpoważniejszych problemów związanych z ACCESSKEY są
liczne konflikty pomiędzy klawiszami skrótu w różnych przeglądarkach
internetowych.
Internet Explorer dla Windows, Firefox, oraz inne przeglądarki
zaprojektowane dla systemu Windows, z wyjątkiem przeglądarki Opera
ACCESSKEY, zdefiniowane dla elementów zawartości stron internetowych mają
pierwszeństwo nad klawiszami skrótu zaimplementowanymi w przeglądarce.
Taka funkcjonalność powoduje wiele konfliktów; wyobraźmy sobie, że
użytkownik chce uzyskać dostęp do menu Plik w przeglądarce internetowej
jednak jest to niemożliwe, ponieważ na stronie aplikacji został zdefiniowany
klawisz skrótu accesskey="p". Jedyną możliwością dostępu do menu Plik
jest naciśnięcie klawisza Alt, zwolnienie go, po czym naciśnięcie P, istnieje ona
jedynie w przeglądarce Internet Explorer, niewielu użytkowników nie wie o niej.
Jedynie projektanci przeglądarki Opera wprowadzili skuteczne
rozwiązanie tego problemu. Wprowadzili inną kombinacje klawiszy pozwalającą
na korzystanie ze skrótów Shift + Esc + klawisz skrótu.
Różne przeglądarki używają różnych kombinacji w celu aktywacji
klawiszy skrótu:
Alt + [klawisz skrótu]: Firefox dla Windows, Internet Explorer dla Windows,
Mozilla dla Windows, Netscape 6+ dla Windows
Shift + Esc + [klawisz skrótu]: Opera dla Windows lub Mac
Ctrl + [klawisz skrótu]: Internet Explorer 5.2 dla Mac, Safari 1.2 (Mac
przeglądarka tylko i wyłącznie zaprojektowana dla Mac), Firefox dla Mac,
Mozilla dla Mac, Netscape 6+ dla Mac
Skróty klawiszowe nie wspierane: Starsze wersje przeglądarek internetowych
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
37
3.6.2. Standardy tworzenia skrótów klawiszowych
Ponieważ zwyczajowo w skrótach klawiszowych zaimplementowanych
w przeglądarkach wykorzystuje się litery, wobec tego eksperci, zajmujący się
funkcjonalnością, zalecają użycie cyfr w skrótach, aby zminimalizować
prawdopodobieństwo konfliktu. Wiele państw; w tym Wielka Brytania i Kanada
zestandaryzowały pewne skróty aby uniknąć konfliktów oraz przyzwyczaić
użytkowników do pewnych konwencji. Prawie wszystkie strony brytyjskich
serwisów internetowych, cześć australijskich oraz krajów Unii Europejskiej
posiada implementacje następujących skrótów:
S – Pominięcie nawigacji
1 – Powrót do strony domowej
2 – Strona z nowościami
3 – Mapa serwisu
4 - Wyszukiwanie
5 – Często zadawane pytania (FAQ)
6 - Pomoc
7 – Kontakt, wsparcie techniczne
8 - Regulamin
9 – Sugestie i propozycje
0 – Szczegółowy opis skrótów klawiszowych
3.6.3. Sposoby informowania o klawiszach skrótu
Jednym z większych problemów, utrudniających korzystanie z klawiszy
skrótu jest fakt, że użytkownicy nie są świadomi ich istnienia oraz nie istnieją
żadne standardy mówiące o tym, w jaki sposób można poinformować o nich
użytkownika. Jedynie system Windows wprowadził konwencję, której
konsekwentnie używa we wszystkich wersjach; czyli podkreślanie liter
używanych jako klawisz skrótu. Projektanci serwisów internetowych mają do
wyboru; korzystanie z konwencji wprowadzonej w systemie Windows bądź
wprowadzanie własnych konwencji. Idealnym wyjściem byłoby, gdyby
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
38
przeglądarki same wykrywały ACCESSKEY, jednakże takie rozwiązanie nie
zostało jeszcze nigdzie zaimplementowane.
Stosuje się kilka konwencji informowania użytkownika o dostępnych
klawiszach skrótu, każde z podanych niżej rozwiązań ma swoje zalety i wady:
Podkreślanie litery używanej w skrócie klawiszowym
Zaletą takiego rozwiązania jest prosta implementacja, część użytkowników
łatwo rozpoznaje tę konwencję. Wadą jest to, że nie zawsze wiedzą, którego
klawisza użyć w kombinacji (Alt, Ctrl, Shift)
Wyświetlanie klawisza dostępu w nawiasach
Przykład: Przejście do następnej strony (Skrót klawiszowy: N)
Zalety: rozwiązanie proste w implementacji, wszyscy użytkownicy będą
informowani o skrócie, nie jest wymagana znajomość konwencji. Wadą jest
ingerencja w wygląd strony oraz jej zawartość w celu informowania użytkownika
o skrócie, nie wszyscy użytkownicy wiedzą, którego klawisza należy użyć
w kombinacji (Alt, Ctrl, Shift). Rozwiązaniem tego problemu jest poinformowanie
użytkownika o dokładnej kombinacji klawiszy.
Przykład: Przejście do następnej strony (Skrót klawiszowy: Alt +N)
Minusem tego rozwiązania jest konieczność implementacji skryptu
wykrywającego rodzaj przeglądarki internetowej.
Stworzenie osobnej strony ze spisem wszystkich skrótów dostępnych na
stronach serwisu. Link do tej strony powinien znajdować się na wszystkich
stronach. Zaletą takiego rozwiązania jest umieszczenie opisu do wszystkich
klawiszy skrótu w jednym miejscu. Wadą jest to, że użytkownik musi się
przenieść do innej strony, przestudiować tekst aby odnaleźć skrót który go
interesuje.
Użycie CSS oraz skryptów, które sprawią, że użytkownik zobaczy
komunikat o skrócie klawiszowym dla danego elementu wtedy, gdy będzie on
aktywny lub przesuniemy kursor myszki nad elementem.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
39
4. Technologie stosowane podczas tworzenia
aplikacji
Dobór narzędzi jest ważnym czynnikiem w procesie tworzenia
funkcjonalnych oraz dostępnych aplikacji internetowych. W rozdziale omówiono
narzędzia wykorzystane podczas tworzenia aplikacji. Technologie takie jak:
Ajax czy też CSS wybrane zostały, ponieważ w znaczącym stopniu ułatwiają
tworzenie przystępnych dla użytkownika interfejsów.
4.1. PHP
Język PHP został stworzony w roku 1994. Pierwotnie nazywał się
„Personal Home Page”. W miarę rozwoju, stawał się on językiem coraz bardziej
użytecznym, a jego nazwę zmieniono na bardzie oficjalną – „PHP: Hypertext
PreProcessor”. „Jest szeroko używanym językiem skryptowym ogólnego
zastosowania, tworzonym na zasadach Open Source, dopasowanym do
potrzeb aplikacji WWW, z możliwością zagnieżdżania w HTML”
[http://pl.php.net/manual/pl/introduction.php]. PHP jest przenośną
technologią działającą po stronie serwera, wszystkie operacje zdefiniowane
w skryptach wykonywane są na serwerze. PHP współpracuje z wieloma
systemami baz danych. Pozwala to na bardzo łatwe tworzenie aplikacji WWW
korzystających z informacji zapisanych w bazie.
W zaprojektowanej aplikacji wykorzystano połączenie technologii PHP5
i MySQL 5.0. Serwis zaimplementowano wykorzystując obiektowość języka
PHP5. Obiektowość pozwala traktować aplikację nie jako wątek sterowania
przesyłający dane pomiędzy funkcjami, lecz jako zbiór obiektów,
współpracujących pomiędzy sobą, niezależnie realizujących pewne zadania.
Obiektowość w implementacji została wykorzystana z dwóch zasadniczych
powodów. Po pierwsze: istnieje ogromna łatwość przekładania wymogów
zastosowania na poszczególne moduły kodu, chodzi tu o klasy. Często zdarza
się, że potrzebujemy tych samych typów danych w różnych miejscach, ale
w obrębie tej samej aplikacji. Drugą zaletą programowania obiektowego jest
możliwość wielokrotnego wykorzystania kodu.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
40
4.2. MySQL
MySQL jest najpopularniejszą na świecie bazą danych typu open source.
MySQL cechuje się wydajnością, przenośnością i niezawodnością. Jest
rozwijany przez firmę MySQL AB ze Szwecji. Jest systemem zarządzania
relacyjnymi bazami danych (RDBMS). Tego rodzaju bazy składają się
z różnych, powiązanych ze sobą danych. Mogą mieć postać tekstową, liczbową
lub binarną. Ich przechowywaniem zajmuje się system DBMS - system
zarządzania bazą danych.
Istnieje wiele rodzajów baz danych, najpopularniejszymi są relacyjne
i obiektowe. W bazach relacyjnych informacje rozbijane są na części składowe,
które przechowuje się w tabelach. Zaprojektowanie i oprogramowanie relacyjnej
bazy danych jest procesem dość złożonym.
MySQL składa się z kilku części. Serwer MySQL (mysqld), uruchamia on
bazy danych i zarządza nimi. Klient MySQL-a pełni rolę interfejsu do serwera.
Istnieje możliwość połączenia aplikacji internetowej z bazą danych.
Dzięki czemu niektóre informacje dostępne w obrębie aplikacji mogą pochodzić
z MySQL-a.
4.3. JavaScript
JavaScript jest językiem programowania dokumentów internetowych.
Powstał pod koniec 1995 roku, został opracowany przez firmę Netscape oraz
Sun Microsystems. JavaScript jest językiem skryptowym przystosowanym do
tworzenia interaktywnych stron WWW. Skrypty pisane za pomocą JavaScript
mogą być umieszczane bezpośrednio w dokumentach HTML, a połączenie tych
dwóch języków często określane jest mianem DHTML.
JavaScript należy do języków parsowanych, kod źródłowy jest
interpretowany przez przeglądarkę, jego składnia jest podobna do składni
języka Java. JavaScript posiada pewne cechy programowania zorientowanego
obiektowo. Język ten nie został stworzony dla pisania dużych projektów, lecz
uzupełniania nim funkcjonalności aplikacji internetowych po stronie klienta. Za
pomocą JavaScript-u można komunikować się z użytkownikiem, manipulować
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
41
zawartością stron. Pozwala na tworzenie interaktywnych stron WWW, czego nie
można osiągnąć używając tylko języka HTML.
Większość przeglądarek internetowych wspiera technologię JavaScript,
jej kod można wywołać samodzielnie, ale najczęściej umieszcza się go w ciele
stron HTML, dzięki czemu możemy rozszerzać ich funkcjonalność.
JavaScript po raz pierwszy zaimplementowano do pierwszych
przeglądarek z rodziny Netscape Nawigator, a później także do Internet
Explorer 3.0. Obecnie najnowsza, stabilna wersja 1.5 implementowana jest we
wszystkich nowoczesnych przeglądarkach.
Problem dostępności, opisywany we wcześniejszych rozdziałach, tyczy
się również dokumentów wykorzystujących JavaScript oraz różne techniki
DHTML. Istnieje kilka zasad wykorzystywania JavaScript przy tworzeniu
dostępnych stron. Techniki DHTML mogą polepszyć funkcjonalność stron,
a tym samym ich dostępność. Stosowanie DHTML i JavaScript nie jest wbrew
zasadom tworzenia stron dostępnych. Najważniejsze jest to, aby stosując go
robić to rozważnie, aby nie ograniczyć dostępności na przykład tworząc skrypty
tylko dla użytkowników korzystających z myszki. Należy tworzyć skrypty w taki
sposób, aby po wyłączeniu JavaScript w przeglądarce, strona nadal była
czytelna. Jest kilka wytycznych pozwalających na tworzenie dostępnych stron
z zastosowaniem JavaScript-u.
Nie należy umieszczać treści stron w kodzie skryptów. Treść należy
umieszczać w HTML i pobierać ją kiedy zajdzie potrzeba wykorzystania jej
w JavaScript.
Jeśli zajdzie konieczność umieszczania jakichkolwiek treści w skrypcie,
alternatywną treść należy umieścić w znaczniku noscript.
Dla każdego elementu nawigacyjnego wykorzystującego JavaScript
należy zapewnić alternatywny sposób nawigacji w postaci zwykłego linka
Jeżeli do obsługi formularzy używamy JavaScript nie należy przy jego
pomocy blokować ich standardowej funkcjonalności
Podczas tworzenia aplikacji przy użyciu JavaScript należy projektować je
w sposób niezależny od sprzętu użytkownika. Użytkownik może sterować
przeglądarką przy pomocy myszki, klawiatury oraz przy użyciu innych
sposobów.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
42
W zaimplementowanej aplikacji JavaScript jest wykorzystywany do
dynamicznych zmian w interfejsie użytkownika podczas wprowadzania danych
do systemu oraz do walidacji wprowadzanych danych po stronie klienta.
4.4. CSS
CSS (ang. Cascading Style Sheet) jest mechanizmem pozwalającym
przypisywać style elementom definiowanym przy pomocy języków takich jak
HTML, XML. Styl opisuje sposób prezentacji elementu przez urządzenie
odbiorcze, najczęściej jest to przeglądarka internetowa. Arkusze stylów można
uznać za szablon dokumentu HTML. Za pomocą arkuszy projektant może
w łatwy sposób nadawać jednolity układ i wygląd rozbudowanym projektom.
Kaskadowa, hierarchiczna budowa arkuszy stylów pozwala utrzymać jednolity
wygląd całej aplikacji i równocześnie, kontrolować wybrane elementy przy
pomocy stylów położonych niżej w hierarchii. Zaletą kaskadowych arkuszy
stylów jest łatwość modyfikacji wszystkich stron przy pomocy zmiany
wprowadzonej w jednym miejscu.
CSS umożliwia przypisanie dowolnemu elementowi HTML określonego
stylu. Przeniesienie opisów formatowania do zewnętrznego pliku arkuszy stylów
i pozostawienie w dokumencie tylko i wyłącznie czystych znaczników HTML,
pozwala na oddzielenie treści oraz struktury dokumentu od jego wyglądu. Kod
HTML jest mniejszy, bardziej przejrzysty, szybciej się ładuje.
Kaskadowość jest fundamentalnym pojęciem - odnosi się do hierarchii
źródeł stylów. Informacja o stylu może być zapisana w oddzielnym pliku, bądź
może znajdować się w dokumencie HTML. Od lokalizacji stylu zależy zasięg
jego działania. Wśród arkuszy stylów można wyróżnić następujące ich rodzaje:
Importowany arkusz stylów (ang. imported style sheet). Zewnętrzny
arkusz stylów, który został dołączony do innego arkusza.
Zewnętrzny arkusz stylów (ang. external style sheet). Plik tekstowy
zawierający definicję stylów. Odwołania do niego mogą znajdować się
w dowolnym dokumencie HTML
Styl osadzony (ang. embedded style). Styl o ograniczonym zasięgu, jego
działanie ogranicza się do dokumentu w którym się znajduje
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
43
Styl wpisany (ang. in-line style). Styl dołączony do określonego
znacznika HTML, określający sposób wyświetlania tylko i wyłącznie tego
elementu
Kaskadowość objawia się, jeżeli korzystamy przynajmniej z dwóch
wymienionych powyżej rodzajów arkuszy. Obowiązuje zasada, że styl
znajdujący się bliżej danego elementu znosi działanie stylu odległego. Wynika
z tego, że najwyższy priorytet ma styl wpisany, następnie styl osadzony,
zewnętrzny arkusz stylów, importowany arkusz stylów.
Kaskadowe arkusze stylów zostały stworzone przez organizację W3C
w roku 1996. Opublikowano dotychczas dwie rekomendacje CSS1 (ang.
Cascading Style Sheets, level 1) i CSS2 (ang. Cascading Style Sheets, level 2).
Trwają również prace nad CSS3 (ang. Cascading Style Sheets, level 3).
Pierwszą przeglądarką internetową, która generowała strony opisane przez
kaskadowe arkusze stylów był Internet Explorer 3.0. CSS1 jest w pełni
wspierany przez przeglądarkę FireFox, Safari, Operę.
W maju 1998 przyjęta została specyfikacja CSS2, rozszerzała one
dotychczasowe możliwości kaskadowych arkuszy stylów. Przeglądarki FireFox,
Safari, Opera są bliskie pełnej obsługi CSS2. Internet Explorer do wersji 5.5
posiadał niecałkowitą i pełną błędów obsługę CSS1 oraz nielicznych elementów
nowszych wersji. IE 6 obsługuje poprawnie prawie całość CSS1, jednak
obsługa CSS 2.1 nadal jest bardzo niekompletna.
CSS3 jest obecnie szczątkowo obsługiwany przez większość
najnowszych przeglądarek.
4.5. AJAX
Pojecie Ajax jest akronimem, pochodzi od „Asynchronus JavaScript and
XML”. Z Ajax-em powiązane są takie technologie jak CSS, HTML, XHTML,
XSLT, DOM, XMLHttpRequest. Ajax - jest to raczej styl programowania
i sposób podejścia niż precyzyjnie określony zbiór technologii. „Aplikacje Ajax to
bogate reaktywne aplikacje sieciowe bazujące na standardowych technologiach
internetowych” [Mahemoff, 2007]. Pojęcia Ajax po raz pierwszy użył Jeske-
James Garrett 18 lutego 2005 roku opublikował on w Internecie artykuł „Ajax:
A New Approach to Web Application”.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
44
Ajax łączy w sobie wiele wydajnych technologii. Dzięki jego użyciu
aplikacje sieciowe stają się bardziej interaktywne. Ajax jest wysokopoziomowym
wzorcem projektowym, złożonym z wielu powiązanych ze sobą technologii,
dzięki niemu możliwe jest tworzenie niezwykle złożonych aplikacji sieciowych
nowej generacji. Ajax ma zapewnić równowagę pomiędzy funkcjonalnością po
stronie klienta i serwera podczas wykonywania żądań użytkownika. Pozwala na
równomierne rozłożenie obciążenia na stronie klienta oraz serwera. Pozwala na
komunikację w tle, podczas kiedy użytkownik pracuje na stronie WWW.
Przykładami zastosowania technologii Ajax są popularne serwisy takie jak
Google Maps, Gmail, Google Suggest.
Ajax korzysta z technologii od zawsze popularnych w Internecie, choć
często stosuje je w nowatorski sposób.
HTML/XHTML (ang. HyperText Markup Language, hipertekstowy język
znaczników) [Mahemoff, 2007]. Język składający się ze znaczników, służący do
tworzenia struktury strony internetowej. Aplikacje wykorzystujące Ajax-a
używają go do tworzenia początkowej struktury strony, która ulega ciągłym
modyfikacjom, umożliwia to zmianę wyglądu i dodawania nowych zdarzeń.
Jeżeli jest to możliwe, należy używać zgodnej ze standardem XML odmiany
HTML czyli XHTML (ang. Extensible HyperText Markup Language). Dokumenty
XHTML są poprawnymi dokumentami XML, dzięki temu można łatwo
generować je z innych dokumentów XML, a także automatycznie przekształcać
w inne formy XML-a.
CSS (ang. Cascading Style Sheets) [Mahemoff, 2007]. Arkusz stylów CSS to
lista reguł, ustalających w jaki sposób ma zostać renderowana zawartość
wybranego elementu HTML, XHTML lub XML przez przeglądarkę internetową.
Technologia Ajax wykorzystuje to, iż stylami CSS można łatwo manipulować
przy użyciu JavaScript.
CGI (ang. Common Gateway Interface) [Mahemoff, 2007]. Znormalizowany
interfejs, umożliwiający komunikację pomiędzy oprogramowaniem serwera
WWW, a innymi programami znajdującymi się na serwerze. Za pomocą
programów CGI można dynamicznie, czyli na żądanie klienta, generować
dokumenty HTML, uzupełniać je treścią, na przykład pobieraną z bazy danych.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
45
HTTP (ang. Hypertext Transfer Protocol ) [Mahemoff, 2007]. Protokół
przesyłania dokumentów hipertekstowych jest protokołem sieci WWW. Za jego
pomocą przesyła się żądania udostępnienia dokumentów WWW oraz
informacje z formularzy. HTTP udostępnia znormalizowany sposób
komunikowania się komputerów ze sobą. Określa on formę żądań klienta
dotyczących klienta oraz formę odpowiedzi na te żądania serwera. Protokół
HTTP zaliczany jest do protokołów bezstanowych dlatego, iż nie zachowuje
żadnych informacji o poprzednich transakcjach z klientem, po zakończeniu
transakcji wszystkie informacje przepadają.
Aplikacje oparte na technologii Ajax, podobnie jak inne aplikacje
sieciowe, komunikują się przy pomocy protokołu HTTP. Różnica polega na tym,
że serwer, zamiast zwracać całe strony, zwraca zwięzłą odpowiedź, która jest
następnie przetwarzana w skrypcie przeglądarki internetowej.
Skrypty wykonywane po stronie serwera.
W technologii Ajax serwer jest wciąż potrzebny do operacji takich jak:
przechowywanie danych i sprawdzanie poprawności danych wejściowych,
w niektórych architekturach nie odpowiada on już za wyświetlanie danych, ani
za logikę aplikacji, za którą odpowiadają skrypty wykonywane po stronie
przeglądarki.
Ajax korzysta również z nowszych technologii, które obecnie stają się
lepiej znane, ale można ich używać jako standardu we wszystkich
najważniejszych przeglądarkach internetowych.
JavaScript jest sercem aplikacji Ajax. Ajax-a można traktować jako
wzbogacony JavaScript. Oferuje on tę samą technikę po stronie klienta co
JavaScript, ale wykorzystuje ją do wysyłania żądań w tle, w celu dostarczenia
dodatkowych danych. Takie rozwiązanie zabezpiecza nas przed wielokrotnym
przeładowaniem strony i zapewnia aktualizacje danych.
XML (ang. Extensible Markup Language) [Mahemoff, 2007]. Jest językiem
formalnym przeznaczonym do definiowania formatu i struktury dokumentów.
Język XML jest rekomendowany oraz specyfikowany przez organizację W3C
(ang. World Wide Web Consortium). Jest on podzbiorem języka SGML, wiec
każdy dokument XML jest jednocześnie dokumentem SGML. Dokument jest
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
46
poprawny składniowo (ang. well-formed) jeżeli jest zgodny z regułami składni
XML, w przeciwnym razie nie może on zostać przetworzony przez praser XML.
DOM (ang. Document Object Model) [Mahemoff, 2007]. Model DOM to
hierarchiczna struktura danych reprezentująca dokument XML; przy użyciu
JavaScript można odczytywać te struktury i manipulować nimi. Standard W3C
definiuje zespół klas i interfejsów pozwalających na dostęp do struktury
dokumentów oraz jej zmianę poprzez modyfikację, tworzenie, usuwanie tzw.
węzłów. Na początku istnienia Internetu twórcy najpopularniejszych
przeglądarek internetowych tworzyli własne modele niezgodne ze sobą.
Dlatego organizacja W3C postanowiła ujednolicić standard obiektowego
modelu dokumentu.
Szczególnie ważnym dokumentem XML jest bieżąca strona internetowa,
dlatego przeglądarce można udostępnić model DOM, a manipulując nim można
wpłynąć na zawartość strony, na przykład można manipulować jej wyglądem
i zmieniać jej układ.
DHTML (ang. Dynamic HyperText Markup Language) [Mahemoff, 2007].
Dynamiczny, hipertekstowy język znaczników. DHTML to umowna nazwa dla
technik służących do dynamicznej zmiany treści, wyglądu, zachowania
dokumentu HTML, umożliwia ona interakcje strony z użytkownikiem oraz
stosowanie efektów wizualnych. Jest kluczem do interaktywnej komunikacji
z serwerem. W skład DHTML-a wchodzą technologie takie jak HTML, XHTML,
CSS, DOM, JavaScript.
Zdalne wywoływanie poleceń
Zdalne wywoływanie poleceń umożliwia pośrednia komunikacja
z serwerem przy użyciu JavaScript (nie ma konieczności odświeżania strony).
Obiekty XMLHttpRequest to najczęściej używana technologia zdalnego
wywoływania poleceń. Obiekt XMLHttpRequest pozwala skryptowi JavaScript
asynchronicznie połączyć się z serwerem. Użytkownik aplikacji nie musi
przerywać pracy na czas trwania wykonywanych w tle działań. Przez dostęp do
serwera rozumiemy proste żądanie pliku lub skryptu na serwerze, wysyłane
przez protokół HTTP.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
47
Interakcja technologii związanych z Ajax-em
Sekwencja uruchamiania aplikacji:
Użytkownik kieruje przeglądarkę do aplikacji Ajax, a następnie
rozpoczyna interakcję z tą aplikacją.
Przeglądarka wczytuje początkową zawartość i zapełnia okno danymi
przesyłanymi przez aplikacje Ajax. Obejmuje to: początkowy kod HTML
przeznaczony do wyświetlenie na danej stronie, arkusze stylów CSS i kod
JavaScript pozwalający na dalszą interakcję. Początkowy kod zawiera zwykle
metody obsługi zdarzeń, które określają w jaki sposób powinien on reagować
na działania użytkownika.
Sekwencja obsługi zdarzenia:
Większość zdarzeń, które wymagają obsługi, jest wyzwalana poprzez
działania użytkownika. Działania użytkownika powodują wywołanie metody
obsługi zdarzenia.
Metoda obsługi zdarzenia przesyła żądanie na serwer. Niektóre
zdarzenia wymagają interakcji z serwerem. Klasa XMLHttpRequest jest
zaprojektowana specjalnie do obsługi tego zdarzenia. Przy jej użyciu, kod
JavaScript może bezpośrednio przekazać wywołanie na serwer, wskazując
jednocześnie na wywołaną zwrotnie funkcję która zostanie powiadomiona
o nadejściu odpowiedzi.
Serwer przetwarza żądanie. Po stronie serwera usługa sieciowa
przyjmuje żądanie.
Serwer odpowiada, usługa sieciowa przyjmuje żądanie i zwraca
odpowiedź, używając technik bazujących na HTTP.
Wywołana zwrotnie funkcja otrzymuje odpowiedź po stronie przeglądarki.
Funkcja otrzymuje informację o zakończeniu przetwarzania wywołania i może
odczytać odpowiedź serwera. Wywołana funkcja zwrotna może wykonać
dowolne działanie, ale najczęściej jest to zmiana wyglądu strony. Takie
rozwiązanie bazuje na modelu DOM, który jest reprezentacją strony
internetowej i pozwala na modyfikowanie jej zawartości przy użyciu JavaScript.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
48
5. Opis zaprojektowanej aplikacji
Zaprojektowany system jest wyspecjalizowaną aplikacją intranetową,
skierowaną nie do wszystkich użytkowników sieci WWW, lecz do konkretnej
grupy osób, zajmujących wprowadzaniem danych – pomiarów
hydrometeorologicznych. Dane takie dotychczas były gromadzone w postaci
dzienników pomiarów. Gromadzenie pomiarów hydrometeorologicznych
w komputerowej bazie danych jest bardziej uniwersalnym rozwiązaniem gdyż
pozwala nam na:
łatwość dostępu do danych
łatwość przenoszenia danych
łatwość udostępniania
większe bezpieczeństwo magazynowanych danych
Podstawowym celem podczas tworzenia aplikacji było ułatwienie
użytkownikowi wprowadzania danych do systemu. Projektując dla określonego
grona odbiorców możemy założyć, że środowisko użytkownika jest mniej
zróżnicowane. Dzięki temu istnieje możliwość ustanowienia standardów,
dotyczących na przykład rodzaju stosowanej przeglądarki internetowej. Takim
standardem wymaganym do prawidłowego funkcjonowania zaprojektowanej
aplikacji jest przeglądarka z dostępnym JavaScript-em. Aplikacja działa
prawidłowo pod przeglądarkami, Internet Explorer, FireFox, Opera.
Najważniejszymi cechami z punktu widzenia funkcjonalności
w aplikacjach intranetowych są: wydajność, łatwość zapamiętywania
określonych informacji przez pracowników. Ponieważ aplikacja skierowana jest
dla osób, które będą korzystać z niej na co dzień, szybko staną się oni
zaawansowanymi użytkownikami, a sprawność, z jaką będą poruszać się
w obrębie aplikacji oraz wykonywać zadania będzie miarą wydajności pracy.
5.1. Nawigacja w obrębie aplikacji
Podczas planowania struktury nawigacji powinniśmy wziąć pod uwagę
kilka aspektów związanych z użytecznością. Umieszczanie na każdej stronie
odnośników do wszystkich stron znajdujących się w serwisie nie ma sensu,
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
49
w zamian za to, powinniśmy umieścić wybrane, wysoce użyteczne z punktu
widzenia użytkownika odnośniki. Ich ilość powinniśmy ograniczyć co najwyżej
do pięciu, sześciu. Ograniczenie ilości linków związanych z nawigacją na każdej
stronie zwiększa prawdopodobieństwo, że użytkownik zauważy odnośnik, który
może mu być w aktualnym kontekście przydatny. Zaprojektowana aplikacja
posiada nawigację globalną oraz dodatkowo linki pomocnicze umieszczone
w menu z prawej strony (Rys. 5.1.1 ).
Rys.5.1.1 Elementy nawigacyjne znajdujące się w obrębie zaprojektowanej aplikacji.
5.1.1. Konwencje w nawigacji, struktura nawigacji globalnej.
Aby uczynić nawigację oraz architekturę informacji czytelną dla
użytkownika, projektując serwis wykorzystano konwencje panujące w sieci.
Stosowanie konwencji w znacznym stopniu ułatwia poruszanie się w obrębie
serwisu. Konwencje określają wygląd i położenie elementów nawigacyjnych.
Umieszczenie pewnych elementów w standardowych miejscach umożliwia
łatwe i szybkie ich odnalezienie, a ujednolicony wygląd pozwala na odróżnienie
ich od pozostałych elementów.
Jednolity wygląd globalnej nawigacji, która powinna znajdować się w tym
samym miejscu na każdej stronie, informuje użytkownika, że w dalszym ciągu
przebywa on w obrębie tej samej witryny. Ujednolicony wygląd wymaga
jednorazowego poświęcenia czasu na nauczenie się go.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
50
Identyfikator witryny jest jej wizytówką. Logo witryny odnosi się do całej
jej zawartości, dlatego musi znajdować się najwyżej, na górze hierarchii
logicznej. Identyfikator witryny powinien posiadać takie same atrybuty jak znak
towarowy jakiegoś produktu, charakterystyczny krój czcionki, grafikę.
Menu kategorii inaczej nazywane nawigacją globalną jest łączem do
głównych części witryny, jest najwyższym poziomem hierarchii, nawigacja
globalna zwykle jest zaprojektowana tak, aby w razie potrzeby wyświetlić
elementy nawigacji pochodnej.
Istotnym elementem nawigacji globalnej jest łącze do strony głównej.
Sprawia ono, że z każdego miejsca witryny możemy przejść do strony głównej,
co chroni nas przed zagubieniem w strukturze serwisu internetowego. Często
stosuje się konwencję, polegającą na tym, że logo witryny jest łączem do strony
głównej. W zaprojektowanej aplikacji zdecydowano się na odejście od
konwencji. Ze względu na to, iż projektowany serwis jest aplikacją, której
głównym celem jest wprowadzanie danych, (pomiarów
hydrometeorologicznych) rolę głównej strony, pełni strona pozwalająca na
wprowadzenie danych.
Użytkownicy korzystający z Internetu są przyzwyczajeni do konwencji.
W zaprojektowanej aplikacji, tak jak w wielu innych witrynach, w lewym górnym
rogu znajduje się identyfikator witryny, który mówi użytkownikowi, gdzie
aktualnie się znajduje. Poniżej umieszczono menu, poprzez które możemy
dostać się do poszczególnych sekcji, menu opiera się na zakładkach, które są
bardzo popularne w sieci, niemal każdy użytkownik wie w jaki sposób z nich
korzystać. Ponadto projektant zdecydował się na użycie zakładek, gdyż są
intuicyjne w użyciu, są elementami wyróżniającymi się na stronie, są
zauważane przez wszystkich użytkowników, wyglądają estetycznie. Jeżeli są
poprawnie zaprojektowane, stwarzają wrażenie, że aktywna zakładka znajduje
się przed pozostałymi, co dodatkowo podkreśla miejsce, w którym aktualnie
znajduje się użytkownik.
Rys. 5.1.2 Główne menu zaprojektowanej aplikacji.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
51
Projektując nawigację starano się ustawić kolejność sekcji tak, aby na
początku znajdowały się te, które są najczęściej wykorzystywane. Dodatkowym
elementem nawigacyjnym jest menu znajdujące się z prawej strony. Pozwala
ono na dostosowanie strony do wymagań oraz preferencji użytkownika. Nazwy
poszczególnych odnośników dokładnie odzwierciedlają zawartość, która pod
nimi się kryje.
Rys. 5.1.3 Menu pomocnicze zaprojektowanej aplikacji
5.1.2. Nawigacja jako element architektury informacji.
Zadaniem nawigacji jest określenie bieżącego położenia użytkownika
oraz pokazanie, jakie są dalsze możliwości poruszania się w obrębie witryny.
Jeżeli struktura witryny jest nieuporządkowana, funkcjonalności nie naprawi
nawet świetnie zaplanowana nawigacja. Źle zaprojektowana architektura
informacji prowadzi do niskiej funkcjonalności.
Istnieje kilka zasad tyczących się struktury witryny. Najważniejszą jest
zaprojektowanie jednej struktury, którą będzie można wykorzystać na
wszystkich stronach. Należy ją przygotować tak, aby odzwierciedlała sposób
patrzenia użytkownika na witrynę oraz udostępnione w niej informacje, usługi.
Konieczność posiadania struktury wydaje się być logiczna, mimo tego istnieje
wiele witryn, które ewoluowały bez planowania, ich struktura jest chaotyczna
i nie tworzy żadnych logicznych powiązań. Poważnym błędem podczas
projektowania witryny jest to, że zamiast odzwierciedlenia sposobu patrzenia
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
52
użytkownika, powtarza schematy organizacyjne przedsięwzięcia, któremu ma
być poświęcona witryna.
Zaprojektowany serwis posiada jednolitą nawigację. Znajduje się ona na
wszystkich stronach w tym samym miejscu. Taka konwencja znacznie ułatwia
użytkownikowi poruszanie się w obrębie serwisu. Prosty, łatwo dostrzegalny,
globalny system nawigacji jest widoczny na każdej stronie. Będąc w dowolnym
miejscu serwisu, użytkownik wie, gdzie szukać opcji nawigacyjnych. Strona
sprawia wrażenie łatwej w obsłudze, elementy są wzajemnie ze sobą
powiązane. Ponadto lokalizacja, w której aktualnie się znajdujemy, jest
zaznaczana w widoczny sposób poprzez zmianę koloru zakładki. Z uwagi na to,
że zaprojektowana aplikacja składa się w znaczącej większości z formularzy,
starano się ograniczyć nawigację do minimum, ponieważ zbyt rozbudowana
nawigacja może niepotrzebnie rozpraszać użytkownika, którego głównym
zadaniem jest wprowadzenie danych. Nawigacja ogranicza się do łącz, które
mogą być pomocne w wypełnieniu formularza. W pierwszej wersji aplikacji,
górne menu nawigacyjne było nieco szersze, zajmowało ono zbyt dużo miejsca
na stronach, których najważniejszym elementem były formularze, dlatego
zdecydowano się na jego zwężenie.
Projektując strukturę nawigacji na stronie starano się zapobiec
duplikowaniu odnośników. Duplikacja odnosi się do umieszczania tych samych
odnośników w wielu różnych miejscach serwisu.
Jednym z głównych zagadnień rozpatrywanych podczas projektowania
architektury informacji jest prawidłowe, zrozumiałe i przejrzyste nadawanie
nazw etykietom i odnośnikom. Nadając nazwy odnośnikom, etykietom
znajdującym się w zaprojektowanej aplikacji, starano się, aby były one jasne dla
użytkowników.
5.1.3. Systemy nawigacji lokalnej
Nawigacja z punktu widzenia użytkownika odnosi się do jego aktualnej
pozycji, miejsc witryny, które już odwiedził oraz miejsc, w które może się udać.
Bieżącą pozycje użytkownika należy podać na dwóch różnych poziomach:
w odniesieniu do struktury Sieci
w odniesieniu do struktury witryny
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
53
Pozycję użytkownika w stosunku do całości struktury można wyróżnić
wyświetlając część struktury serwisu z zaznaczoną strefą, w której znajduje się
dana strona (Rys. 5.1.4).
Na pytanie, gdzie użytkownik może się udać, pozwalają nam
odpowiedzieć dostępne na stronie opcje nawigacyjne oraz odnośniki.
Rys. 5.1.4 Wyróżnienie bieżącej pozycji użytkownika poprzez zmianę koloru zakładki
Bieżącą pozycję użytkownika w stosunku do całości struktury można
wyróżnić wyświetlając część struktury serwisu z zaznaczoną strefą, w której
znajduje się dana strona. Istotną rzeczą jest podanie prostego tematu strony.
Tytuł strony w nagłówku pliku HTML powinien zawierać tekst pozwalający
zidentyfikować stronę w liście zakładek, jeśli ktoś zdecyduję się dodać witrynę
do ulubionych.
Najpopularniejsze przeglądarki internetowe takie jak: Internet Explorer,
FireFox, Opera, Safari nie zajmują się środowiskiem użytkownika. Odpowiedź
na pytanie, gdzie wcześniej byliśmy, może być trudna bez odwołania się na
przykład do mechanizmu ciasteczek (ang. cookies). Prócz tego, przeglądarki
internetowe nie posiadają zbyt wielu przydatnych mechanizmów nawigacyjnych.
Jednym z narzędzi pomocniczych jest przycisk „Wstecz”, przenoszący nas do
poprzednio oglądanej strony. Istnieje również lista wcześniej odwiedzanych
witryn, odnośniki prowadzące do stron, które już odwiedziliśmy zmieniają kolor.
Zmiana kolorów odnośników jest użyteczna z dwóch powodów. Po pierwsze,
użytkownicy będą wiedzieli gdzie byli wcześniej, co chroni przed stratą czasu
na ponowne odwiedzanie stron, po drugie, zmiana kolorów pozwala na lepsze
poznanie struktury witryny.
Jednym z częstszych problemów, znacznie pogarszającym
funkcjonalność, jest niemożliwość określenia przez użytkownika, elementów na
które można kliknąć. Badania przeprowadzone na użytkownikach dowodzą, że
jeżeli odnośniki nie odróżniają się od zwykłego tekstu, użytkownicy muszą
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
54
spędzić więcej czasu by odnaleźć pożądaną informację, bądź przenieść się do
innej strony. Mimo to, że w publikacjach odnoszących się do użyteczności,
funkcjonalności zaleca się umieszczanie odnośników w kolorze niebieskim,
zdecydowano się zrezygnować z takiej konwencji. Niebieski kolor nie pasuje do
projektu graficznego serwisu, jest nieodpowiedni ze względów estetycznych. W
związku z tym, zastosowano inny sposób wyróżniania elementów, które są
odnośnikami. Elementy, które są odnośnikami, zmieniają kolor bądź
podświetlają się jeżeli umieścimy na nich wskaźnik myszy. Prócz tego odnośniki
są wyróżnione graficznie poprzez pogrubienie oraz wyróżnienie kolorem.
5.1.4. Nawigacja strukturalna
Nawigacja strukturalna są to zwyczajowo nazwane ścieżki powrotu.
Projektując nawigację na stronie, nie powinniśmy umieszczać na każdej stronie
linków do wszystkich sekcji dostępnych w serwisie. W zamian za to,
powinniśmy umieścić linki do wszystkich poziomów hierarchii, ponad wszystkimi
elementami strony. Użytkownicy w większości przypadków korzystają ze
strukturalnej nawigacji, jeżeli chcą się lepiej zapoznać z zawartością strony.
Strukturalna nawigacja wzbogaca nawigację globalną serwisu. Jest bardzo
użyteczna z uwagi na to, że zapewnia przegląd wszystkich stron danej sekcji.
Podobnie jak znacznik aktualnego położenia, ścieżki powrotu pokazują aktualną
pozycję użytkownika w hierarchii witryny, jednak w przeciwieństwie do
znacznika położenia, który pokazuje aktualne położenie w całej hierarchii,
ścieżki pokazują tylko drogę od strony głównej do aktualnego położenia.
Właściwie zaprojektowane ścieżki powrotu są intuicyjne w użyciu, nie zajmują
zbyt wiele miejsca na stronie, w prosty sposób pozwalają na zrobienie dwóch
rzeczy, mianowicie przejścia o jeden poziom wyżej w hierarchii serwisu, oraz
przejście do strony głównej.
5.2. CSS
Podczas projektowania wyglądu serwisu zaleca się centralizację CSS.
Używanie pojedynczego arkusza stylów dla wszystkich stron danego serwisu.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
55
Bądź kilku skoordynowanych ze sobą arkuszy, jeżeli poszczególne strony
wymagają zaprojektowania oddzielnych stylów.
Projekt graficzny aplikacji oparty jest na kaskadowych arkuszach stylów.
Ich zastosowanie pozwala na ujednolicenie wyglądu poszczególnych stron.
W aplikacji użyto dwóch zewnętrznych arkuszy stylów . Jeden z nich odpowiada
za ogólny wygląd serwisu, drugi definiuje wygląd tabel znajdujących się na
poszczególnych stronach.
Jedną z największych korzyści stosowania CSS jest zapewnienie
spójnego, jednolitego wyglądu poszczególnych stron w obrębie aplikacji. Zaleca
się używanie CSS wczytywanych z osobnego pliku, zamiast kaskadowych
arkuszy stylów zintegrowanych z daną stroną. Podczas tworzenie aplikacji
użycie ich było szczególnie pomocne w trakcie projektowania modułu do
zmiany rozmiaru tekstu oraz kontrastu w obrębie serwisu. Pozwalało na łatwe,
wygodne dostosowanie stylów do potrzeb projektu.
Istnieje kilka zasad dotyczących stosowania kaskadowych arkuszy
stylów. Odnoszą się one do dostępności stron korzystających z CSS. Strona
musi działać, nawet jeżeli style są uszkodzone. Nieprawidłowe wyświetlanie
CSS może być spowodowane różną ich interpretacją przez przeglądarki
internetowe. Starsze przeglądarki internetowe mogą je pomijać.
Przeprowadzono test, który miał na celu wykazanie, czy serwis jest
dostępny, nawet jeżeli arkusze stylów są niedostępne. Wygląd aplikacji
z wyłączonymi kaskadowymi arkuszami stylów ilustruje rysunek 5.2.1. Jeżeli
arkusze stylów są niedostępne walory estetyczne serwisu znacznie się
pogarszają, korzystanie z serwisu jest nadal możliwe, można bez większych
problemów wprowadzać pomiary.
Rys. 5.2.1 Wygląd tabeli z wyłączonymi kaskadowymi arkuszami stylów
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
56
5.3. Kolorystyka zaprojektowanej aplikacji
Podczas projektowania aplikacji wykorzystano projekt graficzny dostępny
na zasadach licencji open-sorce na stronie http://www.free-css-
templates.com/. Projekt dostosowano do potrzeb zaprojektowanej aplikacji.
Wybrano go ze względu na bardzo czytelny, przejrzysty, a zarazem prosty
schemat kolorów. Jest on specjalną odmianą schematu monochromatycznego.
Składa się jedynie z kolorów neutralnych, wybranych spośród odcieni
w przedziale pomiędzy czarnym i białym kolorem (Rys. 5.3.1). Stworzenie
schematu monochromatycznego polega na doborze jednej barwy i jej odcieni
poprzez manipulację odcieniem i saturacją. Taki schemat kolorów może
wydawać się zniechęcający bądź nieciekawy, jednak w połączeniu z jednym
jasnym odcieniem, barwą rozświetlającą jest bardzo czytelny i funkcjonalny dla
użytkowników. Aby ożywić odcienie szarości, dodano jeden jasny kolor - jasno
zielony. Układ strony jest przejrzysty co w znaczący sposób ułatwia jej
przeglądanie. Bardzo oszczędna kolorystyka przyciąga wzrok użytkowników
w miejsca, które są dla nich istotne.
Rys. 5.3.1 Przykład specjalnej odmiany schematu monochromatycznego opierający się na czerni i bieli, schemat został wykorzystany w zaprojektowanej aplikacji
5.3.1. Kontrast, zasady doboru kontrastu pomiędzy tekstem a tłem
Istnieje kilka wytycznych dotyczących doboru kolorów. Pierwsza dotyczy
zalecanej ilości barw. Nie ma reguły jednoznacznie określającej ilość barw, jaka
powinna znajdować się na stronie. Użycie zbyt wielu barw pogarsza
funkcjonalność serwisu, staje się on nieczytelny, ciężko odszukać w nim
potrzebne informacje, przeglądanie go męczy wzrok. W zaprojektowanym
serwisie użyto dwóch barw: szarego oraz jego odcieni i jasnozielonego.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
57
W serwisach internetowych wymagana wielkość kontrastu różni się
w zależności od części strony. Zaleca się stosowanie wysokich kontrastów
pomiędzy tekstem a tłem, natomiast zbyt wielki kontrast może powodować
nieprzyjemne wrażenia wizualne.
W zaprojektowanym menu wykorzystano kontrast pomiędzy ciepłymi
i zimnymi kolorami. Zimne kolory są postrzegane dla oka ludzkiego jako
bardziej odległe, natomiast ciepłe jako bliższe. Taką właściwość barw możemy
wykorzystać podczas projektowania interfejsu. Dzięki zastosowaniu ciemno
szarego i zielonego koloru w nawigacji globalnej osiągnięto interesujący efekt
wizualny. Zakładka która jest aktywna wydaje się być bliższa natomiast
pozostałe elementy menu wydają się bardziej odległe dla oka ludzkiego.
Użycie kontrastów w odcieniu, wartości, saturacji jest bardzo efektywne
w trakcie projektowania interfejsu graficznego. Często nie sprawdza się
podczas łączenia tekstu i tła, na którym on się znajduje. Używanie
prawidłowego kontrastu jest szczególnie ważne dla czytelności tekstu.
Podczas projektowania aplikacji przeprowadzono test, który przedstawiał
poziom czytelności różnych kombinacji kolorystycznych tekstu i tła (Rys. 5.3.2).
Wysoką czytelność można osiągnąć łącząc czarny tekst z białym tłem, inną
kombinacją wysoce czytelną jest zastosowanie żółtego tekstu na czarnym tle
oraz białego na niebieskim. Kombinacja zielonego tekstu na czerwonym tle jest
praktycznie całkowicie nieczytelna dla wielu ludzi, a szczególnie dla
daltonistów. Podobnie jest z kombinacją żółtego koloru na białym tle oraz
czerwonego tekstu na niebieskim tle.
Rys. 5.3.2 Schemat obrazujący poziom czytelności w zależności od zastosowanych kombinacji
kolorystycznych tekstu i tła
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
58
Zaprojektowana aplikacja posiada bardzo czytelny schemat kolorów,
w większości są to ciemnoszare prawie czarne napisy na białym tle.
W zaprojektowanej aplikacji dodano opcje umożliwiającą zmianę
kontrastu. Została zaprojektowana specjalnie dla użytkowników z wadami
wzroku, oraz tych osób, które korzystają z monitorów o niskiej rozdzielczości.
Zmiana kontrastu polega na zmianie koloru tła, czcionki oraz wielkości tekstu.
W aplikacji wybrano bardzo czytelną opcję o wysokim kontraście - białe litery
na czarnym tle (Rys. 5.3.3).
Rys. 5.3.3 Wygląd aplikacji uruchomionej w wysokim kontraście
5.3.2. Dobór kolorystyki aplikacji ze względu na osoby z
upośledzeniami wzroku
8% mężczyzn i 0,5% kobiet cierpi na różne formy daltonizmu
[Encyklopedia PWN, 2003]. Daltonizm powoduje, iż użytkownicy nie potrafią
rozróżnić kolorów. Najpowszechniejszą formą jest niemożliwość rozróżnienia
koloru czerwonego i zielonego. Wybór złej kombinacji kolorów spowoduje, iż
daltonista nie będzie widział różnicy pomiędzy tekstem i tłem. Istnieje kilka
sposobów na to, aby kolor był widoczny dla wszystkich odbiorców. Jeżeli
istnieje taka możliwość, powinniśmy korzystać z czarno białej kombinacji
kolorów lub używać barw, które są kontrastowe oraz znacznie różnią się
w intensywności. Możemy przeprowadzić test polegający na uruchomieniu
monitora w odcieniach szarości, jeżeli elementy umieszczone na stronie są
widoczne dla osób bez wad wzroku będą widoczne również dla osób
dotkniętych daltonizmem.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
59
Przeprowadzono test, który miał na celu sprawdzenie, czy strona będzie
w dalszym ciągu czytelna po uruchomieniu jej na czarno-białym wyświetlaczu.
Rys. 5.3.4 Wygląd aplikacji na czarno-białym monitorze
Na rysunku 5.3.4 pokazano wygląd aplikacji uruchomionej na czarno-
białym monitorze. Barwy znacznie różnią się intensywnością przez co, nawet
jeżeli oglądamy je w czerni i bieli, aplikacja w dalszym ciągu jest czytelna dla
użytkownika.
Dla podkreślenia odnośników znajdujących się w menu „Opcje strony”,
zastosowano dodatkowy element wyróżniający, którym jest podkreślenie. Dla
zakładek, będących podstawowym elementem nawigacji, nie zastosowano
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
60
dodatkowego wyróżnienia poza kolorem, nawet w odcieniach czerni i bieli,
w dalszym ciągu jesteśmy w stanie określić, która zakładka jest aktywna.
5.4. Typografia w aplikacji
Z uwagi na to, że typografia jest ważnymi elementem, wpływającym na
wizualny odbiór serwisu przez użytkownika, starano się dobrać najlepszy krój
oraz kolor czcionki. Pierwotnie projekt graficzny serwisu korzystał z czcionki
Arial, zdecydowano się na jego zmianę po przeprowadzeniu testów związanych
z czytelnością, oraz komfortem odbioru strony.
5.4.1. Zasada doboru rozmiarów fontów
Nie ma jednoznacznie określonej reguły odnoszącej się do
preferowanego rozmiaru czcionki w serwisach internetowych. Nie istnieje taki
rozmiar czcionki, który byłby preferowany przez wszystkie grupy odbiorców.
Dobierając rozmiar powinniśmy uwzględnić różnorodne upodobania klientów.
Niektórzy ludzie wolą mniejsze czcionki i równie dobrze potrafią czytać tekst
małych rozmiarów. Prócz tego istnieje duża grupa odbiorców z różnego rodzaju
wadami wzroku, dla których duży tekst jest koniecznością . Biorąc pod uwagę
różne aspekty zaleca się stosowanie tekstu o rozmiarze nie mniejszym niż 10
punktów przynajmniej na głównej stronie. Mały rozmiar tekstu, pozwalający na
umieszczenie na danej stronie, większej ilości treści nie jest dobrym
rozwiązaniem z uwagi na to, iż gęsty tekst zniechęca ludzi. Małe litery często są
niewyraźne na ekranie monitora, mają tendencje do rozmazywania się, tracą
charakterystyczny dla siebie kształt. Stosowanie niewielkiego rozmiaru tekstu,
zaleca się jedynie wtedy gdy serwis ma niewiele wolnej przestrzeni, jedynie
w miejscach, które nie są zbyt ważne dla większości użytkowników, takich jak
odnośniki do stron pokrewnych, stopka. W pozostałych przypadkach zaleca się
stosowanie rozmiaru czcionki, którą większość ludzi może swobodnie czytać.
Badania przeprowadzone na grupie użytkowników wskazują na to, iż
mały tekst jest nie tylko problemem dla ludzi starszych i mających problemy ze
wzrokiem, ale również dla nastolatków. Badania wskazały na to, iż nastolatki
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
61
i młodzi ludzie nie lubią tekstu, który nie rzuca się w oczy. Osoby takie bardzo
szybko przeszukują strony internetowe i lubią, gdy ważne treści są widoczne.
Decyzje dotyczące doboru rozmiaru czcionek powinny dotyczyć
szerokiego zakresu systemów operacyjnych jak i sprzętu komputerowego.
Tekst, który dobrze wygląda na nowoczesnym monitorze może często być
nieczytelny na przestarzałym. Jeżeli nie projektujemy strony pod kątem
specyficznych użytkowników z dobrym sprzętem, powinniśmy wziąć pod uwagę
fakt, iż część użytkowników może korzystać z komputerów wyposażonych
w stare monitory. Statystyki wskazują na to, iż większość użytkowników
korzysta z ekranów o rozdzielczości 1024x768, jednak w dalszym ciągu ok.
15% ludzi używa monitorów o rozdzielczości 800x600 bądź mniejszej [Nielsen,
2007]. Nie jesteśmy w stanie dokładnie przewidzieć z jakiego sprzętu będą
korzystali nasi użytkownicy. Jeżeli projekt będzie nieelastyczny, będzie
wymagał korzystania z określonej rozdzielczości, istnieje ryzyko, że
odwiedzający nie będą mieli możliwości skorzystania z takiej witryny.
W zaprojektowanej aplikacji większość tekstów napisana została
czcionką o rozmiarze 10px. W pierwotnym projekcie aplikacji niektóre teksty
napisane były czcionką o rozmiarze 7px, zdecydowano się na ich powiększenie
do 8px, z uwagi na chęć poprawy komfortu czytania.
5.4.2. Zasady doboru kroju pisma a czytelność
Wybierając czcionki należy upewnić się, że są one dostępne na
komputerze i w przeglądarce internetowej odbiorców. W przeciwnym wypadku,
system dobierze domyślny krój, który nie jest zoptymalizowany pod względem
funkcjonalności, użyteczności oraz nie będzie wyświetlany tak, jak założono
w projekcie.
W zależności od systemu operacyjnego najpopularniejszymi, domyślnie
instalowanymi przez większość przeglądarek internetowych czcionkami są:
Arial, Book Antiqua, Comic Sans MS, Georgia, Courier New, Tahoma,
Times New Roman, Trebuchet MS, Verdana.
Ekrany komputerów nie zapewniają wysokiej jakości typografii ponieważ
typowy monitor komputerowy oferuje rozdzielczość zaledwie 72 dpi. Na
ekranach komputerów ludzie czytają o wiele szybciej czcionki bezszeryfowe niż
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
62
szeryfowe, co stanowi sytuacje odwrotną do czytania tekstów drukowanych.
Nawet przy zastosowaniu nowoczesnych technologii, rozdzielczość ekranów
jest znacznie mniejsza niż druku. Używając czcionek nie zalecanych do użycia
w sieci, bądź zbyt małych możemy zaszkodzić naszej aplikacji. Czcionki
dostosowane do użycia w sieci charakteryzują się wysoką czytelnością.
Poniżej przedstawiono zestawienie różnic pomiędzy popularnymi
rodzinami czcionek, a ich czytelnością, w zależności od rozmiaru. (Rys. 5.4.1)
oraz (Rys. 5.4.2) przedstawia czcionki należące do rodziny bezszeryfowych,
(Rys. 5.4.3), (Rys. 5.4.4) do rodziny szeryfowych:
Rys. 5.4.1 Zestawienie tekstów napisanych czcionką Verdana z rodziny bezszeryfowej
Rys. 5.4.2 Zestawienie tekstów napisanych czcionka Arial z rodziny bezszeryfowej
Rys. 5.4.3 Zestawienie tekstów napisanych czcionką Georgia z rodziny szeryfowej
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
63
Rys. 5.4.4 Zestawienie tekstów napisanych czcionką Times New Roman z rodziny szeryfowej
Z powyższych zestawień jasno wynika, że najbardziej czytelną czcionką,
nawet przy niewielkich rozmiarach, jest Verdana. Czcionka Arial jest czytelna
przy rozmiarze powyżej 10px. Wśród czcionek szeryfowych, najlepszą do
wykorzystania w serwisach internetowych jest Georgia, przy wielkości powyżej
10px. Czcionka Times New Roman nie nadaje się do wykorzystania
w aplikacjach internetowych, przy mniejszych rozmiarach jest praktycznie
nieczytelna dla użytkownika, do przyjęcia jedynie gdy jej wysokość przekracza
12px, ale nawet wtedy bardzo szybko męczy wzrok.
Z uwagi na wyniki testów zdecydowano się na wybór czcionki Verdana,
zastosowano ją w obrębie całego serwisu. W kilku miejscach aplikacji
wykorzystano tekst o rozmiarze mniejszym niż 10 px, w takim wypadku
Verdana jest najlepszym wyborem. Posiada znacznie większe przestrzenie
pomiędzy znakami niż Arial, co poprawia komfort czytania.
Podsumowując - jeżeli nie wiemy z jakiej czcionki powinniśmy skorzystać
- zalecane jest użycie Verdany. Jest ona bardzo powszechna, dostępna prawie
we wszystkich przeglądarkach internetowych. Jest czytelna nawet przy małych
rozmiarach.
5.4.3. Relatywny schemat rozmiarów czcionek
Zaleca się, aby w miejsce wartości stałych rozmiarów tekstu korzystać
z rozmiarów relatywnych takich jak procenty czy wartości względne. Należy
określić jaka wartość powinna być wartością domyślną, a jednocześnie
umożliwić użytkownikom nadpisanie tych ustawień. Płynne projektowanie
pozwala na skalowanie tekstu w zależności od ustawień przeglądarki
i rozdzielczości ekranu. Gdy używamy wartości bezwzględnych dla mierzenia
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
64
wielkości czcionek, użytkownik praktycznie nie ma możliwości zmiany wielkości
tekstu.
W zaprojektowanej aplikacji zastosowano relatywny schemat rozmiarów
czcionek. Wartością domyślną jest rozmiar 10pt. Użytkownik ma możliwość
powiększenia tekstu do dowolnych rozmiarów poprzez opcje w przeglądarce
internetowej. Instrukcje zamieszczono na stronie „Zmień rozmiar tekstu”.
Zmiana rozmiaru tekstu poprzez ustawienia w przeglądarce internetowej jest
alternatywnym rozwiązaniem w stosunku do możliwości zmiany tekstu poprzez
ustawienia na stronie. Użytkownik może wybrać opcję która bardziej mu
odpowiada.
Jeżeli z aplikacji będą korzystały osoby starsze, bądź ze słabym
wzrokiem należy dostarczyć metodę pozwalającą na zmianę wielkości tekstu na
stronie. Zaleca się stosowanie starannie dobranego kroju czcionki, która
wyświetlana jest poprawnie i może być skalowana poprawnie przez
zaawansowanych użytkowników. Ponadto, w niektórych przypadkach można
zastosować przycisk, znajdujący się w widocznym miejscu, pozwalający na
zmianę rozmiaru czcionki, dzięki czemu można dostosować stronę do
indywidualnych potrzeb.
Projektując serwis wzięto pod uwagę, że może on być obsługiwany przez
osoby starsze, bądź użytkowników z wadami wzroku. Na stronie istnieje
możliwość zmiany rozmiaru tekstu, w zależności od preferencji użytkownika
poprzez, przejście do menu: „Opcje serwisu” i wybranie odnośnika „Zmień
rozmiar tekstu”. Ustawienia użytkownika przechowane są w ciasteczkach,
dzięki czemu jeśli cookie są dostępne w przeglądarce, zostaną zapamiętane za
każdym razem, kiedy dana osoba będzie odwiedzała stronę.
5.4.4. Dobór fontów ze względu na użytkowników z
upośledzeniami wzroku
Aby zwiększyć dostępność stron dla osób z wadami wzroku zaleca się
projektowanie interfejsu w taki sposób, aby strony wyglądały tak samo dobrze
przy każdym z rozmiarów czcionek. Czasem jednak okazuje się, że taki sposób
projektowania jest niepraktyczny, dlatego przyjęło się, że dopuszczalne jest
tworzenie stron, które wyglądają trochę gorzej przy dużych rozmiarach
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
65
czcionek, ale dla podstawowego rozmiaru wyglądają nienagannie. Zaleca się
testowanie stron ustawiając domyślną wielkość czcionki na 10, 12, 14 px,
sprawdzając wygląd strony przy najczęściej stosowanych wartościach
domyślnych. Następnie powinniśmy sprawdzić, czy wygląd strony jest nadal
dopuszczalny przy wielkościach czcionki ustawionych na wartości 18, 24
punktów, udostępniające stronę osobom niedowidzącym.
5.5. Formularze jako podstawowy element aplikacji
Formularze są najważniejszym elementem aplikacji. Głównym
założeniem projektu jest stworzenie funkcjonalnego oraz dostępnego systemu,
pozwalającego na wprowadzanie danych hydrometeorologicznych. System ten
ma być prosty w obsłudze oraz intuicyjny dla potencjalnego użytkownika,
czemu ma sprzyjać spójny wygląd formularzy w obrębie całej aplikacji.
Wszystkie formularze zaprojektowane zostały zgodnie z zasadami
dostępności oraz użyteczności. Formularze posiadają etykiety, opisujące
w jasny i czytelny sposób przeznaczenie pola. Ponadto etykiety spełniają swoją
drugą podstawową funkcję, po kliknięciu na nie, powodują aktywację pola do
którego się odnoszą.
Dostęp do tabeli pomiarów możliwy jest zarówno przy użyciu myszki jak
i klawiatury. Istnieje możliwość przejścia pomiędzy kolejnymi komórkami przy
pomocy klawisza Tab. Dostęp do tabeli możliwy jest również dzięki skrótom
klawiszowym.
5.5.1. Elementy języka HTML wpływające na funkcjonalność
formularza.
Język HTML posiada kilka znaczników stworzonych specjalnie dla
formularzy takich jak: LABEL, FIELDSET, LEGEND, TABINDEX,
ACCESSKEY, PASSWORD.
Tag LABEL pozwala na kojarzenie elementów formularza z etykietami
tekstowymi. Etykiety ilustrują cele i funkcje elementów formularza. Są
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
66
krytycznymi elementami, gdyż mówią użytkownikowi jakich informacji musi
dostarczyć do danego elementu formularza.
Jeżeli zdecydujemy się na pominięcie etykiety dla danego pola, musimy
mieć pewność, że użytkownik będzie wiedział do czego służy i będzie używał
go poprawnie. Jest kilka przypadków, w których projektanci mogą nie
prezentować etykiet wizualnie w obrębie form. Jest to zwyczajowe zachowanie,
kiedy stosujemy skomplikowane, złożone formularze w tabelach, gdy nagłówki
tabel utożsamiają funkcje bądź cele zbiorowych elementów formularza
w obrębie określonych wierszy i kolumn. Nagłówki tabeli mówią nam o tym,
jakie informacje powinniśmy wprowadzić do formularza. Projektanci często
decydują się na pominięcie etykiety z uwagi na zaoszczędzenie miejsca na
stronie internetowej, bądź jego brak. Usunięcie etykiet pozbawia formularze
pewnego elementu funkcjonalności – użytkownicy, klikając na etykiecie mają
natychmiastowy dostęp do elementu formularza, z którym etykieta jest
bezpośrednio powiązana. Zachowanie to jest szczególnie pomocne dla
użytkowników z pewnego rodzaju upośledzeniami motorycznymi.
Tag LABEL FOR kojarzy etykietę z elementem formularza do którego się
odnosi poprzez atrybut ID: <label for="stacja">Stacja:</label><br />
<input type="text" id="stacja" name="stacja" />
Formularza zwykle posiadają oddzielne sekcje dla wymaganych
informacji powiązanych z pewną kategorią. Wizualny projekt formularza
pozwala na wydzielenie sekcji przy użyciu nagłówków, ramek, kolorów,
grupowania powiązanych ze sobą etykiet, pól oraz innych elementów
formularza. HTML dostarcza środków do grupowania elementów w sekcje za
pomocą znacznika FIELDSET i przypisanie mu nagłówka używając znacznika
LEGEND. Element FIELDSET pozwala projektantowi na grupowanie
tematycznie powiązanych pól i etykiet. Grupowanie elementów w sekcje czyni
je bardziej zrozumiałymi dla użytkowników, ułatwia nawigację w obrębie
formularza za pomocą klawiatury. Właściwe użycie tego elementu czyni formę
bardziej funkcjonalną, dostępną. Poprzez ustawienie etykiety dla zgrupowanych
w sekcje elementów formularza, sekcje są wyróżnione wizualnie, przez co
podział staje się bardziej czytelny dla użytkownika.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
67
Rys. 5.5.1 Schemat formularza zbudowanego przy użyciu znaczników label, fieldset,
legend
Atrybut TABINDEX określa pozycję bieżącego elementu podczas
poruszania się w obrębie formularza za pomocą klawisza TAB. Wartość musi
znajdować się w przedziale od 0 do 32767. TABINDEX definiuje kolejność,
w jakiej elementy staną się aktywne, jeżeli będziemy poruszali się w obrębie
formularza za pomocą klawiatury. Możemy poruszać się również w obrębie
elementów zagnieżdżonych w innych elementach.
Tag ACCESSKEY przypisuje skrót klawiaturowy do danego elementu
formularza. Wybranie danego skrótu powoduje, że element staje się aktywny.
Wykonana akcja zależy od rodzaju elementu, możemy aktywować link, zmienić
wartość przełącznika opcji (ang. radio button), spowodować aktywację pola
tekstowego, która pozwoli nam na wprowadzenie tekstu.
5.5.2. Logiczna sekwencja elementów formularza.
Użytkownicy korzystający z klawiatury jako narzędzia umożliwiającego
nawigację w obrębie serwisu używają klawisza TAB do poruszania się pomiędzy
elementami formularza. Sekwencja, w jakiej możemy poruszać się klawiszem
TAB pomiędzy poszczególnymi elementami, odzwierciedla ich kolejność
w kodzie. Dla użytkowników logiczna sekwencja przemieszczania się pomiędzy
elementami jest udogodnieniem, formularz pozbawiona logicznej sekwencji jest
uciążliwy, jednak w dalszym ciągu możliwy do używania. Przykład źle
zorganizowanego formularza obrazuje (Rys. 5.5.2).
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
68
Rys. 5.5.2 Przykład źle zaprojektowanej struktury formularza[źródło: zaadoptowano na bazie
http://www.webaim.org/techniques/forms/]
Rys. 5.5.3 Formularz o poprawnie zaprojektowanej [źródło: zaadoptowano na bazie
http://www.webaim.org/techniques/forms/]
Wizualnie taki projekt formularza ma pewien sens, jednak gdy
spróbujemy przemieszczać się pomiędzy elementami za pomocą klawisza Tab
pojawia się problem. Najpierw przechodzimy do pola Email następnie Telefon
domowy itd.. Taka kolejność nie ma najmniejszego sensu z uwagi na to, że nie
zachowujemy logicznej sekwencji pól.
Dla zachowania uniwersalnej użyteczności i funkcjonalności formularza,
projektując logiczną sekwencje pól, powinniśmy zachować ogólnie przyjęte
konwencje, czyli kolejność pól taką, jaka jest najczęściej zachowywana.
Opisaną sytuację można zobrazować dzięki przykładowi formularza
generującego tabelę pomiarów (Rys. 5.5.4), logiczną sekwencją pól jest: region,
stacja, typ pomiaru, data od, data do.
Istnieją dwie zasady, które pozwolą na poprawę struktury formularza
(Rys. 5.5.2) mianowicie, umieszczenie etykiet obok pól opisywanych przez nie,
użycie znaczników języka HTML do kojarzenia elementów formularza z ich
etykietami.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
69
W zaprojektowanej aplikacji wszystkie formularze posiadają
poprawnie zaprojektowaną strukturę. Elementy formularzy ułożone są
w logicznej sekwencji, pola opatrzone są etykietami. Dzięki temu są one
funkcjonalne oraz dostępne dla użytkowników.
Rys. 5.5.4 Schemat formularza posiadającego logiczną sekwencje pól
5.5.3. Auto-wypełnianie pól tekstowych formularza treścią.
Pola tekstowe formularza, pozwalają na uzupełnianie ich tekstem, który
zawsze będzie się pojawiał w danym polu, a zarazem go opisywał. Projektanci
często używają tej techniki zamiast ustawiania etykiety dla danego pola. Taki
sposób projektowania jest wykorzystywany, jeżeli projektantowi zależy na
zaoszczędzeniu miejsca na stronie.
Jeżeli użytkownik poruszający się w obrębie formularza napotka na pole,
które zawiera domyślnie ustawiony tekst, musi go usunąć, zanim wprowadzi
żądaną informację. Możemy użyć JavaScript do automatycznego usunięcia
domyślnie ustawionego tekstu, gdy użytkownik wybierze pole - tekst
automatycznie zniknie. W przeciwnym wypadku, użytkownik jest zmuszony do
usunięcia tekstu, zanim wprowadzi informacje.
Problem pojawia się, jeżeli JavaScript jest nieużywany lub wyłączony,
użytkownik musi usunąć tekst, zanim wprowadzi informację, akcja taka kończy
się czasem niepowodzeniem. Aby zobrazować skalę problemu,
przeprowadzono testy związane z polem wyszukiwania. Jeżeli w polu był
ustawiony tekst „szukaj” zamiast etykiety, w pierwszej dziesiątce najczęściej
wyszukiwanych słów znajdował się tenże tekst, ponieważ użytkownicy często
zatwierdzali formularz przed usunięciem domyślnego atrybutu tekstowego.
Aby zachować funkcjonalność formularza zaleca się stosowanie etykiet
zamiast domyślnego atrybutu tekstowego. Taki rodzaj opisu przeznaczenia pola
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
70
jest dostępny dla wszystkich użytkowników i nie sprawia problemów. Nawet
w przypadku niewielkiej ilości miejsca na stronie, zaleca się wygospodarowanie
dodatkowej przestrzeni dla etykiety.
Rys. 5.5.5 Schemat obrazujący sposób auto-wypełniania pola tekstowego treścią
W zaprojektowanej aplikacji wykorzystano możliwość auto-wypełniania
pola tekstowego treścią. Takie rozwiązanie zostało zaimplementowane
w głównej tabeli przeznaczonej do wprowadzania wartości pomiarów. W tabeli
nie ma możliwości ustawiania etykiet dla odpowiednich pól tekstowych, dlatego,
aby jasno określić przeznaczenie pola wstawiono tekst „Wprowadź pomiar”.
Tekst jest automatycznie usuwany za pomocą JavaScript w momencie
przejścia do danego pola - nie ma możliwości zapisania go do bazy danych.
Nawet jeżeli na komputerze użytkownika JavaScript jest wyłączony tekst nie
zapisze się dzięki walidacji, która dopuszcza wprowadzanie jedynie liczbowych
wartości pomiarów.
5.5.4. Funkcjonalność formularzy
W obrębie aplikacji znajdują się cztery formularze o spójnym wyglądzie,
obsługujące odrębną funkcjonalność. Główny formularz pozwala na
wprowadzanie wartości pomiarów hydrometeorologicznych, pozostałe trzy, są
formularzami pomocniczymi, przy pomocy których, użytkownik może
wprowadzić stacje, regiony oraz typy pomiarów. Dane z formularzy
pomocniczych są wykorzystywane w formularzu głównym.
Funkcjonalność głównej tabeli, przeznaczonej do wprowadzania
pomiarów, obsługiwana jest przy pomocy biblioteki rozszerzeń JavaScript
Prototype.js. Prototype jest dostępny na licencji open source, dostarcza on
narzędzi do użycia z aplikacjami Ajax. Dzięki niemu, zamiast stosowania
własnego obiektu, możemy użyć udostępnionego przez bibliotekę Prototype.
W aplikacji użyto obiektu Ajax.Updater. Prototype jest stosowany po to, aby
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
71
uprościć tworzenie interaktywnych stron WWW. Dzięki niemu budowa bogatego
interfejsu użytkownika jest mniej czasochłonna.
Trzy pomocnicze formularze znajdują się kolejno na pod stronach „Dodaj
stacje”, „Dodaj typ pomiaru”, „Dodaj region”. Wszystkie trzy opierają się na
takiej samej funkcjonalności. Składają się z dwóch elementów. Formularza,
dzięki któremu możemy dodać stację, typ pomiaru, region. Tabeli, gdzie
wylistowane są istniejące wpisy.
W zaprojektowanej aplikacji do tworzenia tabel użyto technologii XSL,
pozwala ona na tworzenie schematów działań, dzięki którym serwer nie zajmuje
się sposobem wyświetlania danych. Język XSL (ang. Extensible Stylesheet
Language) jest rodziną języków funkcyjnych, opisujących sposób prezentacji
i przekształceń elementów zapisanych w XML. Tabele danych projektu
generowane są przy użyciu dwóch języków należących do rodziny XSL(ang.
Extensible Stylesheet Language) - XSLT (ang. Extensible Stylesheet Language
Transformation) oraz XPath (ang. XML Path Language). Język XSLT umożliwia
zmianę formatu dokumentu. XPath jest językiem zapytań pozwalającym na
przeszukiwanie i pobieranie danych zawartych wewnątrz dokumentu XML.
Język XSLT pozwala na tworzenie bardzo elastycznego szkieletu interfejsu
aplikacji. W aplikacji opartej na takich technologiach, serwer dostarcza dane
wyjściowe w postaci dokumentu XML, informacje te są następnie
przekształcane do formatu HTML dzięki transformacji XSL.
Dzięki zastosowaniu Ajax-a do aktualizacji danych na stronie, nie jest
konieczne odświeżanie jej po każdej modyfikacji. Aktualizowane będą jedynie
dane w tabeli, a nie cała strona. Zastosowany mechanizm pozwala na łatwą,
wygodną oraz funkcjonalną edycję danych. Tabela danych zawiera listę stacji,
typów pomiarów, regionów, posiada funkcję umożliwiającą edycję dowolnej
danej bez przeładowania strony. Tabelę w trybie edycji przedstawia ilustracja
(Rys.5.5.6). Nowo dodana stacja, typ pomiaru, region pojawiają się
automatycznie w tabeli, bez konieczności przeładowania strony. Dostęp do
tabeli możliwy jest zarówno przy użyciu myszki, jak i klawiatury. Tabela
skonstruowana przy użyciu Ajax-a zapobiega utracie danych, ponieważ są one
zapisywane po każdej zmianie. Dostosowuje to tabelę do ważnej zasady
dostępności, zalecającej zapisywanie danych tak często, jak tylko jest to
możliwe. Zastosowany mechanizm odbiega od często stosowanej konwencji,
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
72
polegającej na wypełnianiu, wielu pól formularza i zapisywaniu ich, dopiero
w momencie naciśnięcia przycisku „Wyślij”. Ponadto, ważnym czynnikiem
poprawiającym jakość oraz funkcjonalność tabeli jest jej projekt graficzny. Jest
on prosty, czytelny, poprzez graficzne wyróżnienie informacji.
Rys.5.5.6 Tabela danych w trybie edycji
Funkcjonalność formularza znajdującego się na głównej stronie odbiega
od pozostałych (Rys. 5.5.7). Umieszczono w nim pola wyboru, dzięki którym
mamy możliwość konfiguracji tabeli pomiarów. Menu rozwijalne, przeznaczone
do wyboru regionów jest ściśle powiązane, z menu rozwijalnym stacji. Po
wyborze regionu, w menu stacji pojawiają się tylko te stacje, które przypisane
są do wybranego regionu. Aby ułatwić wprowadzanie danych, tabela pomiarów
tworzona jest dla jednego typu pomiaru w określonym zakresie czasu.
Rys. 5.5.7 Schemat formularza oraz tabeli, pozwalających na wprowadzanie pomiarów
hydrometeorologicznych
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
73
Użytkownik ma możliwość wpisania zakresu dat, pomiędzy którymi chce
wprowadzać pomiary oraz godziny pomiaru, bądź może korzystać z kalendarza
stworzonego w JavaScript. Wpisywanie informacji dotyczących daty i czasu,
ułatwia, znajdujący się w polu, przykład formatowania danych, ustawiony na
pierwszy dostępny termin dla danego typu pomiarów, przy uwzględnieniu
pomiarów wcześniej zapisanych w bazie. Kalendarz JavaScript daje nam
możliwość wyboru miesiąca, roku, godziny pomiaru przy użyciu menu
rozwijalnego. (Rys. 5.5.8).
Rys. 5.5.8 Wygląd kalendarza zaprojektowanego przy użyciu JavaScript
W pierwotnej wersji aplikacji, aby przejść do kalendarza należało wybrać
przycisk „Cal” (Rys. 5.5.9). Po testach przeprowadzonych na użytkownikach
stwierdzono, że rozwiązanie takie jest mało czytelne dla użytkowników, dlatego
też zmieniono go na ikonę symbolizującą kalendarz.
Rys. 5.5.9 Schemat obrazujący sposób przejścia do kalendarza JavaScript
Po wejściu na stronę „Wprowadź pomiary”, po wybraniu regionu
i przynależącej do niego stacji, tabela pomiarów automatycznie ładuje się
z jednym wierszem. Jako termin pomiaru podawany jest pierwszy dostępny
termin, przy uwzględnieniu pomiarów wcześniej zapisanych w bazie.
Rozszerzając funkcjonalność stworzonej aplikacji, istnieje możliwość dodania
panelu administracyjnego, w którym będzie można przypisywać konkretnym
użytkownikom regiony, stacje oraz typy pomiarów.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
74
Zapis wartości pomiarów odbywa się automatycznie po przejściu do
następnego pola lub innego elementu strony. Po zapisie, użytkownik zostaje
pozbawiony możliwości bezpośredniej edycji pola, do którego wcześniej
wprowadził pomiar. Odbywa się to przez dezaktywacje elementu. Użytkownik
ma możliwość edycji tego pola poprzez odnośnik „Edytuj” pojawiający się
automatycznie po zapisaniu pomiaru. Testy funkcjonalności wykazują, że
użytkownicy czują się zdezorientowani brakiem informacji, czy wprowadzony
pomiar został zapisany poprawnie. Korzystając z tejże uwagi osób testujących
aplikację, należy rozważyć dodanie ikony symbolizującej zapisanie elementu.
Można to zrealizować poprzez wyświetlanie zielonego symbolu obok pomiaru,
jeśli zapis się powiódł i czerwonego jeśli z jakiegoś powodu nie udało się
zapisać informacji. W przypadku niepowodzenia, powinien pojawić się link do
ponowienia próby.
Aby zmniejszyć ilość możliwych błędów, region oraz stację wybieramy
z menu rozwijalnego, alternatywnym rozwiązanie byłoby wpisywanie informacji
ręczne, jednak zwiększa ono prawdopodobieństwo popełnienia błędu przez
użytkownika.
W formularzach pomocniczych wymagane pola zostały oznaczone
czerwoną gwiazdką i opatrzone informacją o konieczności wypełnienia.
Walidacji wprowadzonych danych dokonujemy przy użyciu JavaScript –
jest to walidacja po stronie klienta. Pole, w którym wykryto błąd, oznaczane jest
czerwoną ramką, pojawia się komunikat o błędzie, jasno informujący
użytkownika o zaistniałym problemie. W tabeli typów pomiarów przechowywany
jest zakres tolerancji, w którym powinny mieścić się wartości danych. Wartość
górna i dolna tego zakresu wykorzystywana jest w procesie walidacji. Wartości
pomiarów mogą być jedynie numeryczne.
5.6. Użycie klawiszy skrótu
Użytkownicy, korzystający z dostępu do stron przy pomocy klawiatury,
bardzo często używają klawisza TAB do poruszania się pomiędzy elementami
strony. Aby przemieszczanie było efektywne musi odbywać się w określonej,
logicznej sekwencji. Kolejność przemieszczania się przy użyciu klawisza TAB
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
75
wiąże się z kolejnością występowania poszczególnych elementów w kodzie.
Istnieje możliwość narzucenia kolejności przy użyciu atrybutu TABINDEX.
W większości przypadków TABINDEX nie jest konieczny. Powinien być
używany jedynie w przypadku, gdy domyślna kolejność, w jakiej poruszamy się
pomiędzy elementami strony nie jest idealna i jeżeli kolejność dostępu nie może
być zmieniona poprzez zmiany w kodzie źródłowym.
W zaimplementowanej aplikacji istnieje możliwość dostępu do strony
zarówno przy pomocy myszki jak i klawiatury. Przejście pomiędzy kolejnymi
elementami formularza oraz tabel jest możliwe przy użyciu klawisza Tab. Nie
ma konieczności użycia atrybutu TABINDEX. Nie ma potrzeby zmiany sekwencji
przechodzenia pomiędzy elementami formularza. Wszystkie elementy strony są
ułożone w logicznej sekwencji. Aby uzyskać bezpośredni dostęp do elementów
formularza zdefiniowano klawisze skrótu.
Klawisze skrótu są użytecznym narzędziem dla wszystkich
użytkowników, ponieważ pozwalają na szybszą interakcję, dostęp do serwisu.
Wśród osób z różnego rodzaju upośledzeniami motorycznymi, czy też wadami
wzroku również obserwuje się częstą tendencję do używania klawiszy skrótu.
Klawisze skrótu są coraz częściej wykorzystywane w aplikacjach
sieciowych. Atrybut ACCESSKEY został specjalnie zaprojektowany w celu
ułatwienia dostępu do zawartości danej strony, niestety specyfikacja tego
elementu języka HTML jest ogólnikowa i niekompletna. Wynikiem tego jest
używanie wielu pomocniczych technologii, pozwalających na bardziej efektywne
wykorzystanie klawiszy skrótu. Projektanci przeglądarek internetowych,
projektanci serwisów internetowych stosują swoje własne, często niezgodne ze
sobą zasady implementacji. Pomimo tego, iż klawisze skrótu mogłyby być
wielkim udogodnieniem, a zarazem mogłyby ułatwiać dostęp oraz poprawiać
funkcjonalność, ich implementacja jest bardzo uciążliwa i często nie przynosi
żądanego skutku.
Podczas tworzenia aplikacji zaimplementowano następujące klawisze
skrótu:
accesskey = ”R” – dostęp do pola region
accesskey = ”S” – dostęp do pola stacja
accesskey = ”P” - dostęp do pola pomiar
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
76
accesskey = ”A” – dostęp do pola data od
accesskey = ”T” – dostęp do pola data do
accesskey = ”0” – dostęp do pierwszego elementu menu głównego
accesskey = ”M” – bezpośredni dostęp do pierwszego elementu tabeli
pozwalającej na wprowadzanie pomiarów
Użytkownicy informowani są o klawiszach skrótu poprzez podkreślenie
litery odpowiadającej klawiszowi skrótu w etykiecie opisującej dane pole (Rys.
5.6.1). Ponadto zastosowanie odpowiednich kombinacji klawiszy skrótu
z klawiszem specjalnym opisane zostało opisane na pod stronie „Dostępne
klawisze skrótu”.
Rys. 5.6.1 Schemat przedstawiający sposób informowania użytkownika o klawiszach skrótu
Z uwagi na liczne problemy związane z ACCESSKEY pojawia się pytanie,
czy warto je implementować. Jeżeli implementacja klawiszy skrótu będzie
przemyślana, ich zastosowanie przyniesie liczne korzyści użytkownikom.
Dostęp do serwisu będzie znacznie szybszy przez co poprawi się
funkcjonalność oraz dostępność witryny. Być może w przyszłości projektanci
przeglądarek internetowych zadbają o lepszą implementację funkcjonalności
klawiszy skrótu oraz ujednolicą zasady dostępu pod różnymi wersjami
przeglądarek internetowych. Do tego czasu kwestia użycia skrótów zależy od
osobistych preferencji użytkownika.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
77
6. Testy funkcjonalności zaprojektowanej aplikacji
Testy funkcjonalności powinny być wykonywane podczas procesu
projektowania i implementacji. Ich rezultaty umożliwiają ulepszenie produktu
którym będzie aplikacja, oraz pozwalają na lepsze zrozumienie potrzeb,
użytkowników.
6.1. Planowanie testów
Każdy test użyteczności tyczy się innego obszaru funkcjonalności, jego
cel jest inny w zależności od rodzaju aplikacji, na której został przeprowadzony.
Rezultaty testów zależą od celów i kontekstu testu. Testy przeprowadzone na
nowo zaprojektowanej aplikacji będą zupełnie inne niż testy przeprowadzane na
serwisie już istniejącym, uzupełnionym o nową funkcjonalność.
Niezależnie od funkcjonalności, którą chcemy przetestować, istnieje kilka
ważnych zagadnień które musimy wziąć pod uwagę podczas planowania
testów.
Musimy zdecydować się, na ilu osobach będziemy przeprowadzali testy.
Testy przeprowadzane są zazwyczaj na grupie osób 5-20.
Zdecydowano się na przeprowadzenie testów na grupie pięciu osób.
Testy przeprowadzone na takiej grupie testerów dają najlepsze rezultaty.
Tom Landauer zaproponował wzór obrazujący ilość odnalezionych
problemów związanych z użytecznością w testach przeprowadzonych na grupie
n osób:
N(1-(1-L)n) N jest całkowitą ilością problemów związanych z użytecznością
w procesie projektowania, a L jest wartością problemów związanych
z użytecznością w momencie wykonania testów na jednej osobie. Zazwyczaj
przyjmowaną wartością L jest 31%. Wykonując obliczenia dla L=31%
otrzymano następujące wyniki:
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
78
Rys. 6.1 Ilość wykrytych problemów związanych z użytecznością w zależności od ilości
użytkowników na których przeprowadzono testy[źródło: http://www.useit.com/]
Tak jak założono, pojedynczy tester wykrywa ok. 1/3 problemów
związanych z użytecznością. Kolejne osoby testujące wykrywają część błędów,
które wykryli poprzednicy plus część nowych problemów. Wraz ze wzrostem
ilości osób na których przeprowadzamy testy dowiadujemy się coraz mniej.
6.2. Czas trwania testów
Kolejnym problemem, który należy wziąć pod uwagę, będzie to, ile czasu
zajmie nam przeprowadzenie testów. Z reguły całkowity czas planowania,
przeprowadzania i analizowania wyników testów mieści się w granicach od
jednego do sześciu tygodni w przypadku skomplikowanych projektów. Długość
indywidualnego testu jest różna, jednak zazwyczaj wynosi około godziny.
W zaprojektowanej aplikacji testy funkcjonalności trwały tydzień. Testy zostały
przeprowadzone w trakcie implementacji, co pozwoliło na poprawę
użyteczności aplikacji. Po wykonaniu testów poprawiono błędy oraz
przeanalizowano sugestie użytkowników na temat zmian.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
79
6.3. Tworzenie, przeprowadzanie testów
Kluczowym czynnikiem wpływającym na wynik testu jest staranne
dobranie obszaru testów. Jeżeli chodzi o duże aplikacje sieciowe, decyzje
tyczące się wyboru obszaru testów podejmowane są na spotkaniach
projektantów i ludzi związanych z implementacją. W takim wypadku grupa osób
decyduje o tym, jaki obszar ma podlegać testom, czy będą to nowo dodane
fragmenty funkcjonalności, czy też elementy interfejsu najczęściej używane,
bądź te, które sprawiają najwięcej trudności użytkownikom. Po wyborze
obszaru, na którym zostaną przeprowadzone testy, musimy sformułować
zadania dla osób testujących. Zadania powinny obejmować typowe czynności
wykonywane przez użytkownika podczas korzystania z testowanej aplikacji.
Scenariusz postępowania dla osób testujących powinien być krótki, aby osoba
nie musiała zbyt długo zagłębiać się w treść zadania. Ponadto język
scenariusza powinien być prosty, nie zaleca się używania fachowego
słownictwa, aby osoba, na której przeprowadzamy test, mogła go bez
problemów zrozumieć. Scenariusz ma być realistyczny to znaczy, powinien
zawierać typowe czynności, które wykonywane są przez użytkowników podczas
wizyty na testowanej stronie WWW.
Scenariusz postępowania dla użytkowników testujących aplikację
zaprojektowaną w ramach niniejszej pracy stworzono zgodnie z wytycznymi
zamieszczonymi powyżej. Test został napisany w taki sposób, aby sprawdzić
funkcjonalność najczęściej używanych, obszarów aplikacji. Zadania postawione
przed użytkownikiem zostały sformułowane w prosty, przejrzysty sposób. Każdy
z pięciu użytkowników otrzymał zadanie:
„Aplikacja którą przetestujesz daje Ci możliwość:
Dodawania regionu
Dodawania stacji
Dodawania typu pomiaru
Wprowadzania pomiarów
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
80
Twoim zadaniem będzie dodanie do stacji „Babia 2” usytuowanej
w regionie o nazwie „Beskid Makowski” wpisów dla typu pomiaru „Termometr
Glebowy 5cm” następujących wartości:
Data Wartość
01-03-2006 -1,2
02-03-2006 -1,6
03-03-2006 -1,1
04-03-2006 -1,7
Wszystkie pomiary zostały wykonane o godzinie 19:00
Każdy z użytkowników otrzymał inny region, stację, typ pomiaru oraz
zakres wartości pomiarów, które musi wprowadzić. Zadanie wymagało od
każdego użytkownika: dodania regionu, dodania stacji, dodania typu pomiaru,
dodania wartości pomiarów w określonym przedziale czasowym.
Podczas przeprowadzania testu obserwowano pracę użytkowników,
obserwowano wykonywane przez nich czynności, sprawdzano, co zajmuje im
najwięcej czasu, z czym mają największe trudności.
Po przeprowadzeniu testu, użytkownik musiał wypełnić kwestionariusz,
który składa się z kilku pytań ogólnych i kilku szczegółowych. Aby ocenić
funkcjonalność zaprojektowanej aplikacji zadano użytkownikowi następujące
pytania:
1) Jak oceniasz stopień trudności zadania (było ono łatwe czy trudne)?
2) Co sprawiło Ci największe trudności podczas wykonywania zadania?
3) Co sądzisz na temat formularzy zamieszczonych na stronie? Są łatwe czy
trudne w obsłudze, czy posiadają czytelne etykiety jasno opisujące ich zadania?
4) Czy w jakimś momencie podczas wykonywania zadania brakowało Ci
podpowiedzi co należy zrobić, jaką wartość należy wpisać w dane pole?
5) Co sądzisz o kolorystyce na stronie oraz o czcionkach i wielkości tekstu? Czy
jakieś teksty są dla ciebie nieczytelne z powodu wielkości, bądź źle dobranej
kolorystyki?
6) Jak oceniasz nawigację na stronie?
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
81
7) Jak oceniasz funkcjonalność tabeli pozwalającej na wprowadzanie
pomiarów?
8) Czy podczas wykonywania zadania zauważyłeś opcje pozwalające Ci na
zmianę wielkości czcionki, kontrastu,? Jeśli tak to czy wykorzystałeś te opcje do
poprawy czytelności strony.
Analiza wyników
Po przeprowadzeniu testów przeanalizowano dane i wyciągnięto wnioski,
które pozwoliły na poprawę funkcjonalności aplikacji.
Tabela 6.1 przedstawia zestawienie uwag osób testujących aplikację,
pozwalających na poprawę funkcjonalności zaprojektowanej aplikacji.
Tabela 6.1 Zestawienie uwag użytkowników odnoszących się do poszczególnych elementów
aplikacji
Elementy aplikacji Uwagi użytkowników
Nawigacja
Użytkownicy zgłosili uwagi co do nawigacji głównej. Dwóch spośród grupy użytkowników miało problem z odczytaniem białego tekstu na zielonym tle, tekst był dla nich za mały, kontrast pomiędzy tekstem, a tłem niewystarczający.
Typografia
Trzech spośród grupy testujących użytkowników stwierdziło, że instrukcje odnoszące się do sposobu wypełniana tabel są napisane zbyt małą czcionką, co powoduje dyskomfort
Kolorystyka Użytkownicy nie zgłosili uwag co do kolorystyki
Tabele
Czterem użytkownikom brakowało alfabetycznego sortowania nazw stacji, regionów, typów pomiarów. W tabeli odnoszącej się do stacji jednemu z użytkowników brakowało opcji edycji regionu do którego przynależy stacja.
Formularze
Użytkownicy nie zgłosili uwag co do funkcjonalności formularzy. Jedyną dygresją było spostrzeżenie jednego z użytkowników odnoszące się do niespójnego nazewnictwa. W zakładce "Dodaj typ pomiaru" spodziewano się etykiety "Dodaj typ pomiaru" a pole opatrzone było etykietą "Dodaj rodzaj pomiaru"
Kalendarz
Użytkownicy woleli używać kalendarza do wprowadzania dat niż wpisywać je ręcznie. Jeden z użytkowników zauważył iż bardziej intuicyjne dla niego było by gdyby obok menu do wyboru godziny umieścić etykietę "Godzina"
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
82
Tabela główna
Użytkownicy mieli problem ze zrozumieniem iż dane wprowadzone przez nich są automatycznie zapisywane w momencie przejścia do kolejnej komórki. Brakowało im przycisku "Zapisz". Ponadto mieli wrażenie, że forma jest niekompletna w momencie jej utworzenia kiedy pole "Opcje" jest puste. Brakowało im zmiany wskaźnika myszki na „rączkę” w momencie wskazania na link "Edytuj"
Wyniki przeprowadzonych testów wpłynęły na zmianę kilku elementów
w obrębie aplikacji. Postanowiono zmienić kolorystykę w nawigacji. Białe litery
na jasno zielonym tle zmieniono na ciemnoszare. Zdecydowano się również na
powiększenie rozmiaru tekstu w menu nawigacyjnym, zwiększono tekst
instrukcji opisujących sposób wypełniania formularza. Dwóch użytkowników
spośród badanej grupy zdecydowało się na skorzystanie z opcji powiększenia
tekstu. Ogół użytkowników stwierdził, że linki „Zmień rozmiar tekstu”, „Zmień
kontrast”, „Skróty klawiszowe” powinny być większe.
Aby uczynić tabelę wyświetlającą stacje, regiony, typy pomiarów bardziej
funkcjonalną i użyteczną dla użytkownika, zdecydowano się na dodanie
sortowania alfabetycznego nazw. Z uwagi na to, że zgłoszono kilka problemów
z tabelą główną pozwalającą na wprowadzenie wartości pomiarów,
zdecydowano się na zmianę jej funkcjonalności. Pierwszym krokiem było
dodanie nad tabelą widocznego komunikatu, informującego użytkownika o tym,
iż dane są automatycznie zapisywane po przejściu do następnej komórki.
Oprócz tego zmieniono kolor czcionki pomiaru już wprowadzonego
i zapisanego, użytkownicy nie byli zadowoleni z ciemnoszarego napisu na
szarym tle.
Przeprowadzone testy pozwoliły na poprawę funkcjonalności pewnych
elementów aplikacji, które sprawiały szczególny problem użytkownikom. Testy
przeprowadzono w trakcie implementacji projektu co pozwoliło na poprawę
użyteczności ostatecznej wersji aplikacji. Testy funkcjonalności są bardzo
złożone i analiza ich wyników stwarza problemy nawet osobom zajmującym się
funkcjonalnością od wielu lat. Po przeprowadzeniu testów mamy wiele
materiałów, powstałych w wyniku obserwacji, prowadzonych w trakcie
przeprowadzania testu oraz posiadamy kwestionariusze z odpowiedziami
testowanych osób. Grupowanie informacji tak jak przedstawiono to w (Tabela
6.1) ułatwia analizę i pozwala sformułować wnioski.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
83
7. Podsumowanie
W pracy przedstawiono najważniejsze zagadnienia odnoszące się do
kwestii użyteczności i dostępności aplikacji internetowych. Zamieszczono wiele
reguł, zasad, wskazówek i metod, w jaki sposób należy projektować, poprawne
pod względem funkcjonalnym, aplikacje. Opisano podejście do projektowania,
które pozwoli przewidzieć trudności, jakie mogą napotkać użytkownicy
korzystający z serwisu. Funkcjonalność serwisów ulega zmianie w mniejszym
stopniu niż technologia ich tworzenia, dlatego informacje zawarte w pracy będą
mogły być stosowane przez wiele lat.
W dzisiejszych czasach funkcjonalność coraz bardziej zyskuje na
znaczeniu. Użytkownicy w sieci mają możliwość wyboru tysięcy witryn więc
oczywiste jest, że zdecydują się na wybór bardziej funkcjonalnej z ich punktu
widzenia. Powoduje to, iż projektanci kładą coraz to większy nacisk aby ich
aplikacje były ergonomiczne.
Pomimo ogromnej popularności na rynkach światowych tematyki
związanej z funkcjonalnością, użytecznością i dostępnością aplikacji - w Polsce
niewiele osób zajmuje się tym zagadnieniem. Na rynku polskim istnieje bardzo
mało publikacji, istniejące źródła są niekompletne, bądź zawierają wiele błędów.
Zaprojektowana aplikacja jest projektem intranetowym. Projektując
intranet stosujemy się do podstawowych wytycznych dotyczących
funkcjonalności, które zostały opisane w niniejszej pracy. Zaprojektowana
witryna jest ukierunkowana na pracownika, w przeciwieństwie do aplikacji
internetowych, które są ukierunkowane na użytkownika. Aplikacja została
zoptymalizowana pod kątem wydajności pracowników.
Stworzony system jest uproszczoną wersją dziennika pomiarów,
zorientowaną jedynie na pokazanie zagadnień ergonomii. Celem pracy nie było
stworzenie kompletnego interfejsu. Projekt powstał w oparciu o zasady
dostępności i funkcjonalności serwisów internetowych. Pierwszym etapem
realizacji projektu było zapoznanie się z fundamentalnymi zasadami tworzenia
ergonomicznych systemów. Kolejnym etapem był dobór narzędzi. Następnie
zaimplementowano funkcjonalność, opierającą się na wcześniej poznanych
regułach. Użyteczność poszczególnych elementów aplikacji była na bieżąco
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
84
weryfikowana, poprawiana, uzupełniana poprzez testy przeprowadzane na
użytkownikach. Następnie dodano szatę graficzną aplikacji, z zamiarem
uczynienia jej prostą, przejrzystą i czytelną dla użytkownika.
Aplikację stworzono przy użyciu narzędzi takich jak: PHP5, MySQL5.0,
Ajax, JavaScript, CSS. Narzędzia wybrano w oparciu o wcześniejsze
doświadczenia programistyczne oraz ze względu na ich możliwości ułatwiające
implementację funkcjonalnej i dostępnej aplikacji. Szczególnie przydatną
technologią był Ajax. Jest on powszechnie stosowany od niedawna, posiada
ogromne możliwości poprawiające interakcję pomiędzy serwisem,
a użytkownikiem. Niweluje ogromną barierę dzielącą aplikacje internetowe od
systemowych.
System wykonano zgodnie z założeniami, zaimplementowano
funkcjonalność pozwalającą w łatwy i szybki sposób wprowadzać pomiary
hydrometeorologiczne. Ponadto zaimplementowana aplikacja cechuje się
wysoką użytecznością i dostępnością, co potwierdziły badania przeprowadzone
na grupie potencjalnych użytkowników. Implementacja uwzględnia możliwość
rozszerzenia funkcjonalności serwisu o panel administracyjny, pozwalający na
zarządzanie użytkownikami poprzez przypisywanie im konkretnych pomiarów
oraz regionów, za które będą odpowiadać.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
85
8. Wnioski
Praca udowodniła, że projektant, twórca znający fundamentalne zasady
użyteczności, dostępności aplikacji, może zbudować narzędzie przystępne,
a zarazem funkcjonalne, wpływające w znaczący sposób na wydajności pracy,
zadowolenie użytkownika.
Gromadzenie pomiarów hydrometeorologicznych w komputerowej bazie
danych jest uniwersalnym rozwiązaniem z uwagi na łatwość dostępu do
danych, łatwość przenoszenia danych, łatwość udostępniania danych, większe
bezpieczeństwo magazynowanych danych.
Z uwagi na to, że typografia oraz kolorystyka są ważnymi elementami
wpływającymi na wizualny odbiór serwisu przez użytkownika, starano się
dobrać najlepszy schemat kolorów oraz krój i kolor czcionki.
Istnieje kilka wytycznych dotyczących doboru kolorów. Pierwsza dotyczy
zalecanej ilości barw. Użycie zbyt wielu barw pogarsza funkcjonalność serwisu,
staje się on nieczytelny, ciężko odszukać w nim potrzebne informacje,
przeglądanie go męczy wzrok. W zaprojektowanym serwisie użyto dwóch barw:
szarego oraz jego odcieni i jasnozielonego.
Stosując się do zasad dostępności związanych z typografią starano się
dobrać rozmiar i krój czcionki tak serwis był maksymalnie czytelny dla
użytkowników. Z tego względu dobrano czcionkę Verdana – jest ona najlepszą
czcionką jaką mamy do dyspozycji projektując aplikację internetową oraz jest
czytelna nawet przy niewielkich rozmiarach.
Ważnym elementem zaprojektowanej aplikacji jest system nawigacji.
Jednolity wygląd globalnej nawigacji, znajdującej się w tym samym miejscu na
każdej stronie, informuje użytkownika, że w dalszym ciągu przebywa on w
obrębie tej samej witryny. Ujednolicony wygląd wymaga jednorazowego
poświęcenia czasu na nauczenie się go. Aby uczynić nawigację oraz
architekturę informacji czytelną dla użytkownika, projektując aplikacje
wykorzystano konwencje panujące w sieci. Konwencje określają wygląd
i położenie elementów nawigacyjnych. Umieszczenie pewnych elementów
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
86
w standardowych miejscach umożliwia łatwe i szybkie ich odnalezienie,
a ujednolicony wygląd pozwala na odróżnienie ich od pozostałych elementów.
Formularze są najważniejszym elementem aplikacji. Głównym
założeniem projektu jest stworzenie funkcjonalnego oraz dostępnego systemu,
pozwalającego na wprowadzanie danych hydrometeorologicznych. System ten
ma być prosty w obsłudze oraz intuicyjny dla potencjalnego użytkownika,
czemu ma sprzyjać spójny wygląd formularzy w obrębie całej aplikacji.
Istnieje kilka zasad sprawiających, że formularze stają się łatwiejsze,
szybsze do wypełnienia, bardziej funkcjonalne. Formularze powinny posiadać
etykiety których zadaniem jest jasne i czytelne opisanie przeznaczenia pól do
których się odnoszą. Formularze powinny jasno informować użytkownika o tym
które pola są opcjonalne a które obowiązkowe. Warto informować użytkownika
o dopuszczalnych możliwościach wpisywania danych poprzez zamieszczanie
przykładów prawidłowego wypełnienia pola, tworzenie list rozwijalnych,
zawierających dopuszczalne opcje.
Główna tabela pozwalająca na wprowadzanie wartości pomiarów została
zaprojektowana tak aby w jak największym stopniu ułatwić użytkownikowi
wprowadzanie danych. W momencie kiedy użytkownik chce wprowadzić
pomiar, po wybraniu regionu i przynależącej do niego stacji, tabela pozwalająca
na wprowadzenie danych automatycznie ładuje się z jednym wierszem. Jako
termin pomiaru podawany jest pierwszy dostępny termin, przy uwzględnieniu
pomiarów wcześniej zapisanych w bazie. Zapis wartości pomiarów odbywa się
automatycznie przy przejściu do następnego pola lub innego elementu strony.
Dostosowuje do zaimplementowaną tabelę do ważnej zasady dostępności,
zalecającej zapisywanie danych tak często jak to tylko możliwe.
Jednym z głównych wymogów pozwalających na zachowanie
uniwersalnej funkcjonalności jest umożliwienie użytkownikowi dostępu do
aplikacji internetowej zarówno przy pomocy myszki jak i klawiatury.
W zaimplementowanej aplikacji przejście pomiędzy kolejnymi elementami
formularza możliwe jest przy użyciu klawisza Tab oraz zdefiniowanych
w obrębie aplikacji skrótów klawiszowych.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
87
Użyteczność aplikacji można określić na podstawie kilku jej cech.
Czytelności interfejsu determinuje łatwość realizacji przez użytkownika
podstawowych zadań podczas poruszania się w obrębie witryny. Na czytelność
interfejsu wpływają takie elementy aplikacji jak nawigacja, menu, odnośniki,
architektura informacji. Poprawne zaprojektowanie tychże elementów ułatwia
w znaczącym stopniu korzystanie z aplikacji.
Aplikacja powinna być zaprojektowana tak aby zapewniała jak
największą wydajność oraz efektywność. Cechy te definiują szybkość
wykonywania przez użytkownika określonych zadań.
Kolejną cechą definiującą jakość oraz użyteczność aplikacji jest zdolność
zapamiętywani jak należy obsługiwać interfejs. Poprawnie zaprojektowany
powinien być łatwy w obsłudze dla użytkownika nawet po długim okresie czasu
kiedy z niego nie korzysta.
Aplikacja opierająca się na zasadach funkcjonalności powinna być
zaprojektowana tak aby użytkownik popełniał jak najmniej błędów w trakcie
korzystania z niej. Jeżeli serwis jest zaprojektowany w poprawny sposób
użytkownik radzi sobie bardzo szybko z błędami, nie sprawiają mu problemów.
Użytkownik powinien być zadowolony z pracy z interfejsem.
Na poprawę funkcjonalności i dostępności aplikacji wpływają testy
przeprowadzone na użytkownikach. Ich wyniki pozwoliły na naprawę błędów
utrudniających użytkownikom korzystanie z aplikacji. Zaprojektowanie aplikacji
beż wkładu użytkowników w znaczącym stopniu ogranicza użyteczność
serwisu.
O ile projektanci za granicą przywiązują coraz to większą uwagę do
funkcjonalności, dostępności, użyteczności, a stosowanie tych zasad stało się
wręcz pożądane, na rynku polskim istnieje poważna luka jeżeli chodzi o tego
typu tematykę. Zrealizowany w ramach pracy system oraz przedstawione
zasady, reguły użyteczności i dostępności mogły by posłużyć jako wskazówka
dla wielu projektantów pragnących ulepszyć funkcjonalność swoich aplikacji.
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
88
Bibliografia:
Andrew R., „CSS. Antologia”, Helion, Gliwice 2005
Beaird J., „Principles of beautiful Web design”, BookNZ, Canada
2007
Bringhurst R., “The Elements of Typographic Style ”, Hartley &
Marks, Canada 1996
Choi W., Kent A., Lea Ch., Prasad G., Ullman Ch., „Od podstaw.
PHP4”, Helion, Gliwice 2000
Darie Ch., Brinzarea B., Chereches-Tosa F., Bucica M., “AJAX
i PHP. Tworzenie interaktywnych aplikacji internetowych”,
Helion, Gliwice 2006
Horton S., “Access by Design: A Guide to Universal Usability for
Web Designers”, New York 2005
Itten J., “The Art of Color: The Subjective Experience and Objective
Rationale of Color”, John Wiley & Sons Inc, United States 1974
Jaszkiewicz A., „Inżynieria oprogramowania”, Helion, Gliwice
1997
Krug S., „Nie każ mi myśleć o życiowym podejściu do
funkcjonalności stron internetowych”, Helion, Gliwice 2006
Lecky-Thompson E., Eide-Goodman H., Nowicki S. D., Cove A.,
“PHP5. Zaawansowane programowanie”, Helion, Gliwice 2005
Linderman M., Fried J., “Przyjazne witryny WWW”, Helion,
Gliwice 2005
Machemoff M., „Ajax. Wzorce projektowe”, Helion, Gliwice 2007
Nielsen J, “Projektowanie funkcjonalnych serwisów
internetowych”, Helion, Gliwice 2004
Nielsen J., Loranger H., “Optymalizacja funkcjonalności
serwisów internetowych”, Helion, Gliwice 2007
Perry B. W., „80 sposobów na AJAX”, Helion, Gliwice 2007
Popularna Encyklopedia Powszechna, Fogra, Kraków 1999
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
89
Rosenfeld L., Morville P., „Architektura informacji”, Helion,
Gliwice 2003
Spolsky J., “User Interface Design for Programmers”, Apress,
New York 2001
Ullman L., „Dynamiczne strony WWW. PHP i MySQL”, Helion,
Gliwice 2004
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
90
Zasoby internetowe:
[L0]http://www.d.umn.edu/itss/support/Training/Online/webdesign/a
ccessibility.html
[L1] http://universalusability.com/access_by_design/
[L2] http://webaim.org/
[L3] http://www.alistapart.com/
[L4] http://www.smashingmagazine.com/
[L5] http://www.freecsstemplates.org/css-templates/
[L6]http://www.digital-
web.com/types/design_in_theory_and_practice/
[L6] http://www.colorsontheweb.com/
[L7] http://www.useit.com/
[L8] http://joeclark.org/book/sashay/serialization/
[L9] http://www.w3.org/WAI/intro/accessibility.php
[L10] http://www.usability.com.au/index.cfm
[L11] http://www.w3.org/TR/WCAG10/
[L12] http://www.uie.com/articles/
[L13] http://pl.wikipedia.org/
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
91
Spis rysunków:
RYS. 3.3.1 SPEKTRUM FAL ELEKTROMAGNETYCZNYCH WIDZIANYCH PRZEZ OKO LUDZKIE [ŹRÓDŁO:
HTTP://WWW.COLORSONTHEWEB.COM/] ................................................................................. 18 RYS 3.3.2 KOŁO BARW [ŹRÓDŁO: HTTP://WWW.COLORSONTHEWEB.COM/].................................. 19 RYS. 3.3.3 KOŁO BARW, PRZYKŁAD BARW ANALOGICZNYCH [ŹRÓDŁO:
HTTP://WWW.COLORSONTHEWEB.COM/] ................................................................................. 20 RYS. 3.3.4 PRZYKŁAD SERWISU KORZYSTAJĄCEGO ZE SCHEMATU BARW ANALOGICZNYCH ............ 20 RYS. 3.3.5 KOŁO BARW, PRZYKŁAD BARW KOMPLEMENTARNYCH [ŹRÓDŁO:
HTTP://WWW.COLORSONTHEWEB.COM/] ................................................................................. 20 RYS. 3.3.6 PRZYKŁAD SERWISU WYKORZYSTUJĄCEGO SCHEMAT BARW KOMPLEMENTARNYCH ........ 21 RYS. 3.3.7 KOŁO BARW, PRZYKŁAD BARW KOMPLEMENTARNYCH ROZDZIELONYCH [ŹRÓDŁO:
HTTP://WWW.COLORSONTHEWEB.COM/] ................................................................................. 21 RYS. 3.3.8 KOŁO BARW, PRZYKŁAD TRIADY BARW [ŹRÓDŁO:
HTTP://WWW.COLORSONTHEWEB.COM/ ] ................................................................................ 21 RYS. 3.3.9 PRZYKŁAD BARW MONOCHROMATYCZNYCH .................................................................... 22 RYS. 3.3.10 PRZYKŁADY KONTRASTÓW W ODCIENIU W KOLEJNOŚCI: WYSOKI KONTRAST, NISKI
KONTRAST, CIEPŁY I CHŁODNY KONTRAST [ŹRÓDŁO: HTTP://WWW.COLORSONTHEWEB.COM/]................................................................................................................................................... 22
RYS 3.3.11 PRZYKŁADY KONTRASTU W WARTOŚCI KOLEJNO, WYSOKI KONTRAST, NISKI KONTRAST [ŹRÓDŁO: HTTP://WWW.COLORSONTHEWEB.COM/]................................................................ 22
RYS. 3.3.12 PRZYKŁAD KONTRASTU W SATURACJI KOLEJNO, WYSOKI KONTRAST, NISKI KONTRAST [ŹRÓDŁO: HTTP://WWW.COLORSONTHEWEB.COM/]................................................................ 23
RYS. 3.4.1 RYSUNEK PRZEDSTAWIA ELEMENTY WYRÓŻNIAJĄCE CZCIONKI SZERYFOWE [ŹRÓDŁO: HTTP://WWW.WEBAIM.ORG/TECHNIQUES/FONTS/] ................................................................. 25
RYS 3.4.2 RYSUNEK PRZEDSTAWIA ELEMENTY CHARAKTERYSTYCZNE DLA CZCIONEK BEZSZERYFOWYCH [ŹRÓDŁO: HTTP://WWW.WEBAIM.ORG/TECHNIQUES/FONTS/]................. 25
RYS. 3.4.3 PORÓWNANIE TRZECH GŁÓWNYCH CZCIONEK SZERYFOWYCH [ŹRÓDŁO: HTTP://WWW.WEBAIM.ORG/TECHNIQUES/FONTS/] ................................................................. 26
RYS. 3.4.4 ZESTAWIENIE NAJPOPULARNIEJSZYCH CZCIONEK BEZSZERYFOWYCH [ŹRÓDŁO: HTTP://WWW.WEBAIM.ORG/TECHNIQUES/FONTS/] ................................................................. 26
RYS. 3.5.3 PRZYKŁAD FORMULARZA REJESTRACYJNEGO Z POPRAWNYM OZNACZENIEM PÓL OBOWIĄZKOWYCH [ŹRÓDŁO: HTTP://WWW.DELL.COM/, POLSKA WERSJA] ............................ 29
RYS 3.5.4 PRZYKŁAD FORMULARZA OGRANICZAJĄCEGO MOŻLIWOŚĆ WPROWADZANIA DANYCH DO ZAKRESU DOPUSZCZONEGO PRZEZ PROJEKTANTÓW [ŹRÓDŁO: HTTP://SZUKAJ.ONET.PL/] .... 30
RYS. 3.5.5 PRZYKŁAD POLA FORMULARZA OBRAZUJĄCY W JAKI SPOSÓB NALEŻY PODAWAĆ PRZYKŁAD PRAWIDŁOWEGO FORMATOWANIA [ŹRÓDŁO: HTTPS://SKLEP.VOBIS.PL/].............. 30
RYS. 3.5.6 PRZYKŁAD PÓL FORMULARZA ZAPROJEKTOWANYCH TAK ABY ICH UKŁAD ELIMINOWAŁ MOŻLIWOŚĆ POPEŁNIENIA BŁĘDU [ŹRÓDŁO: HTTP://WWW.DELL.COM/]................................. 31
RYS.5.1.1 ELEMENTY NAWIGACYJNE ZNAJDUJĄCE SIĘ W OBRĘBIE ZAPROJEKTOWANEJ APLIKACJI.. 49 RYS. 5.1.2 GŁÓWNE MENU ZAPROJEKTOWANEJ APLIKACJI............................................................... 50 RYS. 5.1.3 MENU POMOCNICZE ZAPROJEKTOWANEJ APLIKACJI........................................................ 51 RYS. 5.1.4 WYRÓŻNIENIE BIEŻĄCEJ POZYCJI UŻYTKOWNIKA POPRZEZ ZMIANĘ KOLORU ZAKŁADKI53 RYS. 5.2.1 WYGLĄD TABELI Z WYŁĄCZONYMI KASKADOWYMI ARKUSZAMI STYLÓW ........................ 55 RYS. 5.3.1 PRZYKŁAD SPECJALNEJ ODMIANY SCHEMATU MONOCHROMATYCZNEGO OPIERAJĄCY SIĘ
NA CZERNI I BIELI, SCHEMAT ZOSTAŁ WYKORZYSTANY W ZAPROJEKTOWANEJ APLIKACJI ........ 56 RYS. 5.3.2 SCHEMAT OBRAZUJĄCY POZIOM CZYTELNOŚCI W ZALEŻNOŚCI OD ZASTOSOWANYCH
KOMBINACJI KOLORYSTYCZNYCH TEKSTU I TŁA ......................................................................... 57 RYS. 5.3.3 WYGLĄD APLIKACJI URUCHOMIONEJ W WYSOKIM KONTRAŚCIE ..................................... 58 RYS. 5.3.4 WYGLĄD APLIKACJI NA CZARNO-BIAŁYM MONITORZE .................................................... 59 RYS. 5.4.1 ZESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKĄ VERDANA Z RODZINY BEZSZERYFOWEJ
................................................................................................................................................... 62 RYS. 5.4.2 ZESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKA ARIAL Z RODZINY BEZSZERYFOWEJ .. 62 RYS. 5.4.3 ZESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKĄ GEORGIA Z RODZINY SZERYFOWEJ... 62 RYS. 5.4.4 ZESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKĄ TIMES NEW ROMAN Z RODZINY
SZERYFOWEJ .............................................................................................................................. 63
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
92
RYS. 5.5.1 SCHEMAT FORMULARZA ZBUDOWANEGO PRZY UŻYCIU ZNACZNIKÓW LABEL, FIELDSET, LEGEND ........................................................................................................................................ 67
RYS. 5.5.2 PRZYKŁAD ŹLE ZAPROJEKTOWANEJ STRUKTURY FORMULARZA[ŹRÓDŁO: ZAADOPTOWANO NA BAZIE HTTP://WWW.WEBAIM.ORG/TECHNIQUES/FORMS/] ................................................ 68
RYS. 5.5.3 FORMULARZ O POPRAWNIE ZAPROJEKTOWANEJ [ŹRÓDŁO: ZAADOPTOWANO NA BAZIE HTTP://WWW.WEBAIM.ORG/TECHNIQUES/FORMS/] ................................................................ 68
RYS. 5.5.4 SCHEMAT FORMULARZA POSIADAJĄCEGO LOGICZNĄ SEKWENCJE PÓL ........................... 69 RYS. 5.5.5 SCHEMAT OBRAZUJĄCY SPOSÓB AUTO-WYPEŁNIANIA POLA TEKSTOWEGO TREŚCIĄ ...... 70 RYS.5.5.6 TABELA DANYCH W TRYBIE EDYCJI................................................................................... 72 RYS. 5.5.7 SCHEMAT FORMULARZA ORAZ TABELI, POZWALAJĄCYCH NA WPROWADZANIE POMIARÓW
HYDROMETEOROLOGICZNYCH .................................................................................................... 72 RYS. 5.5.8 WYGLĄD KALENDARZA ZAPROJEKTOWANEGO PRZY UŻYCIU JAVASCRIPT ...................... 73 RYS. 5.5.9 SCHEMAT OBRAZUJĄCY SPOSÓB PRZEJŚCIA DO KALENDARZA JAVASCRIPT ................... 73 RYS. 5.6.1 SCHEMAT PRZEDSTAWIAJĄCY SPOSÓB INFORMOWANIA UŻYTKOWNIKA O KLAWISZACH
SKRÓTU ...................................................................................................................................... 76 RYS. 6.1 ILOŚĆ WYKRYTYCH PROBLEMÓW ZWIĄZANYCH Z UŻYTECZNOŚCIĄ W ZALEŻNOŚCI OD
ILOŚCI UŻYTKOWNIKÓW NA KTÓRYCH PRZEPROWADZONO TESTY[ŹRÓDŁO: HTTP://WWW.USEIT.COM/] ...................................................................................................... 78
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
93
Spis tabel:
TABELA 2.2.1 ZESTAWIENIE PRIORYTETÓW PIERWSZEGO POZIOMU SFORMUŁOWANYCH PRZEZ
ORGANIZACJĘ W3C ..................................................................................................................... 9 TABELA 2.2.2 ZESTAWIENIE PRIORYTETÓW DRUGIEGO POZIOMU SFORMUŁOWANYCH PRZEZ
ORGANIZACJĘ W3C ................................................................................................................... 10 TABELA 2.2.3 ZESTAWIENIE PRIORYTETÓW TRZECIEGO POZIOMU SFORMUŁOWANYCH PRZEZ
ORGANIZACJĘ W3C ................................................................................................................... 11 TABELA 6.1 ZESTAWIENIE UWAG UŻYTKOWNIKÓW ODNOSZĄCYCH SIĘ DO POSZCZEGÓLNYCH
ELEMENTÓW APLIKACJI .............................................................................................................. 81
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie bazy pomiarów hydrometeorologicznych”, Joanna Burawa
94
Abstrakt
Niniejsza praca porusza dwie ważne kwestie związane z projektowaniem
serwisów internetowych – funkcjonalność i dostępność. W dzisiejszych czasach
funkcjonalność coraz bardziej zyskuje na znaczeniu. Użytkownicy mają do
wyboru tysiące aplikacji internetowych, więc oczywiste jest, że wybiorą te
bardziej funkcjonalne z ich punktu widzenia. Wzrosła również świadomość, że
serwisy internetowe powinny być dostępne dla wszystkich, bez względu na
ograniczenia fizyczne oraz sprzętowe.
W pracy przedstawiono najważniejsze zagadnienia związane z
projektowaniem funkcjonalnych oraz dostępnych aplikacji internetowych.
Przedstawiono wiele zasad oraz reguł określających sposób projektowania
użytecznych serwisów WWW. Zaimplementowana aplikacja jest uproszczoną
wersją dziennika pomiarów hydrometeorologicznych. Celem pracy było
stworzenie systemu zorientowanego na pokazanie zasad projektowania
ergonomicznych interfejsów. Użyteczność poszczególnych elementów aplikacji
była na bieżąco weryfikowana oraz poprawiana dzięki testom
przeprowadzanym na użytkownikach w trakcie tworzenia systemu.