Joanna Burawa PROJEKTOWANIE FUNKCJONALNYCH I DOSTĘPNYCH APLIKACJI INTERNETOWYCH NA PRZYKŁADZIE BAZY POMIARÓW HYDROMETEOROLOGICZNYCH

INSTYTUT INŻYNIERII I GOSPODARKI WODNEJ POLITECHNIKA KRAKOWSKA im. TADEUSZA KOŚCIUSZKI Joanna Burawa PROJEKTOWANIE FUNKCJONALNYCH I DOSTĘPNYCH APLIKACJI INTERNETOWYCH NA PRZYKŁADZIE BAZY POMIARÓW HYDROMETEOROLOGICZNYCH praca magisterska studia dzienne kierunek studiów: informatyka specjalność: informatyka stosowana w inżynierii środowiska promotor: dr inż. Robert Szczepanek nr pracy: 2068 data złożenia:... KRAKÓW 2007 ul. Warszawska 24, 31-155 Kraków tel/fax (+48 12) 628 20 41 e-mail: sekretariat@iigw.pl internet: www.iigw.pl

1. WSTĘP... 4 2. PODSTAWOWE POJĘCIA... 6 2.1. UŻYTECZNOŚĆ SERWISÓW INTERNETOWYCH... 6 2.2. DOSTĘPNOŚĆ SERWISÓW INTERNETOWYCH... 8 3. ZASADY TWORZENIA FUNKCJONALNYCH, UŻYTECZNYCH I DOSTĘPNYCH INTERFEJSÓW... 13 3.1. NAWIGACJA... 13 3.1.1. Rodzaje systemów nawigacyjnych... 13 3.1.2. Nawigacja strukturalna... 14 3.1.3. Nazewnictwo serwisów internetowych... 15 3.1.4. Odnośniki jako elementy nawigacji... 15 3.1.5. Zwiększanie funkcjonalności schematu nawigacyjnego... 16 3.2. KASKADOWE ARKUSZE STYLÓW... 16 3.2.1. Kaskadowe arkusze stylów jako element zwiększający dostępność witryny... 17 3.3. KOLORY... 18 3.3.1. Zasady doboru kolorów... 19 3.3.2. Kontrast... 22 3.4. TYPOGRAFIA... 23 3.5. FORMULARZE... 27 3.5.1. Projektowanie defensywne podczas tworzenia formularzy... 28 3.5.2. Walidacja formularzy... 32 3.6. KLAWISZE SKRÓTU... 34 3.6.1. Skróty klawiszowe i ich implementacja w przeglądarkach internetowych 34 3.6.2. Standardy tworzenia skrótów klawiszowych... 37 3.6.3. Sposoby informowania o klawiszach skrótu... 37 4. TECHNOLOGIE STOSOWANE PODCZAS TWORZENIA APLIKACJI... 39 4.1. PHP... 39 4.2. MYSQL... 40 4.3. JAVASCRIPT... 40 4.4. CSS... 42 4.5. AJAX... 43 5. OPIS ZAPROJEKTOWANEJ APLIKACJI... 48 5.1. NAWIGACJA W OBRĘBIE APLIKACJI... 48 5.1.1. Konwencje w nawigacji, struktura nawigacji globalnej... 49 5.1.2. Nawigacja jako element architektury informacji... 51 5.1.3. Systemy nawigacji lokalnej... 52 5.1.4. Nawigacja strukturalna... 54 5.2. CSS... 54 5.3. KOLORYSTYKA ZAPROJEKTOWANEJ APLIKACJI... 56 5.3.1. Kontrast, zasady doboru kontrastu pomiędzy tekstem a tłem... 56 5.3.2. Dobór kolorystyki aplikacji ze względu na osoby z upośledzeniami wzroku58 5.4. TYPOGRAFIA W APLIKACJI... 60 5.4.1. Zasada doboru rozmiarów fontów... 60 5.4.2. Zasady doboru kroju pisma a czytelność... 61 5.4.3. Relatywny schemat rozmiarów czcionek... 63 5.4.4. Dobór fontów ze względu na użytkowników z upośledzeniami wzroku.. 64 5.5. FORMULARZE JAKO PODSTAWOWY ELEMENT APLIKACJI... 65 5.5.1. Elementy języka HTML wpływające na funkcjonalność formularza... 65 5.5.2. Logiczna sekwencja elementów formularza.... 67 2

5.5.3. Auto-wypełnianie pól tekstowych formularza treścią.... 69 5.5.4. Funkcjonalność formularzy... 70 5.6. UŻYCIE KLAWISZY SKRÓTU... 74 6. TESTY FUNKCJONALNOŚCI ZAPROJEKTOWANEJ APLIKACJI... 77 6.1. PLANOWANIE TESTÓW... 77 6.2. CZAS TRWANIA TESTÓW... 78 6.3. TWORZENIE, PRZEPROWADZANIE TESTÓW... 79 7. PODSUMOWANIE... 83 8. WNIOSKI... 85 BIBLIOGRAFIA:... 88 ZASOBY INTERNETOWE:... 90 SPIS RYSUNKÓW:... 91 SPIS TABEL:... 93 ABSTRAKT... 94 3

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 4

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. 5

2. Podstawowe pojęcia Użyteczność (ang. usability, web-usability) - nauka zajmująca się ergonomią i funkcjonalnością urządzeń oraz aplikacji. W Polsce pojęcie użyteczności stosowane jest zazwyczaj w odniesieniu do ergonomii serwisów WWW oraz aplikacji użytkowych. Norma ISO 9241 definiuje użyteczność jako miarę, zgodnie z którą dany produkt może być używany dla osiągnięcia celów użytkowników w sposób wydajny, efektywny i zadowalający. Funkcjonalność jest synonimem słowa użyteczność [Nielsen, 2004]. Dostępność (ang. accessibility) - jest zbiorem standardów oraz dobrych praktyk opisujących metody i wytyczne tworzenia serwisów WWW w sposób umożliwiający wygodny dostęp jak najszerszemu gronu odbiorców, w tym użytkownikom, którzy oczekują ułatwień w dostępie [Nielsen, 2007]: Osoby niewidzące i niedowidzące. Osoby starsze. Użytkownicy mniej popularnych przeglądarek. Użytkownicy nowoczesnych urządzeń przenośnych. 2.1. Użyteczność serwisów internetowych Funkcjonalność jest cechą jakości, która pozwala oszacować w jakim stopniu interfejs użytkownika jest prosty w użytkowaniu. Odnosi się do metod, które pozwalają na ulepszenie użyteczności interfejsu. Łatwość korzystania z interfejsu, jego użyteczność jest definiowana przy pomocy pięciu cech: Czytelność interfejsu - określana jest na podstawie tego jak prosta dla użytkownika jest realizacja podstawowych zadań wykonywanych podczas użytkowania interfejsu, z którymi dany użytkownik zetknął się po raz pierwszy Wydajność, efektywność - polega na sprawdzeniu jak szybko użytkownicy będą w stanie wykonywać zadania, gdy nauczy się ich obsługiwać interfejs 6

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 7

Poproszenie użytkowników, żeby wykonywali pewnie zadania, związane z funkcjonalnością zaplanowanego interfejsu Obserwowanie zachowań użytkowników, ze zwróceniem szczególnej uwagi na to, czy udaje się im sprawnie korzystać z interfejsu, gdzie najczęściej pojawiają się problemy. Ważną rzeczą jest, aby testy przeprowadzać indywidualnie, jeżeli użytkownik napotka na jakąś trudność - powinniśmy mu pozwolić ją rozwiązać samemu. Jeżeli zaczynamy pomagać użytkownikowi, bądź kierunkujemy go w stronę rozwiązania, nasz test nie przyniesie poprawnego rezultatu. Zazwyczaj do testów funkcjonalności wybiera się grupę pięciu osób, w praktyce, taka ilość testerów jest wystarczająca do zidentyfikowania najważniejszych problemów związanych z użytecznością, dostępnością. Bardziej skuteczne jest stosowanie dużej ilości małych testów niż dużych, drogich i czasochłonnych studiów. Po wykonaniu małego testu, jeżeli wykaże on, iż należy poprawić jakiś aspekt użyteczności, można od razu dokonać zmiany. Pozwoli to na sukcesywne eliminowanie słabych punktów zaprojektowanego interfejsu. Interaktywne projektowanie interfejsu jest najlepszą drogą do zwiększenia funkcjonalności. Im więcej wersji oraz pomysłów będziemy testowali na użytkownikach, tym lepszy będzie zaprojektowany przez nas interfejs. Podczas testowania funkcjonalności zaleca się obserwowanie czynności wykonywanych przez użytkownika, jego interakcji z interfejsem. Wysłuchanie tego, co użytkownicy mają do powiedzenia czasem bywa mylące, o wiele lepsze rezultaty przynosi obserwacja ich działań. 2.2. Dostępność serwisów internetowych Wytyczne dotyczące dostępności serwisów internetowych zostały opisane w dokumencie 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ć. 8

Istnieje 14 zaleceń dotyczących dostępności i zostały one podzielone na trzy grupy priorytetów. Poniżej znajduje się lista zaleceń podzielona ze względu na grupy priorytetów, lista ta jest tłumaczeniem angielskiej wersji dokumentu Web Content Accessibility Guidelines 1.0 dostępnego w oryginalnej wersji pod adresem: http://www.w3.org/tr/wcag10/. Na tychże zaleceniach opiera się teoria budowania dostępnej nawigacji, formularzy, budowania kaskadowych arkuszy stylów, teoria doboru fontów, projektowanie dostępu do strony za pomocą myszki i klawiatury. Tabela 2.2.1 Zestawienie priorytetów pierwszego poziomu sformułowanych przez organizację W3C 1.1 Priorytety pierwszego poziomu Należy zapewnić tekstowy odpowiednik dla każdego nie-tekstowego elementu (np. poprzez "alt") 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 1.2 niego odnośnik tekstowy) Należy mieć pewność, że wszystkie informacje wyrażone kolorem są dostępne 2.1 także bez koloru, np wynikają z kontekstu lub znacznika. 5.1 Tabele danych muszą mieć określone nagłówki wierszy i kolumn. Tabele danych posiadające dwa lub więcej poziomy logiczne nagłówków wierszy lub kolumn muszą mieć zdefiniowane znaczniki by powiązać komórki 5.2 danych z komórkami nagłówków. 6.1 Dokumenty muszą być czytelne bez arkuszy stylów. 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ć 6.2 grafikę) Strony muszą być funkcjonalne również kiedy skrypty, aplety lub inne obiekty 6.3 programistyczne są wyłączone lub nie wspierane. Każda ramka musi być zatytułowana aby ułatwić identyfikację ramek 12.1 i nawigację. 14.1 Należy używać możliwie najbardziej przejrzystego i prostego języka, stosownie do treści witryny. Priorytety pierwszego poziomu muszą być stosowane. W przeciwnym razie, niektóre z osób nie będą miały dostępu do informacji zawartych w obrębie serwisu. Chodzi tu o użytkowników z różnego rodzaju upośledzeniami, osoby posiadające starsze wersje przeglądarek internetowych, pracujące na różnych systemach operacyjnych, korzystające z wolnych łącz internetowych. Aplikacja 9

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 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 2.2 jest widziana na czarno-białym wyświetlaczu. Zalecane jest użycie języka znaczników jeżeli istnieje właściwy niż obrazu do 3.1 przekazywania informacji. 3.2 Zaleca się tworzenie dokumentów z formalnie poprawną składnią. Zaleca się używanie arkuszy stylów do utworzenia projektu graficznego i określenia 3.3 wyglądu. Powinno się stosować raczej relatywne niż absolutne jednostki wielkości w wartościach 3.4 atrybutów języka znaczników i wartościach własności arkuszy stylów. Zalecane jest używanie elementów nagłówka do wyrażenia struktury dokumentu 3.5 i używanie ich zgodnie ze specyfikacją. 3.6 Należy we właściwy sposób tworzyć zarówno listy jak i elementy. 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 3.7 uzyskania wcięć. 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 5.3 należy zachować alternatywny odpowiednik. Jeśli tabela jest użyta do tworzenia projektu graficznego, nie należy używać żadnych 5.4 znaczników strukturalnych w celu uzyskania formatowania wizualnego. Należy upewnić się, że skrypty i aplety korzystają z przechwytywania zdarzeń 6.4 niezależnego od urządzeń. Należy mieć pewność, że dynamiczna zawartość spełnia wymogi dostępności lub 6.5 zapewnić alternatywną prezentację lub stronę. Dopóki oprogramowanie nie pozwala na wyłączenie poruszania się ruchomej 7.3 zawartości, należy unikać ruchu na stronach. Dopóki oprogramowanie nie zapewni możliwości zatrzymania odświeżania nie należy 7.4 tworzyć samoczynnie odświeżających się stron. 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 7.5 on sam wykonywał przekierowania. Skrypty i aplety same w sobie powinny spełniać wymogi dostępności bądź powinny być 8.1 kompatybilne Funkcjonalność elementów posiadających własny interfejs powinna być niezależna od 9.2 sprzętu. W skryptach używaj przechwytywania zdarzeń opartego raczej na warunkach 9.3 logicznych niż zależnego od sprzętu. Jeżeli nie ma możliwości wyłączenia wyskakujących okien nie zaleca się ich używania, 10.1 ponadto nie należy zmieniać bieżącego okna nie informując o tym użytkownika. Jeżeli oprogramowanie nie będzie w stanie wyrazić powiązań pomiędzy etykietami, a polami formularza zawsze kiedy istnieje pomiędzy nimi związek - należy umiejscawiać 10.2 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. Opisz cel/przeznaczenie każdej ramki i ich wzajemne powiązania, o ile nie wynika to 12.2 w oczywisty sposób z samych ich tytułów. Zaleca się dzielenie większych bloków informacji na mniejsze, bardziej czytelne grupy 12.3 tam, gdzie jest to naturalne i właściwe. 10

Etykiety formularza muszą być powiązane w wyraźny sposób z polami formularza do 12.4 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. Zaleca się umieszczenie informacji o ogólnej budowie witryny (np. mapa strony lub spis 13.3 treści). 13.4 Mechanizmy nawigacyjne muszą być używane w konsekwentny sposób. Priorytety drugiego poziomu powinny być stosowane. W przeciwnym razie, niektóre grupy osób będą miały utrudniony dostęp do informacji zawartych w obrębie serwisu internetowego. Spełnienie wymogów tego punktu w znacznym stopniu usuwa bariery związane z dostępem do dokumentów zawartych w Internecie. Aplikacja internetowa, w obrębie której zostały zastosowane wytyczne zamieszczone w (Tab. 2.2.2), osiąga rozszerzony poziom dostępności. Tabela 2.2.3 Zestawienie priorytetów trzeciego poziomu sformułowanych przez organizację W3C Priorytety trzeciego poziomu Należy określić rozwinięcie każdego skrótu lub akronimu tam, gdzie pojawia się po raz 4.2 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. Należy zapewnić skróty klawiaturowe do ważnych odnośników (także tych w mapach 9.5 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. 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) 10.5 znaków, które nie są odnośnikami. Informacja musi być udostępniona w taki sposób aby użytkownicy mogli otrzymać 11.3 dokumenty zgodnie z ich preferencjami (np. język, typ zawartości itp.). 13.5 Należy zapewnić paski nawigacyjne, żeby podkreślić i udostępnić mechanizmy nawigacji. 13.6 Powiązane ze sobą odnośniki muszą być zgrupowane. Jeśli udostępnione są funkcje przeszukiwania powinno się umożliwić różne typy 13.7 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. Zalecane jest udostępnienie informacji o zbiorach dokumentów (np. dokumentów 13.9 podzielonych na wiele stron). 14.3 Styl prezentacji musi być konsekwentny na wszystkich stronach. 11

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 12

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. 13

Umożliwia bezpośredni dostęp do głównych obszarów serwisu niezależnie od tego, na jakim poziomie hierarchii serwisu użytkownik aktualnie się znajduje Nawigacja lokalna odpowiada za interakcję w obrębie zawartości danej pod strony, niektóre serwisy internetowe integrują ze sobą elementy nawigacji globalnej i lokalnej Nawigacja kontekstowa czasem niektóre elementy nie dają się dopasować do podziału na kategorie, czyli do systemów globalnej i lokalnej nawigacji. Stąd wzięła się potrzeba stworzenia nawigacji kontekstowej. Łącza nawigacji kontekstowej są odwołaniami do stron z podobnymi usługami, produktami, tematami. 3.1.2. Nawigacja strukturalna Nawigacja strukturalna są to zwyczajowo nazwane ścieżki powrotu. Przez długi czas ścieżki powrotu były wykorzystywane jedynie przez witryny będące wielkimi bazami danych. Ostatnio, coraz częściej zaczynają się pojawiać w większej ilości serwisów, pełniąc rolę jednego z elementów nawigacji. Najważniejsze zasady dotyczące projektowania ścieżek powrotu: umieszczanie ścieżek powrotu na górze strony, testy przeprowadzone na użytkownikach wykazały, iż najlepiej spełniają one swoją rolę, gdy umieści się je na samej górze strony, ponad wszystkim innym, umieszczenie ich niżej powoduje, że użytkownik musi się zastanawiać z którego elementu nawigacyjnego powinien skorzystać (nawigacji globalnej czy też ze ścieżek powrotu) używanie znaku (>) pomiędzy kolejnymi poziomami hierarchii, czasami projektanci interfejsu stosują (:) bądź (/), te znaki separacji są poprawne jednak testy na użytkownikach wykazały, że znak (>) jest najbardziej intuicyjny zalecane jest używanie niewielkich rozmiarów czcionek, jeżeli ścieżki powrotu nie są głównym elementem nawigacji na stronie 14

ostatni element wyróżniamy pogrubioną czcionką, ostatnia pozycja listy powinna być wyróżniona pogrubioną czcionką, a jednocześnie powinna być nazwą bieżącej strony Ostatniego elementu ścieżki powrotu nie powinniśmy traktować jako zmiennika dla nazwy strony, tego typu rozwiązanie nie sprawdza się, użytkownicy oczekują, aby nagłówki będące tytułami stron były wyrównane do lewej bądź wyśrodkowane. 3.1.3. Nazewnictwo serwisów internetowych Obowiązują cztery zasady dotyczące nazw stron internetowych: każda strona powinna mieć swoja nazwę, wyróżnienie nazwy strony w elementach nawigacyjnych nie wystarcza nazwa strony musi być umieszczona w odpowiednim miejscu, w hierarchii strony powinna otaczać swoją konstrukcyjną zawartość, która jest charakterystyczna dla tej strony nazwa strony musi się wyróżniać, dzięki położeniu, rozmiarowi i kolorowi czcionki, krojowi pisma nazwa strony musi być zgodna z nazwą linka, na który się kliknęło 3.1.4. Odnośniki jako elementy nawigacji Na stronach internetowych można wyróżnić następujące rodzaje odnośników [Nielsen, 2004]: Odnośniki osadzone zwykły tekst najczęściej wyróżniony poprzez podkreślenie, wskazujący, że możemy znaleźć więcej informacji dany temat Odnośniki strukturalne wskazują na inny poziom struktury witryny oraz na strony równorzędne i podrzędne w hierarchii. Ważne jest, aby na każdej stronie umieszczone były takie same donośniki, aby użytkownik wiedział, jakich elementów nawigacji może się spodziewać. 15

Odnośniki asocjacyjne dają możliwość przejścia do stron powiązanych z witryną Najlepszą praktyką jest prezentacja odnośników w formie podkreślonego tekstu, zaleca się również zachowanie standardowego koloru. Problemy z funkcjonalnością występują również w przypadku odnośników innych niż zwykły tekst, chodzi tu na przykład o menu rozwijalne, odnośniki graficzne. Te elementy ze względu na to, że nie posiadają cech odnośników tekstowych, mogą powodować problemy w rozumieniu sposobu ich działania przez użytkownika. 3.1.5. Zwiększanie funkcjonalności schematu nawigacyjnego W interfejsie nawigacyjnym nie da się przedstawić konkretnych obiektów. Aby zwiększyć funkcjonalność stosuje się pewnie metody poprawiające uporządkowanie elementów [Nielsen, 2004]: Grupowanie (agregacja) wyświetlenie pojedynczego obiektu reprezentującego grupę obiektów, łatwa do wprowadzenia w obrębie pojedynczej witryny Streszczanie sposób przedstawiania większej ilości danych za pomocą mniejszej ilości informacji, obejmuje również użycie mniejszych obrazków w celu przedstawienia większych Filtrowanie usuwanie całych zbiorów niepotrzebnych informacji, szczególnie ważne jest filtrowanie według jakości - polega na wyświetlaniu tylko tych informacji które użytkownicy uznali za przydatne, wartościowe Odwzorowania oparte na przykładach polega na pokazaniu kilku reprezentatywnych przykładów zamiast wyświetlania całej treści 3.2. Kaskadowe arkusze stylów Na początku Internetu istniał sam tekst, dostępne były jedynie przeglądarki tekstowe. Gdy pojawiły się przeglądarki graficzne, projektanci odkryli, że w przeciwieństwie do technik składu tekstu, gdzie posiadano pełną kontrolę nad wszystkim, co znajduje się na danej stronie, HTML nie posiadał 16

dostatecznie dobrej kontroli nad formatowaniem strony. HTML w zamierzeniu, został opracowany jedynie po to, aby za jego pomocą prezentować dokumenty naukowców. Polecenia do formatowania tekstu były stosunkowo prymitywne. Precyzyjne umieszczanie elementów na stronie było w niektórych przypadkach niezmiernie trudne. Niejednokrotnie, ta sama strona wyglądała zupełnie inaczej w każdej z dostępnych przeglądarek internetowych. Aby odzyskać kontrolę nad zawartością strony, projektanci interfejsu oraz programiści zaczęli stosować tabele, pomagające w definiowaniu wyglądu stron. Przez wiele lat jedynym sposobem kontroli położenia elementów było ich umieszczanie w tabelach, a tych tabel w innych tabelach, co bardzo zaciemniało strukturę. Programiści zaczęli stosować komendy HTML niezgodnie z ich pierwotnym przeznaczeniem, aby uzyskać większą kontrolę nad formatowaniem. W 1998r, grupa projektantów pod nazwą The Standard Project, zaczęła przekonywać projektantów przeglądarek do wspierania standardów internetowych. Zaczęli oni tworzyć interfejsy niekompatybilne z poprzednimi wersjami przeglądarek. Starsze wersje przeglądarek nie obsługiwały popularnych standardów takich jak CSS. Dzięki takiemu postępowaniu zachęcali innych do stosowania kaskadowych arkuszy stylów. Twórcy witryny CSS Zen Garden2 udowodnili, że możliwe jest tworzenie świetnie wyglądających, profesjonalnych stron internetowych za pomocą CSS (ang. Cascading Style Sheets). Opis technologii CSS zamieszczono w rozdziale czwartym - Technologie zastosowane podczas tworzenia aplikacji. 3.2.1. Kaskadowe arkusze stylów jako element zwiększający dostępność witryny Kaskadowe arkusze stylów są obecnie obsługiwane przez prawie wszystkie przeglądarki internetowe. Korzyści z ich stosowania są bardzo duże. W dzisiejszych czasach praktycznie nie tworzy się serwisów internetowych bez ich wykorzystania. Podstawowe zalety kaskadowych arkuszy stylów: witryny w ogromnym stopniu zwiększają kontrolę nad formatowaniem elementów 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 17

są niezwykle elastyczne, pojedyncza zmiana w arkuszu może zmienić wygląd całej witryny lub wygenerować liczne jej odmiany zachowują się podobnie w różnych przeglądarkach internetowych Zastosowanie kaskadowych arkuszy stylów pozwala na realizację funkcji zwiększających dostępność: podział zawartości strony na logiczne części, CSS pozwala na umieszczenie treści w określonym porządku w plikach źródłowych, taki podział nie ogranicza w żaden sposób pozycjonowania elementów możliwość zmiany wielkości czcionki, pozwalają na korzystanie z relatywnego schematu rozmiaru czcionek 3.3. Kolory Aby opisać zasady doboru kolorów w serwisach internetowych oraz problemy związane z tym zagadnieniem należy zapoznać się z kilkoma ważnymi terminami związanymi z teorią barw. Terminy: kolor i barwa są w języku polskim synonimami. Barwa jest wrażeniem zmysłowym, reakcją zmysłu wzroku na padającą na receptory siatkówki falę elektromagnetyczną z zakresu 400-700 nm [Popularna Encyklopedia Powszechna, 1999] Rys. 3.3.1 Spektrum fal elektromagnetycznych widzianych przez oko ludzkie [źródło: http://www.colorsontheweb.com/] Koło barw (Rys. 3.3.2) jest graficznym modelem poglądowym służącym do objaśnienia zasad mieszania i powstawania barw. Barwy znajdujące się po przeciwnych stronach koła nazwane są barwami komplementarnymi. Takie barwy nałożone na siebie w syntezie addytywnej dają barwę białą, a w syntezie subtraktywnej barwę czarną, zmieszane dają neutralną szarość [Itten, 1974]. 18

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: 19

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/] 20