ul. Warszawska 24, 31-155 Kraków tel/fax [phone] e-mail:

[e-mail]

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.