Rozdział 24. u Projektowanie witryn do praktycznych zastosowań              715

Rozdział 24.
Projektowanie witryn do praktycznych zastosowań

Czytając poprzednie rozdziały, poznałeś kilka wskazówek dotyczących tego, co powinieneś, a czego nie powinieneś robić, planując witrynę oraz projektując strony WWW. Poznałeś także czynniki, które mogą sprawić, że witryna będzie dobra (lub zła). Jest jednak jeszcze jeden czynnik, na jaki powinieneś zwrócić uwagę, jest nim sposób projektowania witryn przeznaczonych do „praktycznych zastosowań”.

Dowiedziałeś się już, że w praktyce z WWW korzysta wielu różnych użytkowników, używających wielu systemów komputerowych i przeglądarek. W stronach i witrynach projektowanych do tej pory nie uwzględniłeś jednak jeszcze jednego czynnika: różnych preferencji użytkowników odwiedzających Twoją witrynę oraz faktu, iż każdy z nich może dysponować różnym poziomem doświadczenia. Dzięki przewidzeniu potrzeb użytkowników, którzy będą odwiedzać Twą witrynę, łatwiej Ci będzie ocenić, w jaki sposób należy ją zaprojektować. W tym rozdziale przedstawię sposoby przewidywania potrzeb użytkowników oraz opiszę:

n   czynniki, jakie należy brać pod uwagę przy określaniu preferencji użytkowników tworzonych witryn,

n   jak dodawać możliwości funkcjonalne ułatwiające korzystanie z witryny początkującym użytkownikom,

n   różne metody ułatwiające użytkownikom poruszanie się po witrynie,

n   kod HTML prezentujący tę samą stronę WWW napisaną zgodnie z różnymi specyfikacjami XHTML 1.0 (Transitional, Frameset oraz Strict).

Czym są „zastosowania praktyczne”

Prawdopodobnie jesteś przyzwyczajony do przeglądania Internetu przy wykorzystaniu komputera działającego w konkretnym systemem operacyjnym, takim jak Windows 95 lub 98, Windows NT, Macintosh lub inny. Może Ci się zdawać, że pod każdym względem doskonale wiesz, w jaki sposób inne osoby odbierają strony WWW.

Miejmy nadzieję, że informacje nabyte podczas lektury tej książki pozwoliły Ci zdać sobie sprawę, iż Twój sposób postrzegania stron WWW nie zawsze odpowiada sposobowi, w jaki inne osoby oglądają te same strony. W rzeczywistym świecie istnieje tak wiele różnych komputerów działających w tak wielu systemach operacyjnych. Nawet jeśli spróbujesz zaprojektować swoje strony z myślą o najpopularniejszym systemie operacyjnym i najczęściej używanej przeglądarce, to będzie istniał jeszcze jeden czynnik, którego nie sposób przewidzieć: preferencje użytkowników. Rozważ przedstawiony poniżej przykład pewnej rodziny:

n   Jan jest szefem działu w firmie Fortuna 2000. Jego firma dysponuje własną siecią intranetową. Niemal wszyscy pracownicy firmy używają tego samego systemu operacyjnego oraz tej samej przeglądarki. Jan jest przyzwyczajony do postrzegania Internetu i stron WWW w pewien szczególny sposób: zazwyczaj są to strony zawierające dużo tekstu z niewielką ilością obrazków, które podkreślają znaczenie ważnych informacji, czyli proste strony WWW zawierające dużo informacji i mało efektów multimedialnych. Wszystkie dodatkowe „wodotryski” denerwują Jana, uważa, że ich pobieranie to strata czasu i dlatego wyłącza pobieranie zarówno obrazów, jak i dźwięków;

n   żona Jana, Zuzanna jeszcze nigdy wcześniej nie używała komputera, jednak zawsze chciała się nauczyć jego obsługi. Hobbystycznie zajmuje się genealogią i dowiedziała się, że w Internecie można znaleźć wiele informacji na ten temat. Chciałaby także opublikować na WWW historię swojej rodziny. Gdy wraz z mężem kupili pierwszy komputer do użytku domowego była bardzo podekscytowana. Jednak już wkrótce zaczęła zadawać pytania typu: „Czy można wyświetlić więcej niż jeden ekran informacji? Te literki są za małe, czy można je powiększyć?
A gdzie są obrazki? Jak można włączać i wyłączać muzykę... podobno na tej stronie jest jakaś muzyka!”. Jak widać, Zuzanna pragnie postrzegać Internet w zupełnie inny sposób, niż ten, do którego był przyzwyczajony jej mąż;

n   Jan i Zuzanna mają syna Tomka, ucznia szkoły średniej. Tomek jest zapalonym graczem i chce oglądać to, co jest efektowne, przede wszystkim multimedia! Włącza zatem głośniki na pełen regulator i stu procentach wykorzystuje możliwości nowego komputera. Uważa również, że „przeglądarka X” jest lepsza od „przeglądarki Y”, gdyż wszyscy jego koledzy używają jej do gier kreujących rzeczywistość wirtualną. Chciałby zaprojektować witrynę zawierającą podpowiedzi, rady i sztuczki wykorzystywane w jego ulubionych grach;

n   starsza siostra Tomka, Janka studiuje i chciałaby zostać komercyjną artystką. Bardzo interesuje się rzeźbiarstwem i fotografiką. Chciałaby wykorzystywać nowy komputer do tworzenia prac zadawanych przez wykładowców, a zatem będzie szukała witryn interesujących z wizualnego punktu widzenia. Janka chciałaby oglądać strony w pełnej palecie kolorów i najwyższej dostępnej rozdzielczości;

n   są także najstarsi członkowie rodziny, rodzice Zuzanny, którzy ostatnio przeprowadzili się do córki po wielu latach spędzonych w bardzo małym, wiejskim miasteczku. Ich doświadczenia w obsłudze komputerów są minimalne, widzieli je wyłącznie w sklepach, ale nawet nie dotykali w obawie, że coś popsują. Dla nich komputery to coś całkowicie tajemniczego i zdumiewającego. A zatem chcieliby dowiedzieć się czegoś więcej na nich temat. Rodzice podzielają zainteresowania Zuzanny genealogią. Jednak oczy ojca Zuzanny nie są już tak sprawne, jak niegdyś i dlatego musi on korzystać ze specjalnej przeglądarki, która nie tylko wyświetli tekst, lecz także go odczyta.

Wszystkie te osoby przeglądają WWW, używając tego samego komputera i systemu operacyjnego. Wszyscy członkowie rodziny, z wyjątkiem Tomka, używają także tej samej przeglądarki. Jednak ten przykład ilustruje inne sprawy, o których powinieneś pomyśleć, projektując witryny WWW, czyli różne potrzeby poszczególnych osób. Ich potrzeby można zaliczyć do różnych kategorii i zaspokoić łatwiej do pozostałych. Oto niektóre z czynników, jakie należy wziąć pod uwagę i które zostały przedstawione w powyższym przykładzie.

Uwzględnienie poziomu doświadczenia użytkownika

Poszczególni członkowie naszej fikcyjnej rodziny dysponują różnymi poziomami doświadczenia. Choć wszyscy żywo interesują się WWW, to jednak niektórzy spośród nich jeszcze nigdy nie widzieli przeglądarki. A zatem, projektując witrynę, powinieneś wziąć pod uwagę, iż osoby odwiedzające ją będą dysponowały różnym poziomem doświadczenia oraz potrzebami związanymi z przeglądaniem stron.

Czy zagadnienia przedstawiane na witrynie będą interesowały wszystkich odwiedzających, niezależnie od ich poziomu doświadczenia? Jeśli tak, to być może warto, abyś wyposażył witrynę w jakieś rozwiązania ułatwiające poruszanie się po niej? W rozdziale 23. — „Przykłady dobrych i złych stron WWW” poznałeś podpowiedzi i rady dotyczące projektowania systemów poruszania się po witrynach, które mogą zapobiec „gubieniu” się osób w cyberprzestrzeni. To dobry początek, jednak być może warto dodać do swojej witryny stronę szczegółowo opisującą zastosowany system poruszania się po witrynie.

Rysunek 24.1 przedstawia początkowy fragment strony, na której użytkownicy mogą dowiedzieć się czegoś więcej na temat witryny. Połączenia umieszczone na jej początku umożliwiają szybkie przejście do kilku pozostałych części. Zostały one zatytułowane: O witrynie, System nawigacyjny, Zalecane przeglądarki oraz Inne pliki, których możesz potrzebować. Z kolei, każda z tych części zawiera połączenia ze stronami prezentującymi bardziej szczegółowe informacje dotyczące zawartości witryny.

Podaj listę stron zawierających opis witryny

Część O witrynie zawiera listę połączeń do stron, które umożliwią osobom odwiedzającym witrynę szybkie zapoznanie się z jej zawartością lub odczytanie, jakie nowe informacje zostały do niej dodane od czasu ostatniej wizyty. Rysunek 24.2 przedstawia przy­kład prostej listy połączeń do stron o tej tematyce. Poniżej przedstawiłam dobre przy­kłady stron o takiej tematyce:

n   Strona Co nowego, która zawiera listę nowych informacji dodanych do witryny wraz z połączeniami do nich.

n   Strona Spis treści zawierająca listę tytułów oraz, opcjonalnie, krótki opis zawartości wszystkich stron witryny.

n   Strona Często zadawane pytania prezentująca pytania najczęściej zadawane przez użytkowników oraz odpowiedzi na nie.

Powyżej przedstawiłam typy stron, które są najczęściej wykorzystywane w celu ułatwienia użytkownikom zdobycia informacji o witrynie. Oczywiście, samemu możesz zastosować inne pomysły, które będą się lepiej nadawały do konkretnego przypadku Twojej witryny. W takiej sytuacji, warto podać listę stron, które będą najbardziej przydatne dla użytkowników.

Opisz system nawigacyjny

Różne witryny WWW mają różne systemy nawigacyjne, jednak w niektórych przypadkach ich zrozumienie może przysparzać trudności początkującym użytkownikom Internetu. Ogólnie rzecz biorąc, systemy nawigacyjne stosowane na witrynach WWW można zaliczyć do trzech podstawowych kategorii: prostych systemów tekstowych, systemów graficznych oraz systemów wykorzystujących układy ramek. Jeśli uważasz, że system nawigacyjny zastosowany na Twojej witrynie wymaga wyjaśnienia, to dodaj połączenia oraz strony, które ułatwią czytelnikom poznanie zasad poruszania się po niej. Rysunek 24.3 przedstawia przykład listy połączeń, umożliwiających przejście do stron, opisujących różne systemy nawigacyjne, jakie można zastosować na witrynach WWW.

Opisując system nawigacyjny, postaraj się podawać opisy, które można łatwo zrozumieć. Załóżmy, że zastosowany tekstowy system nawigacyjny przypomina ten przedstawiony poniżej, oraz, że został umieszczony na wszystkich głównych stronach witryny:

Strona główna | Zawartość | Pytania i odpowiedzi | Co nowego | Email | Książka gości | Połączenia

Dla osób, które już wcześniej odwiedziły witrynę, zrozumienie tego paska nawigacyjnego nie będzie prawdopodobnie wymagało żadnych wyjaśnień. Jednak takie wyjaśnienia mogą się przydać osobom, które odwiedzają witrynę po raz pierwszy. Poniżej przedstawiłam opisy pomocne dla takich nowych użytkowników:

n   strona główna — „Skorzystaj z tego połączenia, aby wrócić na stronę główną witryny”;

n   zawartość — „Spis treści zawiera połączenia ze wszystkimi stronami witryny. Jeśli odwiedzasz tę witrynę po raz pierwszy, to będzie to strona, od której powinieneś zacząć”;

n   pytania i odpowiedzi — Na stronach często pojawia się także skrót „FAQ”. Dla nowych użytkowników Internetu oraz osób nie znających języka angielskiego przyda się jego wyjaśnienie lub podanie polskiego odpowiednika — „Najczęściej zadawane pytania i odpowiedzi”. Jeśli wolisz użyć skrótu „FAQ”, to opisz go w następujący sposób: „Strona FAQ (Frecquently Asked Quastions) zawiera pytania najczęściej zadawane przez osoby odwiedzające witrynę oraz odpowiedzi na nie”;

n   e-mail — Oto jeszcze jedno połączenie, którego znacznie może wymagać wyjaśnienia. Czy umożliwia ono wyświetlenie wiadomości otrzymanej pocztą elektroniczną lub też wysłanie takiej wiadomości na Twój adres? Opis o treści „Użyj tego połączenia, aby wysłać pytanie lub komentarz do administratora tej witryny” dokładnie wyjaśni użytkownikom, do czego służy to połączenie.

Jeśli system nawigacyjny witryny składa się z ikon lub obrazów, ich znaczenie nie zawsze będzie oczywiste. Rozważmy przykład przedstawiony na rysunku 24.4. Lewa ramka układu zawiera ikony i obrazy służące do poruszania się po witrynie, natomiast w dolnej ramce został umieszczony tekstowy pasek nawigacyjny udostępniający analogiczne możliwości funkcjonalne.

W niektórych przypadkach znaczenie ikony lub obrazu umieszczonego na pasku nawigacyjnym nie jest oczywiste. Krótki opis każdej z zastosowanych ikon został podany w głównej ramce układu, jednak dla początkujących użytkowników przydałyby się zapewne dodatkowe wyjaśnienia. Na przykład, mógłbyś umieścić na stronie wszystkie ikony, a obok nich opisy podobne do tych, które podałam dla połączeń tworzących tekstowy pasek nawigacyjny.

Początkujący użytkownicy mają zazwyczaj problemy ze zrozumieniem układów ramek. Dla nich bardzo pomocna może się okazać strona z krótkim opisem układu. Jednym ze sposobów opisu układu ramek jest umieszczenie na stronie obrazu przedstawiającego jego miniaturę, podobnego do tego, który pokazałam na rysunku 24.5. Nazwij każdą z ramek układu, używając określeń, które odwiedzający będzie mógł łatwo zapamiętać (na przykład: Lewa, Górna, Dolna, Główna) i na tej samej stronie podaj krótki opis przeznaczenia każdej z tych ramek. Poniżej podałam przykład, jak można by opisać ramki przedstawione na rysunku 24.5:

n   ikony umieszczone w lewej ramce możesz użyć, aby określić stronę, którą chcesz wyświetlić w największej, Głównej ramce. Jeśli nie pamiętasz, co oznaczają poszczególne ikony, to kliknij ikonę ze znakiem zapytania, aby wyświetlić stronę z informacjami o ikonach lub skorzystaj z tekstowego paska nawigacyjnego wyświetlonego w Dolnej ramce;

n   Górna ramka układu zawiera logo witryny, dzięki czemu zawsze będziesz wiedział, jaką witrynę oglądasz;

n   w ramce Głównej wyświetlane są wszystkie strony wybierane w ramce Lewej lub Dolnej. Co więcej, jeśli klikniesz jakieś połączenie umieszczone na stronie wyświetlonej w Głównej ramce, to jego strona docelowa także zostanie wyświetlona w tej samej ramce;

n   połączenia tekstowe umieszczone w Dolnej ramce mają to samo przeznaczenie co ikony w ramce Lewej. Zostały one stworzone z myślą o osobach, których przeglądarki nie wyświetlają obrazów lub preferują stosowanie połączeń tekstowych.

Ramka główna Dolna ramka Górna ramka Lewa ramka Rysunek 24.5. Opisywanie układu ramek

Dodaj informacje o zalecanych przeglądarkach

Kolejną informacją, która może się okazać pomocna dla osób korzystających po raz pierwszy z Twojej witryny, będzie wskazanie przeglądarki, z myślą o której została ona zaprojektowana. Rysunek 24.6 przedstawia prosty przykład strony zawierającej takie informacje.

Informacje umieszczone na tej stronie pozwalają dowiedzieć się, że do oglądania witryny należy używać przeglądarek zgodnych ze standardem języka HTML 3.2 oraz kolejnych wersji obsługujących układy ramek (zgodnych ze specyfikacją języka HTML Frameset). Umieszczona na stronie lista podaje wszystkie przeglądarki, w jakich witryna została przetestowana wraz z połączeniami umożliwiającymi ich pobranie. W końcu autor witryny pyta, czy użytkownicy innych przeglądarek mają jakieś problemy z korzystaniem z witryny. Podany został także adres poczty elektronicznej, dzięki czemu może otrzymywać informacje o potencjalnych problemach, jakie występują w przeglądarkach, których witryna nie została przetestowana.

Lista innych niezbędnych plików

Oprócz wiadomości o zalecanych przeglądarkach, powinieneś także poinformować użytkowników o wszelkich dodatkach oraz innych plikach, które będą potrzebne osobom przeglądającym witrynę. Jeśli na witrynie zostały umieszczone pliki, które nie są zapisane w formacie HTML (na przykład, pliki archiwalne, dokumenty programu Microsoft Word, obrazy w formatach innych niż JPEG i GIF, itp.), to powinieneś poinformować użytkowników, iż będą potrzebowali specjalnych programów. Podaj listę zewnętrznych i dodatkowych programów, które będą potrzebne.

Przykład listy połączeń do zewnętrznych plików został przedstawiony na rysunku 24.7. Na tej stronie autor podał zewnętrzne aplikacje, potrzebne użytkownikowi w celu ogląd-nięcia lub wykorzystania plików umieszczonych na witrynie. Ta przykładowa witryna zawiera kilka plików zapisanych w formacie Adobe Acrobat Reader (.PDF) oraz plików archiwalnych (.ZIP), które zostały umieszczone na kilku różnych stronach. Umieszczając na jednej stronie połączenie do wszystkich koniecznych przeglądarek i programów dodatkowych (takich jak WinZip oraz Adobe Acrobat Reader), osoby odwiedzające witrynę mogą bardzo szybko dowiedzieć się, jakich plików będą potrzebowały, aby w pełni wykorzystać możliwości witryny.

Określanie preferencji użytkowników

Oprócz różnych poziomów doświadczenia osób oglądających witryny, możesz mieć także pewność, że każda z nich będzie miała swój własny, ulubiony sposób korzystania z niej. W jaki sposób możesz zadowolić upodobania wszystkich użytkowników? Prawdę rzekłszy, nie możesz. Jednak postarać się go określić. Jednym z czynników dobrego projektu witryny jest przewidzenie, co użytkownicy będą chcieli na niej oglądać. Staje się to tym trudniejsze, im więcej osób będzie się interesowało zagadnieniami prezentowanymi na witrynie.

Jak można zauważyć, potrzeby każdego z członków naszej fikcyjnej rodziny sprawiają, iż inaczej patrzy na WWW. Czasami wynika to z zainteresowań, czasami ze specjalnych potrzeb użytkowników. Właśnie to jest kluczem do przewidzenia, jakie informacje powinieneś umieścić na swojej witrynie.

Zagadnienia typu „Regulacja zapłonu w silnikach motocyklowych o pojemności 300 cm sześciennych” zainteresuje wąskie grono odbiorców. Będzie on atrakcyjny dla osób interesujących się motocyklami, w konkretniej, dla osób pragnących wyremontować lub wyregulować własny motocykl. Stosunkowo łatwo można określić typy informacji, jakie zainteresują takich odbiorców. Będą to zapewne szczegółowe instrukcje, krok po kroku opisujące proces regulacji oraz obrazy lub inne prezentacje multimedialne demonstrujące techniki, których w łatwy sposób nie da się opisać słowami.

Z drugiej strony, temat „Siedem cudów świata starożytnego” przyciągnie zainteresowanie uczniów i studentów w różnym wielu, jak również ich nauczycieli. Taką witrynę mogą także odwiedzać archeolodzy, historycy oraz wszelkie inne osoby interesujące się historią starożytną. Teraz dysponujesz znacznie szerszym gronem odbiorców, mieszczących się w szerszym przedziale wiekowym i o wyższym poziomie wykształcenia. Znacznie trudniej będzie stworzyć witrynę, która zadowoli ich wszystkich.

W takich przypadkach zawężenie tematyki witryny może nieco ułatwić zadanie. Jednym ze sposobów jest zaprojektowanie witryny przeznaczonej dla konkretnej grupy użytkowników, na przykład, dla:

n   uczniów szkół podstawowych oraz ich nauczycieli — taka witryna będzie wymagać bardzo prostego systemu nawigacji, który można łatwo zrozumieć; zawartość witryny powinna być prosta i czytelna; atrakcyjne, kolorowe obrazy i animacje mogą przyciągnąć uwagę i zainteresowanie młodych odbiorców;

n   uczniów gimnazjów i liceów oraz ich nauczycieli — w tym przypadku można użyć nieco bardzie skomplikowanego systemu nawigacji; wykorzystanie multimediów oraz najnowszych technologii internetowych może skłonić tę grupę odbiorców do ponownego odwiedzenia witryny;

...