IDZ DO
PRZYK£ADOWY ROZDZIA£
SPIS TREFCI Web Design. Projektowanie atrakcyjnych stron WWW KATALOG KSI¥¯EK Autor: Ani Phyo T³umaczenie: Marek Binkowski KATALOG ONLINE ISBN: 83-7361-248-3 Tytu³ orygina³u: Return on Design. ZAMÓW DRUKOWANY KATALOG Smarter Web Design That Works Format: B5, stron: 290
TWÓJ KOSZYK DziY z Internetu korzysta wiêcej ludzi — i wiêcej firm opiera na tym swoj¹ dzia³alnoYæ — ni¿ kiedykolwiek wczeYniej. Jednak aby osi¹gn¹æ sukces w trudnych ekonomicznie DODAJ DO KOSZYKA czasach, producenci stron internetowych musz¹ korzystaæ ze skromniejszych Yrodków i jednoczeYnie tworzyæ bardziej efektywne witryny, które przynios¹ realny zysk. W jaki sposób uzyskaæ taki wynik? Weteranka projektowania, Ani Phyo, przedstawia CENNIK I INFORMACJE sprawdzon¹ w boju i opart¹ na doYwiadczeniach metodê skutecznego projektowania witryn internetowych. Pokazuje ona, w jaki sposób kluczowe zasady projektowania ZAMÓW INFORMACJE informacji z myYl¹ o u¿ytkowniku mog¹ nadaæ kierunek ka¿demu projektowi O NOWOFCIACH internetowemu sprawiaj¹c, ¿e witryna bêdzie bardziej efektywna, ³atwiejsza w u¿yciu i lepiej spe³niaj¹ca za³o¿enia biznesowe. WyjaYnia, gdzie warto, a gdzie nie warto ZAMÓW CENNIK oszczêdzaæ i na czym tak naprawdê polegaj¹ oszczêdnoYci d³ugoterminowe. Ani Phyo opisuje w tej ksi¹¿ce prosty i skuteczny siedmioetapowy proces tworzenia CZYTELNIA serwisów internetowych. • Oceñ obecn¹ witrynê klienta, zbadaj jego konkurencjê, precyzyjnie wyznacz FRAGMENTY KSI¥¯EK ONLINE docelow¹ grupê odbiorców i pomó¿ zdefiniowaæ potrzeby i oczekiwania klienta. • Zbuduj odpowiedni zespó³ do wykonania zadania. • Utwórz modele charakterystycznych reprezentantów grupy docelowej i zastanów siê, w jaki sposób bêd¹ korzystaæ z witryny. • Ustal, jaka powinna byæ zawartoYæ witryny i w jaki sposób powinna ona funkcjonowaæ. • Zaprojektuj profesjonalny schemat nawigacji i utwórz funkcjonalny prototyp, by go przetestowaæ. • Przeprowad] kontrolowany test u¿ytecznoYci — nawet w przypadku skromnego bud¿etu — i maksymalnie skorzystaj z opinii i sugestii u¿ytkowników. • Zbuduj mechanizmy, które pozwol¹ Ci pozyskiwaæ informacjê zwrotn¹ ju¿ po uruchomieniu witryny, tak aby u¿ytkownicy mogli dostarczaæ wartoYciowych Wydawnictwo Helion opinii przydatnych w trakcie przysz³ych modernizacji. ul. Chopina 6 Ksi¹¿ka przedstawia nie tylko proponowany przez autorkê schemat postêpowania, ale 44-100 Gliwice tak¿e przeszkody i trudnoYci, na jakie mo¿na napotkaæ w trakcie jego realizacji. tel. (32)230-98-63 "WebDesign. Projektowanie atrakcyjnych stron WWW" to nieodzowna lektura zarówno e-mail: [email protected] dla projektantów stron, jak i dla mened¿erów firm Ywiadcz¹cych us³ugi tworzenia stron internetowych. Spis treści
Przedmowa...... 7 Od Autorki...... 9 Wstęp...... 13 Podstawy projektowania interakcji z myślą o użytkowniku 23 Co to jest projektowanie informacji? ...... 23 Kto zajmuje się projektowaniem informacji? ...... 31 Co to jest użyteczność? ...... 36 Podsumowanie ...... 42 Rozdział 1. Ustalanie wymagań witryny...... 45 Definiowanie podstawowych założeń biznesowych ...... 45 Proces badań ...... 47 Dobór cech i możliwości witryny spełniających jej cele .... 69 Ocena witryny przeznaczonej do przeprojektowania ...... 71 Sprawdź słuszność założeń ...... 76 Podsumowanie ...... 78 Rozdział 2. Scenariusze działań użytkownika...... 79 Budowanie pozytywnych wrażeń ...... 79 Tworzenie modelu użytkownika i scenariusza jego działań ... 82 Testowanie scenariuszy ...... 88 Podsumowanie ...... 89 Rozdział 3. Dobór zawartości witryny...... 91 Jak dać użytkownikowi dokładnie to, czego potrzebuje ...... 91 Pomóż zleceniodawcy zidentyfikować potrzeby dotyczące zawartości witryny i ustalić ich priorytety .... 102 Dobór struktury witryny ...... 109 Tworzenie i testowanie spisu treści witryny ...... 122 Sprawdź rezultaty ...... 126 Podsumowanie ...... 128 Rozdział 4. Tworzenie mapy witryny i schematów pracy użytkownika ...... 129 Projektowanie efektywnej interakcji ...... 129 Tworzenie mapy witryny ...... 132 6 Web Design. Projektowanie atrakcyjnych stron WWW
Schematy pracy użytkownika ...... 136 Testowanie i poprawianie schematu pracy użytkownika i mapy witryny ...... 149 Podsumowanie ...... 150 Rozdział 5. Projektowanie schematu nawigacji i układu dokumentów ...... 151 Od układu strony do prototypu ...... 151 Schematy układu stron ...... 153 Prototypy ...... 174 Podsumowanie ...... 179 Rozdział 6. Testowanie funkcjonalnego prototypu...... 181 Kontrolowany test użyteczności ...... 181 Testy formalne, czy nieformalne? ...... 185 Dane jakościowe czy ilościowe? ...... 189 Kontrolowany test nieformalny ...... 194 Test formalny ...... 219 Prezentacja wyników testów i zaleceń ...... 220 Poprawianie projektu na podstawie wyników testu ...... 221 Podsumowanie ...... 226 Rozdział 7. Dalszy proces modyfikacji, rozwoju i aktualizacji witryny ...... 229 Czy było warto? ...... 229 Projekt informacji — od budowy do uruchomienia ...... 231 Uruchom witrynę i rozpocznij proces od nowa ...... 241 Dodatek A Słowniczek...... 259 Skorowidz...... 269 Rozdział 3. Dobór zawartości witryny
Jeśli ustaliłeś już, kto będzie korzystał z witryny i jakie czynności będą wykonywali jej użytkownicy, możesz przystąpić do dobierania treści i zawartości witryny. Tok postępowania na tym etapie zależy od typu witryny, którą projektujesz. Jeśli tworzysz witrynę stanowiącą narzędzie, witrynę, w której dominują transakcje, zakupy przeprowadzane drogą elektroniczną czy wyszukiwanie określonego rodzaju infor- macji, przejdź do rozdziału 4. („Tworzenie mapy witryny i schematów pracy użytkownika”), a następnie wróć do tego rozdziału po wykonaniu opisanych tam zadań. Jeśli jednak głównym celem witryny jest prezentowanie treści informacyj- nych, kontynuuj czytanie tego rozdziału.
W tym rozdziale omówimy projektowanie, planowanie i usta- lanie struktury zawartości witryny. Pokażemy też, jak pomóc zleceniodawcy opracować materiały na witrynę w taki sposób, by przyśpieszyć proces jej produkcji. Zespół tworzący wi- trynę będzie nieformalnie testował strukturę zawartości, by upewnić się, że prezentowane treści nie tylko satysfakcjo- nują docelowych użytkowników, lecz również spełniają zało- żenia biznesowe zdefiniowane przez zleceniodawcę (rysunek 3.1).
Jak dać użytkownikowi dokładnie to, czego potrzebuje
Podobnie, jak gospodyni organizująca przyjęcie stara się przygotować potrawy, które będą smakowały jej gościom, pro- jektanci powinni serwować użytkownikom witryny taką jej za- wartość, która zostanie przez nich uznana za atrakcyjną, wyczerpującą i satysfakcjonującą. To dlatego zawsze nama- wiam projektantów do poświęcenia czasu na sprawdzenie, czy 92 Web Design. Projektowanie atrakcyjnych stron WWW
prezentowane treści będą pokrywały się z zainteresowaniami i oczekiwaniami docelowych użytkowników, ujawnionymi we wcześniejszym procesie badań i testów (rysunek 3.2). Rysunek 3.1. Dobór zawartości witryny z myślą o użytkowniku
Rysunek 3.2. Wzbudź apetyt. Poświęć czas na ustalenie, co użytkownicy lubią, zaprezentuj to możliwie atrakcyjnie i spraw, by mieli ochotę na więcej Rozdział 3. Dobór zawartości witryny 93
Poniżej przedstawię pewne sugestie dotyczące doboru zawar- tości witryny, lecz przede wszystkim zachęcam projektantów do traktowania procesu przygotowania zawartości witryny w taki sposób, w jaki traktuje się przygotowywanie pysznego, eleganckiego posiłku. Zwykle jest tak, że mniej znaczy więcej. Dostarczaj użytkownikom tego, czego chcą, i rób to w zwięzły sposób. Mniejsze porcje o wyższej jakości i świe- żości są bardziej satysfakcjonujące niż duża objętość niż- szej jakości, a w dodatku nieświeża.
Dobór zawartości witryny z myślą o użytkowniku pomaga osiągnąć cele biznesowe
Nie sposób przecenić ważności zawartości witryny, na którą użytkownicy mają chętnie wracać i polecać ją swoim znajo- mym, przyjaciołom i rodzinie. Dobrze dobrana zawartość wi- tryny pomaga osiągnąć podstawowe cele biznesowe i wzmocnić markę organizacji lub firmy reprezentowanej przez tę witry- nę.
Czy poniższe komentarze nie wydają Ci się znajome? „To, czego naprawdę potrzebujemy, to elektroniczna wersja biuletynu firmy”. „Nie martw się o zawartość, dział marketingu ma już gotowe wszystkie materiały, jakie możemy umieścić w witrynie”. „Po prostu weźmiemy to, co przygotuje dział komunikacji, i wrzucimy to na witrynę, gdy będzie gotowe”.
Opracowanie nowej zawartości witryny może być kosztowne, zarówno w przypadku nowego projektu, jak i zlecenia polega- jącego na przeprojektowaniu istniejącej witryny. Jednak jeszcze bardziej kosztowne jest zwykłe przerzucenie ist- niejącej zawartości na nową witrynę jedynie po to, by potem odkryć, że nie spełnia ona wymagań użytkowników. W takim niepomyślnym przypadku organizacja posiadająca witrynę wyda pieniądze nie tylko na opracowanie zawartości, lecz również będzie musiała poświęcić sporo wysiłku i ponieść koszty mar- ketingu prowadzącego do odbudowania renomy i pozytywnego postrzegania marki oraz zatarcia negatywnych wrażeń wywoła- nych wśród użytkowników witryny.
Za wszelką cenę unikaj pokusy „martwienia się o zawartość później”. W poniższej dyskusji na temat zawartości witryny przedstawię pewne realia ponownego wykorzystywania istnie- 94 Web Design. Projektowanie atrakcyjnych stron WWW
jących materiałów i unikania ewentualnych przestojów. Na szczęście przy dobrej organizacji pracy, gdy każdy ma do zrobienia mniej i może temu poświęcić więcej uwagi, strate- gie projektowania interakcji pozwalają na ponowne wykorzy- stywanie dostępnych materiałów w przygotowaniu zawartości witryny.
Internet wnosi nowy zestaw możliwości i wymagań — pozwala dostarczyć zawartość przygotowaną z myślą o użytkowniku — zawartość, która interesuje, wciąga, informuje i zachęca widza do powrotu. Stosując takie podejście do zawartości
Zwracaj uwagę na powiązania Zadbaj o to, by organizacja zlecająca projekt witryny zaplanowała przygotowanie i dostarczenie materiałów, które są związane z jej poli- tyką marketingową i reklamową oraz programem dystrybucji. Na przykład, gdy organizacja planuje przeprowadzenie kampanii reklamo- wej z udziałem znanej osobistości (chociażby popularnego piłkarza z pierwszej ligi) lub powiązanej z wchodzącym na ekrany kin filmem, po- winna też zaplanować dostarczenie do witryny materiałów, które będą przyczyniały się do sukcesu owej kampanii. Mniejsze firmy mogą nie mieć aż tak ambitnych planów marketingowych, jednak niemal każda organizacja wprowadza do swojej oferty nowe pro- dukty lub usługi, bierze udział w różnego rodzaju wydarzeniach (pre- zentacjach, targach itp.) i podejmuje inne działania marketingowe. Każde z takich wydarzeń jest potencjalnym źródłem materiałów na witry- nę.
witryny, zwiększamy szanse spełnienia jej założeń bizneso- wych, a także ułatwiamy ewentualne modyfikacje czy przepro- jektowania w przyszłości, o czym powiemy w rozdziale 7. („Dalszy proces modyfikacji, rozwoju i aktualizacji witry- ny”).
Rozpocznij od personalizacji
Personalizacja witryny nie jest już żadną nowością. W la- tach dziewięćdziesiątych ubiegłego stulecia niektóre witry- ny oferowały użytkownikom możliwość wyboru zawartości speł- niającej ich potrzeby i dopasowanej do ich zainteresowań. Sukces witryn takich, jak My Yahoo (http://my.yahoo.com) jest dowodem na to, że użytkownicy lubią otrzymywać dokład- nie to, czego potrzebują, dokładnie w taki sposób, jaki im się podoba (rysunek 3.3). Rozdział 3. Dobór zawartości witryny 95
Rysunek 3.3. Personalizowana zawartość witryny. Witryna My Yahoo umożliwia użytkownikowi wybranie tego, co chce zobaczyć na stronie otwierającej
Indywidualny marketing
Idąc dalej tropem technik personalizacji, umożliwiających użytkownikom wybór treści witryny lub sposobu jej prezenta- cji, trafiamy na techniki indywidualnego marketingu, pole- gające na automatycznym zbieraniu informacji o upodobaniach konkretnego użytkownika i dobieraniu dla niego indywidual- nych ofert i rekomendacji (rysunek 3.4). 96 Web Design. Projektowanie atrakcyjnych stron WWW
Rysunek 3.4. Personalizowane rekomendacje. Inną dobrą metodą personalizowania zawartości jest wykorzystywanie informacji podawany ch przez użytkowników. Zlikwidowana już witryna MovieCritic.com rekomendowała filmy na podstawie ocen, jakie użytkownik wystawiał innym filmom oraz odpowiedzi, jakich udzielał
Na przykład witryna zajmująca się sprzedażą książek może zastosować indywidualny marketing, oferując specjalne cza- sowe zniżki na nowo opublikowane książki, które dany użyt- kownik przypuszczalnie uzna za interesujące; ich wybór mógłby być oparty na liście wcześniejszych zakupów. Podobne techniki są stosowane przez znaną witrynę Amazon.com i inne sklepy internetowe rekomendujące książki, płyty muzyczne i inne produkty. Bazują one na poprzednich zakupach użytkow- nika lub też na zakupach innych użytkowników o podobnych preferencjach.
Z kolei internetowy sklep odzieżowy mógłby zaoferować mi specjalną zniżkę na bluzę pasującą do spodni i spódnicy, które niedawno kupiłam. Te specjalne zniżki nie byłyby oferowane innym użytkownikom, ponieważ każda z nich byłaby tworzona dynamicznie dla indywidualnego klienta na podsta- wie jego preferencji i historii zakupów.
Zawartość witryny przy ograniczonym budżecie
Personalizacja i indywidualny marketing wymagają zaawansowa- nych technologii. Niezbędne oprogramowanie po stronie klienta i serwera może być kosztowne. Jeśli organizacja fi- Rozdział 3. Dobór zawartości witryny 97 nansująca projekt posiada odpowiedni budżet lub wewnętrzne zasoby umożliwiające skorzystanie z tej technologii, a tak- że wiadomo, że takie rozwiązania mogą przynieść wymierne korzyści (na przykład sprzedaż w sklepie internetowym po- siadającym dużą liczbę klientów), gorąco zachęcam.
Na szczęście nawet ograniczony budżet nie musi oznaczać rezy- gnacji z zawartości dopasowanej do potrzeb użytkownika. Po- łączenie trzech pozornie nie związanych ze sobą dziedzin — kreowania marki, dziennikarstwa i relacji międzyludzkich — pozwoli organizacji zlecającej projekt opracować materiały dopasowane do wymagań użytkownika i tym samym przybliży wi- trynę do spełnienia jej celów biznesowych.
Wskazałam już kilka punktów decydujących o tym, czy projekt witryny wzmocni, czy też osłabi pozytywny wizerunek repre- zentowanej przez nią firmy.
Zastanów się, jak wyglądają Twoje związki z ludźmi, którzy są w Twoim życiu ważni. Co sprawia, że te związki są po- myślne?
Napisano tysiące książek na temat relacji, lecz oto jeden ich wspólny mianownik: w pomyślnym związku każda z osób ro- bi wszystko, co możliwe, alby spełnić potrzeby i oczekiwa- nia drugiej osoby.
Zawartość witryny może wzmocnić lub osłabić związek użyt- kownika z marką reprezentowaną przez witrynę. Czy użytkow- nik jest w stanie bez szczególnego wysiłku znaleźć intere- sującą go i potrzebną mu zawartość?
Interaktywność witryny również pozwala użytkownikom natych- miastowo reagować na jej zawartość. Mogą oni wypełniać an- kiety i wyrażać opinie. Mogą wysyłać wiadomości e-mail w odpowiedzi na coś, co właśnie przeczytali, zobaczyli lub usłyszeli. Oznacza to, że projektant witryny może potrakto- wać jej użytkowników jako współtwórców zawartości.
Wiele witryn daje użytkownikom możliwość oceniania zawarto- ści lub zadawania pytań związanych z niejasnymi kwestiami, tak aby organizacja reprezentowana przez witrynę nie musia- ła tracić pieniędzy na treści nikomu niepotrzebne i zamiast nich mogła publikować treści, które będą satysfakcjonowały odbiorców. Nawet jeśli budżet nie pozwala na zainwestowanie w drogie mechanizmy personalizacji lub indywidualnego mar- ketingu, witryna może zaprosić użytkowników do wyrażenia swojej opinii na temat tego, co im się podoba, a co nie w zawartości witryny, a następnie dopasować zawartość do oczekiwań. 98 Web Design. Projektowanie atrakcyjnych stron WWW
Lecz jeśli ich ładnie poprosisz i dasz im odpowiednie na- rzędzia, użytkownicy witryny zrobią znacznie więcej.
Potraktuj użytkowników jako współtwórców witryny
Niektóre witryny wykorzystują aktualności lub artykuły te- matyczne do prowokowania dyskusji pomiędzy autorem artyku- łu, innymi ekspertami z danej dziedziny i czytelnikami. Na przykład internetowa wersja gazety The New York Times za- prasza swoich czytelników do brania udziału w dyskusjach na żywo na temat artykułów publikowanych w witrynie. Wiele innych gazet stosuje podobne techniki. Mogą one funkcjono- wać również w witrynach firmowych i korporacyjnych (rysunek 3.5).
Rysunek 3.5. Zawartość tworzona częściowo przez użytkowników. Rosnąca liczba witryn zaprasza swoich użytkowników do wyrażania opini i lub umieszczania w witrynie danych, które mogą być istotne dla innych użytkowników. Oto przykład — witryna ConsumerReview.com , na której użytkownicy wyrażają swoje opinie o sprzedawanych produktach
W rozdziale 2. zasugerowałam, by w trakcie procesu badań zespół tworzący witrynę przeanalizował publikacje, zdarze- nia i materiały dostępne w Internecie, by lepiej zrozumieć, co interesuje i porusza grupy użytkowników, do których jest kierowana witryna. Teraz chcę posunąć się dalej i rzucić ze- społowi wyzwanie, by poszukiwał sposobów projektowania za- wartości i struktury witryny tak, aby dla użytkowników sta- Rozdział 3. Dobór zawartości witryny 99
ła się jednym z tych poszukiwanych miejsc, gdzie mogą zna- leźć to, co ich naprawdę interesuje. Ludzie o podobnych zainteresowaniach uwielbiają wymieniać się poglądami. Chętnie wzajemnie sobie pomagają, przyczy- niając się do rozwoju sportów, pasji, zainteresowań i prac, które uwielbiają. Projektanci mogą poczuć tego ducha i sprawić, by witryna znalazła się w centrum i stała się nośnikiem tych rozmów, dyskusji i wzajemnej pomocy. Niestety, tego typu starania mogą skończyć się fiaskiem, jeśli projektant strony internetowej nie dysponuje odpowied- nią wiedzą na tematy, których mają dotyczyć te rozmowy. Dla- tego zachęcam Cię do przedyskutowania tego tematu z wszyst- kimi członkami zespołu i osobami podejmującymi decyzje (reprezentującymi zleceniodawcę). Udostępnij tę książkę właściwym osobom, aby mogły one przeczytać ten rozdział i kilka innych fragmentów dotyczących projektowania z myślą o użytkowniku. W sytuacjach takich jak ta rozważania związane z projektowa- niem witryny internetowej zaczynają przecinać granice po- działu kompanii na działy, poruszając obszary związane z działami sprzedaży, marketingu, promocji, komunikacji i relacji międzyludzkich. Identyfikując dotyczące zawarto- ści witryny potrzeby jej użytkowników, warto skoordynować wysiłki innych członków organizacji, którzy również mogą wnieść swój wartościowy wkład w spełnienie tych potrzeb. Innym powodem podjęcia tej dyskusji może być chęć otrzymania pomocy od ekspertów należących do danej organizacji, którzy dysponują materiałami, wiedzą i doświadczeniem. Przygotowu- jąc się do spotkania poświęconego zawartości i strukturze witryny (omawianego dalej), osoby podejmujące decyzje doty- czące w tryny rozglądają się za źródłami materiałów. Kompania może dysponować archiwum porad i technik pomagających użyt- kownikom w jak najlepszym wykorzystaniu produktów lub usług. Materiałami może też być biblioteka magazynów, broszur i in- nej literatury, która dla odwiedzających witrynę może być złotą żyłą wiedzy. Eksperci z danej dziedziny mogą też na wiele sposobów komu- nikować się z odwiedzającymi witrynę. Mogą na przykład two- rzyć listę najczęściej zadawanych pytań i odpowiedzi (FAQ — Frequently Asked Questions), która skłoni użytkowników do ponownych odwiedzin; mogą też zamieszczać w witrynie in- strukcje typu „jak to zrobić” lub artykuły prezentujące specyficzne techniki czy rozwiązania pewnych problemów. Mo- gą brać udział w forum dyskusyjnym lub prowadzić dyskusję na żywo w pokojach pogawędek. Praktycznym rozwiązaniem jest też branie udziału w dyskusjach prowadzonych w formie biu- letynu. Eksperci reprezentujący daną organizację mogą ofero- 100 Web Design. Projektowanie atrakcyjnych stron WWW
wać swoją wiedzę i doświadczenie w dyskretny sposób, aby również wśród grona użytkowników wyłonili się niezależni eksperci, którzy są gotowi podzielić się swoją wiedzą i do- świadczeniem, kontaktując się z innymi za pośrednictwem wi- tryny. W ostatnim rozdziale książki szczegółowo omówię sposoby an- gażowania użytkowników witryny w jej rozwój. Można zaprosić ich do wstąpienia do organizacji lub grupy użytkowników i poprosić o wstępną zgodę na umieszczanie dostarczanych przez nich informacji; można wreszcie zaprosić ich do wzię- cia udziału w projektowaniu witryny. Tymczasem mam nadzie- ję, że korzyści wynikające z przygotowania zawartości wi- tryny z myślą o użytkowniku oraz z zaangażowania samych użytkowników w jej planowanie i przygotowanie stają się co- raz bardziej oczywiste. Im bardziej użytkownicy zostaną zaangażowani w tworzenie witryny, tym bardziej będą chętni pomóc we wskazaniu mate- riałów trafiających w ich potrzeby. Paradoksalnie, im bar- dziej witryna jest uzależniona od użytkowników, tym chęt- niej pragną oni wnieść swój wkład — jeśli tylko trafią na właściwe pytania, zadane we właściwym czasie i we właściwy sposób. Gdy ich wkład będzie nabierał coraz większego zna- czenia, z większym prawdopodobieństwem będą stawali się lo- jalnymi klientami danej firmy, kompanii lub organizacji, promowanego produktu lub usługi reprezentowanej przez wi- trynę. Przyczynią się do budowania marki, polecając ją swo- im kolegom, przyjaciołom i członkom rodziny.
Nie zapominaj o podstawach
Myśląc o tym, czego mogą chcieć użytkownicy witryny i w ja- ki sposób powinieneś im to dostarczyć, pamiętaj, że nawet najbardziej fascynująca treść może nie być zadowalająca dla użytkowników, jeśli zlekceważysz podstawy, takie jak lo- giczna organizacja, łatwe wyświetlanie i drukowanie oraz rzetelna redakcja.
Dobra organizacja informacji Tekst prezentowany w witrynie musi być odpowiednio napisany i zredagowany, by spełniał specyficzne wymagania witryny i jej użytkowników. Niezależnie od tego, jak ładna jest wi- tryna, jak imponujące są rozwiązania interaktywne, jeśli redakcja tekstu nie zadowoli odwiedzających i nie sprawi, że będą zadowoleni z wizyty, nie zechcą oni zwiedzić wi- tryny ani użyć udostępnionych narzędzi. Rozdział 3. Dobór zawartości witryny 101
Pozwól użytkownikom używać hiperłączy, by mogli zejść na poziom szczegółowości, którego poszukują. Na przykład stro- na główna witryny może zawierać jedynie nagłówki i podna- główki artykułów, ich streszczenia oraz odnośniki do bar- dziej szczegółowych informacji. Takie rozwiązanie pozwoli użytkownikom wejść głębiej lub przejść od razu do tematu, który ich interesuje. Prezentowana treść musi być czytelna, wiarygodna i regular- nie aktualizowana. Przestarzałe informacje zmniejszają wia- rygodność witryny i szkodzą marce. Jeśli pracujesz nad przeprojektowaniem witryny, sprawdź, czy jej obecna zawartość spełnia oczekiwania użytkowników i zaadaptuj ją do nowego projektu, by spełniała w nim jak najlepiej swoją rolę.
Podziel treść witryny, aby ułatwić surfowanie Strona internetowa bardzo różni się od strony drukowanej, dlatego nie wystarczy zwykłe przeniesienie materiałów drukowanych na witrynę. Do- pilnuj, by witryna prezentowała materiały dobrze napisane i w odpo- wiedni sposób zorganizowane. Długie bloki przewijanego tekstu nie są zbyt dobrym rozwiązaniem; powinieneś podzielić treść na mniejsze por- cje (rysunek 3.6).
Rysunek 3.6. Porcje odpowiedniej wielkości. Serwuj treść witryny w porcjach odpowiednio małych, by było je łatwo strawić, a jednocześnie wystarczająco dużych, by satysfakcjonowały Podział treści witryny jest jak składanie i segregowanie dużego stosu prania. Początkowo stos prania wydaje się przytłaczający i nikt nie chce się nim zająć. Dlatego zaczynasz składać jedną rzecz po drugiej i segregować je, grupując podobne. W końcu możesz mieć pięć kupek: ręcz- niki, górne i dolne części garderoby, skarpetki i bieliznę. Każdą z tych kupek możesz dodatkowo posegregować. Na przykład górne części garderoby możesz podzielić na bezrękawniki, koszulki z krótkim rękawem i bluzy z długim rękawem. Jeśli jesteś naprawdę precyzyjny, możesz na- wet posegregować odzież pod względem materiału, grubości i koloru. Podział informacji na sekcje, podsekcje, akapity, nagłówki i podsumowa- nia pozwala odwiedzającemu odszukiwać informacje, a także wprowadza nieco przestrzeni pomiędzy poszczególne poziomy informacji. Samouczki udostępnione przez witrynę HotWired (http://hotwired.lycos.com) są znakomitym przykładem informacji po- dzielonej na sekcje i podsekcje. W tym przykładzie (rysunek 3.7), za- wartość jest podzielona na pięć części: przegląd (Overview) oraz czte- ry lekcje (Lesson 1, 2, 3, 4). 102 Web Design. Projektowanie atrakcyjnych stron WWW
Rysunek 3.7. Zawartość podzielona na sekcje. Samouczki udostępnione przez witrynę HotWired zostały z rozmysłem podzielone na sekcje, dzięki czemu odwiedzający nie czuje się przytłoczony nadmiarem informacji
Każda lekcja jest podzielona na cztery lub pięć części, a każda z nich jest prezentowana na oddzielnej stronie. Każda strona jest krót- ka — krótsza niż dwie wysokości ekranu. Część nawigacyjna po lewej stronie ekranu wskazuje kontekst i ma kon- sekwentną budowę na wszystkich stronach.
Udostępnij funkcje łatwego drukowania
Zaoferuj użytkownikom witryny możliwość wydrukowania wer- sji artykułu przygotowanej do druku, o uproszczonym forma- towaniu i grafice.
Utwórz szablon dokumentu przeznaczonego do druku dla każ- dego artykułu i użyj go do utworzenia przyjaznych dla dru- karki wersji poszczególnych artykułów. (Ktoś w zespole po- winien potrafić to zrobić. Jeśli nie znajdzie się żadna osoba z takimi umiejętnościami, warto zwerbować kogoś na czas przygotowania wersji przeznaczonych do drukowania).
Rozważ również możliwość wprowadzenia funkcji pozwalającej użytkownikowi na wysłanie artykułu do siebie lub znajomego drogą poczty elektronicznej. Jest to znakomity sposób na pozyskanie kopii artykułu i zapoznanie się z nim w wolnej chwili — odwiedzający po prostu podaje adres odbiorcy i klika przycisk. Jednocześnie jest to kolejne rozwiązanie, które daje odwiedzającym wrażenie kontroli nad tym, co ro- bią. Tym samym powoduje ich większe zaangażowanie i buduje dobrą opinię o marce. Nie zapomnij zamieścić informacji, skąd pochodzi artykuł, umieszczając na wydruku lub w wiadomości Rozdział 3. Dobór zawartości witryny 103
e-mail nazwę i adres strony. Wiadomości oznaczone marką są skuteczną formą marketingu.
Możesz wreszcie dać użytkownikom możliwość wydrukowania pięknie sformatowanego dokumentu, udostępniając jego wersję w formacie Adobe PDF. Takie rozwiązanie jest zalecane, gdy chcesz dostarczać ładnie zaprojektowane i dobrze skompono- wane dokumenty, takie jak raporty rządowe, instrukcje ob- sługi, raporty roczne i inne materiały informacyjne, które wiele zyskują przez swój elegancki skład i sposób prezenta- cji.
Zaplanuj przyszłe modyfikacje
Zaprojektowanie witryny prezentującej interaktywne treści przygotowane z myślą o użytkowniku wiąże się z kosztami, które wykraczają poza moment jej uruchomienia. Ktoś kiedyś będzie musiał zaplanować, uporządkować i zaktualizować za- wartość witryny na podstawie przyszłych wydarzeń i opinii, aby strategia dopasowania witryny do użytkownika sprawdziła się w praktyce. W przypadku stosunkowo prostych witryn fir- mowych tę odpowiedzialność może przejąć istniejący dział marketingu lub sprzedaży, być może z pomocą niezależnego redaktora lub dziennikarza, posiadającego pewne doświad- czenie w tworzeniu stron internetowych.
Większe organizacje — takie, jak kompania obsługująca duży rynek regionalny lub stanowiąca filię międzynarodowej kor- poracji — powinny zatrudnić przynajmniej jedną osobę, która będzie odpowiedzialna za zawartość witryny w trakcie jej eksploatacji. Jej praca będzie podobna do pracy redaktora nadzorującego wydawanie drukowanego magazynu. Osoba ta bę- dzie współpracowała z działem marketingu lub sprzedaży oraz z innymi działami zainteresowanymi udostępnianiem materia- łów w Internecie, przygotowując je do publikacji bądź prezen- tacji w witrynie.
Pomóż zleceniodawcy zidentyfikować potrzeby dotyczące zawartości witryny i ustalić ich priorytety
W przypadku nowego projektu witryny nadszedł czas, by zle- ceniodawca skoncentrował się na potrzebach dotyczących ma- teriałów dla witryny. W przypadku przeprojektowywania ist- niejącej witryny sprawa jest łatwiejsza — na pierwszym 104 Web Design. Projektowanie atrakcyjnych stron WWW
etapie prac zespół tworzący witrynę zdobył pewne informacje na temat tego, jaka część obecnej zawartości może zostać wykorzystana w nowym projekcie. W każdym z tych przypadków konieczne jest zorganizowanie spotkania, na którym zostaną omówione kwestie zawartości i struktury witryny.
Spotkanie dotyczące zawartości i struktury witryny
Ustal datę i porządek spotkania, na którym zostaną omówione kwestie zawartości i struktury witryny. Poproś o stawienie się na nim wszystkie osoby podejmujące decyzje w sprawach witryny, wyznaczone przez zleceniodawcę. Kilka dni przed spotkaniem poproś je o poczynienie pewnych przygotowań. Oto one: ♦ Wygenerowanie listy życzeń opisującej wszystkie treści, jakie ich zdaniem powinny znaleźć się w witrynie. ♦ Jeśli zlecenie dotyczy przeprojektowania istniejącej witryny, przygotowanie „spisu inwentarza” — listy całej zawartości obecnej witryny. Powinny się na niej znaleźć wszelkie treści dostępne online, a także wszelkie materiały, które mogą występować w innych formatach (cyfrowych i tradycyjnych) i w innych miejscach (online i offline). ♦ Zasugerowanie źródeł nowych materiałów. ♦ Zwrócenie szczególnej uwagi na treści związane ze specyficzną polityką marketingową, programem sprzedaży i dystrybucji oraz innymi działaniami mającymi na celu wzmocnienie marki (omówionymi we wcześniejszej części tego rozdziału i dalszej części książki).
Poproś osoby biorące udział w spotkaniu o przyniesienie swoich list życzeń i sugestii dotyczących źródeł materiałów (a także spisów zawartości). Projektant informacji, twórca tekstów, projektant oprawy graficznej i producent witryny powinni wziąć udział w tym spotkaniu wraz z osobami repre- zentującymi zleceniodawcę. Mogą w nim wziąć udział również inżynierowie i programiści, choć nie jest to konieczne. Ta- kie spotkanie zwykle trwa około 2 godzin.
Lista sprawunków
Na spotkanie przygotuj następujące pomoce:
♦ karteczki samoprzylepne na krótkie notatki, Rozdział 3. Dobór zawartości witryny 105
♦ tablicę i gąbkę,
♦ pisaki do pisania na tablicy (w kilku kolorach),
♦ notatnik,
♦ komputer połączony z Internetem.
Otwarcie spotkania
Rozpocznij spotkanie od zebrania wszystkich list życzeń do- tyczących zawartości.
Każdemu z reprezentantów zleceniodawcy daj bloczek karte- czek samoprzylepnych i poproś, aby zapisali każde z życzeń na osobnej karteczce. Zbierz je i po kolei przyklejaj na tablicy, grupując i łącząc podobne.
Podczas przyklejania każdej karteczki poproś jej autora o omówienie życzenia, abyś zrozumiał bez żadnych wątpliwości, jak wyobraża on sobie dany element. Na przykład, czy histo- ryjki będą zawierały obrazki? Jak często będą aktualizowa- ne? Czy będą dostępne w archiwum witryny?
Skoncentruj się na różnych typach materiałów. Należą do nich teksty, fotografie i ilustracje. (W późniejszym terminie projektant oprawy graficznej przeprowadzi szczegółowe spo- tkania, lecz już teraz można udzielić reprezentantom zlece- niodawcy pewnych wskazówek dotyczących objętości i typu ilustracji, które będą przygotowywali. Powinny to być ogól- ne wskazówki bazujące na wcześniejszych badaniach i scena- riuszach działań użytkowników).
Oto inne typy danych, które warto wziąć pod uwagę: ♦ wersje stron internetowych przeznaczone dla drukarki, ♦ dokumenty w formacie Adobe PDF przygotowane do pobrania, ♦ interaktywne elementy JavaScript, ♦ aplety JavaScript, ♦ animacja: animowane pliki GIF, Macromedia Flash i Shockwave oraz Adobe LiveMotion, ♦ strumieniowe klipy wideo: RealPlayer (.ram), Apple QuickTime, Windows Media (.mov), ♦ strumieniowe klipy dźwiękowe: RealAudio, QuickTime, Windows Media Player, MP3, AIFF, WAV. 106 Web Design. Projektowanie atrakcyjnych stron WWW
Wyjaśnij zleceniodawcy, jak bardzo pisanie tekstu na potrzeby strony internetowej różni się od pisania tekstu przeznaczonego do druku. Być może twórca tekstów należący do zespołu mógłby wykonać krótką prezentację. Jeśli w skład zespołu nie wchodzi osoba specjalizująca się w doborze materiałów, zasugeruj wcielenie takiej osoby. Warto również zastanowić się nad zwerbowaniem ekspertów dziedzin, o których traktuje witryna. Przedyskutuj możliwości zaadaptowania zawartości obecnej witryny, aby jak najbardziej ułatwić użytkownikom pracę i jednocześnie przyspieszyć produkcję witryny oraz przyszłe modyfikacje.
Po zidentyfikowaniu potrzebnych typów materiałów przedysku- tuj, dlaczego witryna potrzebuje każdego z głównych typów materiałów i elementów. Zwróć uwagę na to, w jaki sposób zasugerowane elementy zawartości będą spełniały podstawowe założenia biznesowe witryny. Następnie wybierz te typy mate- riałów, które najlepiej spełniają wspomniane założenia.
Po osiągnięciu porozumienia na temat typów materiałów i głównych elementów treści witryny odnieś te ustalenia do realiów produkcji i budżetu.
Na przykład zleceniodawca może mieć nadzieję na umieszczenie w witrynie elektronicznego katalogu prezentującego 100 pro- duktów. Można to zrobić w przyjętym terminie i z przyjętym budżetem, jeśli każdy produkt będzie ilustrowany tylko jed- ną fotografią. Jeśli jednak zleceniodawca zażyczy sobie do- datkowych fotografii ze zbliżeniami, z widokiem od tyłu oraz z charakterystykami łączącymi poszczególne produkty (na przykład dopasowującymi poszczególne części garderoby, takie jak sukienka i kapelusz), w chwili uruchomienia witry- ny będzie możliwe umieszczenie w katalogu jedynie 50 pro- duktów. Projektant szaty graficznej powinien w takiej sytu- acji określić wymagania techniczne i budżetowe związane z utworzeniem ilustracji do strony każdego produktu. Rozdział 3. Dobór zawartości witryny 107
Nie zapomnij o następujących ważnych stronach
♦ Nowości Na tej stronie są wymienione nowe elementy dodane do witryny. Dział marketingu w organizacji lub firmie będącej właścicielem witryny może pomagać w generowaniu tej listy, co pomoże w promowaniu nowej witryny.
♦ Kontakt Ta strona zawiera informacje adresowe, numery telefonów, faksów, mapy, wskazówki dotyczące dojazdu, parkowania i adresy e-mail właściciela witryny. Jeśli musisz przygotować kilka wersji witryny dla różnych rejonów świata, daj poszczególnym filiom czas na przygotowanie i dostarczenie niezbędnych danych adresowych i numerów telefonów.
♦ Strony pomocy i lista najczęściej zadawanych pytań i odpowiedzi (FAQ). Te strony należy regularnie aktualizować, gdy zmienia się zawartość i możliwości witryny.
♦ Komunikaty błędów. Te strony (o szacie graficznej spójnej z pozostałą częścią witryny) komunikują błędy i wyjaśniają ich przyczyny, sugerują alternatywne rozwiązania i oferują hiperłącze do strony głównej i innych głównych części witryny (rysunek 3.8).
Rysunek 3.8. Strona z komunikatem błędu. Spraw, by komunikaty o błędach były zrozumiałe i uprzejme. Wraz z nimi wyświetl wyjaśnienia i sugestie dotyczące alternatywnych rozwiązań i sposobów dotarcia do informacji interesującej użytkownika. Prezentowana tu strona pochodzi z witryny ConsumerReview.com. Zawiera ona uprzejmy komunikat i udostępnia kilka alternatywnych hiperłączy
♦ Strony potwierdzeń. Te strony (o szacie graficznej spójnej z pozostałą częścią witryny) są dla użytkownika potwierdzeniem pomyślnego wykonania zleconej przez niego operacji, przesłania danych czy ukończenia transakcji. Dzięki nim użytkownik jest pewien, że witryna poprawnie zareagowała na jego działanie. Pamiętaj, by zawsze w takiej sytuacji podziękować użytkownikowi za skorzystanie z danego mechanizmu, przesłanie danych i wyjaśnienie, co się z nimi dalej stanie. Oto przykład: „Dziękujemy za przesłane zamówienie. 108 Web Design. Projektowanie atrakcyjnych stron WWW
W ciągu kilku minut otrzymasz potwierdzenie zamówienia pocztą elektroniczną. W razie jakichkolwiek wątpliwości dotyczących zamówienia wyślij wiadomość na adres
Tematy, które należy omówić na spotkaniu
Grupowanie materiałów
Po umieszczeniu na tablicy wszystkich życzeń dotyczących zawartości witryny poproś reprezentantów zleceniodawcy o pomoc w ułożeniu ich w pięć do dziewięciu grup powiązanych ze sobą elementów. Utwórz te grupy, przemieszczając do nich samoprzylepne karteczki. Rozdział 3. Dobór zawartości witryny 109
Nadawanie nazw grupom materiałów
Po zgrupowaniu wszystkich elementów poproś reprezentantów zleceniodawcy o nadanie nazwy każdej z grup. Zapisz odpo- wiedzi na tablicy obok odpowiednich zestawów karteczek. Rekomenduj nazwy, które są trafne, jasne, opisowe i zrozumiałe.
Nadawanie priorytetów grupom materiałów
Teraz poproś zespół o ocenę ważności każdej z grup materia- łów. Przy najważniejszej grupie postaw liczbę 1, przy na- stępnej 2 itd.
Następnie poproś uczestników spotkania o ustalenie prioryte- tów poszczególnych elementów w każdej kategorii i ustal, które z nich będą zawarte w uruchamianej wersji witryny, a które zostaną wdrożone na późniejszym etapie, już po jej uruchomieniu. Przy każdym elemencie poproś osobę, która go zaproponowała, by wyjaśniła, jak ważny jest dla niej z punktu widzenia założeń biznesowych.
Odnieś się do wyników badań i scenariuszy działań użytkow- ników, aby podpowiedzieć, które typy materiałów są najbar- dziej istotne.
Poproś uczestników spotkania o przemyślenie kwestii związa- nych z zawartością witryny w kontekście strategii marketin- gowej zleceniodawcy.
Spis inwentarza
Poproś zleceniodawcę o wskazanie, które z wymienionych mate- riałów już istnieją, a które muszą dopiero zostać przygoto- wane. Aby niczego nie pominąć, posłuż się listą stanowiącą „spis inwentarza” zawartości witryny (rysunek 3.9).
Rysunek 3.9. Kategoria: centrum informacji dla nauczycieli Spis inwentarza. Priorytet Proponowana zawartość Gotowe Wymagają Przygotuj listę przygotowania wszystkich Pomoc w planowaniu projektu X materiałów 3 gotowych 2 Materiały dla nauczycieli X i wymagających 1 Profesjonalny rozwój X przygotowania 4 Ankieta X 110 Web Design. Projektowanie atrakcyjnych stron WWW
Strategia przyszłych zmian zawartości
Spójrz na zawartość witryny z przyszłościowej perspektywy i zidentyfikuj te obszary, w których zawartość będzie się rozrastała lub zmieniała. Zaplanuj zmiany przynajmniej na jeden rok w przód, w idealnym przypadku nawet na trzy lata w przód. Weź pod uwagę długoterminowe strategie sprzedaży i marketingu przyjęte przez zleceniodawcę, które powinny znaleźć odzwierciedlenie w zawartości witryny.
Pomyśl o tym, kiedy i w jaki sposób będzie się zmieniała zawartość. Jak często będą dodawane nowe sekcje i treści? Czy nowa treść będzie kierowana do nowych czy do istnieją- cych grup użytkowników? Jak często będzie aktualizowana? Jaka jest strategia wdrażania nowej zawartości po urucho- mieniu witryny? Czy istniejąca zawartość będzie archiwizo- wana?
Mapa zawartości
Przygotuj mapę zawartości, na której w trakcie produkcji będziesz przypisywał poszczególne materiały konkretnym stronom witryny. Nadaj elementom mapy nazwy i numery zgod- nie ze schematem (omówionym w rozdziale 4.) i takie same nazwy nadaj poszczególnym plikom, aby ułatwić sobie porząd- kowanie i wyszukiwanie materiałów.
Stosowane formaty
Zadbaj o to, by każdy z członków zespołu dokładnie wie- dział, jakie formaty plików będą stosowane w poszczegól- nych typach materiałów: w tekście (format dokumentów Micro- soft Word lub kod HTML), w plikach obrazków (formaty GIF, JPEG, PICT), w plikach dźwiękowych (AIFF, WAV, MP3), w kli- pach wideo (QuickTime, etc.), w animacjach (Flash, MOV, animowane pliki GIF). Jeśli te elementy nie zostaną do- starczone w odpowiednich formatach, zespół tworzący witrynę będzie musiał poświęcić dodatkowy czas na ich konwersję.
Podsumowanie spotkania
Wyjaśnij wszystkim, że ustalenia poczynione na tym spotkaniu pomogą w wygenerowaniu tabeli zawartości (rysunek 3.10). Ta tabela będzie podstawą harmonogramu prac nad materiałami, który zostanie opracowany przez producenta witryny. Z kolei Rozdział 3. Dobór zawartości witryny 111
harmonogram będzie zawierał daty dostarczenia elementów za- stępczych (na przykład tekstu lub obrazków, które będą je- dynie wyznaczały miejsce na stronie, zanim ostateczna wersja materiałów nie zostanie dostarczona), a także finalnych elementów, gotowych do umieszczenia w witrynie.
Kto Co Gdzie Kiedy Dlacze- Cel Właści- go ciel
Elementy witryny Marketing Ekspert z danej dziedziny Obsługa witryny Dynamiczny czy statyczny Nowy czy adaptowany Personalizowany lub modyfikowalny Komunikacja jedno- czy dwustronna Adres URL Tymczasowy czy stały Częstotliwość aktualizacji Wspomaga markę Wspomaga model biznesowy Wszystkie kraje Kraj docelowy Docelowa grupa użytkowników Faza Osoba odpowiedzialna Strona główna Informacja PP SNPDproduct.html S tygodniowo D D X X 1 AP o produktach Artykuł D P T D N P J feature.html T dziennie S D USA 2 JR Porada dnia T D P D N M D tips.html T dziennie S S Wlk.Bryt. 1 EB Nowości T D P D N M J news.html T dziennie D D X 1 ES Pomoc FAQ (lista pytań PDTSNMJfaq.html S kwartalnieM M USA 1 AP i odpowiedzi) Samouczek: PDTSAMJtroubleshooting.html S kwartalnieS S X 1 AP rozwiązywanie problemów Samouczek: DPTSAMJgettingstarted.html S kwartalnieS S w 1 JR pierwsze kroki Klucz Kto: źródło materiału (P — podstawowe, Co: cechy materiału Kiedy: jak często aktualizowany D — drugorzędne, T — trzeciorzędne) Gdzie: położenie Dlaczego: D — duży, S — średni, w witrynie M — mały (wpływ na markę lub model biznesowy)
Rysunek 3.10. Tabela zawartości witryny. Macierz zawartości pozwala śledzić los wszystkich materiałów pochodzących z różnych źródeł i kierowanych do różnych grup użytkowników. Zawiera ona priorytet każdego elementu, informacje o tym, czy jest to element statyczny czy dynamiczny, częstotliwość jego aktualizacji, jego znaczenie dla marki i modelu biznesowego (małe, średnie bądź duże), docelowy kraj oraz identyfikator osoby odpowiedzialnej za jego przygotowanie Wyjaśnij zleceniodawcy, że opóźnienia w dostarczaniu materiałów dla witryny są przyczyną największych opóźnień w uruchomieniu witryny. Data uruchomienia zostanie przesunięta o tyle samo dni, o ile opóźnione będą dostarczane materiały. 112 Web Design. Projektowanie atrakcyjnych stron WWW
Dobór struktury witryny
Istnieje wiele różnych sposobów grupowania zawartości, które nadają kształt całej witrynie. W tym podrozdziale zajmiemy się doborem struktury, która najlepiej spełni oczekiwania odwiedzających (rysunek 3.11).
Rysunek 3.11. Dobierz odpowiednią strukturę. Spośród wielu możliwości dotyczących struktury witryny i jej zawartości wybierz tę, która jest najbardziej sensowna z punktu widzenia użytkowni ka
Cztery modele organizacji witryny
Przyjrzyjmy się czterem podstawowym rozwiązaniom dotyczącym organizacji stron witryny. Oto modele, które omówimy: li- niowy, hierarchiczny, równoległy i swobodny.
Model liniowy
Struktura liniowa sprawdza się w przypadku procedur prezen- towanych krok po kroku, które powinny być oglądane w okre- ślonej kolejności. Przykładem może być proces potwierdza- nia zamówienia w sklepie internetowym lub aplikacja edukacyjna, w której studenci muszą wykonać ćwiczenia lub odpowiedzieć na pytania testowe w określonej kolejności (rysunek 3.12).
Rysunek 3.12. Liniowa struktura witryny. Model liniowy sprawdza się wszędzie tam, gdzie poszczególne strony mają być oglądane w określonej kolejności
Pamiętnik podróżnika Eda Schweizera w witrynie Decibel Dra- gon (www.decibeldragon Rozdział 3. Dobór zawartości witryny 113
.com) ma strukturę liniową i prezentuje fotografie z wypra- wy jako kolejne slajdy ułożone jeden za drugim. Użytkownik przechodzi do następnej lub poprzedniej fotografii, klika- jąc przycisk Next lub Previous (rysunek 3.13). Przycisk Previous (poprzednia) jest umieszczony po prawej stronie przycisku Next (następna) ze względu na Egipcjan, którzy czytają od prawej do lewej.
Rysunek 3.13. Liniowa struktura witryny. Pokaz slajdów w witrynie Decibel Dragon ma strukturę liniową. Użytkownicy przechodzą pomiędzy stronami w określonej kolejności
Model hierarchiczny
Struktura hierarchiczna sprawdza się w przypadku witryn, których celem jest umożliwianie schodzenia na coraz bar- dziej szczegółowe poziomy informacji, jak w encyklopediach lub leksykonach (rysunek 3.14).
Rysunek 3.14. Hierarchiczna struktura witryny. Ten model umożliwia schodzenie na kolejne poziomy szczegółowości informacji
Witryna pokazana na rysunku 3.15 jest klasyfikacją delfi- nów oceanicznych, wielorybów i delfinów rzecznych. Gdy użytkownik kliknie przycisk kategorii Oceanic Dolphins, zo- 114 Web Design. Projektowanie atrakcyjnych stron WWW
stanie przeniesiony na stronę prezentującą dwanaście rodza- jów Rysunek 3.15. Witryna o strukturze hierarchicznej. Hiperłącza w tej witrynie prowadzą do coraz węższych grup delfinów, aż dotrzesz do interesującego Cię gatunku
delfinów oceanicznych (w drzewie systematyki). Kliknięcie rodzaju powoduje wyświetlenie należących do niego gatunków. Na każdym poziomie informacja staje się bardziej szczegóło- wa.
Model równoległy
Model równoległy pozwala zorganizować witrynę, w której prezentowane są na przykład poszczególne linie produktów danej firmy, przy czym każda z linii jest ułożona zgodnie z tym samym szablonem (rysunki 3.16 i 3.17). Rozdział 3. Dobór zawartości witryny 115
Rysunek 3.16. Równoległa struktura witryny. Ten model sprawdza się w sytuacji, gdy trzeba zaprezentować wiele różnych elementów opisywanych przez podobne charakterystyki
Rysunek 3.17. Równoległa struktura witryny. Witryna Decibel Dragon stosuje model równoległy, prezentując fotografie miast San Francisco i Bejrut. Indeks i strony z fotografiami są zbudowane w oparciu o ten sam schemat, co pozwala przewidzieć działanie poszczególnych elementów nawigacyjnych
Model swobodny
Model swobodny pozwala zorganizować witrynę poruszającą kilka tematów o wspólnym wątku lub punkcie odniesienia (ry- sunek 3.18). Na przykład w witrynie podróżniczej sekcja po- święcona Egiptowi mogłaby zawierać strony dotyczące histo- rii, kuchni, kultury, muzyki, atrakcji turystycznych, pogody itp. Wszystkie te tematy są istotne dla podróżników, jednak nie sposób ułożyć ich w strukturę hierarchiczną, ani w se- 116 Web Design. Projektowanie atrakcyjnych stron WWW
kwencję liniową, więc najlepszym rozwiązaniem jest zastosowa- nie struktury swobodnej.
Rysunek 3.18. Struktura swobodna witryny. Ten model pozwala zorganizować kilka swobodnie powiązanych ze sobą tematów
Witryna The Plumb Design Visual Thesaurus (www.visualthesaurus.com) prezentuje swobodny tok myślowy. Odwiedzający widzi słowa, które przesuwają się w kierunku środka ekranu, a po kliknięciu wokół nich radialnie rozchodzą się słowa pokrewne (rysunek 3.19). Interfejs ten jest przy- kładem struktury swobodnej, nieustannie dopasowującej się do działań użytkownika poprzez wyśrodkowanie każdej nowo wybranej myśli.
Rysunek 3.19. Struktura swobodna witryny. Witryna The Plumb Design Visual Thesaurus o strukturze swobodnej umożliwia wybór pokrewnych słów i odnalezienie tego, które interesuje użytkownika
Dziewięć schematów organizacji zawartości witryny
Na początku książki, w rozdziale „Podstawy projektowania interakcji z myślą o użytkowniku”, omówiłam sposób myśle- nia użytkowników Internetu i wskazałam, jak model konceptu- alny pomaga odwiedzającym opanować strukturę i funkcje wi- tryny. Przyjrzyjmy się dziewięciu różnym sposobom organizacji zawartości witryny, ułatwiającym jej zrozumie- nie: alfabetycznie, chronologicznie, według położenia geo- graficznego, według cechy, według kategorii, według zadań, według grup użytkowników, hierarchicznie i według metafory.
Aby wyjaśnić reguły stosowania każdego z tych schematów, pożyczę pomysł od Richarda Saula Wurmana, który zaprezento- Rozdział 3. Dobór zawartości witryny 117
wał kiedyś przykład różnych możliwości ułożenia kapeluszy na stojaku na kapelusze (Richard Saul Wurman, „Hats”, magazyn Design Quarterly 1989 roku, s. 145).
Alfabetycznie
Alfabetyczne ułożenie elementów ułatwia wyszukanie określo- nego elementu, jeśli znamy jego nazwę lub tytuł. Kolejność alfabetyczna może też być uzupełnieniem innego schematu or- ganizacji.
Na przykład, gdy znamy nazwy producentów kapeluszy, możemy je ułożyć w takiej kolejności: Bowler Cap Fedora
Witryna Zagat (www.zagat.com) prezentuje listę restauracji, których nazwy są ułożone alfabetycznie (rysunek 3.20).
Rysunek 3.20. Alfabetyczny schemat organizacji. Czasem zwykłe abecadło jest najlepszym narzędziem organizacji zawartości witryny, szczególnie w przypadku, gdy użytkownik zna nazwy elementów, których poszukuje 118 Web Design. Projektowanie atrakcyjnych stron WWW
Chronologicznie
Przykładami zastosowań dla chronologicznego schematu orga- nizacji mogą być życiorysy, listwy czasowe historii czy ar- chiwa (rysunek 3.21).
Portier przyjmujący gości mógłby ułożyć kapelusze zgodnie z czasem przybycia poszczególnych gości: 13:01 13:05 13:15
Według położenia geograficznego
Schemat organizacji zawartości oparty na położeniu geogra- ficznym może być stosowany w listach oferowanych posad, lo- kalnych aktualnościach czy prognozach pogody (rysunek 3.22). Rysunek 3.21. Chronologiczny schemat organizacji. Witryna ConsumerReview.com prezentuje artykuły prasowe ułożone chronologicznie, od najnowszego do najstarszego Rozdział 3. Dobór zawartości witryny 119
Rysunek 3.22. Organizacja według położenia geograficznego. Witryna Gymboree (www.gymboree.com) prezentuje oferty posad posegregowane według położenia geograficznego
Nasze kapelusze moglibyśmy ułożyć według miejsca ich wyko- nania: Afryka Holandia Japonia
Według cechy
Piwa można ułożyć od najciemniejszego do najjaśniejszego, zaś sosy od najbardziej łagodnego do najbardziej pikantne- go.
Nakrycia głowy można ułożyć według ich wielkości — od naj- mniejszego do największego: Beret Czapka z daszkiem Kapelusz kowbojski
Można je też ułożyć według ceny — od najtańszego do naj- droższego: 120 Web Design. Projektowanie atrakcyjnych stron WWW
10 zł 15 zł 40 zł
Wreszcie, można je ułożyć według stopnia twardości: Czapka narciarska Czapka z daszkiem Cylinder
Witryna Peapod (www.peapod.com), zajmująca się sprzedażą i dostawami żywności, posiada strukturę umożliwiającą użyt- kownikom wyświetlenie elementów ułożonych według ceny, liczby kalorii, zawartości środków konserwujących itp. (rysunek 3.23).
Według kategorii
Poszczególne elementy można posegregować w kategorie, iden- tyfikowane przez wyróżniającą je właściwość (rysunek 3.24). Na przykład książka telefoniczna jest uporządkowana według kategorii, dzięki czemu łatwo można znaleźć numer telefo- niczny lekarza, nawet jeśli nie zna się jego nazwiska. Rysunek 3.23. Organizacja według wybranej cechy. Ta sekcja witryny Peapod pozwala użytkownikom uporządkować elementy według wielkości opakowania, ceny za jednostkową objętość i ceny sumarycznej
Rysunek 3.24. Organizacja według kategorii. Witryna Zagat umożliwia wyszukanie restauracji według sąsiedztwa, serwowanej kuchni bądź alfabetycznie w obrębie danego miasta Rozdział 3. Dobór zawartości witryny 121
Kapelusze można uporządkować według kategorii lub wyróżnia- jących cech: Kapelusze z piórkiem Kapelusze ze wstążką Kapelusze stylowe
Według zadań
Metafora pulpitu w komputerze jest inspirowana przez czynności biurowe wykonywane na biurku lub w jego pobliżu, takie jak pisanie, porządkowanie, segregowanie czy wyrzu- canie dokumentów. Z kolei proces zamawiania produktów w sklepie internetowym naśladuje rzeczywiste czynności wyko- nywane w trakcie zakupów w fizycznie istniejącym sklepie.
Witryna GM BuyPower (www.gmbuypower.com) wykorzystuje sche- mat organizacji według zadań (rysunek 3.25). Bazuje on na zadaniach związanych z poszukiwaniem, porównywaniem, spraw- dzaniem i kupowaniem samochodu.
Według grup użytkowników
Ten schemat dzieli funkcje i sekcje witryny według grup użytkowników, które mogą być nimi zainteresowane (rysunek 3.26). Rysunek 3.25. Organizacja według zadań. Witryna GM BuyPower dzieli proces zakupów samochodu na poszczególne zadania
Rysunek 3.26. Organizacja według grup użytkowników. Witryna Cornell University (www.cornell.edu) jest podzielona na sekcje przeznaczone dla różnych grup użytkowników, w tym studentów, potencjalnych studentów, 122 Web Design. Projektowanie atrakcyjnych stron WWW absolwentów i fanów drużyny sportowej
Hierarchicznie
Zawartość witryny może też być uporządkowana według hierar- chii informacji. Struktura taka może być wąska i głęboka, czyli składać się z zaledwie kilku sekcji oferujących wiele stron ze szczegółami.
Struktura informacji może też być szeroka i płytka, z wie- loma sekcjami składającymi się z zaledwie kilku stron każ- da (rysunek 3.27). Taką strukturę można łatwo rozbudowy- wać, dodając strony do poszczególnych sekcji.
Rysunek 3.27. Organizacja hierarchiczna. Witryna MPM3.net posiada szeroką, płytką, hierarchiczną strukturę informacji, podzieloną na cztery sekcje. Można ją łatwo rozbudować, dodając strony do poszczególnych sekcji
Pamiętaj, że zaplanowanie rozbudowy witryny już w trakcie jej projektowania może na dłuższą metę zaoszczędzić czas i pieniądze.
Według metafory
Metafory sprawiają, że witryna, która jest dla użytkownika zupełnie nowa, jest dla niego zrozumiała, ponieważ odnosi się do pojęć lub abstrakcji, które już zna.
Witryny korzystają z trzech podstawowych typów metafor. Me- tafory organizacyjne polegają na podziale zawartości na ka- tegorie, metafory funkcjonalne wiążą się z wykonywanymi za- daniami, natomiast metafory wizualne dotyczą wszystkiego tego, co użytkownik widzi. Rozdział 3. Dobór zawartości witryny 123
Metafory organizacyjne
Większość sklepów z artykułami spożywczymi dzieli żywność na takie same kategorie, czyli stosuje taki sam system or- ganizacji. Jogurt i ser zawsze znajdziesz w dziale nabia- łu, czosnek w dziale warzywnym, zaś drożdżówkę w dziale wy- pieków.
Podczas tworzenia witryny Peapod zastosowano metaforę orga- nizacyjną i model konceptualny sklepu spożywczego, naśladu- jąc go w postaci elektronicznej. Kategorie i nazwy działów są takie same, jak w rzeczywistym sklepie spożywczym (ry- sunek 3.28).
Rysunek 3.28. Metafory organizacyjne. Witryna Peapod naśladuje rzeczywisty sklep spożywczy
Metafory funkcjonalne
Gdy chcesz znaleźć książkę w fizycznie istniejącej bibliote- ce, możesz przeszukać katalog, przejrzeć zawartość półek lub poprosić o pomoc bibliotekarza. Witryny internetowe będące elektronicznymi bibliotekami również oferują użytkownikom te opcje.
Witryna biblioteki Los Angeles Public Library (www.lapl.org) pozwala przeszukać katalog według słowa kluczowego, autora, tematu, tytułu lub numeru porządkowego (rysunek 3.29). Ponadto pozwala uściślić poszukiwania przez podanie formatu (nagranie dźwiękowe, klip wideo, mapa i in- ne) oraz języka. 124 Web Design. Projektowanie atrakcyjnych stron WWW
Rysunek 3.29. Metafory funkcjonalne. Witryna biblioteka Los Angeles Public Library funkcjonuje w podobny sposób, jak tradycyjna biblioteka — pozwala stosować te same metody poszukiwania, a nawet poprosić bibliotekarza o pomoc
Użytkownicy mogą poprosić o pomoc bibliotekarza dostępnego online, sprawdzić stan swojej karty bibliotecznej i przesu- nąć termin oddania książki.
Metafory wizualne
Internetowa książka telefoniczna z adresami firm i numerami ich telefonów jest koloru żółtego, dzięki czemu tworzy sko- jarzenie z żółtymi stronami fizycznie istniejącej książki telefonicznej. W witrynie stanowiącej internetowy sklep spo- żywczy narzędzia nawigacji wyglądają jak brązowa papierowa torba pełna zakupów, zaś elementy w koszyku są wyświetlane w dziurkowanym notesiku podobnym do tych, które są tak chęt- nie używane przez gospodynie domowe do robienia listy spra- wunków.
Przed przeprojektowaniem witryna Encyclopedia (www.encyclopedia.com) korzystała z dosłownej wizualnej me- tafory encyklopedii. Użytkownicy mogli nawigować w encyklo- pedii, klikając obrazki tomów na półce, zaś poszczególne me- nu wyglądały jak strona indeksowa książki (rysunek 3.30). Rozdział 3. Dobór zawartości witryny 125
Rysunek 3.30. Metafory wizualne. Oto przykład witryny, w którym zastosowanie bezpośredniej metafory wizualnej okazało się błędem — nie pomaga ona, lecz przeszkadza w korzystaniu z internetowej encyklopedii. Obrazek przedstawiający tomy encyklopedii na półce nie jest tak czytelny, jak łącza z poszczególnymi literkami, zajmujące mniej miejsca i szybciej pojawiające się na ekranie (pokazane na rysunku 3.31)
Niestety, takie rozwiązanie okazało się błędem. Właściciel witryny poprosił dodanie nowej funkcji — mechanizmu automa- tycznego wyszukiwania — a takiego rozwiązania nie ma w pa- pierowych encyklopediach. Jak w takim wypadku przedstawić mechanizm wyszukiwania, skoro przeczy on zastosowanej meta- forze? Wobec braku innego wyjścia przeprojektowano całą wi- trynę Encyclopedia (rysunek 3.31).
Jak zwykle, projektanci muszą przeanalizować i przetestować metafory organizacyjne z potencjalnymi użytkownikami. Je- śli użytkownicy nie będą w stanie zrozumieć metafory za- stosowanej w witrynie, będzie ona bezużyteczna. 126 Web Design. Projektowanie atrakcyjnych stron WWW
Rysunek 3.31. Przeprojektowana witryna Encyclopedia. Nowy projekt wzmacnia pozytywne postrzeganie marki tej encyklopedii i minimalizuje liczbę odnośników do liter alfabetu, które w poprzedniej wersji wypełniały cały ekran. Wygospodarowane miejsce na ekranie służy do prezentacji wielu funkcji witryny, w tym przydatnego mechanizmu wyszukiwania i dziennych aktualizacji
Tworzenie i testowanie spisu treści witryny
Rozpocznij od opracowania spisu treści witryny, a następnie przetestuj go, by sprawdzić, czy zawiera wszystkie elemen- ty, które będą satysfakcjonowały użytkowników oraz czy re- prezentuje prawidłową strukturę zawartości.
Tworzenie spisu treści
1. Ustal, w jaki sposób zorganizujesz zawartość (utwórz szkic). Rozpocznij od pięciu do dziewięciu kategorii wygenerowanych na spotkaniu poświęconym zawartości i strukturze witryny. Wymień elementy w każdej z kategorii Rozdział 3. Dobór zawartości witryny 127
zgodnie z ich priorytetem (zgodnie z tabelą zawartości witryny). 2. Przeanalizuj dostępne schematy organizacyjne (opisane wcześniej) i wybierz taki, który najlepiej spełnia założenia całej witryny i każdej z jej sekcji. Bazując na modelach użytkowników i scenariuszy ich działań oraz na informacjach o tym, które elementy istniejącej witryny sprawdzają się, a które nie (jeśli pracujesz nad przeprojektowaniem witryny), postaraj się przewidzieć intuicyjne podejście użytkowników i, jeśli to konieczne, zastosuj różne schematy w każdej sekcji o raz w witrynie jako całości. ♦ Czy któreś kategorie powinny zostać rozdzielone lub połączone? ♦ Czy jakieś materiały powinny zostać zgrupowane w inny sposób, niż są obecnie? ♦ Czy należy zmienić priorytety niektórych materiałów (na przykład, czy któraś z podstron nie powinna się czasem stać stroną główną)? Pamiętaj, że witryny internetowe mogą korzystać z różnych schematów i ich kombinacji, w zależności od przeznaczenia poszczególnych sekcji. Witryna Peapod korzysta z kilku różnych metafor (rysunek 3.32). Metafora organizacyjna pozwala odwiedzającym robić zakupy w taki sam sposób, jak w rzeczywistym sklepie spożywczym. Na przykład, gdy odwiedzający będzie chciał kupić szarlotkę, bez większych wątpliwości powinien kliknąć ikonę Bakeshop (dział wypieków), następnie Desserts (desery) i wreszcie Pies (ciasta). Schemat organizacyjny oparty na cechach elementów pozwoli odwiedzającym wyświetlić ciasta według wielkości, ceny, zawartości tłuszczu, zawartości cukru, liczby kalorii bądź innych cech. Dla twórców witryny Peapod było jasne, że wielu klientów czyta na pudełkach produktów etykiety z informacją o zawartości tłuszczu i cukru. 3. Wskaż najważniejsze kategorie. Które z kategorii zawierają najważniejsze materiały, o najwyższym priorytecie? Te kategorie i ich nazwy uformują główne obszary witryny, które później przekształcą się w globalne narzędzia nawigacji. 4. Wskaż kategorie o mniejszej ważności. 128 Web Design. Projektowanie atrakcyjnych stron WWW
Czy projekt zawiera kategorie, w których znajduje się pomoc i wsparcie techniczne oraz informacje o sposobie użytkowania witryny? Te kategorie staną się drugą warstwą wsparcia i pomocy w witrynie. Ich nazwy uformują i będą reprezentowały funkcje pomocy technicznej i nawigację do informacji administracyjnych witryny. Pamiętaj, by zamieścić w witrynie dodatkowe informacje na temat wsparcia, takie jak informacje kontaktowe i strony z komunikatami błędów.
Rysunek 3.32. Metafory zastosowane w witrynie Peapod. Witryna internetowa może korzystać z kilku różnych metafor i ich kombinacji, w zależności od przeznaczenia poszczególnych sekcji. W tym przypadku metafory organizacyjne ułatwiają odwiedzającym wybieranie produktów spożywczych. Na przykład szarlotkę użytkownik znajdzie klikając ikony Bakeshop (dział wypieków), następnie Desserts (desery) i wreszcie Pies (ciasta). Ułożenie produktów według wybranej cechy pozwala użytkownikom przeanalizować takie ich właściwości, jak wielkość, cena, zawartość tłuszczu, zawartość cukru, kaloryczność i inne Rozdział 3. Dobór zawartości witryny 129
5. Opracuj strukturę relacji pomiędzy elementami zawartości witryny. Wewnątrz każdej grupy naszkicuj rozgałęzioną hierarchię, określając relacje pomiędzy poszczególnymi elementami. Ta hierarchia powinna przechodzić od ogólnych tematów do bardziej szczegółowych i specjalistycznych. Użyj jednego bądź kilku schematów organizacyjnych, które najlepiej oddadzą istotę tematu danej kategorii (podejmij decyzję w oparciu o cele witryny i potrzeby użytkowników). Może istnieć kilka alternatywnych sposobów zorganizowania kategorii i ich zawartości. Zbadaj wszystkie, które uważasz za rozsądne, by wybrać najlepsze rozwiązanie. 6. Wybierz struktury do testowania. Zawęź wybór do dwóch lub trzech struktur, których komunikacja jest najbardziej odpowiednia. W dalszym ciągu nie możesz zapominać o porównywaniu założeń z wynikami badań przeprowadzonych z grupami użytkowników, ze scenariuszami ich zachowania i z celami witryny, aby przez cały czas mieć pewność, że projekt zmierza we właściwym kierunku. Przeprowadź testy użyteczności, aby wybrać strukturę zawartości, która najbardziej spodoba się użytkownikom i najlepiej spełni założenia biznesowe witryny.
Spis treści witryny Oto przykładowy spis treści witryny. Zwróć uwagę na schemat numerowa- nia poszczególnych elementów. Liczba po lewej stronie kropki reprezen- tuje kategorię, natomiast liczba po jej prawej stronie jest oznaczeniem kolejnych elementów kategorii. Ten schemat będzie podstawą do utwo- rzenia mapy witryny, którą zajmiemy się w rozdziale 4. („Tworzenie mapy witryny i schematów pracy użytkownika”). 1. Część informacyjna 4.3. Numery telefonów 1.1. Najświeższe wieści 4.3.1. USA 1.2. Nowości w Internecie 4.3.1.1. Zarząd 1.3. Artykuły 4.3.1.2. Dział 1.3.1. Nowości dotyczące marketingu użyteczności 4.3.1.3. Dział 1.3.2. Pisanie tekstów na projektowy potrzeby Internetu 4.3.1.4. Dział rozwoju 1.3.3. Konferencje 4.3.2. Europa 2. Wskazówki dotyczące 4.3.2.1. Zarząd komunikacji 4.3.2.2. Dział 2.1. Internet marketingu 2.2. E-mail 4.3.2.3. Dział 2.3. Poczta głosowa projektowy 130 Web Design. Projektowanie atrakcyjnych stron WWW
2.4. Powiadomienia 4.3.2.4. Dział rozwoju 3. Wskazówki dotyczące stylów 4.3.3. Azja 3.1. Tworzenie stylu 4.3.3.1. Zarząd 3.2. Specyfikacje dotyczące 4.3.3.2. Dział projektowania informacji marketingu 3.3. Wskazówki dotyczące 4.3.3.3. Dział oprawy graficznej projektowy 3.4. Specyfikacje HTML 4.3.3.4. Dział rozwoju 4. Informacje o firmie 5. Rozwój firmy 4.1. Regiony sprzedaży i 5.1. Cele marketingu 5.2. Badania 4.1.1. USA 5.2.1. Planowanie wydajności 4.1.2. Europa 5.3. Planowanie 4.1.3. Azja 5.3.1. Planowanie rozwoju 4.2. Schematy organizacyjne 5.4. Rozwój 4.2.1. Zarząd 5.4.1. Wysoka wydajność 4.2.2. Dział marketingu 5.4.2. Efektywna komunikacja 4.2.3. Dział projektowy 5.4.3. Efektywne spotkania 4.2.4. Dział rozwoju 5.4.4. Szkolenia 5.4.5. Odnośniki i łącza
Sprawdź rezultaty
Nie zapomnij sprawdzić uzyskanych rezultatów dotyczących za- wartości witryny (rysunek 3.33). Przede wszystkim sprawdź plany dotyczące poniższych kwestii: ♦ Typy materiałów ♦ Kategorie zawartości ♦ Nazwy poszczególnych kategorii ♦ Struktura spisu treści
Rysunek 3.33. Przetestuj nazwy elementów i strukturę. Zawsze testuj rezultaty, by mieć pewność, że użytkownicy pozytywnie na nie zareagują
Na tym etapie przeprowadzane są testy nieformalne. Zespół nie dysponuje żadnymi projektami stron, które mógłby prze- testować jedynie koncepcjami, nazwami i kategoriami. Formalne testy zostaną przeprowadzone później, gdy zostanie zaprojektowana wystarczająca część witryny i gdy wyższe Rozdział 3. Dobór zawartości witryny 131
koszty testów formalnych będą miały swoje uzasadnienie. Obecnie możesz jedynie zebrać pewne dane jakościowe, które mogą podsunąć członkom zespołu różne twórcze pomysły w trak- cie procesu projektowania.
W niektórych przypadkach warto zwerbować ekspertów dziedzin, które są omawiane w witrynie. Powinni oni wziąć udział w projektowaniu witryny, gdy jest ona kierowana do bardzo specyficznego grona użytkowników bądź gdy nie czujesz się zbyt mocno w danym temacie lub po prostu nie znasz się na zagadnieniach poruszanych w witrynie. Eksperci są również przydatni, gdy ze względu na kwestie bezpieczeństwa lub tajemnicy nie możesz kontaktować się bezpośrednio z użytkownikami. We wszystkich tych przypadkach eksperci występują w roli konsultantów.
Jak przeprowadzić test
Ten test powinien ujawnić, czy nazwy i struktura są zrozu- miałe, czy też powinny zostać zmienione. Nazwy poszczegól- nych kategorii i elementów zawartości oraz strukturę witry- ny będziesz testował, pokazując tabelę zawartości członkom poszczególnych grup użytkowników. Jeśli nie jesteś pewien, którą strukturę wybrać, przetestuj struktury, które Twoim zdaniem reprezentują największe możliwości; test pokaże, która z nich jest najlepsza.
Aby przeprowadzić test, powinieneś: ♦ poprosić o wzięcie w nim udziału swoich znajomych, współpracowników i członków rodziny, którzy kwalifikują się do zdefiniowanych grup użytkowników; ♦ przeprowadzić test indywidualnie z każdym z uczestników; ♦ pokrótce opisać danej osobie witrynę i jej cele; ♦ zaprezentować jej nazwy poszczególnych kategorii i elementów zawartości na kartce papieru i zapytać, co spodziewałaby się ona zobaczyć w każdej z sekcji; ♦ wymienić kilka elementów i ważnych fragmentów zawartości witryny i zapytać osobę biorącą udział w teście, gdzie by ich szukała; ♦ przetestować wszystkie nazwy, prosząc osoby biorące udział w teście, by odgadły, jakie elementy reprezentuje każda z nazw (w przypadku mylących nazw poproś o sugestie lepszych); ♦ pokaż każdej z osób tabelę zawartości witryny i zapytaj, czy przyjęty sposób zgrupowania materiałów jest 132 Web Design. Projektowanie atrakcyjnych stron WWW
zrozumiały (w przypadku wątpliwości zapytaj, jakie przegrupowanie sprawiłoby, że struktura stałaby się bardziej zrozumiała).
Skoryguj projekt zawartości na podstawie wyników testów
Przestudiuj wyniki testów użyteczności i w razie potrzeby skoryguj tabelę zawartości.
Pamiętam, że w jednym z projektów, w których brałam udział, zleceniodawca zażyczył sobie, by zastosowano nazwę „Sygna- tura” dla obszaru witryny, który wymagał rejestracji użyt- kownika. W trakcie testów okazało się, że nikt nie wiedział, co może kryć się za tak dziwaczną nazwą, więc użytkownicy przypuszczalnie nie byliby skłonni specjalnie się logować, by się przekonać, co tam można znaleźć. Jeden z uczestni- ków testów zasugerował nazwę „Tylne wejście”, co w testach z innymi okazało się dobrym rozwiązaniem.
Z kolei w projekcie witryny będącej składnicą fotografii ze- spół zapytał użytkowników, w jakiej kategorii szukaliby fo- tografii szałwi. Użytkownicy jednomyślnie odpowiedzieli „ro- śliny”, choć projektanci pierwotnie umieścili ją w sekcji „zioła”.
Po modyfikacjach ponownie przeprowadź testy, by się upew- nić, że po poprawkach żaden punkt nie budzi już wątpliwo- ści.
Oceń prace, dojdź do porozumienia i przejdź do następnego etapu
Oceń ostateczny szkic planu zawartości wraz z opiniami użytkowników dotyczącymi zawartości i struktury witryny. Przyjrzyj się uzyskanym rezultatom wraz z osobą podejmującą decyzje w imieniu zleceniodawcy.
Dojdź do porozumienia z całym zespołem przed przejściem do następnego etapu. W przeciwnym razie narazisz zespół na niepotrzebną pracę, jeśli okaże się, że opinie na temat struktury i zawartości witryny są podzielone.
Gratulacje! Zaprojektowałeś zawartość witryny. Teraz nad- szedł czas na zdefiniowanie sposobu, w jaki użytkownik bę- Rozdział 3. Dobór zawartości witryny 133
dzie nawigował i korzystał z witryny. Czas na przygotowanie mapy witryny i schematów pracy użytkownika.
Podsumowanie
♦ Treść witryny musi wspomagać markę organizacji, jej politykę marketingową, sprzedaż, relacje z klientami i programy komunikacji. ♦ Daj użytkownikom możliwość personalizacji lub modyfikowania zawartości oraz wyglądu witryny. Zastosuj marketing indywidualny, aby odwiedzający widzieli to, co chcą widzieć, wtedy, kiedy chcą i w taki sposób, w jaki chcą to zobaczyć. ♦ Zaprojektuj, zaplanuj i opracuj mechanizmy, które zaangażują użytkowników witryny jako współtwórców jej zawartości. Zaproś ich do wyrażania opinii na temat witryny, abyś mógł nieustannie dopasowywać projekt i sprawiać, by był coraz bardziej praktyczny, wygodny i atrakcyjny. ♦ Opracuj spis treści witryny, prezentujący proponowaną strukturę i materiały. Przeprowadź testy z reprezentatywnymi użytkownikami, wprowadzając poprawki na podstawie ich uwag. ♦ Osiągnij konsensus w sprawie zawartości witryny z osobami podejmującymi decyzje, reprezentującymi zleceniodawcę. Dopiero, gdy to zrobisz, będziesz mógł przejść do następnego etapu.