Inżynieria funkcjonalności i Interaction Design rozwiązań eLearningowych

"Rób wszystko tak prosto, jak to tylko możliwe, ale nie prościej." (A. Einstein)
"Badanie jest tym, co robię, kiedy nie wiem, co robię" (Wernher von Braun)

Treść modułu

Każdy produkt lubiany jest wówczas, gdy wykonuje zadania jakich oczekuje od nich odbiorca i reaguje na jego działania w przewidywalny sposób. Mówi się wtedy, że jest przyjazny, funkcjonalny, użyteczny. W tym samym stopniu dotyczy to usług elektronicznych. Najczęściej nauczanie na odległość realizowane jest poprzez specjalizowany serwis internetowy, który często wspomagany jest treściami multimedialnymi dołączonymi na płycie CD - ROM. Dzięki temu bardzo wiele zasad funkcjonalnego projektowania stron internetowych bezpośrednio stosuje się przy tworzeniu tego rodzaju treści.

W przypadku eLearningu spełnienie zasad funkcjonalnego projektowania jest wyjątkowo ważne ponieważ jego odbiorcy używają komputera w celu szybkiego i przyjemnego przyswojenia nowej wiedzy. Obciążenie umysłu uczącego się dodatkowymi trudnościami może w bardzo radykalny sposób zmniejszyć chęć do nauki, a przede wszystkim frustrować.

Wykład omawia problemy związane z funkcjonalnym projektowaniem rozpoczynając od przedstawienia genezy braku funkcjonalności i skutków takiej sytuacji, dokonuje prezentacji podstaw psychologii czynników ludzkich przechodząc następnie szczegółowo przez sprecyzowanie zasad projektowania zorientowanego na użytkownika (User - Centered Design), a kończąc na dokładnym omówieniu praktyk związanych z budową serwisu internetowego i błędów popełnianych podczas realizacji tego procesu.

Określenie celu edukacyjnego modułu

Prezentowane informacje mają wskazać jak ważną rolę w cyklu produkcyjnym i życiowym projektów eLearningowych odgrywa proces przestrzegania i implementacji zasad inżynierii funkcjonalności. Przedstawione proste rozwiązania i zespół reguł pozwalają na uniknięcie podstawowych, a często bardzo uciążliwych błędów towarzyszących powstawaniu witryn, usług internetowych lub prezentacji.

Kolejnym celem jest zachęcenie odbiorców do przeprowadzania prostych testów funkcjonalności projektowanych przez siebie rozwiązań, które można zrealizować bardzo niskim nakładem finansowo - roboczym. Przykładowo przetestowanie projektowanej strony internetowej nawet jedynie wsród grona znajomych może pomóc nam uniknąć katastrofalnych w konsekwencji błędów, których my jako twórcy możemy po prostu nie dostrzegać na etapie produkcyjnym.

Wiedza bazowa potrzebna do pracy nad modułem


wersja multimedialna	wersja do druku

Proszę przypomnieć sobie jakie strony lub prezentacje, które widzieliśmy ostatnio wzbudziły nasz zachwyt? Co szczególnie się nam w nich podobało? Układ graficzny, łatwość obługi interfejsu użytkownika, a może estetyka?

Z jakich usług internetowych korzystamy najczęściej? Które z nich darzymy sympatią, a które wywołują negatywne emocje i dlaczego?

W jakim sklepie internetowym lubimy kupować produkty, a jakiego już nigdy nie odwiedzimy?

Czy jeżeli mielibyśmy możliwość wprowadzenia zmian np. do interfejsu naszego banku internetowego lub poczty elektronicznej co zmienilibyśmy w nich na początku?

Czy nasi znajomi krytykują jakąś usługę dostępną drogą internetową? Czy zgadzamy się z nimi, czy też może mamy odmienne zdanie na ten temat?

Informacje główne

1. Funkcjonalność i jej zastosowania

1.1 Funkcjonalność i geneza jej braku w projektach

Słownik języka polskiego podaje następujące definicje słowa "funkcjonalny":

1. "dotyczący funkcji " działania, funkcjonowania, roli czegoś"

2. "dobrze spełniający swoją rolę, odpowiadający potrzebom, mający funkcję użytkową; użyteczny, przydatny" - Funkcjonalne mieszkanie, meble.

Mark Pearrow w książce "Funkcjonalność stron internetowych" podaje następującą definicję:

"Funkcjonalność jest szeroko pojętą dyscypliną polegającą na stosowaniu racjonalnych zasad naukowej obserwacji, pomiaru i projektowania podczas tworzenia i modyfikowania stron internetowych w celu zwiększenia łatwości użytkowania, walorów poznawczych, użyteczności oraz zmniejszenia dyskomfortu związanego z ich obsługą."

Czym jednak jest funkcjonalność w znaczeniu projektowania serwisów do nauczania na odległość? Dodatkowo powstaje pytanie, czemu funkcjonalność jest obecnie tak bardzo potrzebna? Aby odpowiedzieć na te pytania należy spojrzeć na genezę tego niezwykłego zjawiska, jakim jest Internet.

Początkowo Internet wykorzystywany był tylko przez naukowców. Służył jedynie jako kanał informacyjny do wymiany wyników badań między różnymi uniwersytetami. Pierwsze strony internetowe, składały się tylko z tekstu i nie były niczym innym jak cyfrową wersją dokumentów. Kolejny etap nastąpił, gdy do krainy WWW wkroczyli zwyczajni użytkownicy. Witryny stały się kolorowe, ilustrowane i pojawiły się na nich interaktywne elementy. Serwisy zyskiwały coraz to nowe zastosowania. W obecnej generacji Internet pełni role komunikacyjne, edukacyjne, rozrywkowe, jest wykorzystywany jako narzędzie do prowadzenia działalności biznesowej i stanowi zjawisko społeczne w skali globalnej o niezbadanych jeszcze możliwościach rozwoju.

I tak w latach dziewięćdziesiątych XX wieku, czyli w czasie drugiej generacji Internetu, można było zaobserwować "złotą gorączkę" w rozwoju światowej sieci internetowej. Będąc świadkami tej niewiarygodnej wprost ekspansji, która dokonała się w szczególności za sprawą World Wide Web łatwo jest stwierdzić, że przekaz informacji to nie tylko treść, ale też i forma. Dzięki ogólnej dostępności tego medium, każdy ma wpływ na wygląd i funkcjonalność nowych witryn. Powstanie ogromnej ilości programów wspomagających tworzenie stron, bez zapewnienia dbałości o funkcjonalność, spowodowało pojawianie się źle zaprojektowanych serwisów frustrujących swoja formą. Najczęściej liczy się samo zaistnienie w Internecie. Rola kształtu witryny i łatwość obsługi schodzi na dalszy plan. Gdy problem ten dotyczy projektów amatorskich tworzonych przez rzesze użytkowników, traktujących Sieć jako miejsce do korespondencji i rozrywki, to wyrządza to szkodę małej liczbie odbiorców. Eskalacja problemu następuje wówczas, gdy norm funkcjonalności nie spełniają witryny odgrywające rolę ekonomiczną, a w szczególności edukacyjną.

Pomijając sytuacje, w których projektantami witryn są nieprofesjonaliści, należy pamiętać, że zazwyczaj zajmują się tym specjaliści od programowania i innych analitycznych dziedzin. Najczęściej ich sposób myślenia jest daleki od zachowań zwykłych odbiorców. W wyniku skupiania się w zbyt dużym stopniu na aspektach technicznych, łamią zasadę projektowania zorientowanego na użytkownika.

Zaskakujący jest fakt, że nawet w dużych przedsiębiorstwach gdzie zatrudnieni są eksperci ds. funkcjonalności ich rola nie jest doceniana. Pełnią oni przecież równie ważną funkcję jak administratorzy sieci, developerzy czy programiści, a jednak kluczowe decyzje o wyglądzie projektu najczęściej podejmują osoby nie będące specjalistami w tej dziedzinie.

Kolejnym problemem jest nacisk wywierany na twórców by dostarczyć produkt na czas. Projektanci stają przed przykrym wyborem polegającym na decyzji, czy oddadzą pracę nie w pełni sprawną, ale w umówionym terminie, albo czy starać się o dodatkowy czas pozwalający na dopracowanie błędów. Niestety, żelazne prawa rynku, spowodowane ogromną konkurencją, na miejscu pierwszym stawiają terminowość. Firmy świadome kosztów poniesionych na reklamę i innych wydatków związanych z wdrożeniem usługi czy produktu, często decydują się na akceptację niedopracowanego projektu. W przypadku rezygnacji z przedsięwzięcia poniesione straty mogłyby się okazać dużo większe niż sfinansowanie pracy działów pomocy technicznej rozwiązujących problemy użytkowników. Koszt utrzymania takich centrum pomocy jest bardzo wysoki, jednakże najczęściej finansowanie tych działów pochodzi z innego źródła niż środki przeznaczone na rozwój produktów. W wyniku takich działań można dostrzec brak motywacji u pracowników odpowiadających za poprawę jakości działania wdrożonych usług. Oczywiście taka polityka najbardziej uderza w odbiorców, gdyż to oni będą zmuszeni do przystosowania się do niewłaściwie zaprojektowanych przedsięwzięć.

Innym powodem, szczególnie często przytrafiającym się początkującym projektantom, są trudności w rozsądnym wyważeniu proporcji sztuki, użycia technik multimedialnych i realizacji reguł inżynierii funkcjonalności. Każdy projektant ma potrzebę wyrażenia swojego artyzmu, która nie zawsze idzie w parze z technikami sprzyjającymi dobremu wykonaniu serwisów. Inspiracja i pomysł jest połową sukcesu. Wykorzystanie najnowszych zdobyczy techniki i technologii internetowych również nie gwarantuje powodzenia i na pewno nie da przewagi nad konkurencją, jeśli ich zastosowanie okaże się utrudnieniem dla użytkowników. W każdym przypadku wprowadzenia nowych rozwiązań należy mieć pewność, że nie zakłócą one sprawności działania serwisu u końcowego odbiorcy. Dopiero sprawna implementacja projektu i jego rozwój pozwalający spełniać reguły funkcjonalności i ergonomii jest synonimem osiągnięcia zamierzonych rezultatów. Znalezienie kompromisu pomiędzy estetyką i funkcjonalnością jest jednak możliwe. Według Jakoba Nielsena stosowanie technik inżynieryjnych i systematyczne podejście do realizowanych projektów sprzyja ich właściwemu wykonaniu. Innymi słowy projekt internetowy powinien być traktowany jako projekt programistyczny. Dzięki temu nie tylko łatwiej będzie przestrzegać wyznaczonych terminów, ale także można sprawniej zarządzać jakością tworzonych serwisów. Poza tym, mając wątpliwości co do zastosowanych rozwiązań, łatwiej jest odnaleźć to najwłaściwsze dzięki zbadaniu na wybranych użytkownikach ich działania. Wybór finalnego projektu powinien paść na ten produkt, który uzyskuje najlepsze opinie i wyniki u odbiorców, a nie na ten, który twórca indywidualnie uważa za najlepszy.

Trywialnym powodem, mającym wpływ na brak zainteresowania funkcjonalnością przez projektantów, jest ich nieprawdziwe przekonanie, iż stosowanie metodologii inżynierii funkcjonalności zawsze musi być szczególnie trudne, kosztowne i pracochłonne. Oczywiście nie można również uważać, że funkcjonalność jest wynikiem jedynie zdroworozsądkowego rozumowania. Funkcjonalność jest nauką i produkty spełniające jej normy nie powstają z przypadku, lecz na skutek przemyślanych działań.

Można by mnożyć przyczyny braków funkcjonalności, jednak zawsze ich wspólną cechą będzie to, że każdy problem wynika ze złamania praw projektowania zorientowanego na użytkownika.

1.2 Skutki braków funkcjonalności

Obecnie internauta może wybierać spośród bardzo wielu firm świadczących swoje usługi przez Internet. W świecie wirtualnym już nie tylko konkurencja cenowa czy renoma przedsiębiorstwa może decydować o jego sukcesie rynkowym. Coraz częściej właśnie ergonomia i funkcjonalność serwisów powoduje jego przewagę nad innym usługodawcami. Potencjalny odbiorca tych usług oczekuje szybkich i nieskomplikowanych rozwiązań mających na celu zaspokojenie jego potrzeb w jak najkrótszym czasie. Przykładowo świadomość użytkownika, że od wyboru innej księgarni internetowej z dużo prostszym interfejsem dzieli go tylko wpisanie nowego adresu powoduje, że natychmiastowo uda się na nową witrynę. Odbiorcy nie tylko stali się bardziej wymagający i niecierpliwi, ale przede wszystkim oczekują jak najbardziej naturalnych, zbliżonych do codziennej komunikacji technik pozwalających sprawnie i szybko zrealizować ich potrzeby. Z racji istnienia ogromnej ilości stron serwisów, użytkownicy nie będą poświęcać czasu na dokładne zapoznawanie się z treścią każdej z nich. Niestety większość witryn nie zasługuje na dłuższą uwagę i odbiorcy zdając sobie z tego sprawę, mają tendencję do przemieszczania się między serwisami i selektywnego wybierania najbardziej treściwych pozycji. Szczególnie twórcy serwisów handlowych muszą założyć, że ich klienci nie będą tracili swojego czasu na trudne do przyswojenia mechanizmy nawigacji czy rozwiązania techniczne sprawiające kłopoty z obsługą witryny.

Dodatkową uwagę powinni zwrócić projektanci portali edukacyjnych, gdyż ich odbiorcy, obciążeni przyswajaniem nowych treści, w żaden sposób nie mogą być rozpraszani niezrozumiałymi rozwiązaniami. Odczuwanie dyskomfortu psychicznego spowodowanego problemami z orientacją w zawartości takiej witryny, nawigacją lub formą przedstawionych treści zdecydowanie obniży walory edukacyjne i zniechęci uczniów do poznawania prezentowanych materiałów.

Bardzo ważnym aspektem w ekonomii Internetu jest fakt, że jego użytkownicy mogą natychmiastowo zbadać funkcjonalność danych usług zanim jeszcze zdecydują się na ich zakup i dalsze korzystanie. Dla przykładu korzystanie w wersji demonstracyjnej z płatnej poczty elektronicznej, czy banku internetowego pozwala bez żadnego nakładu finansowego sprawdzić i ocenić konkurencyjne usługi. W świecie rzeczywistym z reguły dopiero po zakupie danego produktu można określić, czy jest się z niego zadowolonym i czy wybór był trafny. Funkcjonalność staje się więc jednym z najważniejszych kryteriów decydujących o powodzeniu danej firmy, gdyż to ona ma bardzo duży wpływ na to, jakiego wyboru dokona potencjalny klient.

Reasumując można stwierdzić, że niska funkcjonalność to brak klientów . Witryna danej firmy staje się jej główną wizytówką. Dzieje się tak szczególnie wówczas, gdy przedsiębiorstwo funkcjonuje i świadczy swoje usługi tylko w Internecie. Klient na podstawie oceny serwisu kształtuje swoje wyobrażenia o metodach działania firmy, jej strategiach, produktach. W wielu przypadkach witryna sama staje się produktem . Projektowanie zgodnie z zasadami funkcjonalności jest uszanowaniem użytkowników. Jeśli dany serwis sprawi przyjemność i usatysfakcjonuje odbiorców, mamy większą pewność, że powrócą oni do tych usług i będą rozpowszechniać pozytywne opinie. Zwiększa się też produktywność użytkowników, gdyż sprawnie współdziałając z systemem, stają się oni bardziej wydajni, mając dodatkowo świadomość dobrze wykonanej pracy.

Dobrze przemawiającym do wyobraźni przykładem skutków braku funkcjonalności produktów jest opisywany w książce "Funkcjonalność stron internetowych" przypadek firmy Coleco. Firma ta produkująca domowy system komputerowy "Adam" straciła w 1983 roku 6 milionów dolarów. Niski zbyt i zwroty sprzętu były efektem bardzo skomplikowanej instrukcji obsługi komputera. Uprzednie przetestowanie funkcjonalności podręcznika użytkownika prawdopodobnie uchroniłoby ten produkt od fiaska i nie naraziło firmy na tak duże straty.

2. Psychologia czynników ludzkich

2.1 Czym jest psychologia czynników ludzkich?

Ergonomia i funkcjonalność wywodzą się z dziedziny psychologii zwanej nauką o czynnikach ludzkich. Dziedzina ta poszukuje "informacji o zachowaniach człowieka, jego zdolnościach i ograniczeniach, które mogą mieć wpływ na projektowanie, ocenę oraz zastosowanie produktów; celem badań tej nauki jest poprawa wydajności, bezpieczeństwa oraz wygody użycia technologii i przedmiotów wyprodukowanych przez człowieka; w centrum zainteresowania znajduje się człowiek jako podstawowy element relacji człowiek - produkt - środowisko."

Człowiek jako istota biologiczna obarczona jest wieloma niedoskonałościami umysłowymi oraz fizycznymi i znajomość tych "wad" jest ogromnie pomocna w zrozumieniu jak umysł i ciało dokonuje interakcji z otaczającym światem. Dziedzina ta różni się bardzo od typowej psychologii, gdyż nie zajmuje się badaniem stanów emocjonalnych lub zaburzeń natury umysłowej. Ma ona bardzo praktyczny i wprost fizyczny charakter.

Nauka ta narodziła się w czasie II wojny światowej, gdy głównym celem specjalistów wojskowych było zbadanie, w jaki sposób można podnieść sprawność działania i wydajność żołnierzy walczących z wrogiem. Przeprowadzono wówczas szereg eksperymentów, z których wynikało jasno, iż ludzka wydajność rośnie, gdy używany sprzęt, miejsce pracy i wszelkie inne czynniki interakcyjne są zaprojektowanie z myślą o cechach użytkowników. Po wojnie nauka ta stała się jedną z najważniejszych dziedzin związanych z opracowywaniem przedmiotów, systemów, środowisk pracy i zapoczątkowała filozofię projektowania zorientowanego na użytkownika (User-Centered Design).

Specjaliści tej dziedziny z reguły ściśle współpracują z zespołem projektowania przemysłowego i ich zadaniem jest ciągłe monitorowanie wydajności ludzi używających dotychczas opracowanych metod czy narzędzi. W kręgu ich zainteresowań są także symulacje pozwalające zbadać jakie zmiany mogą wprowadzić wzrost tej wydajności, np. przez zastosowane nowych techniki projektowania.

Podsumowując, główne zadania specjalistów od psychologii czynników ludzkich to:

Projektowanie bezpieczniejszych i łatwiejszych w użyciu produktów

Projektowanie systemów dostosowanych do określonych grup użytkowników.

Poprawa sposobu prezentowania informacji w celu wyeliminowania błędów (komunikacja, szkolenia itp.).

Podwyższenie wydajności poprzez poprawę efektywności pracy ludzkiej w miejscu pracy.

Tworzenie technik przeciwdziałających spadkowi wydajności w wyniku zmęczenia.

2.2 Zmysły i percepcja

Człowiek do kontaktu z otoczeniem używa swoich zmysłów. To one pozwalają na percepcję i rejestrację wrażeń. Nawigacja po Internecie jak dotychczas korzysta tylko z dwóch zmysłów człowieka: wzroku i słuchu. Jak podkreśla Włodzimierz Pastuszak "Informacje obrazowe (dane zmysłowe) wcale nie są nam dawane, lecz przez nas wynajdywane (...) Percepcja jest nie tyle przyjmowaniem, co raczej podjęciem." Innymi słowy postrzeganie jest bardzo indywidualnym zagadnieniem i to dopiero w umyśle człowieka zachodzi proces poznawczy tego, co obserwujemy. Człowieka charakteryzuje wybiórczość i selektywny sposób odbierania informacji. Percepcja jest więc efektem zjawiska zmysłowego, a na ten efekt wpływają zjawiska wyższego rzędu takie jak pamięć, uwaga, doświadczenie. Dokładnym badaniem jakie wrażenia wywołują bodźce fizyczne zajmuje się psychofizyka, zaś poznanie mechanizmów fizjologicznych uczestniczących w przekazywaniu, kodowaniu i przetwarzaniu informacji na skutek działania tych bodźców jest domeną neurofizjologii.

2.2.1 Wzrok i percepcja barw

Ludzkie oko może odbierać nieprawidłowo barwę na skutek indukcji przestrzennej (kontrastu współczesnego) i indukcji czasowej (kontrastu następczego). Pierwsze zjawisko polega różnym odbiorze barw w zależności od otoczenia, w którym się one znajdują. Przykładowo szara plama na białym tle będzie się wydawała ciemniejsza niż ta sama plama na tle czarnym. Wrażenie jest to tym większe im silniejsze są różnice w jasności sąsiadujących kolorów. Drugie zjawisko dotyczy powidoków, czyli trwania pobudzenia receptorów siatkówki jakiś czas po ustaniu bodźca świetlnego. Objawia się to na przykład pozornym zabarwieniem pola białego, na skutek dłuższego patrzenia na inne pole barwne. Użycie barw może utrudniać lub ułatwiać percepcję informacji:

2.2.2 Złudzenia optyczne. Schemat i oczekiwanie.

W korze mózgowej, a dokładniej w części o nazwie cortex następuje interpretacja docierających obrazów. Oko ludzkie przekazuje miliardy pobudzeń nerwowych do mózgu, jednak świat, który w efekcie końcowym widzi człowiek nie jest chaosem i ma stabilną postać. Ogromną rolę w tym odbiorze ma ludzka wyobraźnia i niezbadane jeszcze do końca procesy zachodzące w mózgu. O tym jak łatwo oszukać jest ludzką percepcję mogą świadczyć poniższe obrazy (Rys. 1.). Pierwszy z nich przedstawia spiralę Frasera, która w rzeczywistości jest zbiorem koncentrycznych okręgów. Drugi rysunek, jeśli skupimy nasz wzrok w środkowym punkcie i będziemy się do niego przysuwać i oddalać, wywoła wrażenie obrotu kół w przeciwnych kierunkach. Oczywiście w opracowaniach psychologicznych można znaleźć ogromną liczbę innych złudzeń optycznych, które zostały zaobserwowane.

Rys. 1. Przykłady złudzeń optycznych

Mózg widząc obiekty nie tylko przetwarza dochodzące do niego sygnały z nerwu wzrokowego, ale również interpretuje obrazy z wykorzystaniem przewidywań i założeń wynikających z jego doświadczenia i wiedzy. "Schemat i oczekiwanie to bez wątpienia dwa filary percepcji". Zmysł wzroku wykazuje także duże możliwości dostosowawcze i potrafi mimo zaistniałych niedogodności tolerować zniekształcenia w przekazywanej informacji wizualnej (tzw. prawo stałości wrażeń). Dla naukowców do dnia dzisiejszego zagadkowy jest mechanizm pozwalający mimo znacznych różnic w prezentacji danego obiektu (różne oświetlenie, odległość itd.) rozpoznać go właściwie. Zaskakujące jest to, jak ludzki mózg potrafi po bardzo ogólnych cechach np. geście, sposobie poruszania się, wychwycić z tłumu danego człowieka. Podobnie ze zdjęciami znanej nam postaci - nawet, jeśli są niewyraźne lub nie przedstawiają jej dokładnie, to człowiek z reguły potrafi wskazać właściwą osobę. Zapisanie tej umiejętności w postaci kodu programu zrozumiałego dla maszyn jeszcze nikomu się nie udało. "Opis widzenia jako procesu, w którym zewnętrzne bodźce decydują tylko o percepcji wystarczają do wyjaśnienia konstrukcji aparatu fotograficznego". "W sytuacji, kiedy możemy się czegoś domyśleć nie potrafimy rozdzielić widzenia od wiedzy." Właśnie dzięki temu doświadczeniu i umiejętnościom przystosowania użytkownicy Internetu działają na zasadzie przyzwyczajeń i schematów. Dochodzi tu do głosu pojęcie modelu mentalnego, czyli zdolności przetwarzania dochodzących bodźców w specyficzną konstrukcję, która później jest wykorzystywana do przyswajania nowych informacji. "Tworzymy modele mentalne przedstawiające ważne aspekty naszego fizycznego i społecznego świata i manipulujemy elementami tych modeli, gdy myślimy, planujemy i usiłujemy wyjaśnić zdarzenia zachodzące na świecie. Zdolność do tworzenia i modyfikowania modeli rzeczywistości jest cechą wyróżniającą człowieka wśród innych istot." Człowiek dokonujący interakcji z oprogramowaniem, tworzy jego wyobrażenie jak powinna wyglądać komunikacja z tą aplikacją. Przykładowo, ponieważ przyjętą normą w Internecie jest oznakowanie wskaźników podkreśleniem, odbiorca zawsze będzie kojarzył, że każdy podkreślony wyraz musi prowadzić do innej strony nawet, jeśli ktoś użył podkreślenia tylko dla zwrócenia uwagi. Oglądając stronę użytkownik ma już jakieś przewidywania i jego percepcja będzie w dużej mierze polegać na porównywaniu tego, co widzi z tym, do czego jest przyzwyczajony. "Cała nasza kultura polega na grze oczekiwań i obserwacji, na ich spełnianiu i rozczarowaniu z niespełnienia". Aby podnieść funkcjonalność w przyswajaniu nowych informacji należy więc wykorzystywać to, co użytkownik już wie i do czego może się odnieść podczas pracy w nowym środowisku oraz wystrzegać się łamania przyjętych norm i zasad. Jeśli w zamierzeniu jest wprowadzenie jakiś nowych konwencji powinno się zacząć od przedstawienia tego, co jest znajome i łatwo zrozumiałe, by następnie przejść stopniowo do nowych nieznanych dotąd odbiorcy form.

Umiejętność "wypełniania" przez mózg brakujących elementów przekazu i procesy temu towarzyszące mogą prowadzić do wprowadzania przez twórców zbyt dużych uproszczeń, utrudniających percepcję informacji. Przykładowo, użytkownicy ciągle atakowani animowanymi reklamami będą nieświadomie unikać wszystkiego, co jest do nich podobne. Wynika to ze zdolności do obrony przed zbyt dużą ilością informacji płynącą z otaczającego świata jak i umiejętności adaptacji sensorycznej. Desensoryzacja pozwala na przyzwyczajenie się do docierających bodźców, którym człowiek jest poddawany przez dłuższy czas. Innymi słowy organizm będzie reagował tylko na nowe sygnały, pomijając postrzeganie już istniejących. W praktyce oznacza to, że powinno się unikać nadużywania technik zwracających uwagę użytkownika. Zastosowane w nadmiarze przestaną być zauważane i mogą też doprowadzić do frustracji odbiorcy. Jeśli na stronie będzie działo się zbyt dużo rzeczy jednocześnie, to jest niemal pewne, że użytkownik nie zwróci uwagi na to, co chcemy mu przekazać lub w gorszym przypadku opuści stronę.

2.2.3 Zaburzenia widzenia

Należy zwrócić uwagę na fakt, iż z wiekiem wzrok człowieka pogarsza się. W szczególności dotyczy to percepcji odcieni koloru niebieskiego. Używanie więc tej barwy jako koloru tekstu jest błędnym założeniem. Niestety kolor niebieski przyjęto jako domyślną kolorystykę dla hiperłączy. Można polemizować czy lepiej zamieniać tą barwę na inną, czy też odwoływać się do przyzwyczajeń użytkowników. Nasze osłabione postrzeganie barwy niebieskiej jest wykorzystywane natomiast w algorytmach kompresji, które minimalizują informację o tym kolorze w obrazach, pozwalając zmniejszyć rozmiar plików.

Ponieważ zaobserwowany kolor zależy od trójwymiarowego wektora sygnałów wykrytych przez stożki i jest kombinacją tych sygnałów oraz ze względu na odwzorowanie many-to-one występuje zjawisko metameryzmu. Oznacza ono postrzeganie różnych widm jako takiego samego koloru. Przykładowo światło bichromatyczne o długościach 530 nm i 630 nm wywoła te same wrażenie światła żółtego jak światło monochromatyczne o długości fali 550 nm.

Długości fal dobieranych barw odgrywają kluczową rolę w poprawnym przekazie wizualnym. Zestawienie kolorów z przeciwległych krańców spektrum widzialnego, w szczególności kolorów czerwonego i niebieskiego, wywołuje stan zwany chromostereopsys. Jego skutkiem jest silny ból głowy. Wynika to z faktu, iż fale z tych zakresów są załamywane w inny sposób i gdy oczy widzą obiekt złożony z barwy czerwonej i niebieskiej jednocześnie, na siatkówce powstaje przesunięcie odbieranych obrazów. Jest to pewnego rodzaju niedoskonałość ludzkiego wzroku i błąd w naszym systemie odbioru obrazów. Przypadkiem poważnych zaburzeń wzroku jest ślepota barwna, czyli różne odmiany daltonizmu. W zależności od rodzaju schorzenia ludzie mogą mieć problemy z rozróżnianiem niektórych barw (najczęściej barwy czerwonej i zielonej) albo w skrajnym przypadku wcale nie widzieć kolorów (achromatopsja). Z tego powodu nie można stosować koloru jako jedynego źródła przekazywanej informacji, gdyż dla niektórych może być to całkowicie nieczytelne.

2.2.4 Słuch

W przypadku filmów czy prezentacji multimedialnych ilustracja muzyczna jest idealnym uzupełnieniem przekazywanych treści tworząc spójną całość. Zastosowanie muzyki czy dźwięków w Internecie dość powoli nabiera coraz większego znaczenia. Trzeba pamiętać, że odbiorcy mogą być nieprzygotowani na przekaz dźwiękowy. Niewskazane jest atakowanie potencjalnych słuchaczy głośną muzyką, której nie chcieliby słyszeć. Zamiast zaintrygować i wzbudzić zainteresowanie może to doprowadzić do irytacji. Pliki dźwiękowe najczęściej zajmują dużo miejsca i czas ich pobierania jest długi. Pomimo rozwijających się mediów strumieniowych nie można zakładać, iż każdy użytkownik ma łącze szerokopasmowe.

Korzystne jest używanie pojedynczych dźwięków informujących odbiorcę o wykonywanych akcjach np. o pobraniu pliku. Pozwoli to na baczniejsze zwrócenie jego uwagi w kluczowych momentach pracy systemu.

2.2.5 Zapamiętywanie i zapominanie

Proces zapamiętywania informacji w ludzkim mózgu można podzielić na trzy etapy (Rys. 2.). Pamięć sensoryczna zwana też pamięcią ikonową jest rodzajem pamięci wzrokowej. Docierające do mózgu bodźce zostają tam przez bardzo krótki czas i jeśli w jakiś sposób nie zwrócą naszej uwagi zostają zapomniane. W wyniku uczenia się człowiek ma możliwość przeniesienia informacji do pamięci krótkiej, a następnie długiej. Niestety, jeśli dane czynności czy zagadnienia nie będą powtarzane i ćwiczone, prowadzące do nich ścieżki neuronowe stają się coraz słabsze i zmniejsza się nasza zdolność do przywołania ich z pamięci. Po dłuższym czasie mogą one zostać całkowicie zniszczone.

Rys. 2. Rodzaje pamięci człowieka

W przypadku przekazywania informacji, którą użytkownik ma lepiej przyswoić i łatwiej zapamiętać, zastosowanie ma zasada dzielenia. Treść przekazana w postaci mniejszych części sprzyja łatwiejszemu zapamiętywaniu. Obowiązuje tu reguła 7 plus minus 2 (zdefiniowana przez G. A. Millera w artykule "The Magical Number Seven, Plus or Minus Two: Some limits on Our Capacity for Processing Information" opublikowanym w "The Psychological Review" z 1956 roku nr 63) oznaczająca, że człowiek najlepiej zapamiętuje do około 7 niezwiązanych ze sobą informacji. Bardzo duże znaczenie mają też sygnały semantyczne, czyli dodatkowy przekaz dołączony do obrazu (np. w postaci opisu słownego), który pomaga zapamiętywać wzrokowo i ułatwia człowiekowi kojarzenie widzianych już wcześniej elementów. Innymi słowy lepiej odwoływać się do symboli, które użytkownik zna i mają one dla niego sens, niż tworzyć nowe i kazać mu się ich uczyć na nowo.

Użytkownicy Internetu na ogół nie starają się zapamiętywać każdego nowego schematu stron czy poleceń i działają dość spontanicznie. Najczęściej posługują się swoją intuicją i próbują odnaleźć się w nowym miejscu w oparciu o swoje dotychczasowe doświadczenia lub zwykłą spostrzegawczość. Nie powinno się obarczać odbiorców koniecznością pamiętania czegokolwiek, co może być zapamiętane przez komputer (np. nazw złożonych poleceń i innych opisów). Podpowiedzi wizualne, wskazówki tekstowe (np. wybór kategorii z listy) czy wreszcie zapamiętywanie przez system preferencji użytkownika lub często występujących słów zwalnia z konieczności obciążania pamięci odbiorcy. Przykładowo, jeśli strona udostępnia wiele opcji, to należy je zorganizować w przejrzysty sposób, łatwy do zlokalizowania. Stosowanie wizualnego i tematycznego podziału pozwala szybciej odnaleźć poszukiwaną funkcję. Ponieważ nawigacja po menu może zając dużo czasu, to w celu zwiększenia wydajności zaawansowani odbiorcy powinni mieć możliwość korzystania ze skrótów klawiaturowych, które sami mogliby modyfikować.

3. Projektowanie zorientowane na użytkownika

3.1 Zasady UCD

Każdy proces opracowania nowego produktu powinien spełniać zasady projektowania ukierunkowanego na użytkownika (User-Centered Design). Ponieważ zaawansowane umiejętności informatyczne posiada mała liczba osób, wykorzystanie tych reguł przy tworzeniu oprogramowania ma znaczący wpływ na łatwość obsługi i współpracy z wdrażanym produktem komputerowym. Doskonałe rezultaty daje wprowadzenie activity-based planning, czyli planowania opartego na najczęściej wykonywanych zadaniach. Ten rodzaj projektowania skupia się na rozpoznaniu czynności, które chce zrobić użytkownik i usprawnieniu ich realizowania. W sytuacji, gdy odbiorca ma prezentowane wszystkie opcje programu i musi domyślać się ich działania (planowanie oparte na funkcjach i opcjach aplikacji - częsty sposób na prowadzenie sztucznej wojny z konkurencją) to szukanie tego, czego potrzebuje zajmie mu dużo czasu. Przeprowadzając krótki test na przyszłych użytkownikach łatwo jest skonstruować plan najczęściej wykorzystywanych opcji oraz poleceń i na tych fundamentach zbudować cały interfejs programu. Przy okazji należy odrzucić najmniej potrzebne opcje lub ukryć je w rozwijalnym menu. Przykładowo serwis edukacyjny jest najczęściej odwiedzany w celu zapoznania się i przeszukiwania materiałów dydaktycznych oraz sprawdzania informacji o postępach w nauce. Rozumiejąc potrzeby użytkowników nie narażamy ich na konieczność wykonywania zadań spowalniających priorytetowe czynności.

Projektowanie w centrum którego znajduje się człowiek, zakłada także takie opracowanie programu, by jego użycie było możliwe w jak największej ilości warunków. Taki typ tworzenia produktu nazywa się projektowaniem z uwzględnieniem warunków ekstremalnych. Próba wyobrażenia potencjalnych użytkowników i przewidzenie sytuacji, w jakich oprogramowanie może być użyte pomaga uniknąć kłopotów z nietypowymi przypadkami, jakie mogą zaistnieć w warunkach naturalnych. Codzienne użycie Internetu nie przypomina warunków laboratoryjnych i końcowi odbiorcy mogą korzystać z serwisu w bardzo zróżnicowany sposób. Funkcjonalność nie oznacza tylko najlepszej możliwej użyteczności w najlepszych warunkach, lecz jest równoznaczna z takim zaprojektowaniem aplikacji by mogła ona działać w najgorszej możliwej sytuacji. Przykładowo nie można zakładać, że dany napis będzie odczytywany zawsze przy dobrym oświetleniu. Być może użytkownicy będą pracować po ciemku i zbyt kontrastowy kolor na monitorze szybko zmęczy ich wzrok. Odbiorcami mogą być ludzie niepełnosprawni, ograniczeni ruchowo, posługujący się różnego typu monitorami lub urządzeniami wskazującymi. Mogą oni mieć małe doświadczenie komputerowe, korzystać z aplikacji bez znajomości instrukcji obsługi, pracować w nieprzyjaznym otoczeniu, w hałasie bez możliwości skupienia się lub wykonując wiele czynności w tym samym czasie itd. Oczywiście takich przykładów jest bardzo wiele, najważniejsze jest jednak by pamiętać o tym, że każdy produkt powinien być zdatny do użytku w trudnych warunkach, dzięki czemu jego użycie będzie dużo łatwiejsze w warunkach sprzyjających pracy. Wszelkie ułatwienia zastosowane dla mało zaawansowanych użytkowników zostaną docenione również przez profesjonalistów i pomoże to przyczynić się do stworzenia serwisu lubianego przez wszystkich.

Aby móc pogodzić wymagania klientów i zapewnić funkcjonalność wytwarzanego produktu w jak największej ilości warunków pracy, projektowanie dzieli się na sześć etapów:

Opracowanie profili użytkowników przyszłego produktu
Określenie zadań wykonywanych najczęściej przez użytkowników
Określenie modelu użytkownika
Przygotowanie wstępnej wersji projektu
Cykliczne testowanie polegające na obserwacji ludzi pracujących z programem
Tworzenie nowych wersji uwzględniających poprawki zauważonych błędów

3.2 Poznawanie użytkowników i ich wymagań

Pierwsze aplikacje tworzone dla komputerów osobistych z założenia były produkowane przez specjalistów dla specjalistów. Grono osób wykorzystujących komputery do codziennej pracy było tak wąskie, iż twórcy nie musieli zastanawiać się nad tym, czy ich program jest łatwy w obsłudze. Najważniejsze było jego poprawne działanie, natomiast odbiorcy w razie wątpliwości mieli do dyspozycji instrukcję obsługi. Poza tym z racji ich wyspecjalizowania informatycznego, adaptacja do nowej aplikacji nie wymagała długiego czasu ani zbytniego wysiłku. Obecnie gdy od kilkunastu lat komputer stał się powszechnym narzędziem pracy, poznanie użytkowników powstającego programu czy serwisu jest niezbędnym krokiem, od którego powinien zacząć się każdy projekt.

Eksperci od spraw funkcjonalności poprzez częste kontakty z użytkownikami kształtują ostateczny wygląd programu i dostosowują jego działanie do potrzeb odbiorców. Ich pierwszym zadaniem jest określenie jaka jest grupa docelowych użytkowników serwisu i tego jakie są główne cele tworzenia strony. Zbierane przez nich informacje można podzielić na podstawowe działy:

Dane osobowe - najbardziej podstawowe informacje określające wiek, stopień znajomości obsługi komputera, wykształcenie, posiadany sprzęt, otoczenie w którym pracuje itp. Te pytania pozwalają na klasyfikację grup odbiorców i utworzenie profili użytkowników korzystających z danego serwisu.

Minimalna funkcjonalność - określenie podstawowych zadań, które ma spełniać serwis i czynności możliwych do wykonania. Ważna jest koncentracja na tych częściach, które są najbardziej potrzebne odbiorcom i unikanie skomplikowania budowy interfejsu. Stopniowa jego rozbudowa w miarę potrzeb i wzrastających umiejętności użytkowników gwarantuje łatwiejsze zapoznanie się z działaniem strony. Atakowanie od samego początku zestawem wyszukanych możliwości może doprowadzić do dezorientacji i bardzo szybko zniechęcić odbiorcę.

Oczekiwania i ograniczenia ze strony użytkownika - jakiego sposobu działania witryny oczekują odbiorcy i jakich rozwiązań spodziewają się na projektowanej stronie. W zależności od ich stopnia zaawansowania mogą preferować różne sposoby pracy z systemem, natomiast w wyniku ograniczeń sprzętowych mogą mieć kłopoty z dostępem do zastosowanych technologii (np. posiadają wolne połączenie z Internetem, dlatego nie będą wykorzystywać strumieni wideo). Czasem wykorzystywane równoległe systemy, z którymi współpracuje użytkownik mogą wchodzić w konflikt z projektowaną aplikacją itd.

Przyzwyczajenia użytkowników - uważna obserwacja w jaki sposób odbiorcy wykonują zadania na podobnych stronach i podporządkowanie się ogólnie przyjętym standardom ułatwi stworzenie łatwo przyswajalnej witryny.

Krytyka i zarzuty ze strony użytkowników - konieczne jest uwzględnienie zgłaszanych problemów oraz zwrócenie uwagi na unikanie nielubianych przez odbiorców rozwiązań i zastąpienie ich nowszymi, bardziej przyjaznymi metodami.

Gdy populacja docelowa jest już znana i jasno określono cele serwisu, można przejść do próbnej realizacji projektu. Narzędziem służącym do weryfikacji poprawności działania serwisu jest jego konfrontacja z rzeczywistością polegająca na testach funkcjonalności z rzeczywistymi przyszłymi użytkownikami systemu.

3.3 Przeprowadzanie testów funkcjonalności

Opieranie się jedynie na przekonaniach projektantów bez rzeczywistego przetestowania aplikacji nie prowadzi do stworzenia funkcjonalnego programu. Nawet najlepszy twórca wraz z rozwojem swojej pracy traci do niej dystans i nie potrafi już wyobrazić sobie w jaki sposób mogą z niej korzystać niedoświadczeni odbiorcy. Poza tym może pojawić się szereg nieprzewidzianych okoliczności niweczących pierwotnie poprawne założenia.Przeprowadzenie testów z realnymi odbiorcami jest najlepszym rozwiązaniem. Ponieważ w większości przypadków nie jest możliwy kontakt z całą populacją korzystającą z projektowanych usług, musi zostać wybrana próba, czyli losowa reprezentacja użytkowników. Oczywiście w tej grupie nie może znaleźć się nikt z projektantów systemu, czy jakakolwiek inna osoba związana z powstającym serwisem. Osoby te mogą być zwerbowane przez firmy zajmujące się badaniami rynkowymi lub ewentualnie przez wyspecjalizowane agencje pracy czasowej. Ważne jest przedstawienie takiej firmie kryteriów jakie mają spełniać kandydaci, by w ten sposób wyeliminować osoby spoza szukanej grupy docelowej. Po odnalezieniu żądanych osób wskazane jest jeszcze przeprowadzenie dodatkowej ankiety, która pozwoli podzielić tą grupę i w oparciu o nie stworzyć profile użytkowników przyszłego serwisu. Podział ten może pomóc w interpretacji wyników, a w przypadku ewidentnych różnić może zajść potrzeba przygotowania oddzielnych wersji tego samego serwisu.

Przeprowadzanie testów wymaga od prowadzącego dużego doświadczenia w pracy z ludźmi i wrażliwości na bardzo zróżnicowane zachowania. Przede wszystkim moderator powinien być bezstronny i zachowywać się neutralnie. Ludzie z reguły wykazują podczas testu zdenerwowanie i osoba towarzysząca nie może potęgować tego odczucia. Równowaga pomiędzy neutralną obecnością, a uprzejmym podejściem do testujących jest wyjątkowo ważna, gdyż pozwala zachować miły, ale nie spoufalony kontakt. Ludzie bardzo często obwiniają własną osobą w wypadku niepowodzenia w rozwiązywaniu testu. Należy uświadamiać uczestnikom, że nie oni, lecz system jest przedmiotem badania i nie ma ani dobrych, ani złych odpowiedzi.

Nie można dopuścić do sytuacji, w której uczestnicy będą starać się udzielać odpowiedzi takich, jakie by w ich przekonaniu usatysfakcjonowały prowadzącego badania. Od początku muszą oni wiedzieć, że moderator nie jest autorem projektu i że ich odpowiedzi nie są wystawianiem oceny tej osobie. Należy przekazać testującym, iż najważniejsza jest szczerość wypowiedzi i oceny, gdyż dzięki temu może nastąpić znaczna poprawa funkcjonalności obecnego projektu. Oczywiście zabronione jest wprowadzanie w błąd odbiorcy, bądź sugerowanie rozwiązań i opinii. Uczestnicy testu, w tej nietypowej dla nich sytuacji jaką jest test, w bardzo łatwy sposób ulegają wszelkim wpływom i nawet najmniejsza sugestia bądź wypowiedź moderatora może doprowadzić do zafałszowania wyników badań.

Zachowanie zasad etyki jest obowiązkowe przy przeprowadzaniu testów z użytkownikami. Powinni być poinformowani o ich dobrowolnym udziale w eksperymencie i mieć świadomość, że w każdej chwili mogą go przerwać lub odmówić wykonania konkretnego zadania. Bardzo ważna jest również anonimowość osób biorących udział w teście. W przypadku nagrywania eksperymentu konieczna jest na to zgoda uczestników. Jeśli firma ma zamiar wykorzystać wizerunki badanych osób w celach innych nich badawcze, obowiązkowo musi być zawarta umowa między zainteresowanymi stronami potwierdzająca ten fakt. Minimalizacja dyskomfortu psychicznego jaki mogą odczuwać niektórzy uczestnicy pozwoli uniknąć zniekształcenia wyników takiej osoby.

Mark Pearrow powołując się na badania Jakoba Nielsena uznaje liczbę pięciu uczestników testu za zupełnie wystarczającą w przypadku badania funkcjonalności serwisu. Doświadczenie pokazuje, że testy użyteczności nie muszą być przeprowadzane z dużą ilością uczestników. Z reguły problemy są wychwytywane przy udziale pięciu - sześciu użytkowników i liczba nowo znalezionych usterek bardzo szybko spada do zera.

Przykładowo test funkcjonalności może polegać na tym, że Grupa A (kontrolna) testuje pierwszą wersję projektu, zaś Grupa B (eksperymentalna) testuje projekt po wprowadzeniu modyfikacji. Każda z osób rozwiązuje te same zadania w określonym czasie. Cały test prowadzony jest przez moderatora i rejestrowany. Dla większej precyzji percepcji zachowań użytkownika i ich korelacji z wykonywanymi poleceniami, powinno się nagrywać w tym samym czasie obraz monitora testowego jak i postać samego uczestnika. W efekcie końcowym powstaje plik wideo złożony z dwóch zsynchronizowanych strumieni. Pozwala to śledzić postępy testu jak i wszelkie reakcje użytkownika podczas rozwiązywania zadań. Moderator testu mierzy czas rozwiązania każdego zadania i zapisuje wszelkie spostrzeżenia odnośnie pracy użytkownika oraz jego komentarze.

Poniżej (Rys. 3.) przedstawione jest przykładowe proste stanowisko badawcze służące do analizy funkcjonalności serwisu internetowego. Zbudowane jest z trzech komputerów podłączonych do sieci Internet. Pierwszy komputer testowy używany jest przez uczestnika do wykonywania zadań. Zainstalowano na nim również aplikację do zgrywania zawartości ekranu. Drugi komputer służy do informowania użytkownika o treści poleceń, a także do wprowadzania danych w końcowym kwestionariuszu podsumowującym test. Trzeci komputer używany jest przez moderatora testu do zgrywania materiału wideo przedstawiającego postać użytkownika z wykorzystaniem kamery internetowej i także jako narzędzie do odnotowywania postępów pracy uczestnika przy użyciu Usability Datalogger. W bardziej rozbudowanym laboratorium funkcjonalności moderator może przebywać w oddzielnym pokoju kontrolno - obserwacyjnym.

Rys. 3. Laboratorium testowe

Poniższe filmy (Rys. 4. i Rys. 5.) pokazują materiały wideo nagrane podczas testu funkcjonalności. Pierwszy film obrazuje zrzut ekranu, na którym testujący wykonuje zadania (podświetlenie kursora jest pomocno przy analizie ruchów kursora), drugi zaś to nagrana w tym sam czasie postać testującego. Dzięki synchronizacji tych dwóch przekazów możemy prześledzić jakie emocje i odruchy towarzyły osobie podczas realizacji poleceń testowych.

Rys. 4. Osoba testująca aplikacje w laboratorium

Rys. 5. Zrzut ekranu z monitora testera

Ponieważ niemożliwe jest odtworzenie naturalnych nieprzewidywalnych warunków pracy każdego z uczestników, należy zapewnić im identyczne otoczenie pracy i tym samym traktować to jako punkt odniesienia dla badań. Użytkownik nie może odczuwać dyskomfortu psychicznego związanego z przeprowadzaniem testu, dlatego zalecane jest wyciszenie pomieszczenia badawczego, usunięcie z niego wszelkich zegarów i przedmiotów odwracających jego uwagę. Miejsce to nie powinno mieć zbyt sterylnego charakteru, gdyż z reguły budzi to niechęć testujących.

Ustawione kamery i sprzęt obsługiwany przez moderatora nie powinien przeszkadzać testującemu, zaś wszelkie operacje związane z rejestracją testu powinny być dla niego niezauważalne. Niezmiernie ważne jest też neutralne zachowanie moderatora. Jego miejsce pracy powinno znajdować się tuż za uczestnikiem testu. Moderator nie może w żaden sposób pomagać testującemu w rozwiązywaniu zadań ani cokolwiek sugerować. Nadzoruje on cały eksperyment i obserwuje zachowania użytkownika w dyskretny sposób.

3.4 Cykliczna modyfikacja

Każda strona w rzeczywistości jest wciąż modyfikowana i podlega rozwojowi. Po pierwszej fazie jaką jest analiza potrzeb, następuje projektowanie operacyjne i konceptualne. Wówczas potrzeby użytkownika są przekształcane na sformalizowane wymagania projektowe. W czasie tworzenia produktu testowanie funkcjonalności pozwala znajdować wszelkie krytyczne błędy aplikacji i przebudowywać ją. Z reguły, nawet jeśli pierwotna strona powstała zgodnie z wytycznymi przedstawionymi przez potencjalnych odbiorców, testy wskażą nowe problemy, wynikające np. z błędnej interpretacji wyników zebranych od użytkowników. Problemy te powinny być rozwiązane przy kolejnej wersji produktu i aplikacja musi być ponownie przetestowana ponownie pod ich kątem. Projekt serwisu internetowego wymaga więc nieustającego badania sprawności wprowadzanych rozwiązań. Dzieje się tak też dlatego, iż użytkownicy i ich wymagania mogą się zmieniać. Rozwój technologiczny wytwarza presję na wykorzystanie nowych technik, których działanie należy sprawdzić. Niekiedy użytkownicy zgłaszając potrzebę nowych rozwiązań nie zawsze potrafią sprecyzować swoje wymagania i wyobrazić sobie jakiego działania by oczekiwali. Podobnie projektantom trudno zrozumieć pragnienia odbiorcy i odgadnąć czego żąda użytkownik. Rozwiązania korzystne i zrozumiałe z punktu widzenia twórcy, mogą być zupełnie nieczytelne dla pracującego w aplikacji. Próby poprawienia obecnych problemów trzeba prześledzić w działaniu i zaobserwować ich rzeczywisty wpływ na pracę. Tylko dzięki częstym i wczesnym testom eksperci od spraw funkcjonalności mogą poznać reakcję odbiorców na to, czy ich oczekiwania zostały spełnione i sprawdzić działanie proponowanych przez projektantów alternatywnych pomysłów. W końcowej fazie następuje zatwierdzenie produktu polegające na ostatniej sesji testowej i dopiero po tym produkt zostaje wdrożony w życie. Cały opisany proces unowocześniania, testowania i opiniowania ma cykliczny przebieg i powinien być powtarzany wciąż od nowa w celu doskonalenia budowy serwisu (Rys. 6.). Po opublikowaniu serwisu zbieranie danych poprzez udostępnianie ankiet, możliwość zgłaszania komentarzy i uwag oraz obserwację konkurencji pozwala na konstruktywny rozwój witryny. W miarę uaktualnienia serwisu i wprowadzania nowych zasad User-Centered Design serwis zyskuje na funkcjonalności oraz bardziej odpowiada specyficznym wymaganiom korzystających z niego ludzi.

4. Budowa serwisu

4.1 Wstęp

Projektowanie serwisu internetowego pociąga za sobą konieczność spełnienia wielu wymagań, dzięki którym prezentowana zawartość witryny będzie przystępna dla odbiorcy. W przypadku projektowania materiałów papierowych nie istnieje problem zróżnicowanego odbioru treści, gdyż wygląda ona dokładnie w ten sam sposób dla wszystkich. Niestety w Internecie użytkownicy mogą dysponować bardzo odmiennymi konfiguracjami komputera, co utrudnia lub czasem wręcz uniemożliwia poprawny odczyt zawartości serwisu. Potencjalnych problemów jest dużo. Jeden z nich to niekompatybilność przeglądarek internetowych z przyjętymi standardami. Ta sama strona w przeglądarce Microsoft Explorer może wyglądać zupełnie inaczej w innej przeglądarce. Co więcej projektant nie jest w stanie przewidzieć w jakiej rozdzielczości pracuje monitor użytkownika, przez co np. pewne elementy mogą znaleźć się poza polem widzenia odbiorcy. Kłopotliwe może okazać się również umieszczanie nietypowych dodatków lub rozszerzeń multimedialnych, do których potrzebne będą odpowiednie plug-iny czy sterowniki.

Ponieważ z reguły każdy serwis złożony jest z tekstu, grafiki i elementów multimedialnych poniższy rozdział odwzorowuje ten podział, zwracając uwagę na spełnienie krytycznych warunków ważnych z punktu widzenie funkcjonalności. Oddzielnym zagadnieniem jest problem nawigacji, którym zajmuje się interfejs użytkownika. Z punktu widzenia funkcjonalności jest to jeden z najważniejszych elementów serwisu, gdyż stanowi on fundament łatwego poruszania się po zasobach i odszukiwania żądanych treści. Zła nawigacja może bardzo łatwo pogrzebać każdy projekt, bez względu na to jak dobry wizualnie i treściowo będzie serwis, gdyż użytkownicy będą się w nim czuć zagubieni.

4.2 Ogólne zasady projektowania na potrzeby Internetu

4.2.1 Organizacja i projekt wizualny

Pamiętając o ograniczeniach ludzkiej percepcji jak i również o ograniczeniach współczesnych ekranów komputerowych, dobrze zaprojektowana graficznie organizacja przestrzeni informacyjnej to klucz do budowy łatwo przyswajalnych serwisów internetowych. Decydującą rolę pełni podział ekranu. Najbardziej wyeksponowana powinna być treść, której użytkownik będzie poszukiwał. Wszelki nadmiar elementów nawigacyjnych i innych zbędnych dodatków graficznych nie jest wskazany, gdyż w połączeniu z interfejsem przeglądarki internetowej zabiera miejsce na potencjalną część informacyjną. Zgodnie z zasadą dzielenia informacji, zastosowanie wizualnego podziału prezentowanych treści pomaga lepiej zrozumieć układ strony i nie potęguje wrażenia akumulacji dużej ilości danych na zbyt małej przestrzeni. Zasadnicza część strony powinna zajmować od 50% do 80% witryny, zaś część nawigacyjna do 20% (na stronach głównych dopuszcza się większy udział elementów nawigacyjnych). Zakłada się, że dobry projekt to taki, który zawiera tylko te elementy, które są niezbędne to wykonania zadania. W procesie projektowania witryny zaleca się przeprowadzenie zabiegu sekwencyjnego usuwania kolejnych elementów ze strony. Jeśli okaże się, iż po zlikwidowaniu danego obiektu witryna nie traci na funkcjonalności to znaczy, że miał on charakter nadmiarowy.

Należy też pamiętać o różnym zaawansowaniu użytkowników korzystających z witryny. Początkujący użytkownicy powinni na stronie znaleźć najbardziej podstawowe mechanizmy nawigacji i wykonywania zadań. Nie można jednak zapominać o bardziej zaawansowanych odbiorcach i umieścić dla nich dostęp do alternatywnych, bardziej rozbudowanych metod działania (np. wyszukiwanie podstawowe i wyszukiwanie zaawansowane).

Zdarza się, że twórcy podczas procesu kreacji witryny, trwającego nawet kilka miesięcy, zapominają o tym, że użytkownicy z reguły poświęcają tylko kilka sekund na próbę zrozumienia układu nowej strony. To, do czego przywykli już projektanci na etapie twórczym jest całkowitą nowością dla odbiorców. Joel Spolsky nazywa tą sytuację "zakrzywieniem czasu dni = sekundy". Użytkownicy w ciągu kilku sekund lub minut muszą się zapoznać z nowymi wzorcami i rozwiązaniami, doskonale zrozumiałymi dla producentów, które rodziły się stopniowo przez dni czy miesiące podczas budowy strony.

W przypadku witryny internetowej konieczność korzystania z jej instrukcji obsługi oznacza, że jest ona źle lub zbyt skomplikowanie zaprojektowana. Poza tym odbiorcy bardzo rzadko zapoznają się z dokumentacją programu czy strony. Robią to tylko wówczas, jeśli całkowicie nie rozumieją działania danego elementu lub są przekonani o popełnianiu jakieś błędu uniemożliwiającego im wykonanie zadań. Na ogół mogą nie mieć dostępu do żadnej dokumentacji. Dlatego serwis powinien być tak skonstruowany, by móc wywnioskować sposób działania w oparciu o pracę w nim. Projektanci próbują często nadmiernego edukowania użytkownika podczas przebywania w aplikacji lub na danej stronie poprzez dialog z odbiorcą. Pamiętając o niechęci do zapoznawania się z treścią, tylko krótkie, rzeczowe opisy mają szansę na przeczytanie. Projektując stronę należy liczyć się z faktem, że użytkownik może działać niecierpliwie i czasem w sposób nielogiczny. Nawet bardzo rozbudowana pomoc online czy inne metody edukacji nie wspomogą wydajności, gdyż odbiorca będzie uważał witrynę za trudną w obsłudze i wtedy albo nauczy się na pamięć danych rozwiązań, albo zawsze będzie się posiłkował dokumentacją.

4.2.2 Rozpoznawanie standardów

Według Donalda A. Normana w książce "Design of everyday things" człowiek czerpie informacje potrzebne do zrozumienia i rozpoznania otaczających go bodźców z dwóch źródeł: umysłu (informacje zapamiętane) i świata (instrukcje, etykiety itd.). Gdy mamy na myśli percepcję witryny to bardzo ważne jest umiejętne rozłożenie w jakim stopniu wiedza będzie pobierana z tych źródeł. Wykorzystywanie informacji zawartej w ludzkiej pamięci jest użyteczne w niedużych dawkach i powinno odnosić się do podstawowych, nabytych schematów obsługi Internetu. Wszelkie pozostałe dane potrzebne do interakcji powinny być dostarczane przez sam interfejs użytkownika w bezpośrednim kontakcie z nim, ale z zachowaniem prostoty i spójności.

Pisząc o standardach internetowych ma się zazwyczaj na myśli technologie przyjęte przez World Wide Web Consortium (W3C). Jednakże zagadnienie standardów projektowania graficznego stron, ich interfejsów itp. praktycznie jest mało rozpowszechnione. Nie istnieje jakiś konkretny, akceptowany model projektowania witryn. Na ogół przyjmuje się te rozwiązania, które sprawdziły się w świecie Internetu i przez to stały najbardziej popularne. Przykładowo za wzorzec sklepu online podaje się firmę Amazon, gdyż udało jej się zdobyć ogromne uznanie klientów. Organizacją bliższą temu aspektowi tworzenia jest Web Standard Project (WaSP). Przyjęcie standardów także na tym polu jest bardzo potrzebne, zarówno twórcom jak i użytkownikom, ponieważ umożliwi przetrwanie w bardzo szybko zmieniającym się świecie mediów. Odwołując się do tych standardów i do pomocy jaką oferują witryny odbiorca ma możliwość w rozsądnym stopniu korzystania ze wspomnianych na początku dwóch źródeł informacji.

4.2.3 Informacje o położeniu i stanie systemu

Zapewnienie odbiorcy informacji zwrotnej o tym co dzieje się w chwili obecnej z systemem i poinformowanie go w czytelny sposób w jakim jest stadium pracy oraz w którym miejscu serwisu się znajduje, odgrywa krytyczną rolę w funkcjonalnym projekcie każdego systemu interakcyjnego. Szczególnie w przypadku systemu edukacyjnego użytkownicy muszą wiedzieć jaka jest reakcja na skutek ich działań, gdyż szereg zadań np. zdalne zaliczanie kolokwium czy testu wiąże się z ograniczeniami czasowymi, stresem i konsekwencjami w postaci późniejszej oceny. Niedopuszczalna jest sytuacja, w której użytkownicy mogą tylko domyślać się czy opóźnienie wynika ze słabego transferu danych, czy na skutek przeliczania informacji przez system. Taką sygnalizację można uzyskać na kilka sposobów. Krótkie komunikaty potwierdzające przyjęcie polecenia, paski postępu informujące o przetwarzaniu lub ładowaniu danych, animowane kursory i inne podpowiedzi wizualne upewniają odbiorcę o poprawnej pracy witryny i nie narażają na jego zaniepokojenie.

Użytkownik musi być informowany w jakim stadium pracy się znajduje. Po pierwsze upewni go to, że poprawnie przebiega proces wykonywany przez komputer, a poza tym pozwoli mu przewidzieć ile czasu pozostało do wykonania danego zadania. Operacje nieodwracalne, takie jak wysłanie danych formularza, usunięcie wyników itp. zawsze muszą być poprzedzone pytaniem o potwierdzenie takiego działania. Jeżeli towarzyszyć temu będzie jeszcze łatwa możliwość ponowienia i cofnięcia pozostałych czynności to możemy mieć pewność, że dajemy użytkownikowi gwarancję bezpieczeństwa w posługiwaniu się witryną.

W przypadku rozbudowanych stron konieczne jest umieszczenie informacji o sekcji, w której użytkownik przebywa. Najlepiej jeśli dane te będą zawsze prezentowane w jednym miejscu i miały formę wizualną ułatwiającą zrozumienie budowy i poziomów hierarchii serwisu (np. forma grafu, drzewa, tekstu ze strzałkami itp.). Dobrze jest też uczynić elementy tego opisu wskaźnikami do konkretnych miejsc, gdyż użytkownicy często widząc napis którego szukają po prostu klikają tą nazwę, oczekując przekierowania we wskazane miejsce. Pozwoli to zaoszczędzić czas odbiorcy, który w tym wypadku nie musi już odszukiwać mapy strony, ani wycofywać się przyciskiem "cofnij" by powrócić do poprzedniej sekcji serwisu. Dodatkowo użytkownik śledząc swoje położenie łatwiej ogarnia budowę systemu i może to przyspieszyć jego nawigację.

Wszystkie wymienione wyżej informacje kierowane do odbiorcy muszą być wyrażone prostym, nietechnicznym językiem. Użytkownicy nie są z reguły specjalistami komputerowymi i stosowanie języka zrozumiałego tylko programiście aplikacji jest całkowite dla nich nieprzydatne.

W sposób szczególny należy traktować komunikaty o błędach. Przede wszystkim powinny być one dobrze widoczne. Podawanie w nich fragmentów kodu programu, numerów błędu i innych informacji technicznych, nie tylko nie pomoże usunąć kłopotu, ale wręcz wystraszy osoby korzystające z aplikacji. Komunikat taki w swojej głównej treści powinien krótko informować na czym polega błąd i zaproponować kroki jak jemu zapobiegać oraz w jaki sposób powrócić do kontynuowania pracy. Z punktu widzenia odbiorcy to najważniejsze dane. W miarę możliwości aplikacja powinna generować raport błędu i wysyłać go do administratora, a jeśli nie jest to możliwe, to publikować te informacje w szczegółach okna dialogowego informującego o wystąpieniu błędu. Stosowanie zbyt wyszukanej terminologii odbiega od koncepcji "naturalnego dopasowania". Koncepcja ta zakłada, że projektowanie w jej myśl produkty są przybliżeniem i odwzorowaniem budowy świata rzeczywistego. Może to odnosić się zarówno do unikania zbyt wyrafinowanego języka dla oczywistych znaczeń, jak i do mechanizmów działania interfejsów, które powinny być zbliżone do tych znanych z rzeczywistości. Dzięki temu można bazować na istniejących w pamięci użytkownika schematach i doświadczeniach.

4.2.4 Czas pobierania zawartości strony

W ocenie większości użytkowników czas potrzebny na załadowanie witryny i czas odpowiedzi na interakcje jest najważniejszym kryterium oceny. Robert B. Miller opublikował artykuł dotyczący podstawowych reguł czasu odpowiedzi systemu komputerowego na działanie użytkownika. W oparciu o przeprowadzone badania określił trzy czasy reakcji:

Maksymalnie jedna dziesiąta sekundy to czas, gdy użytkownik czuje, iż system działa natychmiastowo i płynnie porusza się po przestrzeni informacyjnej (ważne w interakcjach multimedialnych np. operowaniu w środowisku 3D).

Maksymalnie jedna sekunda pozwala użytkownikowi działać w systemie płynnie nie przerywając jego czynności myślowych, mimo odczucia opóźnienia. Nie są potrzebne żadne dodatkowe informacje sterujące, ponieważ użytkownik nie traci jeszcze kontaktu z systemem.

Maksymalnie 10 sekund to ostateczna granica skupienia odbiorcy na danej witrynie czy polu dialogowym. W wypadku przedłużenia tego czasu, użytkownicy tracą płynność działania i odrywają się od wykonywanych zadań. Jeśli nie są poinformowani o stanie systemu mogą uznać, że system zatrzymał się lub wykonał błąd.

Użytkownicy nie zawsze dysponują łączem z wysokim transferem, dlatego powinni być ostrzegani o każdej zawartości, której pobranie może zabrać więcej niż 10 sekund. W przypadku wczytywania na stronę osadzonej animacji lub innych większych struktur, należy dodać przesuwający się pasek postępu w miejsce tych elementów. Szczególnie ważne jest załadowanie pierwszej strony. Przyspieszenie ładowania strony można uzyskać stosując mniejszą ilość grafiki oraz podając atrybuty wielkości dla rysunków i tabel.

Rodzaj połączenia	1 sekundowy czas odpowiedzi	10 sekundowy czas odpowiedzi
Modem	2kB	34kB
ISDN	8kB	150kB
T1	10kB	2MB

Tabela 1. Przykładowe rozmiary stron i czas ich wczytania

Odbiorcy spodziewają się, że czasy ładowania poszczególnych podstron nie będą znacznie się różnić. Przyzwyczajają się do czasu oczekiwania, jaki napotykają na pierwszych odwiedzanych stronach serwisu i oczekują takiego samego na wszystkich pozostałych.

Istnieje kilka sposobów, które zmniejszają zniecierpliwienie odbiorcy oczekującego na wykonanie zadania. Przede wszystkim zawsze należy go poinformować o przyjęciu polecenia i odpowiedzieć mu natychmiast, nawet wówczas, gdy zadanie będzie wymagało dłuższego czasu wykonania. Odbiorca widząc reakcję w postaci np. paska postępu, czy zmiany kursora, nie będzie czuł się zaniepokojony brakiem odpowiedzi i jest w stanie poczekać dłużej na efekt pracy bez obaw, że program uległ uszkodzeniu. Długie okresy oczekiwania należy podzielić na kilka mniejszych i udostępnić podgląd postępu ładowania. Małe opóźnienie powodowane obliczaniem na bieżąco wykonywanych poleceń jest łatwiej akceptowalne niż konieczność czekania na realizację skumulowanych zadań. W przypadku, gdy z samych założeń proces musi trwać długo, należy użytkownika o tym uprzedzić i pozwolić mu zająć się innymi czynnościami. Wszelkie potrzebne informacje potrzebne do realizacji zadania powinny być zebrane na początku, by nie było konieczności angażowania odbiorcy w nadzorowanie przebiegu pracy.

W przypadku plików do pobrania należy podawać ich rozmiar, rozszerzenie i przewidywany czas ściągnięcia przy określonej prędkości połączenia. Wówczas użytkownik może podjąć decyzję czy zamierza poświęcić czas na zapoznanie się z prezentowanym materiałem.

4.2.5 Rozdzielczość

Testując stronę należy uwzględnić fakt, że odbiorcy mogą dysponować różnej wielkości monitorami i różnymi rozdzielczościami pulpitu. Obecnie na rynku mamy do czynienia z jednej strony z tendencją spadkową cen dużych monitorów, zdolnych do wyświetlania stron w wysokich rozdzielczościach, a z drugiej z bardzo dynamicznie rozwijającym się segmentem urządzeń mobilnych, takich jak telefony komórkowe czy palmtopy z dostępem do Internetu. Zatem użytkownicy niekoniecznie muszą zawsze korzystać z komputerów stacjonarnych. Dlatego testując witrynę na różnych systemach należy wybrać taki układ by jej odbiór mógł przebiegać bez zakłóceń na większości urządzeń. Jakob Nielsen zaleca ustalać wszelkie wielkości elementów na stronie w sposób procentowy, a nie za pomocą stałych wartości wyrażonych w pikselach. Zapewnia to dopasowywanie się do różnych rozmiarów monitora. Poza tym użytkownicy nie zawsze operują w zmaksymalizowanym oknie przeglądarki. Pozostawanie w zgodności ze specyfikacją HTML oraz oddzielenie treści od sposobu jej prezentacji z użyciem kaskadowych arkuszy stylów (CSS) powinno wpłynąć na poprawę kompatybilności z większością systemów.

4.2.6 Kaskadowe arkusze stylów (CSS)

W początkowych fazach istnienia ogólnodostępnej Sieci małe zróżnicowanie przeglądarek pozwalało mieć pewność, iż prezentacja zawartości stron będzie wyglądała wszędzie w ten sam sposób. W latach 1991-1992 użytkownicy posługiwali się wyłącznie przeglądarkami tekstowymi, później w 1993-1994 nastąpiła zmiana na przeglądarkę Mosaic, zaś lata 1995-1996 należały do Netscape. Od roku 1997 Microsoft Explorer stawał się coraz popularniejszy i został przeniesiony również na urządzenia mobilne. Obecnie rynek przeglądarek internetowych jest dużo większy i producenci nie zachowują często kompatybilności między różnymi wersjami tego samego oprogramowania.

Projektanci często odrzucają kodowanie semantyczne dokumentów zastępując go kodowaniem opartym na prezentacji. Pierwszy wymieniony termin odnosi się do kodowania polegającego na oddzieleniu treści strony od instrukcji na temat jej wyświetlania. Drugi zaś to sposób opracowywania strony z wykorzystaniem tylko wizualnej prezentacji (czyli np. zamiast określenia grubości czcionek dla różnych nagłówków, używanie konkretnej wielkości wybranej czcionki w danym miejscu witryny). W efekcie końcowym, jeśli użytkownik nie będzie miał zbliżonych parametrów komputera do sprzętu projektanta, strona może być wyświetlona błędnie. Ponieważ nie możemy przewidzieć, jakiego typu przeglądarki i urządzenia używa odbiorca, dużo bezpieczniej stosować kodowanie semantyczne. Pozwala to dopasowywać wygląd przedstawionej treści do sprzętu, na którym jest prezentowana. Dodatkowo, tego typu sposób kodowania ułatwia programom odczytującym zawartość strony ustalić logiczny porządek witryny. Doskonale do tego nadają się kaskadowe arkusze stylów, których ideą jest dołączanie do głównej treści, pliku opisującego format wszystkich elementów witryny. Powiązanie jednym arkuszem stylów wszystkich stron zapewnia spójność wizualną, podobnie jak zastosowanie tych samych zasad typograficznych dla materiałów drukowanych.

Używanie dołączonych arkuszy zamiast osadzonych w każdej stronie jest korzystniejsze. Można wówczas dokonywać modyfikacji całego serwisu pracując tylko na jednym pliku - definicji CSS, nie ingerując w zawartość podstron, i zachowując tym samym ich małą objętość. Żelaznymi regułami w stosowaniu CSS jest używanie identycznych nazw klas dla tych samych obiektów we wszystkich arkuszach i uwzględnienie priorytetu arkuszy użytkownika (niestosowanie atrybutu "!important" w stylach arkuszu witryny).

Poprawne zdefiniowanie stylów CSS dla tekstu pozwala stosować ciekawe formatowanie czcionek. Ogranicza to konieczność używania plików graficznych z napisami, dzięki czemu strona ładuje się szybciej. Należy też pamiętać, że z wielu powodów np. problemów z przeglądarką, użytkownicy mogą zrezygnować z użycia CSS, dlatego strona powinna wyglądać poprawnie również po wyłączeniu arkusza stylów.

4.2.7 Łatwość nawigacji po serwisie

Podział strony na kilka łatwych do przyswojenia obszarów i spójność, wyrażająca się podobieństwem wizualnym stron serwisu, wspólnymi cechami elementów nawigacyjnych itp. sprzyja szybkiemu zaaklimatyzowaniu się na nowej witrynie. Wskazane jest sekwencyjne wzbogacanie elementów interfejsu zamiast natychmiastowego atakowania odbiorcy pełnym zestawem wszelkich możliwych opcji. Jeśli strona musi składać się z dużej ilości elementów należy stosować dzielenie częściowe.

Stwierdzono, że posługiwanie się poziomym przesuwaniem ekranu jest bardzo niewygodną czynnością podczas przeglądania stron. Użytkownicy są przyzwyczajeni tylko do pionowego przewijania zawartości i mogą nawet nie dostrzec, iż poza widocznym ekranem znajdują się jeszcze jakieś części witryny w poziomym obszarze strony. Jeśli szerokość strony nie może być dostosowywana automatycznie w oparciu o procentowy udział elementów zaleca się przyjęcie 640 - 800 pikseli jako górnej granicy dla szerokości (standard dla WEBTV przewiduje rozdzielczość 544x372 pikseli).

Każda strona, również ta, która osiąga bardzo dobre wyniki funkcjonalności, musi mieć dobrze opracowany dział pomocy. Powinien on być zwięźle zredagowany i napisany pod kątem działania użytkownika, a nie programisty. Ilustrowanie przykładami wizualnymi, krótkimi animacjami lub też wskaźnikami do konkretnych miejsc w serwisie przyspieszy pracę odbiorcy. Spis tematów powinien zawierać najczęściej pojawiające się pytania odnośnie pracy i proste, skoncentrowane na rozwiązaniu problemu odpowiedzi. Aktualizacja odpowiedzi na najczęściej pojawiające się kłopoty może pomóc większości odbiorców.

Nie można zapomnieć o dobrze widocznej informacji o kontakcie z firmą, którą strona reprezentuje. Dzięki temu użytkownicy mogą skierować bezpośrednie pytania do pracowników instytucji.

4.3 Projektowanie treści

4.3.1 Dobór czcionek

Dużym problemem może okazać się dobór czcionek dla danej witryny, gdyż trudno jest przewidzieć, jakie zainstalowane są w komputerze odbiorcy. Niewskazane jest ścisłe wybieranie określonych fontów. Korzystniejsze jest przewidzenie zastąpienia użytej czcionki inną z listy czcionek zastępczych zdefiniowanych w arkuszu CSS i sprawdzenie czy strona wygląda poprawnie w przypadku, jeśli będzie prezentowana wyłącznie z użyciem domyślnych czcionek systemowych. Po takim teście projektant ma pewność, iż niedostępna użyta czcionka będzie wymieniona na jej alternatywny odpowiednik i że standardowe fonty nie zdezorganizują struktury wizualnej strony.

Użytkownicy czasem zmieniają też wielkość czcionek, aby polepszyć ich czytelność z powodu wad wzroku lub różnych rozdzielczości ekranu. Z tego względu nie powinno się używać bezwzględnych rozmiarów czcionek, gdyż blokuje to możliwość dostosowania fontów do wielkości wybranej przez odbiorcę. Dlatego należy sprawdzić działanie strony z innym rozmiarem czcionek niż tym, jaki jest zdefiniowany w standardowych ustawieniach. Niewłaściwe jest również posługiwanie się więcej niż dwoma rodzajami czcionek. Przyjęto, że jedna z nich jest używana do zwykłego tekstu, a druga np. do nagłówków. Ewentualnie można zastosować trzeci rodzaj do tekstu specjalnego np. kodu programu.

W przypadku tekstu, który jest wpisywany przez użytkownika wyjątkowo liczy się jego czytelność i łatwość w dokonywaniu poprawek. Do tego najlepiej nadają się czcionki nieproporcjonalne, czyli takie, w których każda litera ma identyczną szerokość. Stwierdzono też, że łatwiejsze do czytania z ekranu są czcionki bezszeryfowe (np. Verdana) kontrastujące z tłem. Czcionki szeryfowe, które doskonale się prezentują w druku, są słabiej widoczne na ekranie monitora z racji swojej dużej liczby detali. Najlepsza czytelność jest osiągana dla tekstu w pozytywie (czarny tekst na białym jednolitym tle). Rozjaśnianie tekstu gdy tło jest ciemniejsze niż białe bardzo pogarsza odbiór.

4.3.2 Długość tekstu i dokumenty gotowe do druku

Czytanie długiego tekstu z monitora komputerowego nie dorównuje wygodzie z jaką czyta się tekst ze zwykłej kartki. Badania dowodzą, iż czytanie z monitora jest 25% wolniejsze od czytania z nośnika papierowego. Główne przeszkody to niska rozdzielczość monitorów (monitor 80 dpi, podstawowa drukarka około 300 dpi), niewygodna pozycja czytającego, częstotliwość odświeżania ekranu i radiacja (migotanie wywołujące ból głowy), odblaski od powierzchni ekranu. Komputery typu laptop i ekrany LCD w mniejszym stopniu męczą wzrok jednak nie zmienia to faktu, iż wymienione wady wpływają niekorzystnie na przyswajanie wiedzy z komputera. Zalecane jest więc pisanie w zwięzły sposób. Publikacja elektroniczna powinna być nie większa niż 50% objętości tego samego tekstu w postaci papierowej. Używanie krótkich, akapitów, wielopoziomowych nagłówków i wypunktowanych list sprzyja przyjęciu prezentowanych treści i logicznemu poruszaniu się po strukturze informacyjnej. Dobrym rozwiązaniem jest również podział na mniejsze elementy z użyciem hipertekstu i ograniczenie konieczności przewijania stron, jednak ze zwróceniem uwagi na to, czy oczekiwanie na załadowanie kolejnej części tekstu nie trwa dłużej niż jego przeczytanie. Należy szczególnie o to zadbać przy projektowaniu grup dyskusyjnych. Najlepszym rozwiązaniem jest użycie tam jednostronicowej prezentacji wszystkich listów. Jest to w sprzeczności z typową filozofią przyswajania sobie wiedzy (jej podziałowi na mniejsze części), jednakże w tej szczególnej sytuacji, niedopuszczalne jest, by oczekiwać kilkanaście sekund na odczytanie krótkiego i być może nieinteresującego komentarza. Dużo łatwiej jest zorientować się w przebiegu rozmowy widząc na jednej stronie pełen dialog.

Projektowanie witryn pełnych tekstu bez możliwości ich wydruku jest jednym z najczęściej popełnianych błędów. Użytkownik nie tylko ma kłopot z przeczytaniem całości z monitora, lecz również odczuwa dyskomfort psychiczny gdy nie jest w stanie zapoznać się z treścią i zrozumieć prezentowany materiał w krótkim czasie. Używając dodatkowo paska przewijania może po prostu pogubić się, w jakim miejscu przed chwilą się znajdował. Pomimo tego, iż Sieć miała spowodować mniejsze zapotrzebowanie na drukowanie dokumentów, użytkownicy często mają potrzebę przechowania informacji w formie papierowej. Umożliwia im to późniejszy powrót do tych danych w momencie, gdy nie mają dostępu do Internetu. Wielu ludzi drukuje dokumenty z obawy przed ich zniknięciem z danej strony lub by nie musieć pamiętać gdzie ich należy szukać. Pozwala to też na zgromadzenie ważnych archiwów w przypadku papierowego systemu kolekcjonowania danych.

Bezpośrednie wydrukowanie zawartości ekranu nie jest dobrym pomysłem, gdyż formatowanie zastosowane do prezentacji stron internetowych na monitorze rzadko dobrze prezentuje się kartce papieru. Powodem jest m.in. to, że przeglądarki z reguły używają do drukowania tego samego rodzaju czcionek i rozłożenia tekstu jak na ekranie. Rozwiązaniem tej niedogodności jest umieszczenie dodatkowego zoptymalizowanego dokumentu do druku np. w formacie PDF (niestety będzie to wymagało pobrania darmowej przeglądarki) lub po prostu przygotowanie osobnej strony, której wydrukowanie nie sprawi kłopotu (rozłożenie tekstu nie szersze od strony, czytelne ciemne napisy na jasnym tle, brak zbędnych elementów np. nawigacyjnych itp.). Projektanci dodając taką wersję mają całkowitą pewność, że końcowi użytkownicy otrzymają zawsze identycznie wyglądający dokument w takiej samej postaci, w jakiej został dla nich opracowany. Nie pojawią się wówczas uciążliwe sytuacje związane z brakiem nietypowych czcionek, innym formatowaniem strony, przesunięciami grafiki itp. Osobna optymalizacja dokumentów do wyświetlania na ekranie i do druku jest gwarancją funkcjonalnego korzystania z zasobów Sieci.

4.3.3 Ekspozycja treści

Pisząc materiały na potrzeby stron internetowych należy zachowywać inny sposób formatowania tekstu niż ten stosowany dla medium papierowego. Doświadczenie projektantów pokazuje, iż użytkownicy nie tyle czytają strony co je "skanują", czyli przebiegają wzrokiem w poszukiwaniu elementów, które ich zainteresują. Mogą nimi być wyróżnione słowa, wskaźniki do innych dokumentów, elementy graficzne. Według badań Jakoba Nielsena aż 79% użytkowników szybko przeglądało nowe strony, zaś tylko kilku z nich czytało je w całości. Duże partie tekstu są na ogół pomijane. Użytkownicy nie lubią przewijać dużej ilości stron i zazwyczaj koncentrują się na tylko tym, co widzą na pierwszym ekranie. Najlepszym rozwiązaniem jest więc stosowanie paragrafów pisanych z zachowaniem zasady odwróconej piramidy, która polega na umieszczeniu najważniejszych informacji w kilku początkowych zdaniach. Wszelkie pozostałe szczegóły powinny znaleźć się w dalszej części tekstu. Dzięki temu łatwiej zorientować się o czym traktuje dany artykuł. Generalnie odbiorcy zwracają największą uwagę na górną część ekranu i na to co pojawia się tuż po wyświetleniu strony.Tam powinny znaleźć się najważniejsze informacje, gdyż mają największe szanse na zauważenie.

Bardziej zwięzłe prezentowanie treści z użyciem krótszych akapitów musi iść w parze z ich zrozumiałym i bezbłędnym redagowaniem. Nagłówki powinny w jednoznaczny sposób precyzować co zawierają dokumenty, które opisują.

Tekst pisany alfabetem łacińskim wyrównany do lewej strony jest dużo łatwiejszy do odczytania, gdyż odbiorca ma stały punkt zaczepienia dla wzroku. Środkowanie tekstu lub wyrównywanie do prawej jest przydatne w celu uzyskania konkretnego efektu, ale nie nadaje się dla formatowania dużych partii treści i jego nadużywanie powoduje zmęczenie czytającego. Podobny umiar należy zachować wyróżniając konkretne części tekstu. Pogrubienie, przechylenie, pokolorowanie (unikając kolorów oznaczających wskaźniki) czy użycie wielkich liter stosowane w ograniczonej ilości zwróci uwagę użytkownika. Przesada w posługiwaniu się tymi efektami wywoła nie tylko wrażenie amatorstwa, ale odbiorcy mogą zacząć ignorować wyróżnione ten sposób informacje lub ich po prostu nie zauważać na skutek adaptacji sensorycznej. Polepszenie czytelności informacji liczbowych daje prezentowanie ich w tabelach.

4.4 Projektowanie grafiki

4.4.1 Barwa w grafice komputerowej

Ludzka percepcja kolorystyczna nie jest uniwersalnym systemem. Każdy człowiek, pomijając typowe zaburzenia w widzeniu barw, widzi w trochę inny sposób. Widzenie barw jest procesem psychofizjologicznym.

Z punktu widzenia artystycznego dobierając paletę barw, należy mieć na uwadze, jak działają na użytkownika konkretne zestawienia kolorów. Posługiwanie się wariacjami jednego odcienia wywołuje kojący efekt, podobnie w przypadku używania barw sąsiadujących ze sobą na kole kolorów. Często spotykanym wariantem jest wybór pewnej barwy i dwóch innych odcieni sąsiadujących z kolorem komplementarnym wobec niej. Innym przykładem zapewniającym silniejszy kontrast, zachowującym jednak harmonię w obrazie, jest wybranie barw rozmieszczonych na kole kolorów w równych odstępach (schemat oparty na triadzie). Takie rozwiązanie jest korzystne wówczas, gdy dana ilustracja ma przykuwać zainteresowanie odbiorcy. Kombinacje przeciwstawnych sobie odcieni np. czerwonego - zielonego wywołują największą ekspresję, jednak przesadne posługiwanie się nimi może szybko zmęczyć użytkownika. Jeśli projekt strony zakłada stosowanie jaskrawej kolorystyki dobrze jest nie narażać oczu odbiorcy na jej dłuższą ekspozycję i na stronach docelowych zastąpić ją łagodniejszymi odcieniami. Kolory "ciepłe" przyciągają uwagę, kolory "zimne", pasywne lepiej komponują się z tłem. Odbiór każdej barwy jest subiektywny i zależy od otoczenia, w którym ona się znajduje.

Używanie kolorów jest bardzo użyteczne przy przekazywaniu informacji dodatkowych. Pomaga rozróżniać wskazane elementy lub podkreślać znaczenie jakiś punktów na stronie. Kolorystyka może również informować o dostępności interfejsu i oczywiście pełnić funkcję estetyczną. Jednak kodowanie za pomocą barw nie przynosi oczekiwanych rezultatów w przypadku zapamiętywania znaczenia koloru. Pamięć wizualna w porównaniu do pamięci słuchowej jest bardzo uboga. Badania dowodzą, że ludzie mają duże kłopoty w kojarzeniu związków kolorów z danymi znaczeniami. Zaleca się nie przekraczanie liczby 4 różnych barw, a w skrajnych przypadkach dopuszcza się użycie maksymalnie 6 kolorów do oznakowania informacji (np. typy danych w tabeli). Większa liczba powoduje chaos kolorystyczny na stronie i sprzyja łatwym pomyłkom przez co jest mało skuteczna w kodowaniu znaczeń.

Obecnie większość urządzeń pozwala już uzyskać tysiące lub miliony kolorów, więc optymalizacja pod kątem mniejszej ilości barw nie jest już potrzebna. Mając jednak na uwadze komputery mobilne, trzeba upewnić się czy ta sama kolorowa grafika nie wprowadza zakłóceń do odbioru, gdy jest wyświetlana w mniejszej ilości odcieni. Podobna sytuacja ma miejsce w przypadku drukarek, których skala kolorystyczna nie jest zazwyczaj tak bogata jak standardu RGB.

Należy również wykazać dużą ostrożność w dobieraniu koloru tła dla tekstu. Przede wszystkim poprzez unikanie zestawień barw o małym wzajemnym kontraście jak i nieużywanie agresywnych obrazów w tle, przeszkadzających w rozpoznawaniu liter i kształtu wyrazów.

Dobierając kolorystykę należy pamiętać o użytkownikach mogących mieć problemy z percepcją barw i unikać kodowania informacji używając tylko jednego kanału chromatycznego (szczególnie R-G) i stosować kombinację barw z kanałów R-G oraz Y-B.

Pomimo, iż kolor odgrywa ogromną rolę w postrzeganiu świata, to jego nadmiar na stronie internetowej wywołuje przytłaczające wrażenie. Dlatego dobrym testem na to czy barwa nie szkodzi w odbiorze witryny jest obejrzenie jej tylko w odcieniach szarości. Jeśli okaże się, że np. nawigacja stała się bardziej wydajna, to mamy jednoznaczny dowód, że nadmiar kolorystyki rozprasza odbiorcę.

4.4.2 Rozmiar i optymalizacja obrazów

Ze względu na różne ustawienia systemu operacyjnego należy zadbać o czytelność grafiki, w szczególności ikon, które w zbyt dużej rozdzielczości mogą być bardzo niekomunikatywne. Nie zaleca się używania napisów w postaci graficznej. Wykorzystanie takich napisów może w większości przypadków rozwiązać problemy z zastosowaniem nietypowych czcionek, jednakże zbyt duża ilość takich obiektów wpłynie zdecydowanie negatywnie na czas pobierania witryny i będzie sprawiać kłopoty przy tłumaczeniu na inne języki.

Odbiorca szukając jakiejś informacji stawia przede wszystkim na szybkość jej znalezienia i dopiero w momencie zainteresowania konkretnym obiektem oczekuje dokładniejszych informacji na dany temat. Dlatego strony główne powinny zawierać mniej grafiki niż strony niższych poziomów precyzyjniej opisujące zagadnienia. Użycie grafiki lub zdjęć w dużej rozdzielczości na stronie podstawowej jest zwykle niewłaściwe. Podobną często spotykaną sytuacją jest umieszczanie dużych animacji wstępnych Flash wprowadzających na witrynę lub umiejscawianie ich na stronie głównej. Takie zabiegi bardzo spowalniają ładowanie najczęściej odwiedzanych miejsc. Zestaw miniatur prowadzących do obrazów wyższej jakości bądź większej ilości zdjęć jest dobrym kompromisem między koniecznością prezentowania dużej ilości materiału graficznego, a oczekiwaniem na jego pobranie. Ważny jest też sposób prezentowania miniatur. Najlepsze rezultaty przynosi połączenie techniki skalowania z kadrowaniem. Pozwala to lepiej wychwycić ważne szczegóły obrazu zachowując zarówno kontekst jak i czytelność prezentowanej treści.

Używanie wielokrotne tej samej skompresowanej grafiki, przyspiesza jej wczytywanie na kolejnych stronach, gdyż zostaje ona pobrana z pamięci podręcznej przeglądarki. Dodatkowym rezultatem jest zachowanie spójności wizualnej serwisu.

Bardzo ważne jest dodanie do każdego obrazu atrybutu ALT w kodzie HTML. Pozwala to na poinformowanie odbiorcy, co przestawia dana grafika po wskazaniu jej kursorem i opisuje także zawartość ramki z obrazem, zanim zostanie on wczytany. Przyspiesza to nawigację po stronie, ponieważ użytkownik widzi objaśnienie tego, co będzie znajdowało się w danym miejscu, jeszcze przed pojawieniem się reprezentacji graficznej.

4.4.3 Estetyka i oszczędność

Pierwsze wrażenia wizualne, jakie oddziaływają na widza w momencie oglądania witryny decydują o tym jak będzie ona postrzegana. Mimo faktu, że dopracowanie graficzne niekoniecznie ma wpływ na funkcjonalność, to odbiorcy mogą podświadomie budować wyobrażenia o jakości danego serwisu i usługach w oparciu o jego wizualny charakter. Wraz z profesjonalnym wyglądem wzrasta wiarygodność danej strony i tym samym pozytywna opinia użytkowników. Na tle amatorskich stron wypełniających po brzegi Internet, każdy serwis zaprojektowany z wizualnym wyczuciem wyróżnia się i przyciąga uwagę odwiedzających.

Estetyka wiąże się z pojęciem oszczędności. Dodawanie elementów, których zadaniem jest tylko uatrakcyjnienie strony z reguły jest powodem pogarszania proporcji ważnych sygnałów do szumu informacyjnego, zmniejsza szybkość ładowania witryny, zaś odbiorcy przywiązują zazwyczaj małą uwagę do nadmiernego urozmaicenia graficznego. Oczywiście reguły te nie mają zastosowania jeśli strona jest publikacją prac multimedialnych i zajmuje się propagowaniem interaktywnej sztuki w Internecie. Nie oznacza to, że funkcjonalna strona musi być nieatrakcyjna. Należy zawsze zachować równowagę między formą a funkcją strony.

4.5 Projektowanie multimediów

4.5.1 Ograniczenia

Projektowanie aplikacji na potrzeby Internetu w znacznym stopniu różni się od przygotowywania standardowych programów multimedialnych. Pierwszym ograniczeniem jest szybkość przesyłania danych. Umieszczanie dużych grafik, filmów i dźwięków oznacza długi czas pobierania, zaś użytkownicy pragną w jak najszybszym czasie zapoznać się z zawartością strony. Mimo tego, że coraz większy procent ludzi ma dostęp do stałego łącza nie można przyjąć, że wszyscy odbiorcy nim dysponują. Poza tym, w wyniku dużego natężenia ruchu w sieci, należy liczyć się z obniżeniem szybkości transferu i załadowanie witryny może trwać dłużej niż uprzednio przewidywany czas.

Opóźnienia powstałe w wyniku słabego transferu danych bardzo niekorzystnie działają na odbiór witryny. Interfejsy, na których działanie trzeba długo czekać są oceniane jako bardzo niepraktyczne. Należy pamiętać, że każde kliknięcie powoduje kontakt z serwerem, co opóźnia działanie witryny. Praca w czasie rzeczywistym z wykorzystaniem tylko HTML nie jest możliwa. Należy wybierać takie systemy multimedialne, których reakcja na działanie użytkownika jest natychmiastowa i minimalizuje liczbę kontaktów z serwerem. Można zapewnić to tylko wówczas, gdy zostanie pobrane całe środowisko interakcyjne bez konieczności dogrywania dodatkowych danych podczas działania strony. Użytkownik będzie zadowolony wtedy, gdy będzie odczuwać pełną kontrolę nad tym środowiskiem i natychmiast zobaczy wyniki swojej pracy.

Informowanie użytkownika jaką zawartość multimedialną otrzyma po kliknięciu danego skrótu pozwoli mu na ocenę wartości tego materiału bez konieczności oczekiwania na załadowanie jego całości. Podgląd grafik, klatek z filmów, próbki muzyczne czy tekstowe opisy mogą także urozmaicić oczekiwanie na pobranie materiału.

4.5.2 Problemy z nowymi technologiami

Początkowo ludzie korzystający z Internetu na bieżąco aktualizowali swoje przeglądarki i oprogramowanie by móc oglądać nowe wykorzystane w nich techniki. Obecnie częstość aktualizacji znacznie spadła. Pierwszym powodem jest to, że projektanci zaczęli rozumieć potrzebę zgodności ze starszymi standardami przeglądarek, po drugie nie są wprowadzane już tak istotne zmiany do nowych wersji przeglądarek, zaś trzecim powodem jest to, iż zmienił się przekrój populacji korzystającej z Sieci - garstka pionierów przerodziła się w rzesze użytkowników, często niezorientowanych w technologiach internetowych. Wymienione powody każą powstrzymywać się przed wprowadzeniem nowatorskich rozwiązań dostępnych tylko dla nielicznych odbiorców. Ocenia się, że czas potrzebny na powszechną akceptację nowej technologii wynosi od jednego do dwóch lat. Dzięki takiej polityce nie zamykamy drogi odbiorcom nie posiadających jeszcze uaktualnień i unikamy błędów związanych z pierwszymi wersjami nowego oprogramowania.

Internet rozwijał się tak szybko, iż wszelkie nowe techniki nie zawsze integrują się idealnie z Siecią, często nie są powszechnie dostępne ani dobrze zrozumiane. Projektanci podjęli specyficznego rodzaju walkę z typowymi używanymi standardami i starają się na nowo wprowadzić swoje wzory interfejsów, które niestety rzadko kiedy są spójne i konsekwentne. Przykładem takiego właśnie braku integracji może być niekompatybilność techniki Flash z wyszukiwarkami. W wyniku użycia do budowy całej strony jedynie tej techniki, większość wyszukiwarek nie potrafi poprawnie zindeksować witryny i odnaleźć zawartych na niej informacji.

Jeśli tworzona jest witryna z zastosowaniem nowszych technologii, mogących wywoływać niezgodność, to zaleca się umieszczanie zawartości zastępczej np. w postaci tekstowej. Jest to korzystne również dla niepełnosprawnych użytkowników mających kłopoty z percepcją multimediów lub odbiorców korzystających ze sprzętu niedostosowanego do takiego przekazu.

4.5.3 Animacje i wideo

Użycie filmów bardzo wzbogaca wartość wizualną witryny. Animacje pozwalają lepiej przekazać pewne informacje i uzyskać konkretny efekt na stronie. Niektóre ich zastosowania to ukazanie zmian na przestrzeni czasu, powiązań między prezentowanymi etapami pracy, pomoc w nawigacji itp. Przykładowo dużo łatwiej za pomocą animowanej ikony przekazać jaką operację wykonuje się za jej pomocą, niż wyrazić to statycznym obrazem. Projektant stosując odpowiednią animację może lepiej zademonstrować idee działania mechanizmu serwisu. Jest to także doskonałe rozwiązanie zwiększenia ilości prezentowanej informacji na tej samej przestrzeni - rozwijane menu, pojawiające się opisy itd. Prostsze jest również wizualizowanie obiektów trójwymiarowych. Bardzo często zadaniem animacji jest przykucie uwagi użytkownika na nowym elemencie lub uwypuklenie słabo widocznych danych.

Szczególnie w przypadku serwisów edukacyjnych trudno przecenić korzyści jakie może dać przekaz filmowy. Wszelkiego rodzaju animowane instrukcje obsługi programów, ruchome zrzuty ekranów czy przewodniki wideo są łatwiejsze do zrozumienia niż odpowiedniki w postaci tekstowych poleceń.

Największą przeszkodą stojącą na drodze publikowania filmów w Internecie jest ich rozmiar i standaryzacja formatu. W przypadku animacji wykonanych w formacie Macromedia Flash problem odczytu tych plików systematycznie się zmniejsza i ogromna większość przeglądarek radzi sobie z ich poprawnym wyświetlaniem. Z racji swojej wektorowej natury nie zajmują one dużo miejsca, zaś oczekiwanie na ich pobranie można poprzedzić preloaderem, czyli ekranem pokazującym czas potrzebny do końca ładowania pliku. Filmy takie można osadzać na stronie i pozwalać im na wgrywanie się w tle.

Stosując typowe filmy wideo można wybrać między odtwarzaniem strumieniowym, a wersją do pobrania z Sieci. Najlepiej udostępniać obie te możliwości. Przemawia za tym słaba jakość mediów strumieniowych w przypadku powolnego transferu. Często odbiorcy wolą odczekać i obejrzeć projekcję lepszej jakości. Należy liczyć się także z innymi możliwymi komplikacjami technicznymi. Użytkownik może nie posiadać odtwarzacza do oglądania filmów lub nie mieć kodeka, który został użyty do kompresji, dlatego trzeba udostępniać potrzebne do działania narzędzia na stronie. Dobrym zwyczajem jest umieszczanie informacji o wielkości pliku, jego długości trwania, formacie i przybliżonym czasie pobierania z określonymi transferami. Inną możliwością jest publikacja filmu wewnątrz animacji Flash.

Ważne jest przekazanie sterowania odbiorcy i pozostawienie mu decyzji o sposobie odtwarzania filmu. Standardowy panel w postaci przycisków i paska przewijania daje kontrolę nad projekcją. Nie powinno się zapętlać filmów w nieskończoność, gdyż dezorientuje to odbiorcę. Używając panelu sterowania sam wybiera żądaną akcję i np. szybko wraca do żądanej sceny.

W przypadku prezentowania treści filmowej wskazana jest segmentacja przekazu. Podobnie jak ma to miejsce w przypadku elementów tekstowych. Pozwoli to uniknąć problemów z czasem pobierania dużych plików wideo, ale również jest zgodne z naturą internautów, którzy preferują kontrolę nad rodzajem prezentowanych zagadnień i nie mają zwyczaju spędzać bezczynnie długiego czasu przed monitorem bez podejmowania działań.

Dodając animacje do tworzonej witryny należy pamiętać, że poruszające się elementy takie jak animowane znaki czy napisy mogą odwracać uwagę od głównej treści i denerwować. Z tego powodu niewskazane jest używanie animacji jedynie w celach dekoracyjnych.

4.5.4 Dźwięk

Dźwięk obecnie odgrywa na stronach internetowych małą rolę, jednak dzięki coraz lepszej kompresji i mniejszym rozmiarom plików szybciej może dotrzeć do odbiorcy i jego użycie w kilku przypadkach jest doskonałym narzędziem dydaktycznym. W nauczaniu języków obcych jest wprost nieocenioną pomocą. Przesyłanie w postaci dźwiękowej treści wykładów wraz z materiałami dydaktycznymi jest alternatywą dla publikowania całego materiału wideo z danej lekcji.

Efekty dźwiękowe mogą również podkreślać przebieg czynności nawigacyjnych i informować o pracy w serwisie. Bardzo ważna jest możliwość wyciszenia wszystkich dźwięków na stronie gdyż użytkownik może uznać je za niepotrzebne lub przeszkadzające.

4.5.5 Elementy interakcyjne

Zastosowanie interakcji nie powinno być tylko urozmaiceniem kursów, ale stanowić dodatkowy środek przekazu. W szczególności technologia interakcyjna jest przydatna w celu ukazania trudnych do wyobrażenia zagadnień, które łatwiej jest zrozumieć mogąc prześledzić ich symulację. Dobra interakcja to taka, która stanowi alternatywę dla doświadczeń laboratoryjnych i zajęć z wykładowcą, podczas których można sprawdzić reguły prezentowanej wiedzy. Spektrum zastosowań elementów interakcyjnych jest obecnie coraz większe dzięki bardzo szybkiemu rozwojowi technik multimedialnych. Przykładem może być mini program osadzony na stronie pozwalający na wykreślanie wpisywanych funkcji, bądź np. symulacje w postaci trójwymiarowych animacji prezentujące wprowadzane przez użytkownika zmiany w środowisku badawczym. W przypadku nauki aplikacji doskonałym rozwiązaniem wydaje się możliwość zasymulowania interfejsu tego programu, by użytkownik mógł w nim realizować przedstawiane zagadnienia. Największym ograniczeniem jest z reguły ogromna pracochłonność przygotowania takich prezentacji i umiejętność kreatywnego porozumienia między technikiem multimedialnym, a twórcą materiałów dydaktycznych w celu stworzenia prawdziwe edukującej interakcji, nie będącej jedynie multimedialnym dodatkiem.

4.6 Projektowanie interfejsu użytkownika

4.6.1 Czym jest interfejs użytkownika?

Według słownika języka polskiego definicje słowa "interfejs" jest następująca:

1. "zasady łączenia ze sobą i współpracy dwóch różnych urządzeń (np. komputera i drukarki) lub programów; także: urządzenie lub program realizujące te zasady"

2. "zasady współpracy użytkownika z oprogramowaniem komputera; także: programy, które je realizują" ang. interface

Interfejs użytkownika w programach komputerowych spełnia krytyczną rolę, gdyż to właśnie za jego pomocą użytkownik nawiązuje kontakt z aplikacją i zarządza nią. Obecnie większość interfejsów ma graficzną, okienkową postać. Za pomocą przycisków, pasków menu i innych elementów nawigacyjnych odbiorca ma wpływ na działanie programu. W przypadku testów funkcjonalności analiza interfejsu stanowi kluczowy etap badań. To właśnie jego ergonomia i poprawne działanie przyczynia się do pozytywnego odbioru całej aplikacji czy witryny. W przypadku braku dobrze skonstruowanego interfejsu do głosu dochodzi teoria psychologiczna zwana "wyuczoną bezradnością" autorstwa Martina E.P, Seligmana. Teoria ta mówi, że w wyniku braku kontroli nad najbliższym otoczeniem, w tym przypadku nad aplikacją, człowiek popada w poczucie bezradności, będące początkiem depresji. Niemożność precyzyjnego wykonania zamierzonych działań na skutek mało intuicyjnego lub skomplikowanego interfejsu wpływa przygnębiająco na użytkownika. Wynika z tego, że to właśnie interfejs modeluje odczucia, emocje i ogólną ocenę programu przez jego odbiorców. Jeśli będzie on źle zaprojektowany to z reguły winą zostanie obarczony program jako całość, niezależnie od jego faktycznej jakości.

4.6.2 Model programu a model użytkownika. Zgodność.

Sięgając w przeszłość rozwoju rynku oprogramowania można zauważyć, iż każdy producent starał się narzucać swój schemat posługiwania się aplikacją, co prowadziło do konieczności zapamiętywania konkretnych ustawień czy skrótów dla każdego programu. Dlatego z reguły odbiorcy znali obsługę niewielkiej liczby aplikacji, gdyż każda nowa pociągała za sobą żmudną naukę przyjętych norm działania.

Każdy odbiorca programów komputerowych ma wypracowany swój model użytkownika. Jest to wynikający z jego przyzwyczajeń i wcześniejszych doświadczeń schemat zachowań i postępowań dotyczących pracy z aplikacjami. Najczęściej odbiorcy starają się automatycznie przenieść go na nowo poznawane programy. Model ten może być związany z pracą w konkretnym programie jak i też z całym środowiskiem operacyjnym. Przykładowo użytkownicy systemu Microsoft Windows często oczekują podobnego do zastosowanego w nim modelu interakcji podczas pracy w innych systemach operacyjnych np. w Apple MacOS. Inną egzemplifikacją ze świata elektroniki może być obsługa różnych telefonów komórkowych. Użytkownik przyzwyczajony do znanego mu układu menu i kolejnych kroków pozwalających wysłać SMS na jego dotychczasowym modelu, będzie miał zazwyczaj duże trudności z tą samą czynnością na nieznanym aparacie. Interfejs użytkownika niespełniający wyobrażeń odbiorcy i niedziałający zgodnie z jego oczekiwaniami, będzie uważany za trudny i zniechęcający.

Projektując interfejsy użytkownika należy liczyć się z dwoma kwestiami. Pierwszą z nich jest to, że odbiorca będzie zawsze szukał prostych rozwiązań, zaś drugą, iż człowiek z racji swoich silnych przyzwyczajeń, stara się odnaleźć podobieństwa do znanych mu schematów. Zgodność z nimi często powoduje, że aplikacja jest uznawana za łatwą i intuicyjną w obsłudze. Użytkownicy uruchamiając nieznany im program, odruchowo będą wykonywać pewne czynności, do których przyzwyczaili się we wcześniej używanej aplikacji o podobnym zastosowaniu. Próba bycia nadgorliwie nowatorskim i kreatywnym w dziedzinie sprawdzonych i przyjętych rozwiązań jest niebezpieczna, gdyż może doprowadzić do całkowitego odrzucenia zaoferowanych pomysłów. Nie powinno się lekceważyć przyjętych standardów i uwzględnić w budowie interfejsu najczęściej spotykane i oczekiwane rozwiązana z najbardziej popularnych programów. Dzięki temu większość użytkowników automatycznie nauczy się obsługi narzędzi, gdyż będzie postępować w analogiczny sposób jak w swojej znanej dotychczasowej aplikacji. Przykładowo projektując nowy edytor graficzny powinno uwzględnić się fakt, iż najpopularniejszym narzędziem tego typu jest program Adobe Photoshop. Ogromna większość użytkowników będzie właśnie próbowała pracować w nowym programie tak, jak robiła to dotychczas w Photoshopie. Idea podobieństwa dotyczy szerokiego spektrum, począwszy od układu graficznego okien, przez budowę i działanie menu na skrótach klawiaturowych skończywszy. Innymi słowy lepszym rozwiązaniem wydaje się implementacja kilku przyjętych i znanych rozwiązań (np. kilka metod zapisu pliku za pomocą różnych skrótów) niż narzucanie swojej filozofii, która najczęściej jest słuszna tylko dla twórców tego interfejsu. Oczywiście często ta źle pojęta kreatywność może objawić się też efektami ubocznymi w postaci braku kompatybilności z innymi komponentami systemu, czy po prostu utrudniać komunikację z systemem.

Poza zgodnością związaną z przyjętymi standardami, doskonałym rozwiązaniem jest również ujednolicanie działania aplikacji i jej wyglądu wewnątrz danego pakietu oprogramowania. Przykładowo firma Macromedia wprowadzając nową serię pod nazwą MX, nie tylko ułatwiła komunikację między elementami składowymi, ale przede wszystkim wprowadziła ujednoliconą szatę graficzną. Z tego też powodu nauka kolejnych aplikacji pakietu jest dużo prostsza. Podobnie postąpiła firma Adobe wprowadzając serię Creative Suite. Zaimplementowane nowości zaprezentowano w bardzo przystępny sposób. Co najważniejsze nie zapomniano o dotychczasowych użytkownikach i pozostawiono wiele wcześniej dostępnych funkcji, a także możliwość powrócenia do technik pracy znanych z poprzednich wersji. Właśnie taka aktualizacja programu, która nie wymusza nauki diametralnie nowych rozwiązań, a jedynie je inteligentnie rozszerza i uzupełnia, pozostawiając znajome strategie pracy i umożliwiając powrót do nich, na pewno zadowoli dotychczasowych odbiorców i zainteresuje potencjalnych klientów.

Wielokrotnie spotkać się można ze stwierdzeniem, że giganci rynku oprogramowania narzucają swoje rozwiązania i uważają je za jedynie słuszne. Nie pochwalając monopolistycznych praktyk, warto jednak zwrócić uwagę, że firmy te przeznaczają na laboratoria funkcjonalności duże fundusze i proponowane przez nie rozwiązania są skutkiem zaawansowanych i sprawdzonych badań. Ważne jest również, że nawet jeśli dane rozwiązanie nie jest najlepsze to i tak będą z niego korzystały miliony użytkowników przyzwyczajonych do takiego standardu.

Ponieważ o wiele prościej jest zmienić model programu, niż model użytkownika, należy analizować opinie odbiorców i na ich zasadzie budować i modyfikować interfejsy. Dzięki takim badaniom projektanci poznają nawyki użytkowników i mogą prześledzić uniwersalne prawa rządzące ludzką percepcją. Oczywiście ujednolicenie wszystkich interfejsów do jednego tylko modelu nie jest możliwe, choćby z racji najróżniejszych funkcji, które te interfejsy pełnią.

Reasumując należy stwierdzić, że dobry interfejs użytkownika to taki, który powoduje, że program zachowuje się dokładnie tak, jak oczekuje tego odbiorca, czyli gdy model programu jest zgodny z modelem użytkownika. Zgodność jest synonimem łatwości użytkowania. Podporządkowanie się zasadom zgodności (mimo ograniczenia kreatywności) jest gwarancją zadowolenia użytkowników.

4.6.3 Interfejs jako metafora rzeczywistości

Doskonałym pomysłem przyjętym przez pionierów graficznych interfejsów użytkownika (GUI - Graphic User Interface) było posłużenie się metaforą pulpitu imitującą biurko z dokumentami. Obecnie nawiązywanie do charakterystycznych cech przedmiotów czy czynności pochodzących z codziennego życia jest stałym elementem w prawie każdej interakcji człowiek - komputer. Dzięki takim rozwiązaniem łatwiej jest dotrzeć do większości odbiorców i przekazać im, jaki jest model danego programu. W dzisiejszych systemach operacyjnych, a także dzięki dużo większym możliwościom obliczeniowym sprzętu, stosowanie podpowiedzi użytkownikom może przyjmować bardzo szerokie spektrum. I tak na przykład umieszczenie lupy powiększającej koło dokumentu jednoznacznie sugeruje, jaka akcja zostanie podjęta po jej kliknięciu. Inną ilustracją jest użycie animowanych kursorów, zmieniających się w zależności od ich położenia i możliwości akcji. Przyczynia się do zaznajomienia odbiorców z filozofią obsługi danej aplikacji i bardzo pomaga odnaleźć się w nowych warunkach poznawczych. Podobnie zastosowanie trójwymiarowych ikon, wydających się znajdować nad tłem systemu zachęca użytkowników do ich wskazania i kliknięcia. Według badań Microsoftu, użycie kart zamiast dialogu ze zmienną zawartością okna spowodowało poprawę skuteczności działań użytkowników z 30% do 100%. Większość badanych nie spostrzegała, że dwa panele w takim dialogu mają ze sobą coś wspólnego. Natomiast gdy przedstawiono im karty, podobne do zakładek w segregatorze z dokumentami, automatycznie kojarzyli oni je z osobnymi stronami, które można otwierać i zmieniać konkretne ustawienia. Poniżej przykład dialogu ze zmienną zawartością (Rys. 6. a) i zakładek (Rys. 6. b).

Rys. 6. a) Zmienna zawartość kart

Rys. 6. b) Zakładki

Gdy stosowanie coraz trafniejszych metafor w oprogramowaniu będzie równolegle towarzyszyło nowym sposobom komunikacji z systemem, takim jak dotykowe ekrany, rozpoznawanie mowy lub gestów użytkownika, to można przypuszczać, iż w niedługim czasie komunikacja ta będzie bardzo bliska komunikacji międzyludzkiej.

4.6.4 Interfejs systemu operacyjnego a interfejs strony internetowej

Między działaniem typowego interfejsu okienkowego systemu operacyjnego, do jakiego są przyzwyczajeni użytkownicy, a interfejsem umieszczonym na stronie internetowej są duże różnice. Podstawowy problem wiąże się z opóźnieniem. Przekierowanie na nowe miejsce w sieci każe czekać odbiorcom na załadowanie nowej zawartości. W skrajnych przypadkach można spędzić więcej czasu na pobieraniu strony niż na zapoznawaniu się z jej treścią. Trzeba pamiętać o tym, iż każde kliknięcie oznacza wysłanie danych do serwera i oczekiwanie na informację zwrotną. Tutaj pojawia się paradoks polegający na umiejętności takiego podzielenia informacji by jej ilość nie przytłaczała odbiorców i zarazem ograniczeniu fragmentacji na zbyt dużą ilość stron, na których załadowanie trzeba czekać.

Dość skomplikowane jest również użycie pól dialogowych, które są z reguły podstawą komunikacji z użytkownikiem. Pole dialogowe w postaci nowego okienka może zostać przesłonięte przez okno przeglądarki lub nawet zamknięte przez użytkownika, który odruchowo potraktuje je jako reklamę. Przekierowania na inne otwierające się strony może wprowadzać zamieszanie, gdyż odbiorca traci orientację, które okno jest aktywne i w którym ma kontynuować pracę (być może nawet nie zauważy nowego okna). Poza tym nowo otwarta przeglądarka nie ma historii starego okna i odbiorcy nie mogą w niej cofnąć się do poprzednio wyświetlanej strony. Niekorzystny jest również fakt, iż dzisiejsze systemy operacyjne z reguły słabo zarządzają dużą ilością okien. Zdarzyć się też może, że dopóki użytkownik nie kliknie wybranej opcji w nowym oknie to główna strona będzie zablokowana. Przypadkowe zagubienie nowego okienka oznacza, że jakiekolwiek działania odbiorcy pozostają bez reakcji systemu. W takiej sytuacji można mieć wrażenie, że komputer przejmuje kontrolę nad nawigacją, co zawsze będzie odbierane negatywnie przez użytkowników. Bolączką jest też nie zapisywanie tekstów w polach tekstowych, które w momencie zmiany strony ulegają wyczyszczeniu.

Różnice dostrzec można nawet w działaniu list rozwijanych, które często na stronach WWW w momencie wybrania pozycji, natychmiastowo przekierowują na nową stronę. Joel Spolsky potępia taką technikę, gdyż zgodnie z regułą użycia menu rozwijanego, zmiana jego elementu nie powinna powodować znaczących zmian w działaniu aplikacji. Dopiero w momencie zatwierdzenia przyciskiem OK powinno nastąpić przekierowanie w nowe miejsce. Jest to o tyle ważny problem, że w momencie pomyłkowego wybrania złej pozycji menu, nastąpi oczekiwanie na załadowanie niewłaściwej strony, wprowadzając duże zamieszanie i opóźnienie w nawigacji.

Kolejną różnicą jest działanie kart nawigacyjnych. W przypadku projektu witryny internetowej wiąże się to z opóźnieniami powstałymi w wyniku ładowania każdej nowej strony. Reakcja nie jest natychmiastowa tak jak w przypadku interfejsu programu. Mimo tej niedogodności stosowanie kart jest zgodne z zasadami funkcjonalności, gdyż dobrze wizualizuje model pracy w witrynie. Zastosowanie technologii typu Flash, Javascript lub DHTML do budowy interfejsu rozwiązuje ten uciążliwy problem.

Poza tym w standardowym systemowym interfejsie użytkownika projektanci mają kontrolę nad każdym elementem znajdującym się na ekranie. Znają specyfikację systemu i zainstalowane składniki, z którymi bez przeszkód mogą współpracować (np. czcionki). Nie należy też zapominać, iż pierwsze interfejsy użytkownika były testowane w laboratoriach funkcjonalności zanim ujrzały światło dzienne w przeciwieństwie do interfejsów internetowych, gdzie rozwój przebiega stale i jego testerami są wszyscy użytkownicy.

Podsumowaniem może być teoria mówiąca, iż czym mniej będzie starań dążących do projektowania wymyślnych nowych interfejsów użytkownika, na których ładowanie trzeba długo czekać i które wprowadzają odbiorców w błąd, tym bardziej zyska na użyteczności strona internetowa. Wykorzystanie typowego interfejsu przeglądarki w postaci hiperłączy, przewijania stron i wbudowanych przycisków nawigacji powinno zapewniać łatwość użytkowania.

4.6.5 Błędy w projektowaniu interfejsów

W ciągu kilku dekad formowania się cyfrowej przestrzeni informacyjnej kształtowały się różne metody współpracy z użytkownikiem. Początkowo, za sprawą pierwszych interakcyjnych systemów operacyjnych współdziałanie z komputerem polegało na wpisywaniu komend. Użytkownik miał pozorną swobodę w postępowaniu gdyż musiał znać na pamięć polecenia systemu. Następna generacja wprowadziła model pytań i odpowiedzi. Odbiorca nie był zmuszany do przyswajania zawiłych komend i wpisywał jedynie to, o co prosił system. Minusem była natarczywość programów, które jeśli nie otrzymywały poprawnej odpowiedzi prosiły o nią do skutku lub, co gorsze, kończyły działanie. Z racji coraz większej możliwości aplikacji wymyślono dołączane menu do każdego programu, umożliwiające szybki dostęp do żądanych zadań. Do głosu doszła teoria, iż użytkownik ma sam decydować, co ma robić i jak chce tego dokonać. Kolejną tendencją okazały się kreatory. Początkowo ich zadaniem było wskazanie jak należy wykonać pewne zadania. Jednak bardzo szybko założenia te zostały spaczone przez niektórych projektantów i z czasem przerodziły się w patologiczne procesy w żaden sposób nieułatwiające pracy (powstały np. w wyniku obejścia jakiś niejasnych technik pracy w programie). Do dziś można spotkać rozwiązania, które tak naprawdę są powrotem do sytuacji, w której komputer prowadzi użytkownika za rękę przez z góry ustaloną drogę, pytając czasem o rzeczy, których odbiorca nie jest w danej chwili wiedzieć. Poza tym nie uwzględniają one specyficznych wymagań użytkowników. Rozwiązaniem jest takie projektowanie interakcji z systemem by jego użytkownik sam mógł decydować o kolejności zadań, jakie chce wykonać i by miał zapewnioną kontrolę nad środowiskiem, w którym pracuje. Innymi słowy powinno się zaoferować zarazem pełną swobodę działania jak i możliwość włączenia trybu pomocy udzielającego konkretnych porad. Ostatnimi czasy narodziła się koncepcja predifiniowania środowisk pracy w zależności od stopnia zaawansowania użytkownika jak i względem jego osobistych preferencji pracy. Pozwala to wydajniej wykorzystywać dany system.

Bardzo ważnym elementem związanym z projektowaniem interfejsów jest ograniczanie niepotrzebnych okien dialogowych w kontakcie z odbiorcą. Należy pamiętać, że główną ideą dobrze zaprojektowanego interfejsu jest osiągnięcie przez użytkownika upragnionych rezultatów w najkrótszym możliwym czasie. Często jednak programiści starają się nadmiernie pomóc odbiorcom poprzez proponowanie dokonywania różnych wyborów ustawień i opcji, które w danym momencie nie są ważne. Każda taka propozycja przerywa pracę i często powoduje dezorientację odbiorcy. Najlepszym przykładem takiego niepotrzebnego dialogu jest konieczność wyboru pomiędzy optymalizacją wyszukiwania hasła pomocy względem szybkości lub rozmiaru bazy, w czasie korzystania z pomocy Windows. Jak słusznie zauważa Joel Spolsky, w książce "Projektowanie interfejsu użytkownika", jeśli odbiorca szuka pomocy to na pewno jest mało zainteresowany z jakiej będzie korzystać bazy. Najważniejszym jest dla niego znalezienie odpowiedzi na nurtujące go pytanie. Narzucanie odbiorcy obowiązku wyboru dodatkowych opcji utrudnia pracę z programem. Oczywiście nie oznacza to, że należy pozbawiać użytkownika możliwości podejmowania decyzji czy indywidualizacji aplikacji (tak bardzo cenionej przez wielu odbiorców). Należy jednak pamiętać by nie obarczać go koniecznością dokonywania wyborów, które może podjąć za niego automatycznie aplikacja w oparciu o dostarczone dane lub wcześniejsze badania nad programem.

Często też zdarza się, że pewne ułatwienia albo zbyt duża swoboda w dobieraniu ustawień mogą stać się problemem. Przykładowo możliwość przesuwania w inne miejsce paska menu lub paska start w aplikacjach w systemie Windows nie jest z reguły wykorzystywana. Spotykane są raczej sytuacje, gdy użytkownicy czynią to przypadkowo i nie potrafią przywrócić stanu pierwotnego, w wyniku czego postanawiają reinstalować daną aplikację. Jest to ewidentny przykład przerostu formy nad treścią i tym samym działania na niekorzyść funkcjonalności interfejsu użytkownika.

Dzięki stosowaniu metafor rzeczywistości odbiorca oczekuje interakcji podobnych do tych, które spotyka w realnym świecie. Każda przecząca naturalnym zachowaniom akcja na ekranie powoduje zagubienie użytkownika. Używanie niewłaściwych metafor lub symboli, np. stosowanie nietypowych przycisków z odmiennymi niż standardowe opisami, może prowadzić do nieporozumień w użytkowaniu interfejsu. Zmiany łamiące przyjęte zasady i mające na celu tylko chęć wyróżnienia produktu i zrealizowania przez twórców ich założeń artystycznych, spotykają się z negatywnym odbiorem użytkowników.

Twórcy przeceniają też z reguły możliwości manualne użytkowników w sterowaniu elementami interfejsu. Należy zdawać sobie sprawę z kilku podstawowych powodów, które decydują o tym, że sterowanie kursorem na ekranie nie zawsze należy do łatwych czynności:

Odbiorcy niekoniecznie dysponują typową myszą komputerową
Urządzenie nawigacyjne może być brudne
Początkujący użytkownicy mają problemy ze sterowaniem za pomocą jakiekolwiek urządzenia
Ludzie niepełnosprawni lub starsi są ograniczeni ruchowo
Niektórzy mają problemy z klikaniem bez poruszenia myszą
Wykonywanie wszystkich czynności myszą męczy i spowalnia prace

Dużej uwagi wymaga także dobór elementów nawigacyjnych użytych na stronie. Na przykład, znana lista kombinowana często stanowi utrudnienia w nawigacji, jeśli zawiera większą ilość pozycji niż przewidziana dla niej liczba wierszy. Obsługa myszką wymaga wtedy bardzo dokładnego przewijania w żądane miejsce i precyzyjnego wskazania pozycji. W przypadku pomyłki czynności należy powtórzyć. Rozwiązaniem takiego niefunkcjonalnego sposobu poruszania się jest zastosowanie listy rozwijanej o wysokości równej ilości wszystkich jej możliwych elementów.

Przykłady zastosowania nowej wiedzy w praktyce

Zasady dobrej nawigacji

Umiejscowienie nawigacji

Doświadczenie projektantów pokazuje, że użytkownicy najczęściej poszukują elementów nawigacyjnych w górnej i lewej części ekranu. Umieszczanie przycisków w innym miejscu może powodować nie tylko duże kłopoty w ich odnalezieniu, ale nawet w skrajnym przypadku ich wyświetlenie poza widocznym obszarem strony, jeśli użytkownik pracuje w bardzo niskiej rozdzielczości ekranu. Najczęściej użytkownicy wybierają tylko te opcje, które są widoczne na monitorze. Jeśli muszą przewijać stronę by zobaczyć inne możliwości przekierowań to następuje przeciążenie jego pamięci chwilowej, gdyż musi zapamiętać niewidoczne w danym momencie opcje.

Kilka sposobów nawigacji

Każdy użytkownik może być przyzwyczajony do odmiennych sposobów poruszania się po witrynie. Warto umieszczać kilka rodzajów elementów nawigacyjnych. Przykładowo posłużyć się ikonami, opisami tekstowymi, mapą strony i wyszukiwarką. Bardzo ważne jest jednak przestrzeganie spójności tych oznaczeń, by odbiorca kojarzył, iż wskaźniki te prowadzą w te same miejsca, a nie są zestawem kilku odrębnych sekcji nawigacyjnych. Jednym z często spotykanych rozwiązań jest stosowanie opisów tekstowych w dolnej części strony, natomiast ikon w górnej lub lewej części witryny, tak by te systemy nawigacji nie znalazły się jednocześnie w polu widzenia odbiorcy. Wielu użytkowników reaguje lepiej na zwykłe standardowe łącza i przyciski niż wymyślną grafikę. Jeśli nie kłóci się to ze stylistyką strony, to lepiej użyć typowych elementów nawigacyjnych niż wymyślać specjalnie nowe sposoby poruszania się po witrynie.

Czytelne wskaźniki i opisy kategorii

Opisy wskaźników powinny być krótkie (dwa - cztery słowa) i jednoznaczne. Odwoływanie się do wyobraźni odbiorcy nie jest korzystne, gdyż z reguły szuka on standardowych nazw takich jak "strona główna", "pomoc" itp. Używanie naturalnego języka użytkownika pozwoli mu szybciej odnaleźć się w nowym miejscu. Nazewnictwo powinno być bardziej zbliżone do czynności, które może wykonać odbiorca niż do procesów, które dzieją się wewnątrz strony.

Istnieją dwa poglądy dotyczące opisu wskaźników. Mark Pearrow uważa, że umieszczanie napisu "kliknij tu" wciąż bardziej zwraca uwagę odbiorców niż technika wplatania wskaźników w tekst. Według niego większość odbiorców może nie domyślać się, iż podkreślony element jest przekierowaniem do innej strony i potraktować to jako wyróżnienie napisu. Natomiast Jakob Nielsen twierdzi, że właśnie podkreślenie znaczącego tekstu i wykorzystanie go jako wskaźnika może zainteresować odbiorcę. Użytkownicy z reguły przeglądają stronę w poszukiwaniu ważnych dla nich słów. Formuła "kliknij tu" nie jest nośnikiem żadnej konkretnej informacji i trudniej jej zwrócić na siebie uwagę użytkownika. Nielsen sugeruje również dodawanie krótkich opisów do każdego wskaźnika, pomagających w decyzji, który z nich wybrać. Doskonale do tego nadaje się funkcja tytułowania odnośników (atrybut TITLE w HTML), która powoduje pojawianie się krótkiej informacji tekstowej po wskazaniu danego wskaźnika kursorem (zaleca się użycie maksymalnie 80 znaków). Dodatkowo stosowanie wskaźników w postaci podkreślenia kluczowych słów zamiast wykorzystywania całego adresu wydaje się zwiększać czytelność, gdyż często patrząc na samą linię adresową trudno jest wywnioskować, do czego ona prowadzi. Bardziej liczy się informacja opisowa decydująca o wyborze użytkownika, natomiast nazwa właściwa strony może znajdować się obok podwyższając wiarygodność źródła.

Jeśli elementy nawigacyjne mają postać graficzną należy zadbać o to, by użytkownik był przekonany, że jest to faktycznie część interfejsu, a nie np. reklama, czy ozdoba strony. Dlatego lepiej unikać jest agresywnych animacji atakujących percepcję odbiorcy. Równie ważna jest spójność kolorystyczna przyjęta dla kolorów łączy. Większość ludzi przyzwyczajona jest, że kolor niebieski oznacza hiperłącze. Dlatego zaleca się jego stosowanie, mimo iż kolor ten jest gorzej postrzegany przez ludzkie oko. Jeśli w projekcie nastąpi jego zmiana na inną barwę, należy być konsekwentnym i zachować tą samą kolorystykę we wszystkich częściach witryny. Poza tym przeglądarki przyjmują standardowe kolory dla odwiedzonych oraz nieużytych łączy (odcienie niebieskiego - odnośniki niewybrane, odcienie czerwone lub fioletowe - odnośniki wybrane). Wykorzystanie innego schematu będzie powodem zamieszania, gdyż użytkownicy mogą stracić orientację gdzie już byli na stronie, a co jeszcze pozostało do odwiedzenia. Wykazano, że zastosowanie standardowych kolorów łączy poprawiło o 16% współczynnik wykonywania zadań testowych.

Funkcjonalne ikony

Kolor ikony jest dodatkową przesłanką dla jej znaczenia. W świadomości człowieka zapisane są konkretne skojarzenia z daną barwą i tak np. kolor czerwony ostrzega i przyciąga uwagę. Patrząc na stronę, w pierwszej kolejności obserwujemy wyróżniające się na niej barwy i automatycznie przypisujemy im jakieś znaczenie. Jeśli ikony nie mają zwracać na siebie uwagi dobrze jest posłużyć się stonowaną kolorystyką, nieatakującą odbiorców skojarzeniami.

Dużo łatwiej projektować jest ikony ilustrujące znaczenie rzeczowników niż czasowników. Dobrą techniką jest posługiwanie się ikonami połączonymi z tekstem, gdyż opis słowny nie pozostawia wątpliwości, co do działania wskaźnika, a z czasem zacznie być kojarzony przez odbiorców z konkretną ikoną. Potwierdzają to doświadczenia, w których użytkownicy, nieznający danego serwisu automatycznie odrzucali graficzne symbole i poszukiwali tekstu. W miarę eksploracji strony zapamiętywali wygląd ikon i ich poruszanie się stawało się coraz szybsze. Działo się tak, dlatego, iż mogli ograniczyć procesy myślowe tylko do automatycznego wybierania znanych symboli. Wskazane jest używanie standardowych, zawężających granice znaczeniowe ikon, gdyż zbyt duża swoboda twórcza i abstrakcja może zaszkodzić w odbiorze oraz wprowadzać w błąd. Litery zastosowane do opisu powinny być czytelne, zaś sam tekst nie może być długi ani dwuznaczny. Słowa można traktować po części jako znaki graficzne - symbole, których percepcja jest automatyczna. Powinny one tworzyć z ikoną integralną całość.

Wszystkie zaprojektowane ikony muszą pozostawać ze sobą we wzajemnej zgodności typologicznej. Użycie jednolitego, spójnego stylu dla całej kompozycji ikon, ułatwia odbiorcy ich odnalezienie i wprowadza punkt odniesienia dla odczytywania ich zawartości. Przykładem są tu znaki drogowe, które oparte na bazie identycznego kształtu i koloru (np. znaki ostrzegawcze) informują automatycznie o zagrożeniu, a dopiero w następnej chwili można odczytać, jakie zagraża niebezpieczeństwo.

Informacja o aktualnym położeniu

Na każdej stronie powinna być w widocznym miejscu umieszczona informacja o dziale lub sekcji, w której przebywa użytkownik.

Korzystne jest też nazywanie tytułów stron. Nie mogą być one wyrwane z kontekstu, lecz informować w pełni, na jakiej stronie i w jakim dziale obecnie się znajdujemy. Należy też pamiętać, że tytuł ten zapisuje się również w folderze "ulubione", historii i jest wyświetlany w wynikach wyszukiwania w mechanizmach indeksujących strony. Najlepsze efekty stosuje się używając od dwóch do sześciu słów, które powinny przekazywać esencję treści wyświetlanej strony. Jest to trudne zadanie gdyż z racji, iż tytuły te mogą występować samodzielnie, bez żadnego kontekstu np. w wynikach wyszukiwarki, odbiorca nie ma punktu odniesienia do interpretacji danej strony. Przeniesienie najbardziej znaczących słów na początek opisu pozwala łatwiej zidentyfikować treść witryny. Jeśli różne strony będą miały identyczne nazewnictwo, to dodając je do "ulubionych" lub menu zakładek powodujemy umieszczanie skrótów do różnych stron pod tą samą nazwą. Utrudnia to późniejsze odnalezienie żądanej strony z danego serwisu.

Nazewnictwo folderów w adresie URL zgodne z ich zawartością może być dodatkową pomocą w identyfikacji położenia w serwisie.

Brak miejsc bez powrotu

Nie można dopuścić do sytuacji, w której nie ma miejsca powrotu do poprzedniej strony, czy innych działów lub jedyną możliwością cofnięcia jest przycisk przeglądarki internetowej. Na każdej podstronie obowiązkiem jest umieszczenie panelu nawigacji prowadzącego do kluczowych miejsc serwisu. Zmiana jego wyglądu może prowadzić do dezorientacji użytkownika, dlatego lepiej jest używać identycznego, spójnego systemu graficznego we wszystkich miejscach.

Innym przypadkiem są przekierowania na inne strony spoza danego serwisu np. w celu pobrania darmowej przeglądarki plików. Powinno zadbać się o to by powrót do strony macierzystej był prosty i nigdy nie blokować działania przycisku "cofnij". Odnajdywanie jej ponownie, czy wręcz wpisywanie adresu od nowa jest bardzo uciążliwe.

Poza tym oczywiście należy monitorować swoje strony i sprawdzać czy wszystkie odwołania są wciąż dostępne i aktualne. Przekierowanie do niedziałającego miejsca może wynikać z błędu adresowania, na skutek wyłączenia serwera lub zamknięcia zewnętrznej witryny. Ponieważ sprawdzanie tych przyczyn jest z reguły pracochłonne najlepiej posłużyć się specjalnymi aplikacjami automatycznie monitorującymi stan wskaźników.

Projektowanie nieliniowe

Nie wolno zakładać, że każdy odbiorca zaczyna przeglądanie serwisu wyłącznie od strony głównej. Użytkownik szukając informacji może dostać się na dowolną stronę systemu. Jeśli nie znajdzie tam możliwości przejścia na stronę główną to będzie to dla niego całkowicie bezużyteczne miejsce. Takim sytuacjom zapobiega wspomniane wyżej ulokowanie nawigacji na każdej ze stron zapewniających kontekst dla osób, które dostały się od razu do wnętrza serwisu. Zastosowanie retoryki strony źródłowej objaśniającej, dokąd prowadzi odnośnik i retoryki strony docelowej, pomagającej zapoznać się z nowym miejscem, wspiera nawigację kontrolowaną przez użytkownika i pozwala mu poruszać się swobodnie bez ograniczeń. Jest to zgodne z głównymi zasadami pracy w Internecie.

Łatwe szukanie

W każdej chwili powinien być możliwy dostęp do wyszukiwarki. Nie może ona jednak stanowić jedynego sposobu nawigacji po stronie i nie jest wskazane by odwoływała się do zasobów globalnych, wykraczających poza ramy danego serwisu. Wprowadzenie monitorowania słów, których poszukują użytkownicy może dać wskazówki, co jest trudne do odnalezienia na stronie i jakie obiekty cieszą się największym zainteresowaniem.

Jeśli w wyniku obserwacji okaże się, że odbiorcy szukają tych samych informacji w różnych miejscach, oznacza to, że klasyfikują je do różnych kategorii. Połączenie ich w jeden dział może przynieść przyspieszenie poszukiwań.

W praktyce przyjęte jest tworzenie tzw. stron szerokich, czyli takich, na których znajduje się więcej wskaźników i potrzeba mniej kliknięć by znaleźć się w miejscu docelowym. Należy zwrócić uwagę na czytelne rozplanowanie przekierowań używając podziałów i sygnałów przestrzennych. Użytkownicy łatwo męczą się koniecznością eksploracji kolejnych stron w poszukiwaniu upragnionego miejsca (model wąski -mniej wskaźników na stronie, więcej podstron, więcej kliknięć).

Zwięzła informacja zwrotna

Odbiorca powinien być informowany o tym czy jego działania przynoszą skutek. Jeśli nie ma potwierdzenia jego akcji, wnioskuje on, że system ma opóźnienie lub w gorszym przypadku, iż jego działanie nie przyniosło rezultatów. Gdy wówczas próbuje powtórzyć akcję może doprowadzić do błędów w mechanizmach obsługujących stronę.

Użytkownicy nie lubią czytać dużej ilości instrukcji z ekranu i najlepiej w dialogach z nimi przekazywać informacje prosto, jednoznacznie i zwięźle. Doświadczenie pokazuje, że odbiorcy zaawansowani ignorują długie opisy, gdyż uważają, że wiedzą jak działa program. Nowicjusze są zdania, że program sam powinien wybrać najlepsze ustawienia i nie warto wdrażać się w pojęcia, których nie rozumieją. Te osoby, które przeczytają zawiłe pole tekstowe mogą poczuć się właśnie przez nie zdezorientowane.

Nieprzewidywalność użytkownika

Użytkownicy na skutek zmęczenia, niezrozumienia lub braku doświadczenia mogą próbować wykorzystywać oferowane im narzędzia w sposób niezgodny z ich przeznaczeniem. Programiści interfejsów powinni w miarę możliwości uodpornić je przeciw wszelkim nielogicznym metodom działania odbiorców. Przykładowo w formularzach internetowych ograniczać możliwości używania niektórych znaków w określonych polach (brak liter w numerze telefonu itp.). Blokując działania odbiorcy należy zawsze informować z jakiego powodu nie mogą wykonać danej akcji i wskazać im właściwe rozwiązanie.

4.7 Przyszłość projektów internetowych

Przewiduje się, iż w niedalekiej przyszłości główny kłopot związany z problemem wyświetlania tej samej zawartości na różnej wielkości ekranach zostanie rozwiązany przez wprowadzenie negocjacji między serwerami a przeglądarkami internetowymi. Dzięki temu nastąpi zoptymalizowanie witryny dla każdego typu urządzenia wyświetlającego. Duże szanse ma przystosowanie stron za pomocą kaskadowych arkuszy stylów, które mogłyby inteligentnie dopasowywać wizualizację serwisów do różnych parametrów urządzeń odbiorczych. Przykładowo zmniejszać rozdzielczość grafiki dla zyskujących coraz większą popularność urządzeń przenośnych z małymi ekranami lub wykorzystywać bardziej skompresowane media dla komputerów z niskim transferem danych z Internetu.

Dzięki wzrostowi przepustowości Sieci możliwe będzie umieszczanie bardziej obszernych elementów multimedialnych w postaci interaktywnych filmów, przekazów na żywo z wykładów lub audio-wizualnej komunikacji z innymi studentami i nauczycielami w postaci telekonferencji.

Dokona się również personifikacja i optymalizacja systemów edukacyjnych pod kątem konkretnych użytkowników.

Streszczenie modułu

Głównym wyznacznikiem sprawnego i przystępnego docierania do odbiorców jest funkcjonalność i ergonomia. Obydwa wymienione pojęcia to w dzisiejszych czasach synonim sukcesu. Implementacja metod inżynierii funkcjonalności w sposób prosty i mało kosztowny przyczynia się do znacznej poprawy doznań użytkowników korzystających z Internetu. Zmiany dotyczące projektowania funkcjonalnych witryn zachodzą dużo wolniej niż rozwój technologii ich tworzenia. Można mieć więc nadzieję, że proponowane schematy działań przetrwają próbę czasu i będą pożyteczne niezależnie od tego jakich technik prezentacyjnych będzie się używać w przyszłości.

Bardzo często spotkać się można z opinią, że wygląd i stosowanie najnowszych technologii ma pozytywny wpływ na atrakcyjność danego serwisu i jego nowoczesność. W rzeczywistości jednak takie myślenie może przynieść skutki odwrotne do zamierzonych. Projektowanie bez dbałości o użyteczność, lub przesadne dbanie o funkcjonalność zatracające wartości estetyczne to powszechne błędy współczesnych twórców przedsięwzięcia sieciowego. Kluczem do sukcesu jest odnalezienie złotego środka pomiędzy tymi skrajnościami.

Stosowanie metod inżynierii funkcjonalności w prosty i mało kosztowny sposób przyczynia się do znacznej poprawy doznań użytkowników korzystających z nauczania na odległość przy użyciu Internetu.

Zwróć uwagę na ...

Funkcjonalność często jest ograniczana tylko do łatwości dostępu, która jest jedynie częścią nauki o funkcjonalności i ergonomii. Pojęcie łatwości dostępu najczęściej pojawia się w znaczeniu ułatwienia pracy dla niepełnosprawnych, a także kompatybilności nowych technik z przyjętymi standardami. Funkcjonalność może odpowiadać za sukces marketingowy, jednak jej celem nie jest popularyzacja marki czy dostarczanie wiedzy o produkcie. Głównym zamierzeniem tej nauki jest usprawnienie wykonania zamierzonych przez użytkownika działań. Stosowanie funkcjonalności nie musi być konieczne w wszystkich przypadkach. Przykładowo strony dostarczające rozrywki z reguły nie są funkcjonalne, jednakże cieszą się dużą popularnością gdyż pełnią one specyficzną funkcję. Zdarzają się też próby osiągnięcia funkcjonalności przez wymuszanie na odbiorcach poruszania się po stronach w ściśle określony sposób. Taka całkowita kontrola nie jest jednak możliwa i nie spełnia zasad projektowania zorientowanego na użytkownika.

Testowanie funkcjonalności nie musi być procesem trudnym ani drogim i nie wymaga zatrudniania setek testerów. Testowanie projektu nawet z udzialem tylko kilku osób pozwala na wykrycie dużej ilości krytycznych usterek i błędów w projekcie.

Słownik kluczowych pojęć

funkcjonalność	szeroko pojętą dyscyplina polegającą na stosowaniu racjonalnych zasad naukowej obserwacji, pomiaru i projektowania podczas tworzenia i modyfikowania stron internetowych w celu zwiększenia łatwości użytkowania, walorów poznawczych, użyteczności oraz zmniejszenia dyskomfortu związanego z ich obsługą
interfejs użytkownika	ang. Graphical User Interface (GUI), inform. oprogramowanie umożliwiające użytkownikowi sterowanie działaniem określonego programu lub zbioru programów przez manipulowanie za pomocą urządzenia wskazującego, np. myszy, obiektami graf. (oknami, ikonami i in.) wyświetlanymi na ekranie monitora
psychologia czynników ludzkich	dziedzina nauki, która poszukuje informacji o zachowaniach człowieka, jego zdolnościach i ograniczeniach, które mogą mieć wpływ na projektowanie, ocenę oraz zastosowanie produktów; celem badań tej nauki jest poprawa wydajności, bezpieczeństwa oraz wygody użycia technologii i przedmiotów wyprodukowanych przez człowieka; w centrum zainteresowania znajduje się człowiek jako podstawowy element relacji człowiek - produkt - środowisko
User-Centered Design (UCD)	projektowanie zorientowane na użytkownika, wykorzystujące takie techniki i zasady, które w centrum stawiają użytkownika i ułatwiają mu pracę z produktem; wywodzi się z badań i obserwacji zapoczątkowanych przez pionierów psychologii czynników ludzkich

Literatura podstawowa i poszerzająca

1. Nielsen Jakob, Projektowanie funkcjonalnych serwisów internetowych, Wydawnictwo Helion (2003)
2. Pearrow Mark, Funkcjonalność stron internetowych, Wydawnictwo Helion (2002)
3. Spolsky Joel, Projektowanie interfejsu użytkownika, Wydawnictwo Mikom (2001)
4. Pastuszak Włodzimierz, Barwa w grafice komputerowej, Wydawnictwo Naukowe PWN, Warszawa 2000
5. Wieczorkowska Alicja, Wykład z przedmiotu Multimedia, PJWSTK (2000)
6. Computer Arts edycja polska CGS Computer Graphics Studio
7 . Komputerowy słownik języka polskiego, Wydawnictwo Naukowe PWN, Warszawa (1996)
8 . Bryan Pfaffenberger, Bill Karow, HTML 4. Biblia, Wydawnictwo Helion (2001)
9. Shari Thurow, Pozycjonowanie w wyszukiwarkach internetowych, Wydawnictwo Helion (2004)
10. Cohen June, Serwisy WWW Projektowanie, tworzenie i zarządzanie, Wydawnictwo Helion (2004)
11. Foley D. James (praca zbiorowa), Wprowadzenie do grafiki komputerowej, Wydawnictwa Naukowo - Techniczne (1995)

http://www.uzytecznosc.pl/

http://www.useit.com/

Sprawdź się...

Dlaczego warto dbać o funkcjonalność projektowanych rozwiązań eLearningowych. W jaki sposób można ją sprawdzić i zapewnić?

Czym jest psychologia czynników ludzkich? Dlaczego należy uwzględnić ją podczas funkcjonalnego projektowania?

Na czym polega User Centered Design i Activity - Based Planning?

Dlaczego należy zwrócić szczególną uwagę na funkcjonalne zaprojektowanie interfejsu użytkownika?

Czego dotyczy pojęcie "wyuczonej bezradności"?

Czym jest model programu, a czym model użytkownika? Który z nich łatwiej zmienić? Dlaczego ważna jest zgodność tych modeli?

Wymień i scharakteryzuj najważniejsze zasady projektowania dobrej nawigacji.

Pytania problemowe

Przy projektowaniu serwisu edukacyjnego należy przede wszystkim skupić się na jego aspekcie funkcjonalnym. Estetyka i wygląd wizualny nie mają wpływu na proces przyswajania wiedzy. Czy zgadasz się z tym stwierdzeniem?

Jakie wady i zalety niesie ze sobą użycie multimediów w serwisach internetowych? Czy znasz stronę, na której Twoim zdaniem zastosowanie multimediów pomogłoby w lepszym przekazie prezentowanego materiału? W jaki sposób użyłbyś technik multimedialnych do wizualizacji tych informacji? Czy znasz stronę, na której multimedia są nadmiarowym elementem konstrukcyjnym utrudniającym nawigację lub zapoznanie z zawartością serwisu?

Przypomnij sobie witrynę, której obsługa sprawia Ci wiele kłopotu. Czy poznane rozwiązania dobrej nawigacji usprawniłyby jej obsługę? Jakich zasad nie spełnia wspomniana strona i które z rozwiązań wybrałbyś do rozwiązania problemów?