You are on page 1of 46

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Web Design. Projektowanie


atrakcyjnych stron WWW
Autor: Ani Phyo
Tumaczenie: Marek Binkowski
ISBN: 83-7361-248-3
Tytu oryginau: Return on Design.
Smarter Web Design That Works
Format: B5, stron: 290
Dzi z Internetu korzysta wicej ludzi i wicej firm opiera na tym swoj dziaalno
ni kiedykolwiek wczeniej. Jednak aby osign sukces w trudnych ekonomicznie
czasach, producenci stron internetowych musz korzysta ze skromniejszych rodkw
i jednoczenie tworzy bardziej efektywne witryny, ktre przynios realny zysk.
W jaki sposb uzyska taki wynik? Weteranka projektowania, Ani Phyo, przedstawia
sprawdzon w boju i opart na dowiadczeniach metod skutecznego projektowania
witryn internetowych. Pokazuje ona, w jaki sposb kluczowe zasady projektowania
informacji z myl o uytkowniku mog nada kierunek kademu projektowi
internetowemu sprawiajc, e witryna bdzie bardziej efektywna, atwiejsza w uyciu
i lepiej speniajca zaoenia biznesowe. Wyjania, gdzie warto, a gdzie nie warto
oszczdza i na czym tak naprawd polegaj oszczdnoci dugoterminowe.
Ani Phyo opisuje w tej ksice prosty i skuteczny siedmioetapowy proces tworzenia
serwisw internetowych.
Oce obecn witryn klienta, zbadaj jego konkurencj, precyzyjnie wyznacz
docelow grup odbiorcw i pom zdefiniowa potrzeby i oczekiwania klienta.
Zbuduj odpowiedni zesp do wykonania zadania.
Utwrz modele charakterystycznych reprezentantw grupy docelowej i zastanw
si, w jaki sposb bd korzysta z witryny.
Ustal, jaka powinna by zawarto witryny i w jaki sposb powinna ona
funkcjonowa.
Zaprojektuj profesjonalny schemat nawigacji i utwrz funkcjonalny prototyp,
by go przetestowa.
Przeprowad kontrolowany test uytecznoci nawet w przypadku skromnego
budetu i maksymalnie skorzystaj z opinii i sugestii uytkownikw.
Zbuduj mechanizmy, ktre pozwol Ci pozyskiwa informacj zwrotn ju po
uruchomieniu witryny, tak aby uytkownicy mogli dostarcza wartociowych
opinii przydatnych w trakcie przyszych modernizacji.
Ksika przedstawia nie tylko proponowany przez autork schemat postpowania, ale
take przeszkody i trudnoci, na jakie mona napotka w trakcie jego realizacji.
"WebDesign. Projektowanie atrakcyjnych stron WWW" to nieodzowna lektura zarwno
dla projektantw stron, jak i dla menederw firm wiadczcych usugi tworzenia stron
internetowych.

Spis treci
Przedmowa............................................... 7
Od Autorki.............................................. 9
Wstp.................................................. 13
Podstawy projektowania interakcji z myl o uytkowniku 23
Co to jest projektowanie informacji? ......................
Kto zajmuje si projektowaniem informacji? ................
Co to jest uyteczno? ...................................
Podsumowanie ..............................................

23
31
36
42

Rozdzia 1. Ustalanie wymaga witryny.................. 45


Definiowanie podstawowych zaoe biznesowych .............
Proces bada ..............................................
Dobr cech i moliwoci witryny speniajcych jej cele ....
Ocena witryny przeznaczonej do przeprojektowania ..........
Sprawd suszno zaoe .................................
Podsumowanie ..............................................

45
47
69
71
76
78

Rozdzia 2. Scenariusze dziaa uytkownika............ 79


Budowanie pozytywnych wrae ..............................
Tworzenie modelu uytkownika i scenariusza jego dziaa ...
Testowanie scenariuszy ....................................
Podsumowanie ..............................................

79
82
88
89

Rozdzia 3. Dobr zawartoci witryny................... 91


Jak da uytkownikowi dokadnie to, czego potrzebuje ...... 91
Pom zleceniodawcy zidentyfikowa potrzeby
dotyczce zawartoci witryny i ustali ich priorytety .... 102
Dobr struktury witryny .................................. 109
Tworzenie i testowanie spisu treci witryny .............. 122
Sprawd rezultaty ........................................ 126
Podsumowanie ............................................. 128

Rozdzia 4. Tworzenie mapy witryny i schematw pracy


uytkownika ........................................... 129
Projektowanie efektywnej interakcji ...................... 129
Tworzenie mapy witryny ................................... 132

Web Design. Projektowanie atrakcyjnych stron WWW


Schematy pracy uytkownika ............................... 136
Testowanie i poprawianie schematu pracy uytkownika i mapy
witryny .................................................. 149
Podsumowanie ............................................. 150

Rozdzia 5. Projektowanie schematu nawigacji i ukadu


dokumentw ............................................ 151
Od ukadu strony do prototypu ............................
Schematy ukadu stron ....................................
Prototypy ................................................
Podsumowanie .............................................

151
153
174
179

Rozdzia 6. Testowanie funkcjonalnego prototypu....... 181


Kontrolowany test uytecznoci ...........................
Testy formalne, czy nieformalne? .........................
Dane jakociowe czy ilociowe? ...........................
Kontrolowany test nieformalny ............................
Test formalny ............................................
Prezentacja wynikw testw i zalece .....................
Poprawianie projektu na podstawie wynikw testu ..........
Podsumowanie .............................................

181
185
189
194
219
220
221
226

Rozdzia 7. Dalszy proces modyfikacji, rozwoju i


aktualizacji witryny .................................. 229
Czy byo warto? .......................................... 229
Projekt informacji od budowy do uruchomienia ........... 231
Uruchom witryn i rozpocznij proces od nowa .............. 241

Dodatek A Sowniczek.................................. 259


Skorowidz............................................. 269

Rozdzia 3.
Dobr zawartoci witryny
Jeli ustalie ju, kto bdzie korzysta z witryny i jakie
czynnoci bd wykonywali jej uytkownicy, moesz przystpi
do dobierania treci i zawartoci witryny. Tok postpowania
na tym etapie zaley od typu witryny, ktr projektujesz.
Jeli tworzysz witryn stanowic narzdzie, witryn, w
ktrej dominuj transakcje, zakupy przeprowadzane drog
elektroniczn czy wyszukiwanie okrelonego rodzaju informacji, przejd do rozdziau 4. (Tworzenie mapy witryny i
schematw pracy uytkownika), a nastpnie wr do tego
rozdziau po wykonaniu opisanych tam zada. Jeli jednak
gwnym celem witryny jest prezentowanie treci informacyjnych, kontynuuj czytanie tego rozdziau.
W tym rozdziale omwimy projektowanie, planowanie i ustalanie struktury zawartoci witryny. Pokaemy te, jak pomc
zleceniodawcy opracowa materiay na witryn w taki sposb,
by przypieszy proces jej produkcji. Zesp tworzcy witryn bdzie nieformalnie testowa struktur zawartoci, by
upewni si, e prezentowane treci nie tylko satysfakcjonuj docelowych uytkownikw, lecz rwnie speniaj zaoenia biznesowe zdefiniowane przez zleceniodawc (rysunek
3.1).

Jak da uytkownikowi dokadnie to,


czego potrzebuje
Podobnie, jak gospodyni organizujca przyjcie stara si
przygotowa potrawy, ktre bd smakoway jej gociom, projektanci powinni serwowa uytkownikom witryny tak jej zawarto, ktra zostanie przez nich uznana za atrakcyjn,
wyczerpujc i satysfakcjonujc. To dlatego zawsze namawiam projektantw do powicenia czasu na sprawdzenie, czy

92

Web Design. Projektowanie atrakcyjnych stron WWW


prezentowane treci bd pokryway si z zainteresowaniami
i oczekiwaniami docelowych uytkownikw, ujawnionymi we
wczeniejszym procesie bada i testw (rysunek 3.2).

Rysunek 3.1.
Dobr zawartoci
witryny z myl o
uytkowniku

Rysunek 3.2.
Wzbud apetyt.
Powi czas na
ustalenie,
co uytkownicy
lubi, zaprezentuj
to moliwie
atrakcyjnie i
spraw,
by mieli ochot na
wicej

Rozdzia 3.  Dobr zawartoci witryny

93

Poniej przedstawi pewne sugestie dotyczce doboru zawartoci witryny, lecz przede wszystkim zachcam projektantw
do traktowania procesu przygotowania zawartoci witryny w
taki sposb, w jaki traktuje si przygotowywanie pysznego,
eleganckiego posiku. Zwykle jest tak, e mniej znaczy
wicej. Dostarczaj uytkownikom tego, czego chc, i rb to
w zwizy sposb. Mniejsze porcje o wyszej jakoci i wieoci s bardziej satysfakcjonujce ni dua objto niszej jakoci, a w dodatku niewiea.

Dobr zawartoci witryny z myl


o uytkowniku pomaga osign cele biznesowe
Nie sposb przeceni wanoci zawartoci witryny, na ktr
uytkownicy maj chtnie wraca i poleca j swoim znajomym, przyjacioom i rodzinie. Dobrze dobrana zawarto witryny pomaga osign podstawowe cele biznesowe i wzmocni
mark organizacji lub firmy reprezentowanej przez t witryn.
Czy ponisze 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 materiay, jakie moemy umieci w
witrynie.
Po prostu wemiemy to, co przygotuje dzia
komunikacji, i wrzucimy to na witryn, gdy bdzie
gotowe.
Opracowanie nowej zawartoci witryny moe by kosztowne,
zarwno w przypadku nowego projektu, jak i zlecenia polegajcego na przeprojektowaniu istniejcej witryny. Jednak
jeszcze bardziej kosztowne jest zwyke przerzucenie istniejcej zawartoci na now witryn jedynie po to, by potem
odkry, e nie spenia ona wymaga uytkownikw. W takim
niepomylnym przypadku organizacja posiadajca witryn wyda
pienidze nie tylko na opracowanie zawartoci, lecz rwnie
bdzie musiaa powici sporo wysiku i ponie koszty marketingu prowadzcego do odbudowania renomy i pozytywnego
postrzegania marki oraz zatarcia negatywnych wrae wywoanych wrd uytkownikw witryny.
Za wszelk cen unikaj pokusy martwienia si o zawarto
pniej. W poniszej dyskusji na temat zawartoci witryny
przedstawi pewne realia ponownego wykorzystywania istnie-

94

Web Design. Projektowanie atrakcyjnych stron WWW


jcych materiaw i unikania ewentualnych przestojw. Na
szczcie przy dobrej organizacji pracy, gdy kady ma do
zrobienia mniej i moe temu powici wicej uwagi, strategie projektowania interakcji pozwalaj na ponowne wykorzystywanie dostpnych materiaw w przygotowaniu zawartoci
witryny.
Internet wnosi nowy zestaw moliwoci i wymaga pozwala
dostarczy zawarto przygotowan z myl o uytkowniku
zawarto, ktra interesuje, wciga, informuje i zachca
widza do powrotu. Stosujc takie podejcie do zawartoci

Zwracaj uwag na powizania


Zadbaj o to, by organizacja zlecajca projekt witryny zaplanowaa
przygotowanie i dostarczenie materiaw, ktre s zwizane z jej polityk marketingow i reklamow oraz programem dystrybucji.
Na przykad, gdy organizacja planuje przeprowadzenie kampanii reklamowej z udziaem znanej osobistoci (chociaby popularnego pikarza z
pierwszej ligi) lub powizanej z wchodzcym na ekrany kin filmem, powinna te zaplanowa dostarczenie do witryny materiaw, ktre bd
przyczyniay si do sukcesu owej kampanii.
Mniejsze firmy mog nie mie a tak ambitnych planw marketingowych,
jednak niemal kada organizacja wprowadza do swojej oferty nowe produkty lub usugi, bierze udzia w rnego rodzaju wydarzeniach (prezentacjach, targach itp.) i podejmuje inne dziaania marketingowe.
Kade z takich wydarze jest potencjalnym rdem materiaw na witryn.

witryny, zwikszamy szanse spenienia jej zaoe biznesowych, a take uatwiamy ewentualne modyfikacje czy przeprojektowania w przyszoci, o czym powiemy w rozdziale 7.
(Dalszy proces modyfikacji, rozwoju i aktualizacji witryny).

Rozpocznij od personalizacji
Personalizacja witryny nie jest ju adn nowoci. W latach dziewidziesitych ubiegego stulecia niektre witryny oferoway uytkownikom moliwo wyboru zawartoci speniajcej ich potrzeby i dopasowanej do ich zainteresowa.
Sukces witryn takich, jak My Yahoo (http://my.yahoo.com)
jest dowodem na to, e uytkownicy lubi otrzymywa dokadnie to, czego potrzebuj, dokadnie w taki sposb, jaki im
si podoba (rysunek 3.3).

Rozdzia 3.  Dobr zawartoci witryny

95

Rysunek 3.3.
Personalizowana
zawarto witryny.
Witryna My Yahoo
umoliwia
uytkownikowi
wybranie tego, co
chce zobaczy na
stronie
otwierajcej

Indywidualny marketing
Idc dalej tropem technik personalizacji, umoliwiajcych
uytkownikom wybr treci witryny lub sposobu jej prezentacji, trafiamy na techniki indywidualnego marketingu, polegajce na automatycznym zbieraniu informacji o upodobaniach
konkretnego uytkownika i dobieraniu dla niego indywidualnych ofert i rekomendacji (rysunek 3.4).

96

Web Design. Projektowanie atrakcyjnych stron WWW

Rysunek 3.4.
Personalizowane
rekomendacje. Inn
dobr metod
personalizowania
zawartoci jest
wykorzystywanie
informacji podawany
ch
przez uytkownikw.
Zlikwidowana ju
witryna
MovieCritic.com
rekomendowaa filmy
na podstawie ocen,
jakie uytkownik
wystawia innym
filmom oraz
odpowiedzi, jakich
udziela

Na przykad witryna zajmujca si sprzeda ksiek moe


zastosowa indywidualny marketing, oferujc specjalne czasowe zniki na nowo opublikowane ksiki, ktre dany uytkownik przypuszczalnie uzna za interesujce; ich wybr
mgby by oparty na licie wczeniejszych zakupw. Podobne
techniki s stosowane przez znan witryn Amazon.com i inne
sklepy internetowe rekomendujce ksiki, pyty muzyczne i
inne produkty. Bazuj one na poprzednich zakupach uytkownika lub te na zakupach innych uytkownikw o podobnych
preferencjach.
Z kolei internetowy sklep odzieowy mgby zaoferowa mi
specjaln znik na bluz pasujc do spodni i spdnicy,
ktre niedawno kupiam. Te specjalne zniki nie byyby
oferowane innym uytkownikom, poniewa kada z nich byaby
tworzona dynamicznie dla indywidualnego klienta na podstawie jego preferencji i historii zakupw.

Zawarto witryny przy ograniczonym budecie


Personalizacja i indywidualny marketing wymagaj zaawansowanych technologii. Niezbdne oprogramowanie po stronie
klienta i serwera moe by kosztowne. Jeli organizacja fi-

Rozdzia 3.  Dobr zawartoci witryny

97

nansujca projekt posiada odpowiedni budet lub wewntrzne


zasoby umoliwiajce skorzystanie z tej technologii, a take wiadomo, e takie rozwizania mog przynie wymierne
korzyci (na przykad sprzeda w sklepie internetowym posiadajcym du liczb klientw), gorco zachcam.
Na szczcie nawet ograniczony budet nie musi oznacza rezygnacji z zawartoci dopasowanej do potrzeb uytkownika. Poczenie trzech pozornie nie zwizanych ze sob dziedzin
kreowania marki, dziennikarstwa i relacji midzyludzkich
pozwoli organizacji zlecajcej projekt opracowa materiay
dopasowane do wymaga uytkownika i tym samym przybliy witryn do spenienia jej celw biznesowych.
Wskazaam ju kilka punktw decydujcych o tym, czy projekt
witryny wzmocni, czy te osabi pozytywny wizerunek reprezentowanej przez ni firmy.
Zastanw si, jak wygldaj Twoje zwizki z ludmi, ktrzy
s w Twoim yciu wani. Co sprawia, e te zwizki s pomylne?
Napisano tysice ksiek na temat relacji, lecz oto jeden
ich wsplny mianownik: w pomylnym zwizku kada z osb robi wszystko, co moliwe, alby speni potrzeby i oczekiwania drugiej osoby.
Zawarto witryny moe wzmocni lub osabi zwizek uytkownika z mark reprezentowan przez witryn. Czy uytkownik jest w stanie bez szczeglnego wysiku znale interesujc go i potrzebn mu zawarto?
Interaktywno witryny rwnie pozwala uytkownikom natychmiastowo reagowa na jej zawarto. Mog oni wypenia ankiety i wyraa opinie. Mog wysya wiadomoci e-mail w
odpowiedzi na co, co wanie przeczytali, zobaczyli lub
usyszeli. Oznacza to, e projektant witryny moe potraktowa jej uytkownikw jako wsptwrcw zawartoci.
Wiele witryn daje uytkownikom moliwo oceniania zawartoci lub zadawania pyta zwizanych z niejasnymi kwestiami,
tak aby organizacja reprezentowana przez witryn nie musiaa traci pienidzy na treci nikomu niepotrzebne i zamiast
nich moga publikowa treci, ktre bd satysfakcjonoway
odbiorcw. Nawet jeli budet nie pozwala na zainwestowanie
w drogie mechanizmy personalizacji lub indywidualnego marketingu, witryna moe zaprosi uytkownikw do wyraenia
swojej opinii na temat tego, co im si podoba, a co nie w
zawartoci witryny, a nastpnie dopasowa zawarto do
oczekiwa.

98

Web Design. Projektowanie atrakcyjnych stron WWW


Lecz jeli ich adnie poprosisz i dasz im odpowiednie narzdzia, uytkownicy witryny zrobi znacznie wicej.

Potraktuj uytkownikw jako wsptwrcw witryny


Niektre witryny wykorzystuj aktualnoci lub artykuy tematyczne do prowokowania dyskusji pomidzy autorem artykuu, innymi ekspertami z danej dziedziny i czytelnikami. Na
przykad internetowa wersja gazety The New York Times zaprasza swoich czytelnikw do brania udziau w dyskusjach na
ywo na temat artykuw publikowanych w witrynie. Wiele
innych gazet stosuje podobne techniki. Mog one funkcjonowa rwnie w witrynach firmowych i korporacyjnych (rysunek
3.5).
Rysunek 3.5.
Zawarto tworzona
czciowo przez
uytkownikw.
Rosnca liczba
witryn zaprasza
swoich
uytkownikw
do wyraania opini
i lub umieszczania
w witrynie danych,
ktre mog by
istotne dla innych
uytkownikw.
Oto przykad
witryna
ConsumerReview.com
, na ktrej
uytkownicy
wyraaj swoje
opinie
o sprzedawanych
produktach

W rozdziale 2. zasugerowaam, by w trakcie procesu bada


zesp tworzcy witryn przeanalizowa publikacje, zdarzenia i materiay dostpne w Internecie, by lepiej zrozumie,
co interesuje i porusza grupy uytkownikw, do ktrych jest
kierowana witryna. Teraz chc posun si dalej i rzuci zespoowi wyzwanie, by poszukiwa sposobw projektowania zawartoci i struktury witryny tak, aby dla uytkownikw sta-

Rozdzia 3.  Dobr zawartoci witryny

99

a si jednym z tych poszukiwanych miejsc, gdzie mog znale to, co ich naprawd interesuje.
Ludzie o podobnych zainteresowaniach uwielbiaj wymienia
si pogldami. Chtnie wzajemnie sobie pomagaj, przyczyniajc si do rozwoju sportw, pasji, zainteresowa i prac,
ktre uwielbiaj. Projektanci mog poczu tego ducha
i sprawi, by witryna znalaza si w centrum i staa si
nonikiem tych rozmw, dyskusji i wzajemnej pomocy.
Niestety, tego typu starania mog skoczy si fiaskiem,
jeli projektant strony internetowej nie dysponuje odpowiedni wiedz na tematy, ktrych maj dotyczy te rozmowy. Dlatego zachcam Ci do przedyskutowania tego tematu z wszystkimi czonkami zespou i osobami podejmujcymi decyzje
(reprezentujcymi zleceniodawc). Udostpnij t ksik
waciwym osobom, aby mogy one przeczyta ten rozdzia i
kilka innych fragmentw dotyczcych projektowania z myl o
uytkowniku.
W sytuacjach takich jak ta rozwaania zwizane z projektowaniem witryny internetowej zaczynaj przecina granice podziau kompanii na dziay, poruszajc obszary zwizane z
dziaami sprzeday, marketingu, promocji, komunikacji
i relacji midzyludzkich. Identyfikujc dotyczce zawartoci witryny potrzeby jej uytkownikw, warto skoordynowa
wysiki innych czonkw organizacji, ktrzy rwnie mog
wnie swj wartociowy wkad w spenienie tych potrzeb.
Innym powodem podjcia tej dyskusji moe by ch otrzymania
pomocy od ekspertw nalecych do danej organizacji, ktrzy
dysponuj materiaami, wiedz i dowiadczeniem. Przygotowujc si do spotkania powiconego zawartoci i strukturze
witryny (omawianego dalej), osoby podejmujce decyzje dotyczce w tryny rozgldaj si za rdami materiaw. Kompania
moe dysponowa archiwum porad i technik pomagajcych uytkownikom w jak najlepszym wykorzystaniu produktw lub usug.
Materiaami moe te by biblioteka magazynw, broszur i innej literatury, ktra dla odwiedzajcych witryn moe by
zot y wiedzy.
Eksperci z danej dziedziny mog te na wiele sposobw komunikowa si z odwiedzajcymi witryn. Mog na przykad tworzy list najczciej zadawanych pyta i odpowiedzi (FAQ
Frequently Asked Questions), ktra skoni uytkownikw do
ponownych odwiedzin; mog te zamieszcza w witrynie instrukcje typu jak to zrobi lub artykuy prezentujce
specyficzne techniki czy rozwizania pewnych problemw. Mog bra udzia w forum dyskusyjnym lub prowadzi dyskusj
na ywo w pokojach pogawdek. Praktycznym rozwizaniem jest
te branie udziau w dyskusjach prowadzonych w formie biuletynu. Eksperci reprezentujcy dan organizacj mog ofero-

100

Web Design. Projektowanie atrakcyjnych stron WWW


wa swoj wiedz i dowiadczenie w dyskretny sposb, aby
rwnie wrd grona uytkownikw wyonili si niezaleni
eksperci, ktrzy s gotowi podzieli si swoj wiedz i dowiadczeniem, kontaktujc si z innymi za porednictwem witryny.
W ostatnim rozdziale ksiki szczegowo omwi sposoby angaowania uytkownikw witryny w jej rozwj. Mona zaprosi
ich do wstpienia do organizacji lub grupy uytkownikw i
poprosi o wstpn zgod na umieszczanie dostarczanych
przez nich informacji; mona wreszcie zaprosi ich do wzicia udziau w projektowaniu witryny. Tymczasem mam nadziej, e korzyci wynikajce z przygotowania zawartoci witryny z myl o uytkowniku oraz z zaangaowania samych
uytkownikw w jej planowanie i przygotowanie staj si coraz bardziej oczywiste.
Im bardziej uytkownicy zostan zaangaowani w tworzenie
witryny, tym bardziej bd chtni pomc we wskazaniu materiaw trafiajcych w ich potrzeby. Paradoksalnie, im bardziej witryna jest uzaleniona od uytkownikw, tym chtniej pragn oni wnie swj wkad jeli tylko trafi na
waciwe pytania, zadane we waciwym czasie i we waciwy
sposb. Gdy ich wkad bdzie nabiera coraz wikszego znaczenia, z wikszym prawdopodobiestwem bd stawali si lojalnymi klientami danej firmy, kompanii lub organizacji,
promowanego produktu lub usugi reprezentowanej przez witryn. Przyczyni si do budowania marki, polecajc j swoim kolegom, przyjacioom i czonkom rodziny.

Nie zapominaj o podstawach


Mylc o tym, czego mog chcie uytkownicy witryny i w jaki sposb powiniene im to dostarczy, pamitaj, e nawet
najbardziej fascynujca tre moe nie by zadowalajca dla
uytkownikw, jeli zlekcewaysz podstawy, takie jak logiczna organizacja, atwe wywietlanie i drukowanie oraz
rzetelna redakcja.

Dobra organizacja informacji


Tekst prezentowany w witrynie musi by odpowiednio napisany
i zredagowany, by spenia specyficzne wymagania witryny i
jej uytkownikw. Niezalenie od tego, jak adna jest witryna, jak imponujce s rozwizania interaktywne, jeli
redakcja tekstu nie zadowoli odwiedzajcych i nie sprawi,
e bd zadowoleni z wizyty, nie zechc oni zwiedzi witryny ani uy udostpnionych narzdzi.

Rozdzia 3.  Dobr zawartoci witryny

101

Pozwl uytkownikom uywa hiperczy, by mogli zej na


poziom szczegowoci, ktrego poszukuj. Na przykad strona gwna witryny moe zawiera jedynie nagwki i podnagwki artykuw, ich streszczenia oraz odnoniki do bardziej szczegowych informacji. Takie rozwizanie pozwoli
uytkownikom wej gbiej lub przej od razu do tematu,
ktry ich interesuje.
Prezentowana tre musi by czytelna, wiarygodna i regularnie aktualizowana. Przestarzae informacje zmniejszaj wiarygodno witryny i szkodz marce.
Jeli pracujesz nad przeprojektowaniem witryny, sprawd,
czy jej obecna zawarto spenia oczekiwania uytkownikw i
zaadaptuj j do nowego projektu, by speniaa w nim jak
najlepiej swoj rol.
Podziel tre witryny, aby uatwi surfowanie
Strona internetowa bardzo rni si od strony drukowanej, dlatego nie
wystarczy zwyke przeniesienie materiaw drukowanych na witryn. Dopilnuj, by witryna prezentowaa materiay dobrze napisane i w odpowiedni sposb zorganizowane. Dugie bloki przewijanego tekstu nie s
zbyt dobrym rozwizaniem; powiniene podzieli tre na mniejsze porcje (rysunek 3.6).
Rysunek 3.6.
Porcje odpowiedniej
wielkoci. Serwuj tre
witryny w porcjach
odpowiednio maych, by
byo je atwo strawi,
a jednoczenie
wystarczajco duych,
by satysfakcjonoway
Podzia treci witryny jest jak skadanie i segregowanie duego stosu
prania. Pocztkowo stos prania wydaje si przytaczajcy i nikt nie
chce si nim zaj. Dlatego zaczynasz skada jedn rzecz po drugiej i
segregowa je, grupujc podobne. W kocu moesz mie pi kupek: rczniki, grne i dolne czci garderoby, skarpetki i bielizn. Kad z
tych kupek moesz dodatkowo posegregowa. Na przykad grne czci
garderoby moesz podzieli na bezrkawniki, koszulki z krtkim rkawem
i bluzy z dugim rkawem. Jeli jeste naprawd precyzyjny, moesz nawet posegregowa odzie pod wzgldem materiau, gruboci i koloru.
Podzia informacji na sekcje, podsekcje, akapity, nagwki i podsumowania pozwala odwiedzajcemu odszukiwa informacje, a take wprowadza
nieco przestrzeni pomidzy poszczeglne poziomy informacji.
Samouczki
udostpnione
przez
witryn
HotWired
(http://hotwired.lycos.com) s znakomitym przykadem informacji podzielonej na sekcje i podsekcje. W tym przykadzie (rysunek 3.7), zawarto jest podzielona na pi czci: przegld (Overview) oraz cztery lekcje (Lesson 1, 2, 3, 4).

102

Web Design. Projektowanie atrakcyjnych stron WWW

Rysunek 3.7.
Zawarto
podzielona
na sekcje.
Samouczki
udostpnione
przez witryn
HotWired zostay
z rozmysem
podzielone na
sekcje, dziki
czemu
odwiedzajcy nie
czuje si
przytoczony
nadmiarem
informacji
Kada lekcja jest podzielona na cztery lub pi czci, a kada z
nich jest prezentowana na oddzielnej stronie. Kada strona jest krtka krtsza ni dwie wysokoci ekranu.
Cz nawigacyjna po lewej stronie ekranu wskazuje kontekst i ma konsekwentn budow na wszystkich stronach.

Udostpnij funkcje atwego drukowania


Zaoferuj uytkownikom witryny moliwo wydrukowania wersji artykuu przygotowanej do druku, o uproszczonym formatowaniu i grafice.
Utwrz szablon dokumentu przeznaczonego do druku dla kadego artykuu i uyj go do utworzenia przyjaznych dla drukarki wersji poszczeglnych artykuw. (Kto w zespole powinien potrafi to zrobi. Jeli nie znajdzie si adna
osoba z takimi umiejtnociami, warto zwerbowa kogo na
czas przygotowania wersji przeznaczonych do drukowania).
Rozwa rwnie moliwo wprowadzenia funkcji pozwalajcej
uytkownikowi na wysanie artykuu do siebie lub znajomego
drog poczty elektronicznej. Jest to znakomity sposb na
pozyskanie kopii artykuu i zapoznanie si z nim w wolnej
chwili odwiedzajcy po prostu podaje adres odbiorcy i
klika przycisk. Jednoczenie jest to kolejne rozwizanie,
ktre daje odwiedzajcym wraenie kontroli nad tym, co robi. Tym samym powoduje ich wiksze zaangaowanie i buduje
dobr opini o marce. Nie zapomnij zamieci informacji, skd
pochodzi artyku, umieszczajc na wydruku lub w wiadomoci

Rozdzia 3.  Dobr zawartoci witryny

103

e-mail nazw i adres strony. Wiadomoci oznaczone mark s


skuteczn form marketingu.
Moesz wreszcie da uytkownikom moliwo wydrukowania
piknie sformatowanego dokumentu, udostpniajc jego wersj
w formacie Adobe PDF. Takie rozwizanie jest zalecane, gdy
chcesz dostarcza adnie zaprojektowane i dobrze skomponowane dokumenty, takie jak raporty rzdowe, instrukcje obsugi, raporty roczne i inne materiay informacyjne, ktre
wiele zyskuj przez swj elegancki skad i sposb prezentacji.

Zaplanuj przysze modyfikacje


Zaprojektowanie witryny prezentujcej interaktywne treci
przygotowane z myl o uytkowniku wie si z kosztami,
ktre wykraczaj poza moment jej uruchomienia. Kto kiedy
bdzie musia zaplanowa, uporzdkowa i zaktualizowa zawarto witryny na podstawie przyszych wydarze i opinii,
aby strategia dopasowania witryny do uytkownika sprawdzia
si w praktyce. W przypadku stosunkowo prostych witryn firmowych t odpowiedzialno moe przej istniejcy dzia
marketingu lub sprzeday, by moe z pomoc niezalenego
redaktora lub dziennikarza, posiadajcego pewne dowiadczenie w tworzeniu stron internetowych.
Wiksze organizacje takie, jak kompania obsugujca duy
rynek regionalny lub stanowica fili midzynarodowej korporacji powinny zatrudni przynajmniej jedn osob, ktra
bdzie odpowiedzialna za zawarto witryny w trakcie jej
eksploatacji. Jej praca bdzie podobna do pracy redaktora
nadzorujcego wydawanie drukowanego magazynu. Osoba ta bdzie wsppracowaa z dziaem marketingu lub sprzeday oraz
z innymi dziaami zainteresowanymi udostpnianiem materiaw w Internecie, przygotowujc je do publikacji bd prezentacji w witrynie.

Pom zleceniodawcy zidentyfikowa potrzeby


dotyczce zawartoci witryny i ustali ich priorytety
W przypadku nowego projektu witryny nadszed czas, by zleceniodawca skoncentrowa si na potrzebach dotyczcych materiaw dla witryny. W przypadku przeprojektowywania istniejcej witryny sprawa jest atwiejsza na pierwszym

104

Web Design. Projektowanie atrakcyjnych stron WWW


etapie prac zesp tworzcy witryn zdoby pewne informacje
na temat tego, jaka cz obecnej zawartoci moe zosta
wykorzystana w nowym projekcie. W kadym z tych przypadkw
konieczne jest zorganizowanie spotkania, na ktrym zostan
omwione kwestie zawartoci i struktury witryny.

Spotkanie dotyczce zawartoci i struktury witryny


Ustal dat i porzdek spotkania, na ktrym zostan omwione
kwestie zawartoci i struktury witryny. Popro o stawienie
si na nim wszystkie osoby podejmujce decyzje w sprawach
witryny, wyznaczone przez zleceniodawc. Kilka dni przed
spotkaniem popro je o poczynienie pewnych przygotowa. Oto
one:
Wygenerowanie listy ycze opisujcej wszystkie treci,
jakie ich zdaniem powinny znale si w witrynie.
Jeli zlecenie dotyczy przeprojektowania istniejcej
witryny, przygotowanie spisu inwentarza listy caej
zawartoci obecnej witryny. Powinny si na niej znale
wszelkie treci dostpne online, a take wszelkie
materiay, ktre mog wystpowa w innych formatach
(cyfrowych i tradycyjnych) i w innych miejscach (online
i offline).
Zasugerowanie rde nowych materiaw.
Zwrcenie szczeglnej uwagi na treci zwizane ze
specyficzn polityk marketingow, programem sprzeday i
dystrybucji oraz innymi dziaaniami majcymi na celu
wzmocnienie marki (omwionymi we wczeniejszej czci
tego rozdziau i dalszej czci ksiki).
Popro osoby biorce udzia w spotkaniu o przyniesienie
swoich list ycze i sugestii dotyczcych rde materiaw
(a take spisw zawartoci). Projektant informacji, twrca
tekstw, projektant oprawy graficznej i producent witryny
powinni wzi udzia w tym spotkaniu wraz z osobami reprezentujcymi zleceniodawc. Mog w nim wzi udzia rwnie
inynierowie i programici, cho nie jest to konieczne. Takie spotkanie zwykle trwa okoo 2 godzin.

Lista sprawunkw
Na spotkanie przygotuj nastpujce pomoce:
karteczki samoprzylepne na krtkie notatki,

Rozdzia 3.  Dobr zawartoci witryny

105

tablic i gbk,
pisaki do pisania na tablicy (w kilku kolorach),
notatnik,
komputer poczony z Internetem.

Otwarcie spotkania
Rozpocznij spotkanie od zebrania wszystkich list ycze dotyczcych zawartoci.
Kademu z reprezentantw zleceniodawcy daj bloczek karteczek samoprzylepnych i popro, aby zapisali kade z ycze
na osobnej karteczce. Zbierz je i po kolei przyklejaj na
tablicy, grupujc i czc podobne.
Podczas przyklejania kadej karteczki popro jej autora o
omwienie yczenia, aby zrozumia bez adnych wtpliwoci,
jak wyobraa on sobie dany element. Na przykad, czy historyjki bd zawieray obrazki? Jak czsto bd aktualizowane? Czy bd dostpne w archiwum witryny?
Skoncentruj si na rnych typach materiaw. Nale do nich
teksty, fotografie i ilustracje. (W pniejszym terminie
projektant oprawy graficznej przeprowadzi szczegowe spotkania, lecz ju teraz mona udzieli reprezentantom zleceniodawcy pewnych wskazwek dotyczcych objtoci i typu
ilustracji, ktre bd przygotowywali. Powinny to by oglne wskazwki bazujce na wczeniejszych badaniach i scenariuszach dziaa uytkownikw).
Oto inne typy danych, ktre 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 dwikowe: RealAudio, QuickTime,
Windows Media Player, MP3, AIFF, WAV.

106

Web Design. Projektowanie atrakcyjnych stron WWW

Wyjanij zleceniodawcy, jak bardzo pisanie tekstu na potrzeby


strony internetowej rni si od pisania tekstu przeznaczonego
do druku. By moe twrca tekstw nalecy do zespou mgby
wykona krtk prezentacj. Jeli w skad zespou nie wchodzi
osoba specjalizujca si w doborze materiaw, zasugeruj
wcielenie takiej osoby. Warto rwnie zastanowi si nad
zwerbowaniem ekspertw dziedzin, o ktrych traktuje witryna.
Przedyskutuj moliwoci zaadaptowania zawartoci obecnej
witryny, aby jak najbardziej uatwi uytkownikom prac i
jednoczenie przyspieszy produkcj witryny oraz przysze
modyfikacje.

Po zidentyfikowaniu potrzebnych typw materiaw przedyskutuj, dlaczego witryna potrzebuje kadego z gwnych typw
materiaw i elementw. Zwr uwag na to, w jaki sposb
zasugerowane elementy zawartoci bd speniay podstawowe
zaoenia biznesowe witryny. Nastpnie wybierz te typy materiaw, ktre najlepiej speniaj wspomniane zaoenia.
Po osigniciu porozumienia na temat typw materiaw i
gwnych elementw treci witryny odnie te ustalenia do
realiw produkcji i budetu.
Na przykad zleceniodawca moe mie nadziej na umieszczenie
w witrynie elektronicznego katalogu prezentujcego 100 produktw. Mona to zrobi w przyjtym terminie i z przyjtym
budetem, jeli kady produkt bdzie ilustrowany tylko jedn fotografi. Jeli jednak zleceniodawca zayczy sobie dodatkowych fotografii ze zblieniami, z widokiem od tyu
oraz z charakterystykami czcymi poszczeglne produkty
(na przykad dopasowujcymi poszczeglne czci garderoby,
takie jak sukienka i kapelusz), w chwili uruchomienia witryny bdzie moliwe umieszczenie w katalogu jedynie 50 produktw. Projektant szaty graficznej powinien w takiej sytuacji okreli wymagania techniczne i budetowe zwizane z
utworzeniem ilustracji do strony kadego produktu.

Rozdzia 3.  Dobr zawartoci witryny

107

Nie zapomnij o nastpujcych wanych stronach


Nowoci
Na tej stronie s wymienione nowe elementy dodane do witryny. Dzia
marketingu w organizacji lub firmie bdcej wacicielem witryny
moe pomaga w generowaniu tej listy, co pomoe w promowaniu nowej
witryny.
Kontakt
Ta strona zawiera informacje adresowe, numery telefonw, faksw,
mapy, wskazwki dotyczce dojazdu, parkowania i adresy e-mail
waciciela witryny. Jeli musisz przygotowa kilka wersji witryny
dla rnych rejonw wiata, daj poszczeglnym filiom czas
na przygotowanie i dostarczenie niezbdnych danych adresowych i
numerw telefonw.
Strony pomocy i lista najczciej zadawanych pyta i odpowiedzi
(FAQ).
Te strony naley regularnie aktualizowa, gdy zmienia si zawarto
i moliwoci witryny.
Komunikaty bdw.
Te strony (o szacie graficznej spjnej z pozosta czci witryny)
komunikuj bdy i wyjaniaj ich przyczyny, sugeruj alternatywne
rozwizania i oferuj hipercze do strony gwnej i innych
gwnych czci witryny (rysunek 3.8).

Rysunek 3.8. Strona z komunikatem bdu. Spraw, by komunikaty o bdach


byy zrozumiae i uprzejme.
Wraz z nimi wywietl wyjanienia i sugestie dotyczce alternatywnych
rozwiza i sposobw dotarcia do informacji interesujcej uytkownika.
Prezentowana tu strona pochodzi z witryny ConsumerReview.com. Zawiera
ona uprzejmy komunikat i udostpnia kilka alternatywnych hiperczy
Strony potwierdze.
Te strony (o szacie graficznej spjnej z pozosta czci witryny)
s dla uytkownika potwierdzeniem pomylnego wykonania zleconej
przez niego operacji, przesania danych czy ukoczenia transakcji.
Dziki nim uytkownik jest pewien, e witryna poprawnie zareagowaa
na jego dziaanie. Pamitaj, by zawsze w takiej sytuacji
podzikowa uytkownikowi za skorzystanie z danego mechanizmu,
przesanie danych i wyjanienie, co si z nimi dalej stanie. Oto
przykad: Dzikujemy za przesane zamwienie.

108

Web Design. Projektowanie atrakcyjnych stron WWW


W cigu kilku minut otrzymasz potwierdzenie zamwienia poczt
elektroniczn. W razie jakichkolwiek wtpliwoci dotyczcych
zamwienia wylij wiadomo na adres <adres_e-mail> lub zadzwo pod
numer xxx-xxx-xxxx.

Tematy, ktre naley omwi na spotkaniu


Grupowanie materiaw
Po umieszczeniu na tablicy wszystkich ycze dotyczcych
zawartoci witryny popro reprezentantw zleceniodawcy o
pomoc w uoeniu ich w pi do dziewiciu grup powizanych
ze sob elementw. Utwrz te grupy, przemieszczajc do nich
samoprzylepne karteczki.

Rozdzia 3.  Dobr zawartoci witryny

109

Nadawanie nazw grupom materiaw


Po zgrupowaniu wszystkich elementw popro reprezentantw
zleceniodawcy o nadanie nazwy kadej z grup. Zapisz odpowiedzi na tablicy obok odpowiednich zestaww karteczek.
Rekomenduj
nazwy,
ktre
s
trafne,
jasne,
opisowe
i zrozumiae.

Nadawanie priorytetw grupom materiaw


Teraz popro zesp o ocen wanoci kadej z grup materiaw. Przy najwaniejszej grupie postaw liczb 1, przy nastpnej 2 itd.
Nastpnie popro uczestnikw spotkania o ustalenie priorytetw poszczeglnych elementw w kadej kategorii i ustal,
ktre z nich bd zawarte w uruchamianej wersji witryny, a
ktre zostan wdroone na pniejszym etapie, ju po jej
uruchomieniu. Przy kadym elemencie popro osob, ktra go
zaproponowaa, by wyjania, jak wany jest dla niej z
punktu widzenia zaoe biznesowych.
Odnie si do wynikw bada i scenariuszy dziaa uytkownikw, aby podpowiedzie, ktre typy materiaw s najbardziej istotne.
Popro uczestnikw spotkania o przemylenie kwestii zwizanych z zawartoci witryny w kontekcie strategii marketingowej zleceniodawcy.

Spis inwentarza
Popro zleceniodawc o wskazanie, ktre z wymienionych materiaw ju istniej, a ktre musz dopiero zosta przygotowane. Aby niczego nie pomin, posu si list stanowic
spis inwentarza zawartoci witryny (rysunek 3.9).

Rysunek 3.9.
Spis inwentarza.
Przygotuj list
wszystkich
materiaw
gotowych
i wymagajcych
przygotowania

Kategoria: centrum informacji dla nauczycieli


Priorytet

Proponowana zawarto

Gotowe

Pomoc w planowaniu projektu

Materiay dla nauczycieli

Profesjonalny rozwj

Ankieta

Wymagaj
przygotowania
X

110

Web Design. Projektowanie atrakcyjnych stron WWW

Strategia przyszych zmian zawartoci


Spjrz na zawarto witryny z przyszociowej perspektywy i
zidentyfikuj te obszary, w ktrych zawarto bdzie si
rozrastaa lub zmieniaa. Zaplanuj zmiany przynajmniej na
jeden rok w przd, w idealnym przypadku nawet na trzy lata
w przd. We pod uwag dugoterminowe strategie sprzeday
i marketingu przyjte przez zleceniodawc, ktre powinny
znale odzwierciedlenie w zawartoci witryny.
Pomyl o tym, kiedy i w jaki sposb bdzie si zmieniaa
zawarto. Jak czsto bd dodawane nowe sekcje i treci?
Czy nowa tre bdzie kierowana do nowych czy do istniejcych grup uytkownikw? Jak czsto bdzie aktualizowana?
Jaka jest strategia wdraania nowej zawartoci po uruchomieniu witryny? Czy istniejca zawarto bdzie archiwizowana?

Mapa zawartoci
Przygotuj map zawartoci, na ktrej w trakcie produkcji
bdziesz przypisywa poszczeglne materiay konkretnym
stronom witryny. Nadaj elementom mapy nazwy i numery zgodnie ze schematem (omwionym w rozdziale 4.) i takie same
nazwy nadaj poszczeglnym plikom, aby uatwi sobie porzdkowanie i wyszukiwanie materiaw.

Stosowane formaty
Zadbaj o to, by kady z czonkw zespou dokadnie wiedzia, jakie formaty plikw bd stosowane w poszczeglnych typach materiaw: w tekcie (format dokumentw Microsoft Word lub kod HTML), w plikach obrazkw (formaty GIF,
JPEG, PICT), w plikach dwikowych (AIFF, WAV, MP3), w klipach wideo (QuickTime, etc.), w animacjach (Flash, MOV,
animowane pliki GIF). Jeli te elementy nie zostan dostarczone w odpowiednich formatach, zesp tworzcy witryn
bdzie musia powici dodatkowy czas na ich konwersj.

Podsumowanie spotkania
Wyjanij wszystkim, e ustalenia poczynione na tym spotkaniu
pomog w wygenerowaniu tabeli zawartoci (rysunek 3.10). Ta
tabela bdzie podstaw harmonogramu prac nad materiaami,
ktry zostanie opracowany przez producenta witryny. Z kolei

Rozdzia 3.  Dobr zawartoci witryny

111

harmonogram bdzie zawiera daty dostarczenia elementw zastpczych (na przykad tekstu lub obrazkw, ktre bd jedynie wyznaczay miejsce na stronie, zanim ostateczna wersja
materiaw nie zostanie dostarczona), a take finalnych
elementw, gotowych do umieszczenia w witrynie.
Waciciel

USA

Wlk.Bryt.

news.html

T dziennie

D D X

faq.html

S kwartalnie

M M

A M

troubleshooting.html

S kwartalnie

1 AP

A M

gettingstarted.html

S kwartalnie

S w

1 JR

P D N M

FAQ (lista pyta


i odpowiedzi)

N M

Samouczek:
rozwizywanie
problemw

Samouczek:
pierwsze kroki

1 AP

Osoba odpowiedzialna

Kraj docelowy

Adres URL

Nowoci

Faza

T dziennie

P D N M D tips.html

Docelowa grupa uytkownikw

T dziennie

Wszystkie kraje

Wspomaga model biznesowy

Porada dnia

Wspomaga mark

D N

Artyku

Czstotliwo aktualizacji

S tygodniowo D D X

Tymczasowy czy stay

D product.html

Ekspert z danej dziedziny

Marketing

Komunikacja jedno- czy dwustronna

Cel

Obsuga witryny

Dlaczego

Informacja
o produktach

Elementy witryny

Kiedy

Personalizowany lub modyfikowalny

Gdzie

Nowy czy adaptowany

Co

Dynamiczny czy statyczny

Kto

Strona gwna

feature.html

2 JR
1 EB
1 ES

Pomoc

Klucz

Kto: rdo materiau (P podstawowe,


D drugorzdne, T trzeciorzdne)

USA

1 AP

Co: cechy materiau

Kiedy: jak czsto aktualizowany

Gdzie: pooenie
w witrynie

Dlaczego: D duy, S redni,


M may (wpyw na mark lub model
biznesowy)

Rysunek 3.10. Tabela zawartoci witryny. Macierz zawartoci pozwala ledzi


los wszystkich materiaw pochodzcych z rnych rde i kierowanych do
rnych grup uytkownikw. Zawiera ona priorytet kadego elementu,
informacje o tym, czy jest to element statyczny czy dynamiczny,
czstotliwo jego aktualizacji, jego znaczenie dla marki i modelu
biznesowego (mae, rednie bd due), docelowy kraj oraz identyfikator
osoby odpowiedzialnej za jego przygotowanie
Wyjanij zleceniodawcy, e opnienia w dostarczaniu
materiaw dla witryny s przyczyn najwikszych opnie w
uruchomieniu witryny. Data uruchomienia zostanie przesunita o
tyle samo dni, o ile opnione bd dostarczane materiay.

112

Web Design. Projektowanie atrakcyjnych stron WWW

Dobr struktury witryny


Istnieje wiele rnych sposobw grupowania zawartoci, ktre
nadaj ksztat caej witrynie. W tym podrozdziale zajmiemy
si doborem struktury, ktra najlepiej speni oczekiwania
odwiedzajcych (rysunek 3.11).
Rysunek 3.11.
Dobierz
odpowiedni
struktur. Spord
wielu moliwoci
dotyczcych
struktury witryny
i jej zawartoci
wybierz t,
ktra jest
najbardziej
sensowna z punktu
widzenia uytkowni
ka

Cztery modele organizacji witryny


Przyjrzyjmy si czterem podstawowym rozwizaniom dotyczcym
organizacji stron witryny. Oto modele, ktre omwimy: liniowy, hierarchiczny, rwnolegy i swobodny.

Model liniowy
Struktura liniowa sprawdza si w przypadku procedur prezentowanych krok po kroku, ktre powinny by ogldane w okrelonej kolejnoci. Przykadem moe by proces potwierdzania zamwienia w sklepie internetowym lub aplikacja
edukacyjna, w ktrej studenci musz wykona wiczenia lub
odpowiedzie na pytania testowe w okrelonej kolejnoci
(rysunek 3.12).

Rysunek 3.12. Liniowa struktura witryny. Model liniowy sprawdza si wszdzie


tam, gdzie poszczeglne strony maj by ogldane w okrelonej kolejnoci

Pamitnik podrnika Eda Schweizera w witrynie Decibel Dragon


(www.decibeldragon

Rozdzia 3.  Dobr zawartoci witryny

113

.com) ma struktur liniow i prezentuje fotografie z wyprawy jako kolejne slajdy uoone jeden za drugim. Uytkownik
przechodzi do nastpnej lub poprzedniej fotografii, klikajc przycisk Next lub Previous (rysunek 3.13). Przycisk
Previous (poprzednia) jest umieszczony po prawej stronie
przycisku Next (nastpna) ze wzgldu na Egipcjan, ktrzy
czytaj od prawej do lewej.
Rysunek 3.13.
Liniowa struktura
witryny. Pokaz
slajdw w witrynie
Decibel Dragon ma
struktur liniow.
Uytkownicy
przechodz
pomidzy stronami
w okrelonej
kolejnoci

Model hierarchiczny
Struktura hierarchiczna sprawdza si w przypadku witryn,
ktrych celem jest umoliwianie schodzenia na coraz bardziej szczegowe poziomy informacji, jak w encyklopediach
lub leksykonach (rysunek 3.14).
Rysunek 3.14.
Hierarchiczna
struktura witryny.
Ten model
umoliwia
schodzenie
na kolejne poziomy
szczegowoci
informacji

Witryna pokazana na rysunku 3.15 jest klasyfikacj delfinw oceanicznych, wielorybw i delfinw rzecznych. Gdy
uytkownik kliknie przycisk kategorii Oceanic Dolphins, zo-

114

Web Design. Projektowanie atrakcyjnych stron WWW


stanie przeniesiony na stron prezentujc dwanacie rodzajw

Rysunek 3.15.
Witryna o
strukturze
hierarchicznej.
Hipercza w tej
witrynie prowadz
do coraz wszych
grup delfinw, a
dotrzesz
do interesujcego
Ci gatunku

delfinw oceanicznych (w drzewie systematyki). Kliknicie


rodzaju powoduje wywietlenie nalecych do niego gatunkw.
Na kadym poziomie informacja staje si bardziej szczegowa.

Model rwnolegy
Model rwnolegy pozwala zorganizowa witryn, w ktrej
prezentowane s na przykad poszczeglne linie produktw
danej firmy, przy czym kada z linii jest uoona zgodnie
z tym samym szablonem (rysunki 3.16 i 3.17).

Rozdzia 3.  Dobr zawartoci witryny

115

Rysunek 3.16.
Rwnolega
struktura witryny.
Ten model sprawdza
si w sytuacji,
gdy trzeba
zaprezentowa
wiele rnych
elementw
opisywanych przez
podobne
charakterystyki

Rysunek 3.17.
Rwnolega
struktura witryny.
Witryna Decibel
Dragon stosuje
model rwnolegy,
prezentujc
fotografie miast
San Francisco i
Bejrut.
Indeks i strony z
fotografiami s
zbudowane w
oparciu o ten sam
schemat,
co pozwala
przewidzie
dziaanie
poszczeglnych
elementw
nawigacyjnych

Model swobodny
Model swobodny pozwala zorganizowa witryn poruszajc
kilka tematw o wsplnym wtku lub punkcie odniesienia (rysunek 3.18). Na przykad w witrynie podrniczej sekcja powicona Egiptowi mogaby zawiera strony dotyczce historii, kuchni, kultury, muzyki, atrakcji turystycznych, pogody
itp. Wszystkie te tematy s istotne dla podrnikw, jednak
nie sposb uoy ich w struktur hierarchiczn, ani w se-

116

Web Design. Projektowanie atrakcyjnych stron WWW


kwencj liniow, wic najlepszym rozwizaniem jest zastosowanie struktury swobodnej.

Rysunek 3.18.
Struktura swobodna
witryny. Ten model
pozwala
zorganizowa kilka
swobodnie
powizanych
ze sob tematw

Witryna
The
Plumb
Design
Visual
Thesaurus
(www.visualthesaurus.com) prezentuje swobodny tok mylowy.
Odwiedzajcy widzi sowa, ktre przesuwaj si w kierunku
rodka ekranu, a po klikniciu wok nich radialnie rozchodz
si sowa pokrewne (rysunek 3.19). Interfejs ten jest przykadem struktury swobodnej, nieustannie dopasowujcej si
do dziaa uytkownika poprzez wyrodkowanie kadej nowo
wybranej myli.
Rysunek 3.19.
Struktura swobodna
witryny. Witryna
The Plumb Design
Visual Thesaurus o
strukturze
swobodnej
umoliwia
wybr pokrewnych
sw
i odnalezienie
tego,
ktre interesuje
uytkownika

Dziewi schematw organizacji zawartoci witryny


Na pocztku ksiki, w rozdziale Podstawy projektowania
interakcji z myl o uytkowniku, omwiam sposb mylenia uytkownikw Internetu i wskazaam, jak model konceptualny pomaga odwiedzajcym opanowa struktur i funkcje witryny.
Przyjrzyjmy
si
dziewiciu
rnym
sposobom
organizacji zawartoci witryny, uatwiajcym jej zrozumienie: alfabetycznie, chronologicznie, wedug pooenia geograficznego, wedug cechy, wedug kategorii, wedug zada,
wedug grup uytkownikw, hierarchicznie i wedug metafory.
Aby wyjani reguy stosowania kadego z tych schematw,
poycz pomys od Richarda Saula Wurmana, ktry zaprezento-

Rozdzia 3.  Dobr zawartoci witryny

117

wa kiedy przykad rnych moliwoci uoenia kapeluszy na


stojaku na kapelusze (Richard Saul Wurman, Hats, magazyn
Design Quarterly 1989 roku, s. 145).

Alfabetycznie
Alfabetyczne uoenie elementw uatwia wyszukanie okrelonego elementu, jeli znamy jego nazw lub tytu. Kolejno
alfabetyczna moe te by uzupenieniem innego schematu organizacji.
Na przykad, gdy znamy nazwy producentw kapeluszy, moemy
je uoy w takiej kolejnoci:
Bowler
Cap
Fedora
Witryna Zagat (www.zagat.com) prezentuje list restauracji,
ktrych nazwy s uoone alfabetycznie (rysunek 3.20).
Rysunek 3.20.
Alfabetyczny
schemat
organizacji.
Czasem zwyke
abecado jest
najlepszym
narzdziem
organizacji
zawartoci
witryny,
szczeglnie w
przypadku,
gdy uytkownik zna
nazwy elementw,
ktrych poszukuje

118

Web Design. Projektowanie atrakcyjnych stron WWW

Chronologicznie
Przykadami zastosowa dla chronologicznego schematu organizacji mog by yciorysy, listwy czasowe historii czy archiwa (rysunek 3.21).
Portier przyjmujcy goci mgby uoy kapelusze zgodnie z
czasem przybycia poszczeglnych goci:
13:01
13:05
13:15

Wedug pooenia geograficznego


Schemat organizacji zawartoci oparty na pooeniu geograficznym moe by stosowany w listach oferowanych posad, lokalnych aktualnociach czy prognozach pogody (rysunek
3.22).
Rysunek 3.21.
Chronologiczny
schemat
organizacji.
Witryna
ConsumerReview.com
prezentuje
artykuy prasowe
uoone
chronologicznie,
od najnowszego
do najstarszego

Rozdzia 3.  Dobr zawartoci witryny

119

Rysunek 3.22.
Organizacja wedug
pooenia
geograficznego.
Witryna Gymboree
(www.gymboree.com)
prezentuje oferty
posad
posegregowane
wedug pooenia
geograficznego

Nasze kapelusze moglibymy uoy wedug miejsca ich wykonania:


Afryka
Holandia
Japonia

Wedug cechy
Piwa mona uoy od najciemniejszego do najjaniejszego,
za sosy od najbardziej agodnego do najbardziej pikantnego.
Nakrycia gowy mona uoy wedug ich wielkoci od najmniejszego do najwikszego:
Beret
Czapka z daszkiem
Kapelusz kowbojski
Mona je te uoy wedug ceny od najtaszego do najdroszego:

120

Web Design. Projektowanie atrakcyjnych stron WWW


10 z
15 z
40 z
Wreszcie, mona je uoy wedug stopnia twardoci:
Czapka narciarska
Czapka z daszkiem
Cylinder
Witryna Peapod (www.peapod.com), zajmujca si sprzeda i
dostawami ywnoci, posiada struktur umoliwiajc uytkownikom wywietlenie elementw uoonych wedug ceny,
liczby kalorii, zawartoci rodkw konserwujcych itp.
(rysunek 3.23).

Wedug kategorii
Poszczeglne elementy mona posegregowa w kategorie, identyfikowane przez wyrniajc je waciwo (rysunek 3.24).
Na przykad ksika telefoniczna jest uporzdkowana wedug
kategorii, dziki czemu atwo mona znale numer telefoniczny lekarza, nawet jeli nie zna si jego nazwiska.
Rysunek 3.23.
Organizacja wedug
wybranej cechy. Ta
sekcja witryny
Peapod pozwala
uytkownikom
uporzdkowa
elementy wedug
wielkoci
opakowania, ceny
za jednostkow
objto
i ceny sumarycznej

Rysunek 3.24.
Organizacja wedug
kategorii. Witryna Zagat
umoliwia wyszukanie
restauracji wedug
ssiedztwa, serwowanej
kuchni bd
alfabetycznie w obrbie
danego miasta

Rozdzia 3.  Dobr zawartoci witryny

121

Kapelusze mona uporzdkowa wedug kategorii lub wyrniajcych cech:


Kapelusze z pirkiem
Kapelusze ze wstk
Kapelusze stylowe

Wedug zada
Metafora pulpitu w komputerze jest inspirowana przez
czynnoci biurowe wykonywane na biurku lub w jego pobliu,
takie jak pisanie, porzdkowanie, segregowanie czy wyrzucanie dokumentw. Z kolei proces zamawiania produktw w
sklepie internetowym naladuje rzeczywiste czynnoci wykonywane w trakcie zakupw w fizycznie istniejcym sklepie.
Witryna GM BuyPower (www.gmbuypower.com) wykorzystuje schemat organizacji wedug zada (rysunek 3.25). Bazuje on na
zadaniach zwizanych z poszukiwaniem, porwnywaniem, sprawdzaniem i kupowaniem samochodu.

Wedug grup uytkownikw


Ten schemat dzieli funkcje i sekcje witryny wedug grup
uytkownikw, ktre mog by nimi zainteresowane (rysunek
3.26).
Rysunek 3.25.
Organizacja wedug
zada. Witryna GM
BuyPower dzieli
proces zakupw
samochodu na
poszczeglne
zadania

Rysunek 3.26. Organizacja wedug grup uytkownikw. Witryna Cornell


University (www.cornell.edu) jest podzielona na sekcje przeznaczone dla
rnych grup uytkownikw, w tym studentw, potencjalnych studentw,

122

Web Design. Projektowanie atrakcyjnych stron WWW

absolwentw i fanw druyny sportowej

Hierarchicznie
Zawarto witryny moe te by uporzdkowana wedug hierarchii informacji. Struktura taka moe by wska i gboka,
czyli skada si z zaledwie kilku sekcji oferujcych wiele
stron ze szczegami.
Struktura informacji moe te by szeroka i pytka, z wieloma sekcjami skadajcymi si z zaledwie kilku stron kada (rysunek 3.27). Tak struktur mona atwo rozbudowywa, dodajc strony do poszczeglnych sekcji.
Rysunek 3.27.
Organizacja
hierarchiczna.
Witryna MPM3.net
posiada szerok,
pytk,
hierarchiczn
struktur
informacji,
podzielon na
cztery sekcje.
Mona j atwo
rozbudowa,
dodajc strony do
poszczeglnych
sekcji

Pamitaj, e zaplanowanie rozbudowy witryny ju w trakcie


jej projektowania moe na dusz met zaoszczdzi czas i
pienidze.

Wedug metafory
Metafory sprawiaj, e witryna, ktra jest dla uytkownika
zupenie nowa, jest dla niego zrozumiaa, poniewa odnosi
si do poj lub abstrakcji, ktre ju zna.
Witryny korzystaj z trzech podstawowych typw metafor. Metafory organizacyjne polegaj na podziale zawartoci na kategorie, metafory funkcjonalne wi si z wykonywanymi zadaniami, natomiast metafory wizualne dotycz wszystkiego
tego, co uytkownik widzi.

Rozdzia 3.  Dobr zawartoci witryny

123

Metafory organizacyjne
Wikszo sklepw z artykuami spoywczymi dzieli ywno
na takie same kategorie, czyli stosuje taki sam system organizacji. Jogurt i ser zawsze znajdziesz w dziale nabiau, czosnek w dziale warzywnym, za drodwk w dziale wypiekw.
Podczas tworzenia witryny Peapod zastosowano metafor organizacyjn i model konceptualny sklepu spoywczego, naladujc go w postaci elektronicznej. Kategorie i nazwy dziaw
s takie same, jak w rzeczywistym sklepie spoywczym (rysunek 3.28).
Rysunek 3.28.
Metafory
organizacyjne.
Witryna Peapod
naladuje
rzeczywisty sklep
spoywczy

Metafory funkcjonalne
Gdy chcesz znale ksik w fizycznie istniejcej bibliotece, moesz przeszuka katalog, przejrze zawarto pek lub
poprosi o pomoc bibliotekarza. Witryny internetowe bdce
elektronicznymi bibliotekami rwnie oferuj uytkownikom
te opcje.
Witryna
biblioteki
Los
Angeles
Public
Library
(www.lapl.org) pozwala przeszuka katalog wedug sowa
kluczowego, autora, tematu, tytuu lub numeru porzdkowego
(rysunek 3.29). Ponadto pozwala ucili poszukiwania przez
podanie formatu (nagranie dwikowe, klip wideo, mapa i inne) oraz jzyka.

124

Web Design. Projektowanie atrakcyjnych stron WWW

Rysunek 3.29.
Metafory
funkcjonalne.
Witryna biblioteka
Los Angeles Public
Library
funkcjonuje w
podobny
sposb, jak
tradycyjna
biblioteka
pozwala stosowa
te same metody
poszukiwania, a
nawet poprosi
bibliotekarza
o pomoc

Uytkownicy mog poprosi o pomoc bibliotekarza dostpnego


online, sprawdzi stan swojej karty bibliotecznej i przesun termin oddania ksiki.

Metafory wizualne
Internetowa ksika telefoniczna z adresami firm i numerami
ich telefonw jest koloru tego, dziki czemu tworzy skojarzenie z tymi stronami fizycznie istniejcej ksiki
telefonicznej. W witrynie stanowicej internetowy sklep spoywczy narzdzia nawigacji wygldaj jak brzowa papierowa
torba pena zakupw, za elementy w koszyku s wywietlane
w dziurkowanym notesiku podobnym do tych, ktre s tak chtnie uywane przez gospodynie domowe do robienia listy sprawunkw.
Przed
przeprojektowaniem
witryna
Encyclopedia
(www.encyclopedia.com) korzystaa z dosownej wizualnej metafory encyklopedii. Uytkownicy mogli nawigowa w encyklopedii, klikajc obrazki tomw na pce, za poszczeglne menu wyglday jak strona indeksowa ksiki (rysunek 3.30).

Rozdzia 3.  Dobr zawartoci witryny

125

Rysunek 3.30.
Metafory wizualne.
Oto przykad
witryny, w ktrym
zastosowanie
bezporedniej
metafory wizualnej
okazao si bdem
nie pomaga ona,
lecz przeszkadza
w korzystaniu z
internetowej
encyklopedii.
Obrazek
przedstawiajcy
tomy encyklopedii
na pce nie jest
tak czytelny, jak
cza
z poszczeglnymi
literkami,
zajmujce mniej
miejsca i szybciej
pojawiajce si
na ekranie
(pokazane
na rysunku 3.31)

Niestety, takie rozwizanie okazao si bdem. Waciciel


witryny poprosi dodanie nowej funkcji mechanizmu automatycznego wyszukiwania a takiego rozwizania nie ma w papierowych encyklopediach. Jak w takim wypadku przedstawi
mechanizm wyszukiwania, skoro przeczy on zastosowanej metaforze? Wobec braku innego wyjcia przeprojektowano ca witryn Encyclopedia (rysunek 3.31).
Jak zwykle, projektanci musz przeanalizowa i przetestowa
metafory organizacyjne z potencjalnymi uytkownikami. Jeli uytkownicy nie bd w stanie zrozumie metafory zastosowanej w witrynie, bdzie ona bezuyteczna.

126

Web Design. Projektowanie atrakcyjnych stron WWW

Rysunek 3.31.
Przeprojektowana
witryna
Encyclopedia. Nowy
projekt wzmacnia
pozytywne
postrzeganie marki
tej encyklopedii i
minimalizuje
liczb odnonikw
do liter alfabetu,
ktre w
poprzedniej wersji
wypeniay cay
ekran.
Wygospodarowane
miejsce na ekranie
suy do
prezentacji wielu
funkcji witryny,
w tym przydatnego
mechanizmu
wyszukiwania
i dziennych
aktualizacji

Tworzenie i testowanie spisu treci witryny


Rozpocznij od opracowania spisu treci witryny, a nastpnie
przetestuj go, by sprawdzi, czy zawiera wszystkie elementy, ktre bd satysfakcjonoway uytkownikw oraz czy reprezentuje prawidow struktur zawartoci.

Tworzenie spisu treci


1. Ustal, w jaki sposb zorganizujesz zawarto (utwrz
szkic).
Rozpocznij od piciu do dziewiciu kategorii
wygenerowanych na spotkaniu powiconym zawartoci i
strukturze witryny. Wymie elementy w kadej z kategorii

Rozdzia 3.  Dobr zawartoci witryny

127

zgodnie z ich priorytetem (zgodnie z tabel zawartoci


witryny).
2. Przeanalizuj dostpne schematy organizacyjne (opisane
wczeniej) i wybierz taki, ktry najlepiej spenia
zaoenia caej witryny i kadej z jej sekcji.
Bazujc na modelach uytkownikw i scenariuszy ich
dziaa oraz na informacjach o tym, ktre elementy
istniejcej witryny sprawdzaj si, a ktre nie (jeli
pracujesz nad przeprojektowaniem witryny), postaraj si
przewidzie intuicyjne podejcie uytkownikw i, jeli
to konieczne, zastosuj rne schematy w kadej sekcji o
raz w witrynie jako caoci.
Czy ktre kategorie powinny zosta rozdzielone lub
poczone?
Czy jakie materiay powinny zosta zgrupowane w inny
sposb,
ni s obecnie?
Czy naley zmieni priorytety niektrych materiaw
(na przykad, czy ktra z podstron nie powinna si
czasem sta stron gwn)?
Pamitaj, e witryny internetowe mog korzysta z
rnych schematw
i ich kombinacji, w zalenoci od przeznaczenia
poszczeglnych sekcji.
Witryna Peapod korzysta z kilku rnych metafor (rysunek
3.32). Metafora organizacyjna pozwala odwiedzajcym
robi zakupy w taki sam sposb, jak w rzeczywistym
sklepie spoywczym. Na przykad, gdy odwiedzajcy bdzie
chcia kupi szarlotk, bez wikszych wtpliwoci
powinien klikn ikon Bakeshop (dzia wypiekw),
nastpnie Desserts (desery) i wreszcie Pies (ciasta).
Schemat organizacyjny oparty na cechach elementw pozwoli
odwiedzajcym wywietli ciasta wedug wielkoci, ceny,
zawartoci tuszczu, zawartoci cukru, liczby kalorii
bd innych cech. Dla twrcw witryny Peapod byo jasne,
e wielu klientw czyta na pudekach produktw etykiety z
informacj o zawartoci tuszczu i cukru.
3. Wska najwaniejsze kategorie.
Ktre z kategorii zawieraj najwaniejsze materiay, o
najwyszym priorytecie? Te kategorie i ich nazwy uformuj
gwne obszary witryny, ktre pniej przeksztac si w
globalne narzdzia nawigacji.
4. Wska kategorie o mniejszej wanoci.

128

Web Design. Projektowanie atrakcyjnych stron WWW


Czy projekt zawiera kategorie, w ktrych znajduje si
pomoc i wsparcie techniczne oraz informacje o sposobie
uytkowania witryny?
Te kategorie stan si drug warstw wsparcia i pomocy w
witrynie. Ich nazwy uformuj i bd reprezentoway
funkcje pomocy technicznej i nawigacj do informacji
administracyjnych witryny. Pamitaj, by zamieci w
witrynie dodatkowe informacje na temat wsparcia, takie
jak informacje kontaktowe i strony z komunikatami
bdw.

Rysunek 3.32.
Metafory
zastosowane
w witrynie Peapod.
Witryna internetowa
moe korzysta
z kilku rnych
metafor i ich
kombinacji, w
zalenoci
od przeznaczenia
poszczeglnych
sekcji.
W tym przypadku
metafory
organizacyjne
uatwiaj
odwiedzajcym
wybieranie
produktw
spoywczych.
Na przykad
szarlotk
uytkownik znajdzie
klikajc ikony
Bakeshop (dzia
wypiekw),
nastpnie Desserts
(desery) i wreszcie
Pies (ciasta).
Uoenie produktw
wedug wybranej
cechy pozwala
uytkownikom
przeanalizowa
takie ich
waciwoci, jak
wielko, cena,
zawarto tuszczu,
zawarto cukru,
kaloryczno i inne

Rozdzia 3.  Dobr zawartoci witryny

129

5. Opracuj struktur relacji pomidzy elementami


zawartoci witryny.
Wewntrz kadej grupy naszkicuj rozgazion hierarchi,
okrelajc relacje pomidzy poszczeglnymi elementami.
Ta hierarchia powinna przechodzi od oglnych tematw do
bardziej szczegowych i specjalistycznych.
Uyj jednego bd kilku schematw organizacyjnych, ktre
najlepiej oddadz istot tematu danej kategorii
(podejmij decyzj w oparciu o cele witryny i potrzeby
uytkownikw).
Moe istnie kilka alternatywnych sposobw
zorganizowania kategorii
i ich zawartoci. Zbadaj wszystkie, ktre uwaasz za
rozsdne, by wybra najlepsze rozwizanie.
6. Wybierz struktury do testowania.
Zaw wybr do dwch lub trzech struktur, ktrych
komunikacja jest najbardziej odpowiednia. W dalszym
cigu nie moesz zapomina o porwnywaniu zaoe z
wynikami bada przeprowadzonych z grupami uytkownikw,
ze scenariuszami ich zachowania i z celami witryny, aby
przez cay czas mie pewno, e projekt zmierza we
waciwym kierunku.
Przeprowad testy uytecznoci, aby wybra struktur
zawartoci, ktra najbardziej spodoba si uytkownikom i
najlepiej speni zaoenia biznesowe witryny.
Spis treci witryny
Oto przykadowy spis treci witryny. Zwr uwag na schemat numerowania poszczeglnych elementw. Liczba po lewej stronie kropki reprezentuje kategori, natomiast liczba po jej prawej stronie jest oznaczeniem
kolejnych elementw kategorii. Ten schemat bdzie podstaw do utworzenia mapy witryny, ktr zajmiemy si w rozdziale 4. (Tworzenie mapy
witryny i schematw pracy uytkownika).
1.
Cz informacyjna
1.1.
Najwiesze wieci
1.2.
Nowoci w Internecie
1.3.
Artykuy
1.3.1. Nowoci dotyczce
uytecznoci
1.3.2. Pisanie tekstw na
potrzeby Internetu
1.3.3. Konferencje
2.
Wskazwki dotyczce
komunikacji
2.1.
Internet
2.2.
E-mail
2.3.
Poczta gosowa

4.3.
Numery telefonw
4.3.1. USA
4.3.1.1. Zarzd
4.3.1.2. Dzia
marketingu
4.3.1.3. Dzia
projektowy
4.3.1.4. Dzia rozwoju
4.3.2. Europa
4.3.2.1. Zarzd
4.3.2.2. Dzia
marketingu
4.3.2.3. Dzia
projektowy

130

Web Design. Projektowanie atrakcyjnych stron WWW

2.4.
Powiadomienia
3.
Wskazwki dotyczce stylw
3.1.
Tworzenie stylu
3.2.
Specyfikacje dotyczce
projektowania informacji
3.3.
Wskazwki dotyczce
oprawy graficznej
3.4.
Specyfikacje HTML
4.
Informacje o firmie
4.1.
Regiony sprzeday i
marketingu
4.1.1. USA
4.1.2. Europa
4.1.3. Azja
4.2.
Schematy organizacyjne
4.2.1. Zarzd
4.2.2. Dzia marketingu
4.2.3. Dzia projektowy
4.2.4. Dzia rozwoju

4.3.2.4. Dzia rozwoju


4.3.3. Azja
4.3.3.1. Zarzd
4.3.3.2. Dzia
marketingu
4.3.3.3. Dzia
projektowy
4.3.3.4. Dzia rozwoju
5.
Rozwj firmy
5.1.
Cele
5.2.
Badania
5.2.1. Planowanie wydajnoci
5.3.
Planowanie
5.3.1. Planowanie rozwoju
5.4.
Rozwj
5.4.1. Wysoka wydajno
5.4.2. Efektywna komunikacja
5.4.3. Efektywne spotkania
5.4.4. Szkolenia
5.4.5. Odnoniki i cza

Sprawd rezultaty
Nie zapomnij sprawdzi uzyskanych rezultatw dotyczcych zawartoci witryny (rysunek 3.33). Przede wszystkim sprawd
plany dotyczce poniszych kwestii:
Typy materiaw
Kategorie zawartoci
Nazwy poszczeglnych kategorii
Struktura spisu treci
Rysunek 3.33.
Przetestuj nazwy
elementw
i struktur.
Zawsze testuj
rezultaty, by mie
pewno,
e uytkownicy
pozytywnie na nie
zareaguj

Na tym etapie przeprowadzane s testy nieformalne. Zesp


nie dysponuje adnymi projektami stron, ktre mgby przetestowa jedynie koncepcjami, nazwami i kategoriami.
Formalne testy zostan przeprowadzone pniej, gdy zostanie
zaprojektowana wystarczajca cz witryny i gdy wysze

Rozdzia 3.  Dobr zawartoci witryny

131

koszty testw formalnych bd miay swoje uzasadnienie.


Obecnie moesz jedynie zebra pewne dane jakociowe, ktre
mog podsun czonkom zespou rne twrcze pomysy w trakcie procesu projektowania.
W niektrych przypadkach warto zwerbowa ekspertw dziedzin,
ktre s omawiane w witrynie. Powinni oni wzi udzia w
projektowaniu witryny, gdy jest ona kierowana do bardzo
specyficznego grona uytkownikw bd gdy nie czujesz si zbyt
mocno w danym temacie lub po prostu nie znasz si na
zagadnieniach poruszanych w witrynie. Eksperci s rwnie
przydatni, gdy ze wzgldu na kwestie bezpieczestwa lub
tajemnicy nie moesz kontaktowa si bezporednio z
uytkownikami. We wszystkich tych przypadkach eksperci
wystpuj w roli konsultantw.

Jak przeprowadzi test


Ten test powinien ujawni, czy nazwy i struktura s zrozumiae, czy te powinny zosta zmienione. Nazwy poszczeglnych kategorii i elementw zawartoci oraz struktur witryny bdziesz testowa, pokazujc tabel zawartoci czonkom
poszczeglnych grup uytkownikw. Jeli nie jeste pewien,
ktr struktur wybra, przetestuj struktury, ktre Twoim
zdaniem reprezentuj najwiksze moliwoci; test pokae,
ktra z nich jest najlepsza.
Aby przeprowadzi test, powiniene:
poprosi o wzicie w nim udziau swoich znajomych,
wsppracownikw i czonkw rodziny, ktrzy kwalifikuj
si do zdefiniowanych grup uytkownikw;
przeprowadzi test indywidualnie z kadym z uczestnikw;
pokrtce opisa danej osobie witryn i jej cele;
zaprezentowa jej nazwy poszczeglnych kategorii i
elementw zawartoci na kartce papieru i zapyta, co
spodziewaaby si ona zobaczy w kadej z sekcji;
wymieni kilka elementw i wanych fragmentw zawartoci
witryny i zapyta osob biorc udzia w tecie, gdzie
by ich szukaa;
przetestowa wszystkie nazwy, proszc osoby biorce
udzia w tecie, by odgady, jakie elementy reprezentuje
kada z nazw (w przypadku mylcych nazw popro o sugestie
lepszych);
poka kadej z osb tabel zawartoci witryny i zapytaj,
czy przyjty sposb zgrupowania materiaw jest

132

Web Design. Projektowanie atrakcyjnych stron WWW


zrozumiay (w przypadku wtpliwoci zapytaj, jakie
przegrupowanie sprawioby, e struktura staaby si
bardziej zrozumiaa).

Skoryguj projekt zawartoci na podstawie wynikw testw


Przestudiuj wyniki testw uytecznoci i w razie potrzeby
skoryguj tabel zawartoci.
Pamitam, e w jednym z projektw, w ktrych braam udzia,
zleceniodawca zayczy sobie, by zastosowano nazw Sygnatura dla obszaru witryny, ktry wymaga rejestracji uytkownika. W trakcie testw okazao si, e nikt nie wiedzia,
co moe kry si za tak dziwaczn nazw, wic uytkownicy
przypuszczalnie nie byliby skonni specjalnie si logowa,
by si przekona, co tam mona znale. Jeden z uczestnikw testw zasugerowa nazw Tylne wejcie, co w testach
z innymi okazao si dobrym rozwizaniem.
Z kolei w projekcie witryny bdcej skadnic fotografii zesp zapyta uytkownikw, w jakiej kategorii szukaliby fotografii szawi. Uytkownicy jednomylnie odpowiedzieli roliny, cho projektanci pierwotnie umiecili j w sekcji
zioa.
Po modyfikacjach ponownie przeprowad testy, by si upewni, e po poprawkach aden punkt nie budzi ju wtpliwoci.

Oce prace, dojd do porozumienia


i przejd do nastpnego etapu
Oce ostateczny szkic planu zawartoci wraz z opiniami
uytkownikw dotyczcymi zawartoci i struktury witryny.
Przyjrzyj si uzyskanym rezultatom wraz z osob podejmujc
decyzje w imieniu zleceniodawcy.
Dojd do porozumienia z caym zespoem przed przejciem do
nastpnego etapu. W przeciwnym razie narazisz zesp na
niepotrzebn prac, jeli okae si, e opinie na temat
struktury i zawartoci witryny s podzielone.
Gratulacje! Zaprojektowae zawarto witryny. Teraz nadszed czas na zdefiniowanie sposobu, w jaki uytkownik b-

Rozdzia 3.  Dobr zawartoci witryny

133

dzie nawigowa i korzysta z witryny. Czas na przygotowanie


mapy witryny i schematw pracy uytkownika.

Podsumowanie
Tre witryny musi wspomaga mark organizacji, jej
polityk marketingow, sprzeda, relacje z klientami i
programy komunikacji.
Daj uytkownikom moliwo personalizacji lub
modyfikowania zawartoci oraz wygldu witryny. Zastosuj
marketing indywidualny, aby odwiedzajcy widzieli to, co
chc widzie, wtedy, kiedy chc i w taki sposb, w jaki
chc to zobaczy.
Zaprojektuj, zaplanuj i opracuj mechanizmy, ktre
zaangauj uytkownikw witryny jako wsptwrcw jej
zawartoci. Zapro ich do wyraania opinii na temat
witryny, aby mg nieustannie dopasowywa projekt i
sprawia, by by coraz bardziej praktyczny, wygodny i
atrakcyjny.
Opracuj spis treci witryny, prezentujcy proponowan
struktur i materiay. Przeprowad testy z
reprezentatywnymi uytkownikami, wprowadzajc poprawki
na podstawie ich uwag.
Osignij konsensus w sprawie zawartoci witryny z
osobami podejmujcymi decyzje, reprezentujcymi
zleceniodawc. Dopiero, gdy to zrobisz, bdziesz mg
przej do nastpnego etapu.

You might also like