ul. Warszawska 24, 31-155 Kraków tel/fax (+48 12) 628 20 41 e-mail:
sekretariat@iigw.pl
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: ................................
K
R A K Ó W
2 0 0 7
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.
D
OSTĘPNOŚĆ SERWISÓW INTERNETOWYCH
....................................................................... 8
3.
ZASADY TWORZENIA FUNKCJONALNYCH, UŻYTECZNYCH I
DOSTĘPNYCH INTERFEJSÓW............................................................................................... 13
3.1.
N
AWIGACJA
....................................................................................................................... 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.
K
ASKADOWE ARKUSZE STYLÓW
........................................................................................ 16
3.2.1.
Kaskadowe arkusze stylów jako element zwiększający dostępność
witryny..................................................................................................................................... 17
3.3.
K
OLORY
............................................................................................................................. 18
3.3.1.
Zasady doboru kolorów......................................................................................... 19
3.3.2.
Kontrast ..................................................................................................................... 22
3.4.
T
YPOGRAFIA
...................................................................................................................... 23
3.5.
F
ORMULARZE
.................................................................................................................... 27
3.5.1.
Projektowanie defensywne podczas tworzenia formularzy ........................ 28
3.5.2.
Walidacja formularzy ............................................................................................. 32
3.6.
K
LAWISZE 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.
M
Y
SQL ............................................................................................................................. 40
4.3.
J
AVA
S
CRIPT
...................................................................................................................... 40
4.4.
CSS.................................................................................................................................. 42
4.5.
AJAX ................................................................................................................................ 43
5.
OPIS ZAPROJEKTOWANEJ APLIKACJI ................................................................... 48
5.1.
N
AWIGACJA 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.
K
OLORYSTYKA 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.
T
YPOGRAFIA 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.
F
ORMULARZE 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.
P
LANOWANIE TESTÓW
...................................................................................................... 77
6.2.
C
ZAS TRWANIA TESTÓW
................................................................................................... 78
6.3.
T
WORZENIE
,
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ę
ergo
nomią 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 pozwala
ją 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 sukce
sywne 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 W3C
1
- 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
po
mocą myszki i klawiatury.
Tabela 2.2.1 Z
estawienie 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
wiers
zy 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
systema
ch 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ń
niez
ależ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 ist
nieje 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
za
wartych 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 P
owią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 ic
h 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
ostatn
i 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, teg
o 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 przedstawieni
a 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
sposobe
m 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
popula
rnych 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 arku
szy 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
zapr
ojektować 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 s
zereg 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 m
oż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
Ogranicz
enie 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 c
zcionek 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
na
dają 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 materi
ałó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. Natom
iast 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.
Wy
róż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
ora
z 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 gwar
ancję, ż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. Dla
tego 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 pow
szechną 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. Istnie
je 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 wys
tarczają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 do
kł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
wyszukiwan
ia. 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
uniwersa
lnej 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 funkcjona
lność 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 klawiszow
e 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ę
funkcjon
alnoś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
przeg
lądarki same wykrywały ACCESSKEY, jednakże takie rozwiązanie nie
zostało jeszcze nigdzie zaimplementowane.
S
tosuje 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 cz
y 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 zaimple
mentowano 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.
Obie
ktowość 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
wy
mienionych 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 pr
zyję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 podcza
s 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. A
plikacje wykorzystujące Ajax-a
używają go do tworzenia początkowej struktury strony, która ulega ciągłym
m
odyfikacjom, 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]. P
rotokół
przesyłania dokumentów hipertekstowych jest protokołem sieci WWW. Za jego
p
omocą 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]. J
est 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 dan
ych 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 n
a 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 uniwersa
lnym 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 kateg
orii 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 nawiga
cji 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 sa
mym 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
a
rchitektury 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.
St
rukturalna 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, jednol
itego 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 da
ną 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
cz
erni 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
pra
widł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ą
cha
rakterystyczny 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ą
korzystal
i 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.
Ekra
ny 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
dostos
owane 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 zd
ecydowano 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 stron
ie. 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 stron
y 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
pe
wnego 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 P
rzykł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 aplikac
ji 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 for
mularza 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 wykorzysta
no 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
pomocnic
zych 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
na
rzę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 funkcjo
nalnoś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 sc
hemató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 prz
ynależą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ór
ym 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órn
a 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,
pr
ojektanci 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 zaprojek
towanej 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 I
lość 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 f
unkcjonalnoś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 powinie
n 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ć
funkcjo
nalność 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
Wart
ość
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 zmienio
no 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 ap
likacja 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. Kolejny
m 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 funkc
jonalnoś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 uniwer
salnym 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 d
ostę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,
z
alecają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 tyc
hż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 pr
zez 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:
R
YS
.
3.3.1
S
PEKTRUM FAL ELEKTROMAGNETYCZNYCH WIDZIANYCH PRZEZ OKO LUDZKIE
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/] ................................................................................. 18
R
YS
3.3.2
K
OŁO BARW
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/].................................. 19
R
YS
.
3.3.3
K
OŁO BARW
,
PRZYKŁAD BARW ANALOGICZNYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/] ................................................................................. 20
R
YS
.
3.3.4
P
RZYKŁAD SERWISU KORZYSTAJĄCEGO ZE SCHEMATU BARW ANALOGICZNYCH
............ 20
R
YS
.
3.3.5
K
OŁO BARW
,
PRZYKŁAD BARW KOMPLEMENTARNYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/] ................................................................................. 20
R
YS
.
3.3.6
P
RZYKŁAD SERWISU WYKORZYSTUJĄCEGO SCHEMAT BARW KOMPLEMENTARNYCH
........ 21
R
YS
.
3.3.7
K
OŁO BARW
,
PRZYKŁAD BARW KOMPLEMENTARNYCH ROZDZIELONYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/] ................................................................................. 21
R
YS
.
3.3.8
K
OŁO BARW
,
PRZYKŁAD TRIADY BARW
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/
] ................................................................................ 21
R
YS
.
3.3.9
P
RZYKŁAD BARW MONOCHROMATYCZNYCH
.................................................................... 22
R
YS
.
3.3.10
P
RZYKŁ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
R
YS
3.3.11
P
RZYKŁADY KONTRASTU W WARTOŚCI KOLEJNO
,
WYSOKI KONTRAST
,
NISKI KONTRAST
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/]................................................................ 22
R
YS
.
3.3.12
P
RZYKŁAD KONTRASTU W SATURACJI KOLEJNO
,
WYSOKI KONTRAST
,
NISKI KONTRAST
[
ŹRÓDŁO
:
HTTP
://
WWW
.
COLORSONTHEWEB
.
COM
/]................................................................ 23
R
YS
.
3.4.1
R
YSUNEK PRZEDSTAWIA ELEMENTY WYRÓŻNIAJĄCE CZCIONKI SZERYFOWE
[
ŹRÓDŁO
:
HTTP
://
WWW
.
WEBAIM
.
ORG
/
TECHNIQUES
/
FONTS
/]................................................................. 25
R
YS
3.4.2
R
YSUNEK PRZEDSTAWIA ELEMENTY CHARAKTERYSTYCZNE DLA CZCIONEK
BEZSZERYFOWYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
WEBAIM
.
ORG
/
TECHNIQUES
/
FONTS
/]................. 25
R
YS
.
3.4.3
P
ORÓWNANIE TRZECH GŁÓWNYCH CZCIONEK SZERYFOWYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
WEBAIM
.
ORG
/
TECHNIQUES
/
FONTS
/]................................................................. 26
R
YS
.
3.4.4
Z
ESTAWIENIE NAJPOPULARNIEJSZYCH CZCIONEK BEZSZERYFOWYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
WEBAIM
.
ORG
/
TECHNIQUES
/
FONTS
/]................................................................. 26
R
YS
.
3.5.3
P
RZYKŁAD FORMULARZA REJESTRACYJNEGO Z POPRAWNYM OZNACZENIEM PÓL
OBOWIĄZKOWYCH
[
ŹRÓDŁO
:
HTTP
://
WWW
.
DELL
.
COM
/,
POLSKA WERSJA
] ............................ 29
R
YS
3.5.4
P
RZYKŁAD FORMULARZA OGRANICZAJĄCEGO MOŻLIWOŚĆ WPROWADZANIA DANYCH DO
ZAKRESU DOPUSZCZONEGO PRZEZ PROJEKTANTÓW
[
ŹRÓDŁO
:
HTTP
://
SZUKAJ
.
ONET
.
PL
/] .... 30
R
YS
.
3.5.5
P
RZYKŁ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
R
YS
.
3.5.6
P
RZYKŁ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
R
YS
.5.1.1
E
LEMENTY NAWIGACYJNE ZNAJDUJĄCE SIĘ W OBRĘBIE ZAPROJEKTOWANEJ APLIKACJI
.. 49
R
YS
.
5.1.2
G
ŁÓWNE MENU ZAPROJEKTOWANEJ APLIKACJI
............................................................... 50
R
YS
.
5.1.3
M
ENU POMOCNICZE ZAPROJEKTOWANEJ APLIKACJI
........................................................ 51
R
YS
.
5.1.4
W
YRÓŻNIENIE BIEŻĄCEJ POZYCJI UŻYTKOWNIKA POPRZEZ ZMIANĘ KOLORU ZAKŁADKI
53
R
YS
.
5.2.1
W
YGLĄD TABELI Z WYŁĄCZONYMI KASKADOWYMI ARKUSZAMI STYLÓW
........................ 55
R
YS
.
5.3.1
P
RZYKŁAD SPECJALNEJ ODMIANY SCHEMATU MONOCHROMATYCZNEGO OPIERAJĄCY SIĘ
NA CZERNI I BIELI
,
SCHEMAT ZOSTAŁ WYKORZYSTANY W ZAPROJEKTOWANEJ APLIKACJI
........ 56
R
YS
.
5.3.2
S
CHEMAT OBRAZUJĄCY POZIOM CZYTELNOŚCI W ZALEŻNOŚCI OD ZASTOSOWANYCH
KOMBINACJI KOLORYSTYCZNYCH TEKSTU I TŁA
......................................................................... 57
R
YS
.
5.3.3
W
YGLĄD APLIKACJI URUCHOMIONEJ W WYSOKIM KONTRAŚCIE
..................................... 58
R
YS
.
5.3.4
W
YGLĄD APLIKACJI NA CZARNO
-
BIAŁYM MONITORZE
.................................................... 59
R
YS
.
5.4.1
Z
ESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKĄ
V
ERDANA Z RODZINY BEZSZERYFOWEJ
................................................................................................................................................... 62
R
YS
.
5.4.2
Z
ESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKA
A
RIAL Z RODZINY BEZSZERYFOWEJ
.. 62
R
YS
.
5.4.3
Z
ESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKĄ
G
EORGIA Z RODZINY SZERYFOWEJ
... 62
R
YS
.
5.4.4
Z
ESTAWIENIE TEKSTÓW NAPISANYCH CZCIONKĄ
T
IMES
N
EW
R
OMAN Z RODZINY
SZERYFOWEJ
.............................................................................................................................. 63
Praca magisterska: „Projektowanie funkcjonalnych i dostępnych aplikacji internetowych na przykładzie
bazy pomiarów hydrometeorologicznych”, Joanna Burawa
92
R
YS
.
5.5.1
S
CHEMAT FORMULARZA ZBUDOWANEGO PRZY UŻYCIU ZNACZNIKÓW LABEL
,
FIELDSET
,
LEGEND
........................................................................................................................................ 67
R
YS
.
5.5.2
P
RZYKŁAD ŹLE ZAPROJEKTOWANEJ STRUKTURY FORMULARZA
[
ŹRÓDŁO
:
ZAADOPTOWANO
NA BAZIE HTTP
://
WWW
.
WEBAIM
.
ORG
/
TECHNIQUES
/
FORMS
/] ................................................ 68
R
YS
.
5.5.3
F
ORMULARZ O POPRAWNIE ZAPROJEKTOWANEJ
[
ŹRÓDŁO
:
ZAADOPTOWANO NA BAZIE
HTTP
://
WWW
.
WEBAIM
.
ORG
/
TECHNIQUES
/
FORMS
/] ................................................................ 68
R
YS
.
5.5.4
S
CHEMAT FORMULARZA POSIADAJĄCEGO LOGICZNĄ SEKWENCJE PÓL
........................... 69
R
YS
.
5.5.5
S
CHEMAT OBRAZUJĄCY SPOSÓB AUTO
-
WYPEŁNIANIA POLA TEKSTOWEGO TREŚCIĄ
...... 70
R
YS
.5.5.6
T
ABELA DANYCH W TRYBIE EDYCJI
................................................................................... 72
R
YS
.
5.5.7
S
CHEMAT FORMULARZA ORAZ TABELI
,
POZWALAJĄCYCH NA WPROWADZANIE POMIARÓW
HYDROMETEOROLOGICZNYCH
.................................................................................................... 72
R
YS
.
5.5.8
W
YGLĄD KALENDARZA ZAPROJEKTOWANEGO PRZY UŻYCIU
J
AVA
S
CRIPT
...................... 73
R
YS
.
5.5.9
S
CHEMAT OBRAZUJĄCY SPOSÓB PRZEJŚCIA DO KALENDARZA
J
AVA
S
CRIPT
................... 73
R
YS
.
5.6.1
S
CHEMAT PRZEDSTAWIAJĄCY SPOSÓB INFORMOWANIA UŻYTKOWNIKA O KLAWISZACH
SKRÓTU
...................................................................................................................................... 76
R
YS
.
6.1
I
LOŚĆ 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:
T
ABELA
2.2.1
Z
ESTAWIENIE PRIORYTETÓW PIERWSZEGO POZIOMU SFORMUŁOWANYCH PRZEZ
ORGANIZACJĘ
W3C..................................................................................................................... 9
T
ABELA
2.2.2
Z
ESTAWIENIE PRIORYTETÓW DRUGIEGO POZIOMU SFORMUŁOWANYCH PRZEZ
ORGANIZACJĘ
W3C................................................................................................................... 10
T
ABELA
2.2.3
Z
ESTAWIENIE PRIORYTETÓW TRZECIEGO POZIOMU SFORMUŁOWANYCH PRZEZ
ORGANIZACJĘ
W3C................................................................................................................... 11
T
ABELA
6.1
Z
ESTAWIENIE 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 spr
zę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.