Serwisy WWW. Projektowanie, tworzenie i zarządzanie

IDZ DO
PRZYK£ADOWY ROZDZIA£

SPIS TRE CI Serwisy WWW. Projektowanie,
tworzenie i zarz¹dzanie
KATALOG KSI¥¯EK Autor: June Cohen
T³umaczenie: Agata Bulandra (rozdz. 1–8),
KATALOG ONLINE Marek Pa³czyñski (rozdz. 9–15, dod. A)
ISBN: 83-7361-315-3
ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: The Unusually Useful Web Book
Format: B5, stron: 380

TWÓJ KOSZYK Wszystko, co powiniene wiedzieæ,
DODAJ DO KOSZYKA by Twój serwis WWW odniós³ sukces
• 10 kroków do sukcesu Twojej strony
• 50 sposobów na zwiêkszenie ogl¹dalno ci
CENNIK I INFORMACJE • 17 metod przyspieszenia ³adowania siê strony
• 20 sposobów na wy¿sze miejsce w wyszukiwarkach
• 10 prostych metod na sprawienie, by Twoja strona by³a bardziej
ZAMÓW INFORMACJE
O NOWO CIACH przyjazna dla odwiedzaj¹cych
• 8 typowych b³êdów, które mo¿esz natychmiast poprawiæ
ZAMÓW CENNIK Dwie ksi¹¿ki w jednej
Je¿eli chcesz przyst¹piæ do pracy od razu i nie masz zamiaru czytaæ ca³o ci, wystarczy,
¿e przejrzysz fragmenty z poradami ekspertów. Je li dysponujesz wolnym czasem,
CZYTELNIA mo¿esz zapoznaæ siê ze szczegó³owym omówieniem takich tematów jak: planowanie,
projektowanie, budowanie i utrzymywanie serwisu internetowego.
FRAGMENTY KSI¥¯EK ONLINE
Listy zadañ
W ksi¹¿ce znajduje siê dwadzie cia list zadañ do wykonania, dziêki którym
przeprowadzenie najwa¿niejszych dla witryny operacji staje siê znacznie ³atwiejsze.
W ród opisywanych czynno ci mo¿na znale æ zwiêkszanie ruchu sieciowego,
przy pieszanie dzia³ania witryny, przygotowywanie planu projektu, zapewnianie
zgodno ci rozwi¹zania z ró¿nymi standardami.
Dodatkowe informacje
Dziêki dwudziestu piêciu dodatkowym wskazówkom praktycznym mo¿esz siê zapoznaæ
z codzienn¹ prac¹ takich serwisów jak MSN.com czy BabyCenter.com. Zawarte w tych
wskazówkach informacje dotycz¹ kluczowych dla serwisu zagadnieñ, np. dobieranie
Wydawnictwo Helion nazw poszczególnych sekcji czy efektywne rozsy³anie e-maili.
ul. Chopina 6 Rady znanych ekspertów
44-100 Gliwice Ponad piêædziesiêciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i za³o¿yciel
tel. (32)230-98-63 serwisu BlackPlanet -- dzieli siê na ³amach ksi¹¿ki informacjami na ró¿ne tematy —
e-mail: helion@helion.pl od sposobów zarabiania pieniêdzy do zasad wspó³pracy z programistami.
Pozbawione ¿argonu opisy
Wszystkie poruszane zagadnienia, od wykupywania domeny po przygotowanie
rysunków, s¹ opisane w sposób zrozumia³y, w formie instrukcji, które mo¿esz wykonaæ
krok po kroku.

Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 5

Spis treœci
Wprowadzenie 16 I Planowanie witryny 21
1. Podejmowanie decyzji 22
Co sprawdza siê w internecie? ...................... 23
Do dzie³a! Dziesiêæ korzyœci, które internet
mo¿e daæ firmie ........................................... 25
Opisanie misji ..................................................... 26
Pisanie planu Przyk³adowy opis misji .................................. 26
strona 35 Okreœlenie celów ................................................ 27
Typy celów ..................................................... 27
Czerpanie zysków Typowe cele .................................................. 27
Ustalenie celów witryny korporacyjnej ............... 28
strona 81
Czêœæ praktyczna:
Co bêdziemy robiæ z nasz¹ witryn¹? ............... 29
Testy funkcjonalnoœci
Decyzja o zawartoœci witryny ............................. 30
strona 143 Ustalenie priorytetów ..................................... 30
Lista propozycji .............................................. 30
Zwiêkszanie szybkoœci dzia³ania witryny Okreœlenie podstawowych funkcji ................. 31
strona 233 Wyznaczanie funkcji priorytetowych .............. 31
Wa¿noœæ ........................................................ 31
Zwiêkszanie ruchu £atwoœæ ......................................................... 32
Proces wyznaczania priorytetów ................... 32
strona 281
Wykres wyznaczania priorytetów ....................... 33
Poprawianie pozycji witryny
Jakie funkcje ma zawieraæ witryna? ................ 34
na liœcie wyszukiwanych adresów
strona 323 Do dzie³a! Pisanie planu 35
Dlaczego nale¿y pisaæ plan? .............................. 36
Plan podstawowy .......................................... 36
Nie dajmy siê sparali¿owaæ ........................... 37
Podstawowy plan produktu ................................ 38
Tworzenie planu produktu ............................. 43

2. Nazwa witryny 44
Wybieranie nazwy ......................................... 45
Rejestrowanie nazwy .................................... 46
Trzy sposoby nazywania witryn ......................... 47
Wybór przyrostka .......................................... 48
Budowa adresu internetowego ...................... 48
Pozyskanie nazwy domeny ................................ 49
Jak nazwiemy witrynê? .................................... 50

6 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie

3. Ocena konkurencji 52 Do dzie³a! Czerpanie zysków 81
Identyfikacja konkurencji .................................... 54 Sposób zarabiania ......................................... 82
Sk¹d siê bierze konkurencja? ....................... 54 Cztery kroki prowadz¹ce
Jak znaleŸæ konkurencjê? ............................. 54 do zarabiania w internecie .......................... 82
Czêœæ praktyczna: Rozwa¿anie mo¿liwoœci ................................ 83
Kim jest nasza konkurencja? ............................. 55 Dlaczego decydowaæ siê tylko na jedno? ...... 83
Ocena konkurencji ............................................. 56 Piêæ sposobów zarabiania w internecie ............. 84
Analiza finansowa ......................................... 56 Czerpanie zysków ze sprzeda¿y ........................ 86
Analiza funkcjonalna ..................................... 56 Czego chc¹ nabywcy? .................................. 86
Rozpoznanie konkurentów ............................ 56 Czerpanie zysków z reklamy ......................... 87
Czêœæ praktyczna: Czego chc¹ reklamodawcy? ......................... 87
Ocena konkurencji ........................................... 57 Czerpanie zysków z op³at i subskrypcji .............. 88
Czego oczekuj¹ subskrybenci? ..................... 88
4. Poznawanie u¿ytkowników 58 Czerpanie zysków z kojarzenia .......................... 89
Wiedza o u¿ytkownikach .................................... 60 Czego oczekuj¹ poszukiwacze kontaktów? .. 89
Badania iloœciowe a jakoœciowe .................... 60 Formy p³atnoœci internetowych ........................... 90
G³ówne etapy badañ u¿ytkowników .............. 61 Czêœæ praktyczna:
Narzêdzia do badañ u¿ytkowników .................... 62 Sk¹d bêdziemy czerpaæ zyski? ........................ 91
Tworzenie profilu u¿ytkowników ......................... 64
Ankietowanie u¿ytkowników .......................... 65
Szacowanie liczby odbiorców ............................ 66
Kim s¹ u¿ytkownicy witryny? ............................. 67
Zobrazowanie u¿ytkowników ............................. 68
Tworzenie postaci .......................................... 68
Wskazówki praktyczne:
Nie jesteœmy u¿ytkownikami swojej witryny .... 69
Tworzenie scenariuszy .................................. 70
Podzia³ u¿ytkowników ................................... 70
Tworzenie postaci ............................................ 71
Przewidywanie potrzeb u¿ytkowników ............... 72
Narzêdzia do poznawania
potrzeb u¿ytkowników ................................. 72
Nasza witryna nie jest centrum wszechœwiata .... 73
Zrozumienie potrzeb u¿ytkowników ................... 74
Planowanie nowej witryny ............................. 74
Analiza zadania ............................................. 74
Przekszta³cenie zadañ w funkcje .................. 75
Jak uzyskaæ dobre wyniki z analizy zadania? .. 75
Zrozumienie zachowania u¿ytkowników ............ 76
Analiza ruchu ................................................. 76
Testy funkcjonalnoœci .................................... 76
Narzêdzia pomagaj¹ce zrozumieæ
zachowanie u¿ytkownika ............................ 76
Opinie klientów .............................................. 77
Piêædziesi¹t sposobów,
aby straciæ u¿ytkowników ................................ 78


II Projektowanie witryny 93 Czêœæ praktyczna:
W jaki sposób witryna
bêdzie zorganizowana? ................................. 134
5. Projektowanie Czêœæ praktyczna:
na potrzeby internetu 94 Jaki system nawigacyjny wybierzemy? ......... 135
Dobrze zaprojektowana witryna internetowa ... 95 Nazywanie dzia³ów witryny .............................. 136
Projektowanie dla u¿ytkownika .......................... 96 Wybieranie spójnych nazw ............................... 138
Dziesiêæ sposobów Kilka dobrych przyk³adów ................................. 139
poprawy funkcjonalnoœci witryny ..................... 97 Wskazówki praktyczne:
Projektowanie zgodnie z konwencjami .............. 98 Dlaczego nazwy dzia³ów powinny byæ
Wskazówki praktyczne: jasne, nie wymyœlne? ..................................... 140
Dlaczego nale¿y postêpowaæ Dziwne nazwy .................................................. 141
zgodnie z konwencjami? .................................. 99 Czêœæ praktyczna:
Jak ludzie widz¹ witryny internetowe? ............. 100 Jakich nazw dzia³ów u¿yjemy? ...................... 142
Konwencje wizualne w internecie i poza nim ... 101 Do dzie³a! Testy funkcjonalnoœci 143
Projektowanie pod k¹tem jêzyka HTML ........... 102 Piêæ typów testów funkcjonalnoœci .............. 144
Piêæ g³ównych zasad Czego mo¿emy dowiedzieæ siê
projektowania w HTML-u .......................... 102 z testów funkcjonalnoœci? .............................. 145
Poradnik: Czego nie mo¿emy siê dowiedzieæ… ......... 146
Wybór oprogramowania ................................. 103 Tani sposób przeprowadzenia testów .............. 147
Projektowanie dla ró¿nych systemów .............. 104 Wskazówki praktyczne:
Gdzie jest zgiêcie? ........................................... 105 Dlaczego testy funkcjonalnoœci
Projektowanie pod k¹tem szybkoœci pobierania . 106 mog¹ siê nie powieœæ? .................................. 150

6. Organizacja i nawigacja 110 7. Projekt graficzny 152
Dobrze zorganizowana witryna ................... 111 Co projekt graficzny mo¿e daæ witrynie? ..... 153
Organizacja witryny .......................................... 112 Projekt strony g³ównej ...................................... 154
Tworzenie struktury witryny .............................. 113 Osiem wskazówek projektowych
Wskazówki praktyczne: dla nowicjuszy ................................................ 157
Witryna nie powinna byæ odbiciem firmy ... 113 Piêæ spornych kwestii w projektowaniu ............ 158
Wskazówki praktyczne: Kolor w internecie ............................................. 160
Jak stworzyæ architekturê informacji? ............ 115 Wybór odpowiednich kolorów ...................... 160
Szeœæ sposobów organizacji witryny ................ 116 Znaczenie koloru ......................................... 160
Tworzenie zabawnych kategorii ....................... 119 Szeœæ wskazówek wybierania kolorów ........ 161
Dokumentowanie struktury witryny .................. 122 Tworzenie systemu kolorów ............................. 162
Nawigacja w witrynie ........................................ 124 RGB a CMYK .............................................. 162
Osiem z³ych pomys³ów na nawigacjê .......... 124 Kolory sprawdzaj¹ce siê w internecie .............. 163
Odrobina teorii: Kolor — kod szesnastkowy ......................... 163
Jak ludzie nawiguj¹ w internecie? ................. 125 Typografia w internecie .................................... 164
Nawigacja lokalna i globalna ............................ 126 Wybór kroju pisma ....................................... 164
Równowa¿enie warstw nawigacji ................ 126 Fonty szeryfowe a fonty bezszeryfowe ....... 164
Dlaczego rozwijane menu Czytelnoœæ na ekranie ................................. 165
nie nadaj¹ siê do nawigacji? ..................... 127 Verdana — najlepszy font w internecie ....... 166
Tworzenie systemu nawigacyjnego .................. 127 Formatowanie tekstu ................................... 167
Dwanaœcie systemów nawigacyjnych .............. 128 Font (czcionka) czy krój pisma? .................. 167


8. Technologie projektowe 168 III Budowanie witryny 185
HTML i XHTML ............................................ 169
Arkusze stylów ............................................ 169 9. Projektowanie
Rozszerzenia przegl¹darek ......................... 169
Skrypty dzia³aj¹ce po stronie klienta
na potrzeby internetu 186
(JavaScript) ............................................... 169 Dziesiêæ powodów, dla których strony
Skrypty dzia³aj¹ce po stronie serwera s¹ zbyt d³ugo pobierane ............................ 187
(ASP, PHP) ............................................... 169 Dlaczego strony s¹ zbyt d³ugo pobierane? ... 189
Aplety Java .................................................. 169 Kiedy „wolno” oznacza „zbyt wolno”? .......... 189
Jak uzyskaæ taki wygl¹d? ................................. 170 Projektowanie witryn
XHTML — informacje ....................................... 172 z uwzglêdnieniem ich zgodnoœci ................... 190
HTML a XHTML — ró¿nice ......................... 172 Planowanie zgodnoœci
Co trzeba wiedzieæ o jêzyku XHTML? ......... 172 z ró¿nymi systemami prezentacji .............. 190
Przejœcie na XHTML .................................... 173 Testowanie zgodnoœci ................................. 191
Konwersja kodu HTML na XHTML .............. 173 Przegl¹d technologii .................................... 191
Tabele — informacje ........................................ 174 Czêœæ praktyczna:
Nauka stosowania tabel .............................. 174 W jaki sposób uczyniæ stronê
Co trzeba wiedzieæ o tabelach? .................. 174 zgodn¹ z ró¿nymi przegl¹darkami? ............... 192
Ramki — informacje ......................................... 175 Projektowanie z zapewnieniem
Zastosowanie ramek ................................... 175 stabilnego dzia³ania witryny ........................... 193
Co trzeba wiedzieæ o ramkach? .................. 175 Zapewnienie stabilnej pracy witryny ............ 193
Arkusze stylów — informacje ........................... 176 Naprawianie wadliwie funkcjonuj¹cej witryny ... 194
Co trzeba wiedzieæ o arkuszach stylów? ..... 176 Udostêpnienie zasobów witryny osobom
Nauka stosowania arkuszy stylów ............... 177 niepe³nosprawnym ......................................... 196
JavaScript — informacje .................................. 178 To nie uprzejmoœæ — to inwestycja ............. 196
Co trzeba wiedzieæ o jêzyku JavaScript? .... 178 W Stanach Zjednoczonych
Nauka stosowania jêzyka JavaScript .......... 179 to tak¿e wymóg prawny ............................ 196
Inne mo¿liwoœci programowania ................. 179 Dostosowanie serwisu
Flash — informacje .......................................... 180 do potrzeb osób niepe³nosprawnych ........ 196
Co trzeba wiedzieæ o Flashu? ..................... 180 Piêæ niewielkich zmian czyni¹cych
Nauka stosowania Flasha ........................... 181 witrynê dostêpn¹ dla wiêkszego
grona u¿ytkowników .................................. 197
PHP — informacje ............................................ 182
Co trzeba wiedzieæ o PHP? ......................... 182 Gwarancja d³ugotrwa³ego dzia³ania witryny ..... 198
PHP a inne skrypty dzia³aj¹ce Dlaczego musz¹ istnieæ standardy? ............ 198
po stronie serwera .................................... 183 Co zapewniaj¹ standardy sieciowe? ........... 199
Nauka stosowania PHP ............................... 183 Co stoi na przeszkodzie, ¿eby wdra¿aæ
Inne technologie skryptowe dzia³aj¹ce standardy? ................................................ 199
po stronie serwera .................................... 183 Wskazówki praktyczne:
Dlaczego nale¿y stosowaæ standardy? .......... 200
Projektowanie infrastruktury serwerowej .......... 202
Technologie typu open-source .................... 202
Przegl¹d technologii serwerowych ................... 203


10. Zasada dzia³ania Do dzie³a! Zwiêkszanie
witryn internetowych 204 szybkoœci dzia³ania witryny 233
Tworzenie dokumentu HTML ...................... 205 W³aœciwie dzia³aj¹ca witryna internetowa ... 234
Trzy metody budowania witryn internetowych ... 206 Konfiguracja z myœl¹ o szybkoœci dzia³ania ..... 235
Rada eksperta: Zwiêkszenie szybkoœci witryny
Co cechuje dobre projekty internetowe? ....... 207 w szeœciu posuniêciach ................................. 236
Jak dzia³a HTML? ............................................ 208 Czêœæ praktyczna:
Pierwsza strona WWW .................................... 210 Jak zwiêkszyæ szybkoœæ dzia³ania witryny? ... 239
Jak z utworzonych stron powstaje
witryna internetowa? ...................................... 212 12. Aplikacje
Ustalenie w³aœciwego nazewnictwa ............ 212 w witrynie internetowej 240
Odpowiednia organizacja stron ................... 212
Wybór odpowiedniej technologii ....................... 242
Po³¹czenia miêdzy stronami ....................... 213
Unikanie potencjalnych trudnoœci ................ 242
Przesy³anie stron do serwera ...................... 213
Oszacowanie wartoœci nowej technologii ......... 243
Pobieranie stron WWW .................................... 214
Pobieranie stron generowanych
Dziesiêæ pytañ, jakie trzeba zadaæ
dynamicznie .............................................. 215
przed wyborem nowej technologii .................. 244
Zasada dzia³ania serwera ........................... 215
Tworzenie oprogramowania witryny ................. 245
11. Przygotowanie rysunków Budowanie zespo³u ..................................... 247
Budowa aplikacji .............................................. 248
i plików multimedialnych Dokumentacja aplikacji ................................ 248
do wykorzystania w internecie 216 Wskazówki praktyczne:
Podstawy kompresji .................................... 217 Wspó³praca z in¿ynierami .............................. 250
Jak dzia³a procedura kompresji? ................. 218
Podstawowe informacje na temat pamiêci ....... 219
Wyznaczanie rozmiaru pliku ........................ 219
Wyznaczanie rozmiaru pamiêci komputera ... 219
Pliki graficzne w internecie ............................... 220
Wybór formatu pliku graficznego ...................... 221
Przygotowanie rysunków
do wykorzystania w internecie ....................... 222
Przesy³anie danych audio ................................ 224
Dlaczego dŸwiêk na stronach WWW
mo¿e irytowaæ? ......................................... 224
Wybór formatu dla danych audio
wykorzystywanych na stronach WWW .......... 225
Przygotowanie danych audio
Przesy³anie danych wideo ................................ 228
Wybór formatu dla danych wideo
wykorzystywanych na stronach WWW .......... 229
Przygotowanie danych wideo


IV Zarz¹dzanie witryn¹ 253 Do dzie³a! Zwiêkszanie ruchu 281
Pocz¹tek ...................................................... 282
13. Monitorowanie Piêæ elementów istotnych
przy zwiêkszaniu ruchu ............................. 282
i rozbudowa witryny 254
Piêædziesi¹t sposobów zwiêkszenia ruchu ...... 283
Analiza witryny ................................................. 256 Pozyskiwanie nowych u¿ytkowników ............... 284
W jaki sposób u¿ytkownicy Zatrzymanie u¿ytkowników na stronach
korzystaj¹ z witryny? ...................................... 257 witryny przez d³u¿szy czas ............................ 286
W jaki sposób u¿ytkownicy odnajduj¹ witrynê? .. 258 Zachêcanie u¿ytkowników
Informacje o Ÿródle ...................................... 258 do czêstszych odwiedzin ............................... 288
Pomiar natê¿enia ruchu ................................... 259 Czêœæ praktyczna:
Sposób gromadzenia danych o ruchu ......... 259 W jaki sposób zwiêkszyæ ruch? ..................... 290
Niedok³adnoœæ pomiaru ............................... 259
O czym nale¿y pamiêtaæ 14. Promocja witryny 292
przy pomiarze ruchu? ............................... 259
Szeœæ elementów dobrej promocji witryny .... 293
Jak dzia³aj¹ systemy rankingowe? .............. 260
Strategie reklamy werbalnej ............................. 294
Poradnik:
Program p³atnych odsy³aczy ....................... 294
Wybór oprogramowania do analizy ruchu ..... 261
Programy typu „przeka¿ przyjacielowi” ........ 294
Tworzenie raportu na temat ruchu sieciowego .... 262
Ciekawe rozwi¹zanie:
Na co nale¿y zwróciæ uwagê? ..................... 262
Niesztampowe sposoby
informowania przyjació³ ................................. 295
Przyk³ad raportu na temat natê¿enia ruchu .... 263
Strategie wykorzystania poczty elektronicznej .... 296
Analizowanie zmian ..................................... 264
Szeœæ czynnoœci, jakie mo¿e
Co jest przyczyn¹
za nas wykonaæ poczta elektroniczna ....... 296
wzrostu natê¿enia ruchu? ......................... 264
Wybór w³aœciwej strategii wykorzystania
Typowy model ruchu ........................................ 265
poczty elektronicznej ................................. 297
Prognoza roczna .............................................. 266 Gromadzenie adresów e-mail ..................... 297
Styczniowy wzrost ....................................... 266
Wybór w³aœciwej strategii wykorzystania
Letnia stagnacja .......................................... 266
poczty elektronicznej ..................................... 298
Jesienny wzrost ........................................... 267
Budowanie listy adresowej ............................... 300
Grudniowy spadek ....................................... 267
Czy nale¿y kupowaæ listy z adresami? ........ 300
Wyj¹tki od regu³y ......................................... 267
Poradnik:
Rozwój witryny ................................................. 268
Wybór oprogramowania dla list adresowych .... 301
time.com — ma³e zmiany, znaczny efekt .... 268
Sprawdzanie teorii ....................................... 269 Wskazówki praktyczne:
Koncentracja na sprawach najwa¿niejszych ... 269 Dwanaœcie wskazówek gwarantuj¹cych
efektywne wykorzystanie poczty elektronicznej . 302
Jak MSN zachêca ludzi do klikania Strategie doboru odsy³aczy .............................. 304
(miliony razy)? ............................................... 270 Odsy³acze w wyszukiwarkach ..................... 304
Odsy³acze w katalogach .............................. 304
Odsy³acze z innych witryn ........................... 304
Jak serwis Webmonkey sta³ siê
Dlaczego nale¿y starannie
dochodow¹ bibliotek¹? .................................... 272
dobieraæ odsy³acze? ................................. 304
Rodzaje odsy³aczy ...................................... 305
Sk¹d w³aœciciele gURL.com wiedzieli,
Jak wiele stron zawiera odsy³acze
czego pragn¹ kobiety? .................................... 274
do zarz¹dzanej witryny? ........................... 305
Wskazówki praktyczne: Nag³ówki umieszczane na stronach
W jaki sposób twórcy BlackPlanet zdo³ali innych witryn ............................................. 306
nak³oniæ u¿ytkowników do rejestracji P³atne odsy³acze ......................................... 306
(i wnoszenia op³at)? ....................................... 276
Reklama sieciowa ............................................ 308
Wykorzystanie witryny ...................................... 278 Tworzenie udanej kampanii ......................... 308
Czêœæ praktyczna: Liczba klikniêæ to nie wszystko .................... 309
Wykorzystanie witryny ................................... 279


Ciekawe rozwi¹zanie: 15. Zarz¹dzanie
Szeœæ rodzajów reklam,
których nie mo¿na nie zauwa¿yæ ................... 310
projektem i zespo³em 334
Gdzie nale¿y umieszczaæ reklamy? ................. 312 Zarz¹dzanie projektem sieciowym ................... 335
Wybór witryny .............................................. 312 Wyjaœnianie celu prac ................................. 335
Cztery sposoby op³acania reklam ............... 312 Ustalenie sposobu podejmowania decyzji .... 335
Czêœæ praktyczna: Stosowanie s³owa „nie” ............................... 336
O co nale¿y zapytaæ Rozpoczêcie procesu .................................. 336
przed umieszczeniem reklamy? .................... 313 Wskazówki praktyczne:
Metody doboru reklam ..................................... 314 Jak dotrzymaæ zbli¿aj¹cego siê terminu? ...... 337
Dobór do treœci ............................................ 314 Wykorzystanie dotychczasowej wiedzy ....... 337
Dobór reklam do u¿ytkownika ..................... 314 Wskazówki praktyczne:
Rodzaje reklam ................................................ 315 Jak opracowaæ w³aœciwy harmonogram? ...... 338
Bannery ....................................................... 315 Wskazówki praktyczne:
Przyciski ...................................................... 315 Jak przeprowadzaæ burze mózgów? ............. 340
Wie¿owce .................................................... 315 Zarz¹dzanie zespo³em ..................................... 342
Pojawiaj¹ce siê i pozostaj¹ce okna ............. 316 Wskazówki praktyczne:
Reklamy typu rich media ............................. 316 Jak pos³ugiwaæ siê ró¿nymi jêzykami? .......... 343
Reklamy tekstowe ....................................... 316 Wskazówki praktyczne:
Odsy³acze sponsorowane ........................... 316 Jak nak³oniæ pracowników do wspó³pracy? ..... 344
Preferencje twórców serwisu ....................... 316 Organizowanie zespo³u .................................... 346
Standardy reklamy sieciowej ....................... 317 Zespó³ podstawowy ..................................... 346
Sponsorowanie serwisu .............................. 318 Zespó³ rozszerzony ..................................... 348
Umieszczanie produktów ............................ 318 Organizacja zespo³u projektowego .................. 352
Reklamy wideo ............................................ 318 Firmy sieciowe ............................................. 352
Przerywniki .................................................. 318 Du¿e korporacje i agencje sieciowe ............ 353
Strategie reklamowania witryny Ma³e firmy i firmy konsultingowe ................. 354
w ró¿nych mediach przekazu ........................ 319 Wskazówki praktyczne:
Czêœæ praktyczna: Jak w³¹czyæ wszystkich do pracy? ................. 355
Jak bêdzie promowana witryna? ................... 321
Jak bêdzie promowana witryna? ................... 322 Dodatki 356
Do dzie³a! Poprawianie A Rady ekspertów 356
pozycji witryny na liœcie Skorowidz 372
wyszukiwanych adresów 323
Zasada dzia³ania wyszukiwarek .................. 324
Plan dzia³ania .............................................. 324
Je¿eli wszystko zawiedzie... ........................ 324
Umieszczenie witryny na liœcie wyszukiwania ... 325
Umieszczenie witryny w katalogu ................ 325
Umieszczenie witryny na listach ................. 325
Jak dostaæ siê na listê Yahoo!? ..................... 326
Poprawianie pozycji witryny
na liœcie wyszukiwanych adresów ................. 327
Ciekawe rozwi¹zanie:
Jak przygotowaæ stronê
dobrze notowan¹ w rankingach? ................... 330
Jak poprawiæ notowania witryny
w rankingach wyszukiwarek? ........................ 331

110 Projektowanie witryny: organizacja i nawigacja

Rozdzia³ 6.

Organizacja
i nawigacja

Informacji… informacji…

Projektowanie witryny: organizacja i nawigacja 111

Jakby na to nie spojrzeæ, projekt internetowy to
przede wszystkim organizacja i nawigacja. Chocia¿ Dobrze zorganizowana witryna
wizualne dodatki takie jak kolor, grafika i style
Struktura witryny mo¿e nie byæ najbardziej atrak-
mog¹ bardziej przyci¹gaæ uwagê internautów, to
cyjnym, ale jest niew¹tpliwie najwa¿niejszym
w³aœnie struktura witryny decyduje o jej sukcesie.
aspektem projektu. Dobrze zorganizowana struk-
Jeœli witryna jest dobrze zorganizowana, u¿yt- tura sprawia, ¿e zadania u¿ytkownika s¹ proste —
kownicy realizuj¹ swoje cele bez wysi³ku, poniewa¿ takie, jakie powinny byæ! W procesie organizacji
dzia³y witryny dok³adnie odpowiadaj¹ ich potrze- witryny nale¿y uwzglêdniæ trzy ró¿ne elementy.
bom. Jêzyk u¿ywany w witrynie jest dla nich zrozu-
mia³y, a nawigacja jest konsekwentna i jasna. Z ko- Dobrze zorganizowana witryna cechuje siê:
lei witryna Ÿle zorganizowana (czyli taka, która by³a n logiczn¹ struktur¹. Witryna powinna byæ
budowana poœpiesznie lub przy jej tworzeniu bra- zorganizowana w sposób zrozumia³y dla
no pod uwagê wy³¹cznie potrzeby w³aœciciela) bê- u¿ytkowników. Dzia³y witryny powinny
dzie wprowadzaæ u¿ytkowników w b³¹d i w sposób odpowiadaæ potrzebom u¿ytkowników,
niezamierzony ukrywaæ przed nimi potrzebne in- a wszystkie podobne elementy (lub zadania)
powinny byæ pogrupowane. Zobacz równie¿
formacje i us³ugi.
„Organizacja witryny”, str. 112;
Sposób zorganizowania witryny tworzy jej szkie-
let. Mo¿na go porównaæ do belek tworz¹cych kon- n konsekwentn¹ nawigacj¹. U¿ytkownicy
strukcjê domu — organizacja stanowi strukturê, na chc¹ — patrz¹c na system nawigacji
w witrynie — móc zorientowaæ siê, w którym
której opiera siê projekt graficzny.
miejscu witryny siê znajduj¹, a tak¿e
Struktura witryny decyduje o jej zorientowaæ siê w kontekœcie (co jeszcze
jest w witrynie) i w kierunku (jak siê gdzieœ
sukcesie. Jeœli witryna jest dobrze dostaæ). Nawigacja powinna wyznaczaæ
zorganizowana, u¿ytkownicy realizuj¹ wyraŸne œcie¿ki, w szybki i intuicyjny sposób
prowadz¹ce u¿ytkowników do tego, czego
swoje cele bez wysi³ku.
potrzebuj¹. Zobacz równie¿ „Nawigacja
Mimo to wiele osób ma trudnoœci z rozdziele- w witrynie”, str. 124;
niem tych dwóch warstw projektu. Witryny wiele n zrozumia³ymi oznaczeniami. Nazwy, jakie
trac¹ z powodu mylenia warstw. „Trzeba oddzieliæ wybierzemy dla dzia³ów witryny, powinny
projekt struktury lub projekt funkcjonalny od pro- pomagaæ u¿ytkownikom w odnalezieniu tego,
jektu komunikacyjnego” — mówi Peter Merholz, czego szukaj¹. Nie b¹dŸmy zbyt pomys³owi.
wspólnik firmy konsultingowej Adaptive Path. „Lu- Po prostu mówmy jasno i wyraŸnie. Zobacz
dzie zwykle maj¹ bzika na punkcie koñcowego wy- równie¿ „Nazywanie dzia³ów witryny”, str. 136.
gl¹du i nie poœwiêcaj¹ ¿adnej uwagi niewidoczne-
mu szkieletowi funkcjonalnemu”.
Jednak ten szkielet jest najwa¿niejszy. Jeœli nie cokolwiek innego) jest wyznacznikiem jakoœci wi-
zorganizujemy witryny w sposób, który wyda siê tryny” — mówi Jesse James Garrett, autor ksi¹¿ki
u¿ytkownikowi rozs¹dny, ¿adne graficzne cuda nie The Elements of User Experience. „Kluczem do udanej
sprawi¹, ¿e u¿ytkownik bêdzie zadowolony. „Wi- witryny jest stworzenie dobrej struktury”.
tryna powinna dobrze dzia³aæ, zanim zacznie do- „Korporacje, a tak¿e konsultanci, zaczynaj¹ sto-
brze wygl¹daæ” — mówi Merholz. „Funkcjonal- sowaæ siê do tej zasady” — mówi Lance McDaniel,
noœæ jest najwa¿niejsza”. wiceprezes firmy konsultingowej SBI & Co.
Pomimo swojej strategicznej wa¿noœci struktu- „Architektura informacji odebra³a projektowi
ra witryny czêsto ustêpuje miejsca rzucaj¹cej siê bar- graficznemu miano najwa¿niejszego elementu pro-
dziej w oczy warstwie projektu. Na szczêœcie coraz jektu internetowego” — mówi Lance McDaniel.
wiêcej ludzi dostrzega wa¿noœæ struktury. „Projekt informacji przyæmiewa teraz projekt gra-
„Kiedyœ moja praca polega³a na tworzeniu tre- ficzny witryny i zbiera wiêcej laurów za sukces wi-
œci, ale zaj¹³em siê architektur¹ informacji, ponie- tryny, chocia¿ wczeœniej traktowany by³ zwykle lek-
wa¿ zda³em sobie sprawê, ¿e struktura (bardziej ni¿ cewa¿¹co”.


Organizacja witryny Organizacja witryny powinna byæ najlepszym
mo¿liwym po³¹czeniem tych trzech (czasami kon-
Chocia¿ nie jest tak fascynuj¹ca jak projekt graficz- fliktowych) kryteriów. Jeœli witryna jest poœwiêco-
ny ani tak presti¿owa jak treœæ redakcyjna lub tech- na tylko jednemu tematowi, ma jeden cel firmowy
niczna, to jednak organizacja — lub architektura i tylko jeden typ u¿ytkownika (posiadaj¹cego jedn¹
informacji — czêsto jest zasadniczym czynnikiem potrzebê), to zadanie organizacji jest proste. Jednak
sukcesu witryny. rzeczywistoœæ jest zazwyczaj bardziej skomplikowana.
Architektura informacji jest czêœci¹ projektu, ale
Jeœli witryna ma byæ skutecznie
jest œciœle powi¹zana ze strategi¹. Jeœli witryna ma
byæ skutecznie zaprojektowana i zorganizowana, to zaprojektowana i zorganizowana,
musimy dobrze wiedzieæ, dla kogo jest przeznaczo- musimy wiedzieæ, dla kogo
na i jakie cele ma zrealizowaæ.
jest przeznaczona i jakie cele
Zanim przyst¹pimy do procesu organizacji, mu-
simy wyznaczyæ cele witryny (zobacz równie¿ „Usta- ma zrealizowaæ.
lenie celów witryny korporacyjnej”, str. 28). Jeœli de- Ka¿da witryna ma zazwyczaj kilka grup u¿yt-
cyzje takie nie zostan¹ podjête — lub nie zostan¹ kowników, którzy chc¹ w ró¿nym czasie zrealizo-
przekazane zespo³owi projektuj¹cemu — niejasne waæ ró¿ne potrzeby, kilka ró¿nych typów treœci —
wytyczne bêd¹ rzutowaæ na ca³y proces projektowa- które niekoniecznie dobrze siê ze sob¹ ³¹cz¹, i ró¿-
nia, a¿ do ukoñczenia witryny. Zagmatwana misja ne cele do osi¹gniêcia — w zale¿noœci od tego, kogo
ujawni siê u¿ytkownikowi poprzez myl¹ce katego- w firmie zapytamy o nie.
rie i niespójny interfejs. „Wyzwaniem jest stworzenie dobrej, porz¹dnej
„Dobra architektura witryny wymaga, by w or- struktury bez ¿adnych dziur” — mówi Garrett.
ganizacji zosta³y uwzglêdnione wspólne cele” — „Wyzwania zwykle pojawiaj¹ siê, gdy próbujemy
mówi Jesse James Garrett. „Jeœli nie uda siê nam tego obs³u¿yæ odbiorców o bardzo zró¿nicowanych po-
osi¹gn¹æ, to nie bêdziemy mieli ani dobrej archi- trzebach albo gdy firmowe strategie nagle zaczynaj¹
tektury, ani dobrej witryny”. d¹¿yæ w przeciwnych kierunkach”.
Kryteria organizacji witryny: „Przyjemnie jest malowaæ taki wyidealizowany
n Cele u¿ytkownika. Organizacja witryny obraz projektu, w którym firma ma tylko jedn¹ stra-
musi byæ zrozumia³a dla u¿ytkowników tegiê, na dodatek bardzo jasno sformu³owan¹” —
oraz powinna umo¿liwiaæ realizacjê celów kontynuuje Garrett. „Prawdê mówi¹c, takie przy-
internautów. padki nie istniej¹. Firmy maj¹ wiele ró¿nych stra-
tegii — i to ró¿ni¹cych siê na poszczególnych
n Cele firmowe. Organizacja witryny musi etapach”.
tak¿e realizowaæ cele firmy, podkreœlaj¹c te Zwykle trudno jest dojœæ do porozumienia, która
funkcje lub produkty, które s¹ najwa¿niejsze (lub czyja) z tych strategii jest najwa¿niejsza. „Ar-
dla sukcesu firmy. chitektura informacji — bardziej ni¿ jakikolwiek
n System klasyfikacji treœci. Treœæ i us³ugi inny aspekt projektu internetowego — bêdzie pod
w witrynie zapewne daj¹ siê sklasyfikowaæ negatywnym wp³ywem polityki firmowej” — mówi
za pomoc¹ naturalnych kategorii (lub Garrett. „Wszystkie wewnêtrzne bitwy o zasoby
nachodz¹cych na siebie grup kategorii). w organizacji, bitwy o wsparcie dla ró¿nych firmo-
wych inicjatyw, bitwy o lepsze wyeksponowanie
przed kierownictwem znaczenia dzia³u maj¹ wp³yw
na decyzje dotycz¹ce architektury witryny”.


Tworzenie wskazówki praktyczne
struktury witryny Witryna nie powinna
Przed ró¿nymi witrynami stoj¹ ró¿ne wyzwania co byæ odbiciem firmy
do struktury, jednak ich projektanci podejmuj¹
podobne kroki, by utworzyæ strukturê informacji. Jedn¹ z najczêœciej pope³nianych przez projektan-
Sam proces mo¿e siê trochê ró¿niæ w zale¿noœci tów pomy³ek jest kszta³towanie witryny na wzór
od osób czy od projektów. Mo¿na u¿ywaæ ró¿nych struktury firmy i przydzielenie ka¿demu dzia³owi
narzêdzi, wypróbowywaæ odmienne taktyki i two- osobnej czêœci witryny z odnoœnikiem ze strony
rzyæ inne dokumenty, ale podstawowe czynnoœci s¹ g³ównej.
takie same. Jest to klasyczny b³¹d — mówi Michael Twida-
le, profesor bibliotekoznawstwa i nauk informacyj-
Cztery etapy tworzenia struktury witryny: nych z uniwersytetu w Urbana-Champaign w Illi-
1. Oceniamy, czym dysponujemy. nois. „Jest to dobre rozwi¹zanie, jeœli tworzymy
Najpierw musimy ustaliæ, co witryna firmowy intranet, poniewa¿ mo¿emy zak³adaæ, ¿e
powinna zawieraæ. ka¿dy pracownik zna hierarchiê firmy. Ale jeœli jest
to strona publiczna, to mamy problem.”
2. Podejmujemy decyzjê, co jest
najwa¿niejsze. Nie mo¿na zorganizowaæ
Jeœli firmowa witryna staje siê
(a tym bardziej zaprojektowaæ) witryny, dopóki
nie wiemy, które elementy s¹ najwa¿niejsze. map¹ firmy, na pewno nie osi¹gniemy
Czego najbardziej bêd¹ szukaæ u¿ytkownicy? zamierzonych rezultatów.
Czego naszym zdaniem maj¹ u¿ywaæ?
(Wendy Owen)
3. Wybierzmy zasadê organizacyjn¹.
Struktura wiêkszoœci witryn opiera siê na Problem polega na tym, ¿e nasza wewnêtrzna
jednym lub kilku systemach organizacyjnych. struktura nie ma ¿adnego znaczenia dla u¿ytkow-
Niektóre witryny s¹ zorganizowane wed³ug ników. Ich cele rzadko mo¿na umieœciæ na sche-
daty, inne wed³ug kategorii lub typu macie organizacyjnym firmy, a nasze nazwy dzia-
u¿ytkownika. ³ów na pewno bêd¹ dla nich niezrozumia³e. Mo¿e
siê to okazaæ trudne do wyjaœnienia wspó³pracow-
4. Kategoryzujmy zawartoœæ. Ostatni
nikom, którzy chc¹, by ich miejsce w witrynie by³o
i niezbêdny krok to zorganizowanie widoczne.
zawartoœci witryny w sposób zrozumia³y „Musimy przyj¹æ do wiadomoœci, ¿e w projek-
dla u¿ytkowników. cie internetowym jest wiele wewnêtrznej polityki”
— kontynuuje Twidale. „Ka¿dy wierzy, ¿e wykony-
1. Oceniamy, czym dysponujemy wana przez niego praca jest niezbêdna w dzia³a-
Pierwsz¹ czynnoœci¹ w procesie zorganizowania niu firmy. Oznacza to, ¿e ka¿dy chce, by jego dzia³
witryny (oczywiœcie po zdefiniowaniu celów witry- by³ widoczny na pierwszej stronie witryny. Co ja
mówiê — ka¿dy chce znajdowaæ siê na samej gó-
ny) jest rozpracowanie tego, czym mamy siê zaj¹æ.
rze pierwszej strony!”.
Co tak naprawdê ma znajdowaæ siê w witrynie?
Wspó³pracownikom trzeba to uœwiadomiæ, jeœli
W przypadku wielu witryn wystarczy prosta li-
chcemy zbudowaæ witrynê ciesz¹c¹ siê powodze-
sta, streszczaj¹ca zawartoœæ witryny. Niektóre witry- niem. „Struktura witryny nie powinna wygl¹daæ jak
ny wymagaj¹ jednak przeprowadzenia inwentary- schemat organizacyjny firmy” — mówi projektant-
zacji ca³ej istniej¹cej zawartoœci. ka Wendy Owen. „Jeœli firmowa witryna staje siê
map¹ firmy, to na pewno nie osi¹gniemy zamie-
rzonych rezultatów”.


Dwa sposoby oceny W restauracji dojdzie do realizacji zamówienia,
1. Stworzenie szkicu. Gdy tworzymy now¹ w internecie — nie. „Ludzie musz¹ jeœæ, ale czy
witrynê, zazwyczaj wystarczy podstawowy musz¹ œlêczeæ w naszej witrynie?” — mówi Zeld-
szkic, obejmuj¹cy typy treœci i us³ug, które man. „Jeœli przyt³oczymy ich zbyt wieloma mo¿li-
bêd¹ dostêpne w witrynie (zw³aszcza jeœli woœciami, pójd¹ gdzie indziej”.
witryna jest wzglêdnie ma³a). Powinniœmy tak¿e pamiêtaæ, ¿e nie wszyscy
u¿ytkownicy s¹ dla nas jednakowo wa¿ni. „Wœród
2. Inwentaryzacja zawartoœci. Jeœli zmieniamy
odbiorców jest wielu ró¿nych ludzi, nie ka¿dej gru-
projekt istniej¹cej witryny lub budujmy du¿¹
pie u¿ytkowników musimy poœwiêcaæ tyle samo
witrynê, mo¿emy potrzebowaæ sporz¹dzenia
uwagi” — mówi Owen. „Na przyk³ad, jeœli w witry-
skrupulatnej listy, zawieraj¹cej ka¿dy element
nie sprzedajemy szampon i stanowi to 90% naszych
dostêpny w witrynie (ka¿dy artyku³,
obrotów, to skupimy siê na osobach zainteresowa-
listê produktów, wszystkie ilustracje).
nych szamponem. Nie bêdziemy tak samo trakto-
Z tych list bêdziemy póŸniej korzystaæ,
waæ osób kupuj¹cych nasze ¿yletki, poniewa¿ ich
kategoryzuj¹c i organizuj¹c treœæ.
sprzeda¿ stanowi tylko 5% naszych obrotów”.
2. Decydujemy, 3. Wybierzmy zasadê organizacyjn¹
co jest najwa¿niejsze Organizuj¹c witrynê, bêdziemy musieli wybraæ
W trakcie organizowania witryny — zanim ustali- zasadê organizacyjn¹, wokó³ której powstanie struk-
my ostateczn¹ strukturê — musimy zdecydowaæ, tura naszej witryny. Na przyk³ad sklepy organizo-
które elementy s¹ w witrynie najwa¿niejsze. Czego wane s¹ wed³ug kategorii produktów, a elektroniczne
bêdzie poszukiwaæ wiêkszoœæ u¿ytkowników? Od pamiêtniki wed³ug daty wpisu.
czego zale¿y sukces finansowy witryny? Ka¿da witryna stanowi niepowtarzalne struktu-
„Jednym z najwiêkszych b³êdów, jakie widaæ ralne wyzwanie, jednak wiêkszoœæ witryn mo¿na
w witrynach, jest brak wyraŸnej hierarchii” — mówi zorganizowaæ na jeden z szeœciu sposobów: wed³ug
Wendy Owen, dyrektor Gigant Ant Design. „Usta- kategorii, zadania, u¿ytkownika, jêzyka lub po³o-
lenie, co jest najwa¿niejsze, naprawdê pomaga u¿yt- ¿enia, wed³ug daty lub dzia³u firmy (ostatni sposób
kownikom w zrozumieniu organizacji witryny”. nie jest zalecany). Zobacz równie¿ „Szeœæ sposobów
Jednak wiele firm wybiera ³atwiejsz¹ drogê i re- organizacji witryny”, str. 116.
zygnuje z takiego postêpowania. Traktuj¹ prioryte-
towo to, co szef chce uwa¿aæ za najwa¿niejsze lub 4. Kategoryzujemy zawartoœæ
— co jest jeszcze gorsze — nadaj¹ wszystkiemu tak¹ Ostatni etap organizacji jest najwa¿niejszy. Zawar-
sam¹ rangê. toœæ witryny trzeba podzieliæ na posiadaj¹ce jakieœ
„Zbyt wiele witryn unika organizowania mate- znaczenie kategorie lub dzia³y.
ria³ów wed³ug potrzeb u¿ytkowników” — mówi Teoretycznie jest to prosty proces. Wystarczy
Jeffrey Zeldman (www.zeldman.com). „Gdy o archi- podzieliæ wszystko na logiczne grupy — podobne
tekturze zaczynaj¹ decydowaæ komitety (a nie rzeczy dajemy razem, ró¿ne — osobno. Jednak fak-
potrzeby u¿ytkowników), powstaj¹ witryny, w któ- tyczny proces podzia³u nie jest taki ³atwy. Trzeba
rych jedno klikniêcie prowadzi do wszystkiego, za- rozwa¿yæ potrzeby u¿ytkowników, potrzeby firmy
miast kierowaæ odbiorców œciœle zaplanowanymi i system klasyfikacji, widoczny w samej treœci. Jest
œcie¿kami”. wiele sposobów rozwi¹zania tego problemu i czê-
„Dostêp do wszystkiego za spraw¹ jednego klik- sto istnieje wiêcej ni¿ jedno dobre rozwi¹zanie.
niêcia brzmi dobrze, ale jest z³ym rozwi¹zaniem, Zajêcie to jest zarazem satysfakcjonuj¹ce i fru-
poniewa¿ przyt³acza u¿ytkownika” — wyjaœnia struj¹ce, poniewa¿ eleganckie rozwi¹zanie wyda siê
Zeldman. „Jeœli odwiedzimy nowojorsk¹ jad³odaj- nam oczywiste, gdy ju¿ dokonamy podzia³u. Do
niê z dwudziestopiêciostronicowym menu, skoñ- eleganckiego rozwi¹zania prowadzi wiele œcie¿ek,
czymy na zamówieniu kawy i jajek, poniewa¿ nie a ka¿dy projektant musi znaleŸæ œcie¿kê odpowied-
bêdziemy w stanie przegl¹daæ w nieskoñczonoœæ ni¹ dla siebie (zobacz równie¿ „Jak stworzyæ archi-
listy wszystkich potraw do wyboru”. tekturê informacji?”, str. 115).


wskazówki praktyczne

Jak stworzyæ architekturê informacji?
Nietrudno zrozumieæ, czym zajmuje siê architekt infor- Takie æwiczenie pomaga zobrazowaæ naturalne
macji — organizuje treœæ strony w rozs¹dny sposób, grupowanie lub zobaczyæ, które elementy musz¹
nadaj¹c witrynie zrozumia³¹ strukturê. Jednak odro- znajdowaæ siê bli¿ej siebie. Garettowi podoba siê fi-
binê trudniej jest zobrazowaæ, w jaki sposób to robi. zyczna strona tego procesu. „Takie æwiczenie — prze-
„Jeœli ktoœ mówi o metodologii architektury infor- suwanie wizytówek na powierzchni sto³u — jest bar-
macji, to mówi o wszystkim poza odcinkiem, na któ- dzo fajne. Jest w tym coœ, co pobudza mój mózg
rym faktycznie powstaje architektura” — œmieje siê w taki sam sposób, jak godzina aktywnoœci umys³o-
Jesse James Garrett, znany architekt systemów wej dziecka w przedszkolu”.
informacji oraz autor ksi¹¿ki The Elements of User Poza tym jest to ca³kiem niez³y sposób na po-
Experience. zbycie siê nadwy¿ki
„Taka osoba bêdzie wizytówek. „Jeœli
W pewnym momencie
mówiæ o wszystkich bada- przychodzi³yby w pu-
niach, koncepcjach i pla- cz³owiek czuje de³kach mniejszych
nowaniu, a¿ dojdzie do prawie grawitacyjny ni¿ po 500 sztuk, to
miejsca, w którym zaczy- pewnie musia³bym
na siê tworzyæ architektu- poci¹g do któregoœ wymyœliæ inny spo-
rê. PóŸniej mo¿e mówiæ rozwi¹zania. sób projektowania
o wszystkim, co siê robi, architektury” — œmie-
by sprawdziæ poprawnoœæ Jesse James Garrett je siê Garrett.
stworzonej architektury. Jak wiêkszoœæ ar-
Jednak faktyczny proces chitektów informacji,
kreowania architektury Garrett twierdzi, ¿e
jest dla nas tajemnic¹”. zawsze sprawdza kilka mo¿liwych pomys³ów, a naj-
Tajemnica le¿y w zdolnoœci mózgu do segrego- lepsze rozwi¹zanie ujawnia siê samo.
wania informacji, dopóki nie u³o¿¹ siê w porz¹dn¹ „Zazwyczaj rozwa¿am kilka ró¿nych pomys³ów,
strukturê. Istnieje wiele ró¿nych sposobów wspomo- zanim skupiê siê na którymœ rozwi¹zaniu architekto-
¿enia tego procesu i wydaje siê, ¿e ka¿dy ma jak¹œ nicznym”. Czynniki decyzyjne zawsze zwi¹zane s¹
swoj¹ technikê. ze strategi¹ witryny. Co zdaniem firmy powinniœmy
W wiêkszoœci przypadków projektanci zaczynaj¹ dziêki witrynie osi¹gn¹æ? Jakie oczekiwania wobec
od listy z ca³¹ zawartoœci¹ witryny. Nastêpnie zmie- witryny maj¹ u¿ytkownicy?
niaj¹ uk³ad elementów, wypróbowuj¹c ró¿ne sche- „Jest to proces równoczesnego rozwoju” — kon-
maty organizacyjne i ró¿ne grupowanie, dopóki do- tynuuje Garrett. „Zazwyczaj w tym samym czasie
bre rozwi¹zanie samo siê nie znajdzie. pracujê nad treœci¹ i przepycham wizytówki. Czêœæ
„Mój proces na pewno uwzglêdnia tworzenie listy” mojego mózgu myœli o treœci, a czêœæ rozwi¹zuje pro-
— mówi Garrett. „Tworzê listê, czasami tworzê sche- blemy strategiczne”.
mat na komputerze, czasami bazgrzê po tablicy”. „W pewnym momencie czujê niemal grawitacyj-
Jego ulubion¹ metod¹ jest przesuwanie wizytówek. ny poci¹g do jakiegoœ rozwi¹zania. Wtedy wiem, ¿e
„Odwracam je na drug¹ stronê i wypisujê na nich na- model koncepcyjny zaczyna siê krystalizowaæ, a ele-
zwy elementów. Nastêpnie przesuwam je po stole menty treœci zaczynaj¹ wpadaæ w odpowiednie miej-
i sortujê, próbuj¹c je jakoœ do siebie dopasowaæ”. sca uk³adanki.”


Szeœæ sposobów organizacji witryny
1. Wed³ug kategorii 2. Wed³ug zadania
Mo¿na stosowaæ, jeœli wszyscy u¿ytkownicy maj¹ Mo¿na stosowaæ, jeœli u¿ytkownicy mog¹ w witry-
na uwadze to samo podstawowe zadanie — bez nie zrealizowaæ kilka zadañ, niekoniecznie ze sob¹
wzglêdu na to, czy jest nim zbadanie tematu, zakup powi¹zanych.
produktu czy przedyskutowanie problemu. W witrynach zorganizowanych wed³ug zadañ iden-
Podzia³ witryny ze wzglêdu na kategorie jest chy- tyfikuje siê ró¿ne cele, które mo¿e mieæ u¿ytkownik
ba najbardziej popularny w internecie. Dzia³y witryny i próbuje skierowaæ go na œcie¿kê prowadz¹c¹ do
to kolejne tematy lub kategorie oferowanych infor- ich realizacji. Rozwi¹zanie jest skuteczne z jednego
macji. Witryny prezentuj¹ce artyku³y mog¹ byæ po- powodu — odpowiada mentalnoœci internauty, który
dzielone ze wzglêdu na typy artyku³ów, witryny ko- jest zazwyczaj skoncentrowany na tym, co ma zro-
mercyjne ze wzglêdu na typ produktów, a witryny biæ w nastêpnej kolejnoœci.
z forami ze wzglêdu na temat dyskusji.

Nerve.com organizuje strony osobiste zgodnie
z ró¿nymi zadaniami, które ludzie mog¹ wype³niaæ,
aby znaleŸæ swojego wymarzonego partnera.
BlackPlanet
Forum to miejsce,
w którym u¿ytkownicy
mog¹ dyskutowaæ
o swoich problemach
i zainteresowaniach.
Ka¿dy u¿ytkownik jest tam
z tego samego ogólnego
powodu, dlatego fora
mo¿na zorganizowaæ
wed³ug tematów.


3. Wed³ug u¿ytkownika 4. Wed³ug jêzyka lub po³o¿enia
Mo¿na stosowaæ, jeœli witryna s³u¿y co najmniej Mo¿na stosowaæ, jeœli nasi odwiedzaj¹cy mówi¹
dwóm odrêbnym grupom u¿ytkowników z ró¿nymi ró¿nymi jêzykami lub ¿yj¹ w ró¿nych regionach geo-
(chocia¿ czasami powi¹zanymi) celami i zaintereso- graficznych, wymagaj¹cych ró¿nej treœci lub us³ug.
waniami. Wiele witryn jest zorganizowanych wed³ug jêzy-
Witryny zorganizowane wed³ug u¿ytkowników gru- ka lub lokalizacji, aby sprostaæ potrzebom zró¿nico-
puj¹ zadania i tematy, które mog¹ szczególnie zain- wanej jêzykowo lub pochodzeniowo bazie u¿ytkow-
teresowaæ konkretny typ odwiedzaj¹cych i kieruj¹ ich ników. Jest to jednak nie tyle system organizacji, co
w odpowiedni obszar. Ten system organizacji spraw- sposób skierowania u¿ytkowników do innych witryn,
dza siê w przypadku witryn kojarz¹cych, które zbie- które z kolei musz¹ byæ zorganizowane wed³ug
raj¹ „nabywców” i „sprzedawców” (lub pracodawców innego kryterium, odpowiadaj¹cemu zawartej w nich
i osoby poszukuj¹ce pracy). treœci.
Organizacjê wed³ug u¿ytkowników mo¿na tak¿e
efektywnie stosowaæ w witrynach prezentuj¹cych tre-
œci, komercyjnych lub korporacyjnych, które skupiaj¹
siê na kilku ró¿nych typach klientów. Na przyk³ad Ba-
byCenter dzieli witrynê na czêœci dla ciê¿arnych oraz
wzglêdem wieku dzieci. W witrynie National Geogra-
phic znajduj¹ siê specjalne obszary dla dzieci, rodzi-
ców i nauczycieli. Firma odzie¿owa Levi’s dzieli u¿yt-
kowników wed³ug kraju pochodzenia, a firma
meblarska Herman Miller ma podwitryny dla klien-
tów, projektantów i inwestorów.
Levi’s kieruje ró¿nych u¿ytkowników do ró¿nych
witryn ze wzglêdu na region œwiata, z którego
pochodz¹. Ka¿da witryna prezentuje treœci
w sposób odpowiedni dla jêzyka, kultury i produktów
dostêpnych w danym rejonie.

Guru pomaga nawi¹zaæ kontakt firmom
i konsultantom. Witryna jest zorganizowana
wed³ug u¿ytkowników — kieruje pracodawców
oraz przysz³ych pracowników w dwa ró¿ne
miejsca, aby uzyskali dostêp do specjalistycznych
us³ug przeznaczonych dla konkretnej grupy.
Muzeum Guggenheima w Berlinie wita
u¿ytkowników po angielsku lub niemiecku
(„Welcome” albo „Wilkommen”).


Szeœæ sposobów organizacji witryny — ci¹g dalszy

5. Wed³ug daty lub porz¹dku 6. Wed³ug dzia³u firmy
Mo¿na stosowaæ, jeœli data lub kolejnoœæ elemen- Mo¿na stosowaæ tylko wtedy, gdy
tów jest niezbêdna dla u¿ytkownika — na przyk³ad projektujemy witrynê intranetow¹,
w aktualnoœciach, dziennikach, kalendarzach wyda- w której struktura dzia³ów firmy ma
rzeñ lub instrukcjach krok po kroku. znaczenie dla odbiorców (na przyk³ad
Ogólnie rzecz bior¹c, witryny nie zale¿¹ tak bar- na stronie uczelni) lub gdy klimat poli-
dzo od dat jak inne œrodki przekazu. Daty s¹ wa¿ne tyczny firmy nie pozostawia nam ¿ad-
dla publikacji drukowanych, poniewa¿ ca³e wydanie nego innego wyjœcia.
i informacje w nim zawarte odpowiadaj¹ konkretnej Jeden z najczêstszych (i zrozumia³ych) b³êdów
dacie. Witryny szybciej siê zmieniaj¹, s¹ uaktualnia- projektantów to kszta³towanie witryny wed³ug struk-
nie kilka razy dziennie lub kilka razy do roku. tury firmy oraz zapewnienie ka¿demu dzia³owi jed-
Oczywiœcie, istniej¹ wyj¹tki. Pamiêtniki interneto- nej sekcji w witrynie i odnoœnika na pierwszej stro-
we (zwane „blogami”) s¹ organizowane wed³ug dat, nie. Takie rozwi¹zanie ze wzglêdów socjologicznych
od najnowszego do najstarszego wpisu. Czasami jest dobre wewn¹trz firmy, ale nie jest dobre dla u¿yt-
tak¿e w witrynach innego typu taki sposób organiza- kowników.
cji jest jedynym rozwi¹zaniem — na przyk³ad przy Problem polega na tym, ¿e wewnêtrzna struktura
prezentacji wydarzeñ na osi czasu lub publikacji ka- firmy nie ma najmniejszego znaczenia dla u¿ytkow-
lendarza wydarzeñ itp. ników. Ich potrzeby rzadko mo¿na odwzorowaæ w we-
wnêtrznej hierarchii. Chcemy na przyk³ad odwiedziæ
witrynê lokalnego muzeum sztuki, poniewa¿ wyczy-
taliœmy gdzieœ, ¿e odbêdzie siê tam wyk³ad na temat
Picassa i chcielibyœmy dowiedzieæ siê, kiedy to bê-
dzie. Czy wyk³ad bêdzie umieszczony w dziale „edu-
kacja”, „wydarzenia” czy „program”? Trudno powie-
dzieæ. Oczywiœcie, wszystko by³oby jasne, gdybyœmy
pracowali w muzeum i wiedzieli, ¿e wyk³adami na
temat sztuki nowoczesnej zajmuje siê pani Krysia
z dzia³u przygotowuj¹cego program.

Zeldman.com to prywatna witryna projektanta
Jeffrey’a Zeldmana. Jak ka¿dy blog, jest
zorganizowana wed³ug daty, z najnowszym
wpisem widniej¹cym na samym pocz¹tku strony.
Zobacz równie¿ „Witryna nie powinna byæ
odbiciem firmy”, str. 113.

Jak wiêkszoœæ szkó³, Uniwersytet Brown
organizuje swoj¹ witrynê wed³ug wydzia³ów,
z oddzielnymi sekcjami dla biura rekrutacyjnego,
zwi¹zku sportowego, zrzeszenia absolwentów itd.


Tworzenie zabawnych kategorii
Organizacja witryny powinna byæ intuicyjna, ale nie musi byæ nudna. Witryny (zw³aszcza sklepy) kre-
atywnie sortuj¹ce swoje towary w kategorie zaspokajaj¹ prawdziw¹ potrzebê u¿ytkowników, uzmys³a-
wiaj¹c im mo¿liwe rozwi¹zanie. I przy okazji daj¹ trochê zabawy.

RedEnvelope koncentruje siê ludziach kupuj¹cych
na ostatni¹ chwilê prezenty. Zamiast odpytywaæ
u¿ytkowników, czego chc¹, RedEnvelope pyta,
dla kogo chc¹ kupiæ prezent. Przez podzielenie
produktów w kreatywne kategorie stworzyli chyba
najprzyjemniejszy w korzystaniu sklep internetowy.

NetFlix to internetowa wypo¿yczalnia wideo,
która rozwi¹zuje dwa najwiêksze problemy
zwi¹zane z wypo¿yczaniem filmów. Gdy ludzie
dotr¹ ju¿ do wypo¿yczalni, nie pamiêtaj¹, jaki film
chcieli obejrzeæ i nigdy nie pamiêtaj¹, by zwróciæ
film na czas. NetFlix pomaga w wyborze filmu,
prezentuj¹c interesuj¹ce i pomys³owe kategorie
(oraz pozwalaj¹c u¿ytkownikom tworzyæ listy).


Tworzenie zabawnych kategorii — ci¹g dalszy

Bardzo rzadko struktura ca³ej witryny mo¿e byæ zor-
ganizowana przy zastosowaniu tylko jednego syste-
mu. Zazwyczaj witryny musz¹ wykorzystywaæ kilka
systemów — jednoczeœnie lub kolejno — aby kate-
goryzowaæ ca³¹ zawartoœæ i prowadziæ u¿ytkowników
do obranego przez nich celu.
Muzeum Guggenheima ma kilka oddzia³ów w ró¿-
nych miastach. Ka¿dy oddzia³ wystawia coœ innego
oraz obs³uguje lokaln¹ i miêdzynarodow¹ publicznoœæ.
1. Pierwsza strona zorganizowana
wed³ug lokacji
Pierwsza strona guggenheim.org dzieli
u¿ytkowników wed³ug tego, którym oddzia³em
muzeum s¹ zainteresowani (najechanie
kursorem myszy na ka¿dy z obrazków
ujawnia nazwê miasta, w którym znajduje siê
dany budynek).
2. Lokalna witryna zorganizowana
wed³ug jêzyka
Pierwsza strona ka¿dej podwitryny (w³¹cznie
z pokazan¹ na rysunku kolekcj¹ w Wenecji)
pocz¹tkowo sortuje u¿ytkowników na
podstawie jêzyka — w tym przypadku
jest to jêzyk angielski lub w³oski.
3. Lokalna witryna zorganizowana
wed³ug dzia³ów
Pierwsza strona nowojorskiego oddzia³u
muzeum oferuje szeœæ sekcji (zorganizowanych
wed³ug dzia³ów), których lista powtarzana
jest w ca³ej witrynie jako górny poziomy pasek
nawigacyjny. Organizacja wed³ug dzia³ów rzadko
jest dobrym rozwi¹zaniem, ale w tym wypadku
siê sprawdza, poniewa¿ dzia³y odpowiadaj¹
wybieranym przez u¿ytkowników œcie¿kom.
4. Sekcje witryny zorganizowane
wed³ug kategorii
Gdy u¿ytkownicy wejd¹ na strony poœwiêcone
kolekcji (odnoœnik The Collection), mog¹ wybraæ
jeden z szeœciu sposobów prezentowania prac.

Muzeum Guggenheima stosuje w witrynie kolejno
kilka ró¿nych systemów organizacji, aby doprowadziæ
u¿ytkowników do informacji, których szukaj¹.


Herman Miller to firma meblarska znana ze swoich
eleganckich rozwi¹zañ biurowych (na rysunku widaæ
krzes³o Aeron) oraz klasycznych zestawów domo-
wych autorstwa znanych projektantów, takich jak
Eames.
1. Wed³ug kategorii produktu
Wiêksza czêœæ strony g³ównej witryny jest
poœwiêcona produktom. Firma dzieli meble
na dwie podstawowe kategorie (wyposa¿enie
biurowe i nowoczesna klasyka) i na stronie
g³ównej umieœci³a punkty wejœcia do obydwu
kategorii.
2. Wed³ug zadania
Pierwsza strona daje tak¿e mo¿liwoœæ wyboru
szybkich odnoœników do innych zadañ (poza
ogl¹daniem mebli) — przeczytanie informacji
na temat firmy, sprawdzenie ofert pracy itd.
3. Wed³ug u¿ytkownika
Pierwsza strona zosta³a zaprojektowana
g³ównie z myœl¹ o klientach, dlatego
znajduj¹ siê tam osobne punkty wejœcia
dla u¿ytkowników z innych kategorii
(projektantów, inwestorów).

Hewlett Packard to firma technologiczna znana
z produkcji drukarek, komputerów itp.
1. Wed³ug u¿ytkownika
Odwiedzaj¹cy mog¹ zidentyfikowaæ swoj¹
kategoriê, wybieraj¹c typ firmy lub biura,
dla którego kupuj¹ produkty (zastosowania
domowe i domowe biura, ma³e i œrednie firmy,
przedsiêbiorstwa itd.).
2. Wed³ug kategorii produktu
U¿ytkownicy mog¹ tak¿e wybraæ poszczególne
poszukiwane produkty (drukarki, komputery
stacjonarne, urz¹dzenia narêczne itp.).
3. Wed³ug zadania
Pierwsza strona daje tak¿e mo¿liwoœæ wyboru
szybkich odnoœników do innych zadañ, takich
jak przeczytanie informacji na temat firmy
czy przeszukanie ofert pracy.


Dokumentowanie struktury witryny
Gdy ju¿ podjêliœmy decyzjê co do struktury witryny, 1. Mapa witryny
musimy jakoœ udokumentowaæ nasz¹ wizjê, aby inni
Mapa witryny — zwana równie¿ schematem bloko-
mogli j¹ poznaæ. wym — przedstawia organizacjê dzia³ów witryny i ich
Istnieje kilka sposobów dokumentowania, które po- wzajemne dopasowanie.
zwalaj¹ twórcom internetowym zobrazowaæ struk- Ka¿dy blok odpowiada jednej stronie w witrynie,
turê, przekazaæ decyzje organizacyjne i œledziæ pocz¹wszy od strony g³ównej. Przedstawiaj¹cy stos
bloków rysunek zazwyczaj reprezentuje zestaw stron
zmiany wraz z rozwojem witryny. Do narzêdzi tych o tym samym projekcie i podobnej treœci (np. strony
zaliczamy mapê witryny, schemat strony i œcie¿ki generowane na podstawie bazy danych). Mo¿e tak¿e
u¿ytkownika. Czêsto stosuje siê je razem, aby przed- reprezentowaæ dzia³ witryny, który zosta³ rozrysowany
na osobnej mapie.
stawiæ ró¿ne aspekty struktury witryny i doœwiad-
czeñ u¿ytkownika. Ka¿da linia reprezentuje po³¹czenie miêdzy stronami
lub œcie¿kê, któr¹ mo¿e pod¹¿aæ u¿ytkownik. Dlatego
Trzy sposoby wizualizacji struktury: ka¿da linia lub grupa linii stanowi nawigacyjne wyzwanie.

1. Mapa witryny daje obraz witryny z lotu ptaka, Mapa witryny tworzona jest przez architekta informacji
pokazuj¹c, jak zorganizowane s¹ poszczególne (lub inn¹ osobê, która organizuje witrynê) po ustaleniu
sekcje i jak do siebie pasuj¹. struktury organizacyjnej, ale przed zaprojektowaniem
systemu nawigacyjnego.
2. Schemat pokazuje wszystkie elementy, które
bêd¹ znajdowaæ siê na danej stronie, oraz sposób
ich wzajemnego powi¹zania.
3. Œcie¿ka u¿ytkownika pokazuje „ekran za
ekranem” — drogê u¿ytkownika po witrynie,
gdy próbuje zrealizowaæ konkretne zadanie.


2. Œcie¿ka u¿ytkownika 3. Schemat strony
Œcie¿ka u¿ytkownika — zwana tak¿e schematem Sposób ten nazywamy równie¿ rozrysowaniem
u¿ytkownika — pokazuje szczegó³owo (ekran za ekra- kadrów. Schemat zawiera wszystkie elementy, które
nem) to, czego doœwiadcza u¿ytkownik, który próbuje znajd¹ siê na stronie i pokazuje (w przybli¿eniu), w któ-
w witrynie wykonaæ konkretne zadanie. rym miejscu bêd¹ umieszczone.
Ka¿dy blok w wykresie reprezentuje jeden ekran, Ka¿dy blok reprezentuje jeden element na stronie
widziany przez u¿ytkownika pokonuj¹cego kolejne eta- (grafikê, pasek nawigacyjny, nag³ówek), bez zag³êbia-
py zadania. nia siê w szczegó³y dotycz¹ce wygl¹du elementu.
Ka¿da linia reprezentuje œcie¿kê, któr¹ u¿ytkownik Schemat jest zazwyczaj tworzony dla ka¿dego typu
mo¿e pod¹¿yæ. Powodem tworzenia wykresów œcie- strony w witrynie (lub dla ka¿dego wzorca), zanim za-
¿ek u¿ytkownika jest chêæ przewidzenia wszystkich czn¹ siê prace nad projektem graficznym. Poziom
mo¿liwych dróg nawigowania po witrynie, nawet tych, szczegó³owoœci mo¿e byæ ró¿ny. Niektóre schematy s¹
które mog¹ powstaæ w wyniku b³êdu. bardzo szczegó³owe — prezentuj¹ dok³adne rozmiesz-
czenie ka¿dego elementu. Inne s¹ bardziej pobie¿ne
Ka¿dy blok w kszta³cie karo symbolizuje punkt de-
— zawieraj¹ podstawowe elementy i sugestie co do
cyzyjny. Linie wychodz¹ce z takiego bloku przedsta-
ich wzglêdnego rozmieszczenia.
wiaj¹ œcie¿ki, które mo¿e wybraæ u¿ytkownik.
Œcie¿ka u¿ytkownika jest szczególnie wa¿na w witry-
nach opartych na aplikacjach lub transakcjach, gdy
u¿ytkownik rejestruje siê w us³udze, kupuje produkt lub
u¿ywa narzêdzi dostêpnych w witrynie. Taki wykres
mo¿e byæ tak¿e pomocny do zobrazowania — i popra-
wienia — ogólnych doœwiadczeñ u¿ytkownika ka¿dej
witryny.


Nawigacja w witrynie Osiem z³ych pomys³ów
Dobry projekt graficzny to dobra nawigacja. Gdy na nawigacjê
mówimy, ¿e witryna jest dobrze zaprojektowana lub
Istnieje wiele ró¿nych sposobów umo¿liwienia u¿yt-
dobrze dzia³a, zazwyczaj mamy na myœli to, ¿e ma
kownikowi nawigowania w witrynie. Jedne sposo-
wspania³¹, intuicyjn¹ nawigacjê.
by s¹ lepsze, inne gorsze, a inne zupe³nie nieuda-
Nawigacja wizualnie wyra¿a strukturê witryny
ne. Wiem, poniewa¿ wypróbowa³am wszystkie —
i jest to podstawowy problem, który trzeba rozwi¹- nawet te lataj¹ce i p³ywaj¹ce dziwad³a.
zaæ w trakcie projektowania strony. Problem ten nie
1. Rozwijane menu ukrywaj¹ce sekcje witryny,
jest b³ahy. W przeciwieñstwie do czasopism, skle-
zamiast je ujawniaæ.
pów lub produktów w œwiecie rzeczywistym, witry-
ny s¹ rzecz¹ abstrakcyjn¹ — u¿ytkownik nie mo¿e 2. W³asnorêcznie zrobione ikony, których
u¿ytkownicy nie zrozumiej¹ bez wzglêdu
intuicyjnie oceniæ wielkoœci witryny lub tego, w któ-
na nasze starania i w³o¿ony trud.
rym jej miejscu siê znajduje (zobacz równie¿ „Jak
ludzie nawiguj¹ w internecie?”, str. 125). 3. Kolorowe bloki, których u¿ytkownicy nawet
Nawigacja musi dostarczyæ wszystkich tych nie zauwa¿¹, a na pewno nie przypisz¹ im
¿adnego znaczenia.
wskazówek. Musi powiedzieæ u¿ytkownikom, co
oferujemy, pozwoliæ zorientowaæ siê, w którym 4. Metafory wizualne, takie jak rysunek biura
miejscu siê znajduj¹ i skierowaæ ich do miejsca prze- lub lady sklepowej, który u¿ytkownicy mogliby
znaczenia — wszystko jednoczeœnie. klikaæ, jednak uznaj¹ go co najwy¿ej za
interesuj¹cy.
Czego u¿ytkownicy dowiaduj¹ siê 5. Wymyœlne nazwy sekcji witryny, których
dziêki nawigacji? u¿ytkownicy nie odwiedz¹ (poniewa¿ nie
n Co witryna ma do zaoferowania. bêd¹ ich rozumieæ).
Przegl¹daj¹c pasek nawigacyjny (lub dowoln¹ 6. Elementy nawigacyjne, które zmieniaj¹
inn¹ wybran¹ przez nas formê nawigacji), swoje po³o¿enie i pojawiaj¹ siê w ró¿nych
odwiedzaj¹cy dowiaduje siê, co witryna zawiera. miejscach na stronach. Powtarzajcie za mn¹:
n Jak witryna jest zorganizowana. nie bêdê dezorientowaæ moich u¿ytkowników,
nie bêdê dezorientowaæ moich u¿ytkowników…
Wielu u¿ytkowników analizuje elementy
nawigacyjne, aby zrozumieæ strukturê 7. Elementy nawigacyjne w nieoczekiwanych
witryny. W ten sposób mog¹ uzyskaæ miejscach. Na niespodzianki jest miejsce
kontekst aktualnie ogl¹danej strony i czas, ale nawigacja nie powinna byæ
niespodziank¹.
i bardziej pewnie nawigowaæ.
8. Lataj¹ce, p³ywaj¹ce elementy, które
n Gdzie wewn¹trz witryny siê znajduj¹.
u¿ytkownik musi z³apaæ, gdy przelatuj¹ po
W internecie — jak w œwiecie rzeczywistym
ekranie. Nasza nawigacja nie powinna byæ
— dobry system nawigacyjny zawsze gr¹, chyba ¿e ca³a witryna jest gr¹. Ale nawet
pokazuje, gdzie znajduje siê u¿ytkownik wtedy nawigacja nie powinna byæ gr¹.
(wyobraŸmy sobie mapê z du¿ym czerwonym
krzy¿ykiem i napisem „jesteœ tutaj”).
n Jak znaleŸæ to, czego szukaj¹.
Zadanie, które nawigacja koniecznie
wie na pliki dziennika, które wykazuj¹ co innego.
musi spe³niaæ — w jak najszybszy
„Interfejs witryny nale¿y projektowaæ tak, jakby
i najskuteczniejszy sposób pomóc znaleŸæ
wszyscy u¿ytkownicy zawsze ogl¹dali go po raz
u¿ytkownikom to, czego szukaj¹.
pierwszy” — mówi Cate Corcoran, by³a dyrektor-
Gdy projektujemy strukturê nawigacji, kusz¹ce jest ka do spraw komunikacji w PeoplePC. „Wszystkie
postawienie za³o¿enia, ¿e bêdziemy mieli lojalnych strony powinny byæ zaprojektowane tak, by mog³y
odbiorców, którzy z czasem naucz¹ siê przemiesz- dzia³aæ samodzielnie. Nie ka¿dy internauta wejdzie
czaæ po naszej witrynie. Popatrzmy jednak uczci- na nasz¹ witrynê frontowymi drzwiami.”


odrobina teorii

Jak ludzie nawiguj¹ w internecie?
Aby skutecznie projektowaæ na potrzeby internetu, Wiêkszoœæ osób nawiguje w witrynach
trzeba najpierw zrozumieæ, jak ludzie zachowuj¹ siê,
gdy buszuj¹ po internecie. Sieæ jest ca³kowicie in- tak, jakby biegli przez lotnisko,
nym œrodkiem przekazu ni¿ druk, telewizja czy inne próbuj¹c znaleŸæ odpowiedni¹ bramkê.
media, do których jest porównywana.
Projektowanie dla u¿ytkowników „w biegu”
Z ka¿dego medium korzystamy w inny
sposób: Odk³adaj¹c teoriê na bok, mo¿emy stwierdziæ, ¿e w³a-
œnie przez przestrzenn¹ naturê internetu nawigacja
n Czytamy czasopisma.
jest tak wa¿na. Z wielu powodów projektowanie wi-
n Ogl¹damy telewizjê. tryny przypomina bardziej projektowanie przestrzeni
n Nawigujemy w internecie tak, jakby by³a to publicznej ni¿ drukowanej strony.
rzeczywista przestrzeñ. U¿ytkownicy docieraj¹ do witryny z jakiegoœ po-
wodu, a celem przyœwiecaj¹cym nam podczas pro-
Ekran komputera jest fizycznie p³aski — g³adki, jektowania witryny jest jak najszybsze skierowanie
bardziej p³aski ni¿ ksi¹¿ka, jednak ludzie poruszaj¹ ich na jak najprostsz¹ drogê, dobrze oznakowan¹
siê w internecie tak, jakby to by³a przestrzeñ. Ka¿d¹ powszechnie rozpoznawanymi symbolami.
stronê przeszukuj¹ pod k¹tem obecnoœci sygna³ów Dlatego projekt internetowy jest problemem za-
nawigacyjnych, potem skupiaj¹ siê na swoim miej- równo konstrukcyjnym, jak i wizualnym. A jeœli spoj-
scu docelowym i myœl¹ „gdzie powinienem pójœæ” rzymy na niego z architektonicznego punktu widze-
zamiast „co powinienem przeczytaæ”. nia, jest to wyzwanie, poniewa¿ ludzie nie mog¹
Ró¿nica nie jest ma³a. Przejœcie od czytania cza- polegaæ w nim na wizualnych wskazówkach (lub in-
sopisma do korzystania z internetu wymaga zmiany nych zmys³ach), wykorzystywanych do nawigacji
kognitywnej — gdy u¿ytkownik patrzy na monitor, w rzeczywistej przestrzeni.
kursor na ekranie (kierowany trzyman¹ w rêce mysz¹) W rzeczywistym œwiecie ludzie ³atwiej mog¹
jest przed³u¿eniem jego w³asnego cia³a. Dlatego na- oceniaæ wielkoœæ rzeczy — widz¹ rozmiary budynku
wigacja w internecie jest tak podobna do nawigacji i widz¹, kto siê w nim znajduje. Mog¹ okreœliæ g³o-
w przestrzeni fizycznej. œnoœæ dŸwiêków, poczuæ zapachy. Widz¹, gdzie s¹
W³aœnie to przewidywa³ Marshall McLuhan. We drzwi, a jeœli siê zgubi¹, zawsze mog¹ cofn¹æ siê
wczesnych latach istnienia telewizji McLuhan opu- nieco po œladach i poprosiæ kogoœ o pomoc.
blikowa³ teorie dotycz¹ce wp³ywu mediów na ludzi. Internet jest jednak rzecz¹ abstrakcyjn¹ i nie ofe-
„Wszystko jest przed³u¿eniem jakiejœ ludzkiej zdol- ruje takich wskazówek. Nasze postrzeganie zmys³o-
noœci — fizycznej lub psychicznej” — napisa³ w ksi¹¿- we jest ograniczone do tego, co widzimy w oknie prze-
ce PrzekaŸnik jest przekazem (ang. The Medium is gl¹darki. Nie ma dooko³a nikogo, kto móg³by nam
the Message). „Ko³o jest przed³u¿eniem stopy. Ksi¹¿- w razie czego pomóc. Rolê tak¹ ma spe³niaæ projekt
ka jest przed³u¿eniem wzroku… ubranie jest przed- witryny — a w szczególnoœci struktura nawigacji.
³u¿eniem skóry… obwód elektryczny jest przed³u¿e- Projekt musi informowaæ, jakiego typu jest dana wi-
niem centralnego systemu nerwowego”. tryna, jaka jest jej zawartoœæ, w którym miejscu aktu-
Jeœli u¿ytkownik odwzorowuje siebie na ekranie alnie znajduje siê odwiedzaj¹cy i gdzie mo¿e pójœæ
(kursor staje siê abstrakcyjn¹ reprezentacj¹ jego cia- dalej oraz jak wróciæ.
³a), to posuwamy siê du¿o dalej na drodze do wyja- Nikt nie mówi³, ¿e bêdzie to proste.
œnienia nie tylko tego, jak ludzie czuj¹ siê w interne-
cie, ale tak¿e tego, jak dzia³aj¹. Wiêkszoœæ osób
nawiguje w witrynach tak, jakby biegli przez lotnisko,
próbuj¹c znaleŸæ odpowiedni¹ bramkê — szybko,
celowo i czasami z desperacj¹.


Nawigacja
lokalna i globalna
Wiêkszoœæ witryn musi rozwi¹zaæ problem skom-
plikowanej nawigacji, tworz¹c j¹ w sposób warstwo-
wy. Ogólna organizacja witryny stawia inne proble-
my ni¿ funkcjonalnoœæ poszczególnych obszarów
witryny. Dlatego tylko naprawdê ma³e witryny nie
bêd¹ musia³y zmagaæ siê z problemami nawigacji
lokalnej i globalnej. Na tej przyk³adowej stronie witryny Webmonkey
widaæ nawigacjê globaln¹, lokaln¹ i sieciow¹.
Trzy typy nawigacji
(1) Pasek nawigacji sieciowej (czasami zwany
n Nawigacja globalna s³u¿y do wskazania, „paskiem firmowym”) prowadzi do firmy rodzicielskiej
w którym miejscu witryny u¿ytkownik siê serwisu — Terra-Lycos. (2) Pasek nawigacji
znajduje oraz jak mo¿e dostaæ siê w inne globalnej prowadzi do strony g³ównej serwisu
miejsce. Powinna pozostawaæ niezmienna Webmonkey i oferuje rozwijane menu elementów
w ca³ej witrynie. dostêpnych w witrynie (nie pokazanych tutaj).
n Nawigacja lokalna zaczyna siê od miejsca, Nawigacja globalna istnieje tak¿e pod postaci¹
(3) œcie¿ki — elementu pokazuj¹cego sposób
w którym koñczy siê nawigacja globalna,
dojœcia do danej strony od strony g³ównej.
daj¹c u¿ytkownikom narzêdzia do
(4) Nawigacja lokalna — odnoœniki do pozosta³ych
poruszania siê — lub ukoñczenia zadañ stron artyku³u — istnieje pod postaci¹ odnoœników
— wewn¹trz konkretnej czêœci witryny. wypisanych na lewym marginesie strony.
n Nawigacja sieciowa to odnoœniki do innych
witryn wewn¹trz wiêkszej sieci. Nawigacja sieciowa Rozwi¹zanie to s³u¿y bar-
dziej polityce ni¿ u¿ytkownikom. Nawigacja siecio-
Nawigacja globalna Zwana jest te¿ nawigacj¹
wa to warstwa nawigacji czêsto zupe³nie nieistotna
sta³¹. Pomaga u¿ytkownikom nawigowaæ w witry-
dla u¿ytkownika, ale wa¿na dla interesów. Witryny
nie, by mogli znaleŸæ swoje obszary zainteresowañ.
stanowi¹ce czêœæ wiêkszej sieci — lub nale¿¹ce do
Nawigacja globalna dotyczy zwykle hierarchii
jednej firmy rodzicielskiej, która je kontroluje —
informacji lub szerokich kategorii zawartoœci.
czêsto musz¹ publikowaæ odnoœniki do pozosta-
Umieszczona jest zazwyczaj w ten sam sposób
³ych witryn.
i w tym samym miejscu na ka¿dej stronie i wymie-
niane s¹ w niej zawsze te same opcje. Powinna jed-
nak oferowaæ jak¹œ wizualn¹ wskazówkê odnoœnie
Równowa¿enie warstw nawigacji
tego, w której czêœci witryny u¿ytkownik aktualnie Bardzo trudna mo¿e byæ decyzja o tym, ile elemen-
siê znajduje. tów nawigacyjnych powinno siê znaleŸæ na pojedyn-
czej stronie. Jeœli umieœcimy ich zbyt du¿o, to mo¿e
Nawigacja lokalna Gdy u¿ytkownik dotrze ju¿ siê okazaæ, ¿e przys³onimy omawiany temat i do-
w witrynie do „miejsca przeznaczania”, ujawni siê s³ownie wypchniemy treœæ poza stronê. Jeœli damy
nawigacja lokalna. Zazwyczaj jest rozwi¹zaniem ja- ich zbyt ma³o, to u¿ytkownicy mog¹ straciæ orien-
kichœ mankamentów funkcjonalnoœci aplikacji, tacjê w witrynie.
pomaga sklasyfikowaæ tematycznie artyku³y lub te¿ Równowagê pomiêdzy nawigacj¹ lokaln¹ i glo-
umo¿liwia zmianê stron wewn¹trz artyku³u. baln¹ osi¹ga siê w ró¿nych witrynach w ró¿ny spo-
sób. Na przyk³ad w katalogach nawigacja lokalna
jest doœæ ograniczona. Sztywna nawigacja globalna
czêsto wchodzi na obszary lokalne. Z kolei gry i wy-
stawy sztuki prawie nie maj¹ nawigacji globalnej
poza przyciskami prowadz¹cymi do strony g³ównej.

Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (12)

Ähnlich wie Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Ähnlich wie Serwisy WWW. Projektowanie, tworzenie i zarządzanie (20)

Mehr von Wydawnictwo Helion

Mehr von Wydawnictwo Helion (20)

Serwisy WWW. Projektowanie, tworzenie i zarządzanie