of 50 /50
Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: [email protected] PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ IDZ DO IDZ DO ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG KATALOG KSI¥¯EK KATALOG KSI¥¯EK TWÓJ KOSZYK TWÓJ KOSZYK CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE O NOWOCIACH ZAMÓW INFORMACJE O NOWOCIACH ZAMÓW CENNIK ZAMÓW CENNI K CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE SPIS TRECI SPIS TRECI DODAJ DO KOSZYKA DODAJ DO KOSZYKA KATALOG ONLINE KATALOG ONLINE Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie Autor: June Cohen T³umaczenie: Agata Bulandra (rozdz. 1–8), Marek Pa³czyñski (rozdz. 9–15, dod. A) ISBN: 83-7361-315-3 Tytu³ orygina³u: The Unusually Useful Web Book Format: B5, stron: 380 Wszystko, co powiniene wiedzieæ, by Twój serwis WWW odniós³ sukces 10 kroków do sukcesu Twojej strony 50 sposobów na zwiêkszenie ogl¹dalnoci 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 przyjazna dla odwiedzaj¹cych 8 typowych b³êdów, które mo¿esz natychmiast poprawiæ Dwie ksi¹¿ki w jednej Je¿eli chcesz przyst¹piæ do pracy od razu i nie masz zamiaru czytaæ ca³oci, wystarczy, ¿e przejrzysz fragmenty z poradami ekspertów. Jeli dysponujesz wolnym czasem, mo¿esz zapoznaæ siê ze szczegó³owym omówieniem takich tematów jak: planowanie, projektowanie, budowanie i utrzymywanie serwisu internetowego. Listy zadañ W ksi¹¿ce znajduje siê dwadziecia list zadañ do wykonania, dziêki którym przeprowadzenie najwa¿niejszych dla witryny operacji staje siê znacznie ³atwiejsze. Wród opisywanych czynnoci mo¿na znaleæ zwiêkszanie ruchu sieciowego, przypieszanie dzia³ania witryny, przygotowywanie planu projektu, zapewnianie zgodnoci 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 nazw poszczególnych sekcji czy efektywne rozsy³anie e-maili. Rady znanych ekspertów Ponad piêædziesiêciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i za³o¿yciel serwisu BlackPlanet -- dzieli siê na ³amach ksi¹¿ki informacjami na ró¿ne tematy — 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

Embed Size (px)

DESCRIPTION

Wszystko, co powinieneś wiedzieć,by Twój serwis WWW odniósł sukces* 10 kroków do sukcesu Twojej strony* 50 sposobów na zwiększenie oglądalności* 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 przyjazna dla odwiedzających* 8 typowych błędów, które możesz natychmiast poprawićDwie książki w jednejJeż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, możesz zapoznać się ze szczegółowym omówieniem takich tematów jak: planowanie, projektowanie, budowanie i utrzymywanie serwisu internetowego.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 informacjeDzię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 nazw poszczególnych sekcji czy efektywne rozsyłanie e-maili.Rady znanych ekspertówPonad pięćdziesięciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i założyciel serwisu BlackPlanet -- dzieli się na łamach książki informacjami na różne tematy -- od sposobów zarabiania pieniędzy do zasad współpracy z programistami.Pozbawione żargonu opisyWszystkie 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.

Citation preview

Page 1: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Wydawnictwo Helion

ul. Chopina 6

44-100 Gliwice

tel. (32)230-98-63

e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

Serwisy WWW. Projektowanie,tworzenie i zarz¹dzanieAutor: June Cohen

T³umaczenie: Agata Bulandra (rozdz. 1–8),

Marek Pa³czyñski (rozdz. 9–15, dod. A)

ISBN: 83-7361-315-3

Tytu³ orygina³u: The Unusually Useful Web Book

Format: B5, stron: 380

Wszystko, co powiniene� wiedzieæ,

by Twój serwis WWW odniós³ sukces

• 10 kroków do sukcesu Twojej strony

• 50 sposobów na zwiêkszenie ogl¹dalno�ci

• 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

przyjazna dla odwiedzaj¹cych

• 8 typowych b³êdów, które mo¿esz natychmiast poprawiæ

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,

mo¿esz zapoznaæ siê ze szczegó³owym omówieniem takich tematów jak: planowanie,

projektowanie, budowanie i utrzymywanie serwisu internetowego.

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

nazw poszczególnych sekcji czy efektywne rozsy³anie e-maili.

Rady znanych ekspertów

Ponad piêædziesiêciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i za³o¿yciel

serwisu BlackPlanet -- dzieli siê na ³amach ksi¹¿ki informacjami na ró¿ne tematy —

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.

Page 2: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 5

Spis tre�ci

I Planowanie witryny 21

1. Podejmowanie decyzji 22Co sprawdza siê w internecie? ...................... 23Dziesiêæ korzy�ci, które internet

mo¿e daæ firmie ........................................... 25Opisanie misji ..................................................... 26

Przyk³adowy opis misji .................................. 26Okre�lenie celów ................................................ 27

Typy celów ..................................................... 27Typowe cele .................................................. 27

Ustalenie celów witryny korporacyjnej ............... 28Czê�æ praktyczna:

Co bêdziemy robiæ z nasz¹ witryn¹? ............... 29Decyzja o zawarto�ci witryny ............................. 30

Ustalenie priorytetów ..................................... 30Lista propozycji .............................................. 30Okre�lenie podstawowych funkcji ................. 31Wyznaczanie funkcji priorytetowych .............. 31Wa¿no�æ ........................................................ 31£atwo�æ ......................................................... 32Proces wyznaczania priorytetów ................... 32

Wykres wyznaczania priorytetów ....................... 33Czê�æ praktyczna:

Jakie funkcje ma zawieraæ witryna? ................ 34

Do dzie³a! Pisanie planu 35Dlaczego nale¿y pisaæ plan? .............................. 36

Plan podstawowy .......................................... 36Nie dajmy siê sparali¿owaæ ........................... 37

Podstawowy plan produktu ................................ 38Czê�æ praktyczna:

Tworzenie planu produktu ............................. 43

2. Nazwa witryny 44Wybieranie nazwy ......................................... 45Rejestrowanie nazwy .................................... 46

Trzy sposoby nazywania witryn ......................... 47Wybór przyrostka .......................................... 48Budowa adresu internetowego ...................... 48

Pozyskanie nazwy domeny ................................ 49Czê�æ praktyczna:

Jak nazwiemy witrynê? .................................... 50

Wprowadzenie 16

Do dzie³a!

Pisanie planustrona 35

Czerpanie zyskówstrona 81

Testy funkcjonalno�cistrona 143

Zwiêkszanie szybko�ci dzia³ania witrynystrona 233

Zwiêkszanie ruchustrona 281

Poprawianie pozycji witrynyna li�cie wyszukiwanych adresów

strona 323

Page 3: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

6 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie

3. Ocena konkurencji 52Identyfikacja konkurencji .................................... 54

Sk¹d siê bierze konkurencja? ....................... 54Jak znale�æ konkurencjê? ............................. 54

Czê�æ praktyczna: Kim jest nasza konkurencja? ............................. 55

Ocena konkurencji ............................................. 56Analiza finansowa ......................................... 56Analiza funkcjonalna ..................................... 56Rozpoznanie konkurentów ............................ 56

Czê�æ praktyczna:Ocena konkurencji ........................................... 57

4. Poznawanie u¿ytkowników 58Wiedza o u¿ytkownikach .................................... 60

Badania ilo�ciowe a jako�ciowe .................... 60G³ówne etapy badañ u¿ytkowników .............. 61

Narzêdzia do badañ u¿ytkowników .................... 62Tworzenie profilu u¿ytkowników ......................... 64

Ankietowanie u¿ytkowników .......................... 65Szacowanie liczby odbiorców ............................ 66Czê�æ praktyczna:

Kim s¹ u¿ytkownicy witryny? ............................. 67Zobrazowanie u¿ytkowników ............................. 68

Tworzenie postaci .......................................... 68Wskazówki praktyczne:

Nie jeste�my u¿ytkownikami swojej witryny .... 69Tworzenie scenariuszy .................................. 70Podzia³ u¿ytkowników ................................... 70

Czê�æ praktyczna:Tworzenie postaci ............................................ 71

Przewidywanie potrzeb u¿ytkowników ............... 72Narzêdzia do poznawania

potrzeb u¿ytkowników ................................. 72Wskazówki praktyczne:

Nasza witryna nie jest centrum wszech�wiata .... 73Zrozumienie potrzeb u¿ytkowników ................... 74

Planowanie nowej witryny ............................. 74Analiza zadania ............................................. 74Przekszta³cenie zadañ w funkcje .................. 75Jak uzyskaæ dobre wyniki z analizy zadania? .. 75

Zrozumienie zachowania u¿ytkowników ............ 76Analiza ruchu ................................................. 76Testy funkcjonalno�ci .................................... 76Narzêdzia pomagaj¹ce zrozumieæ

zachowanie u¿ytkownika ............................ 76Opinie klientów .............................................. 77

Piêædziesi¹t sposobów,aby straciæ u¿ytkowników ................................ 78

Do dzie³a! Czerpanie zysków 81Sposób zarabiania ......................................... 82Cztery kroki prowadz¹ce

do zarabiania w internecie .......................... 82Rozwa¿anie mo¿liwo�ci ................................ 83Dlaczego decydowaæ siê tylko na jedno?...... 83

Piêæ sposobów zarabiania w internecie ............. 84Czerpanie zysków ze sprzeda¿y ........................ 86

Czego chc¹ nabywcy? .................................. 86Czerpanie zysków z reklamy ......................... 87Czego chc¹ reklamodawcy? ......................... 87

Czerpanie zysków z op³at i subskrypcji .............. 88Czego oczekuj¹ subskrybenci? ..................... 88

Czerpanie zysków z kojarzenia .......................... 89Czego oczekuj¹ poszukiwacze kontaktów? .. 89

Formy p³atno�ci internetowych ........................... 90Czê�æ praktyczna:

Sk¹d bêdziemy czerpaæ zyski? ........................ 91

Page 4: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 7

II Projektowanie witryny 93

5. Projektowaniena potrzeby internetu 94

Dobrze zaprojektowana witryna internetowa ... 95Projektowanie dla u¿ytkownika .......................... 96Dziesiêæ sposobów

poprawy funkcjonalno�ci witryny ..................... 97Projektowanie zgodnie z konwencjami .............. 98Wskazówki praktyczne:

Dlaczego nale¿y postêpowaæzgodnie z konwencjami? .................................. 99

Jak ludzie widz¹ witryny internetowe? ............. 100Wskazówki praktyczne:

Konwencje wizualne w internecie i poza nim ... 101Projektowanie pod k¹tem jêzyka HTML ........... 102

Piêæ g³ównych zasadprojektowania w HTML-u .......................... 102

Poradnik: Wybór oprogramowania ................................. 103

Projektowanie dla ró¿nych systemów .............. 104Gdzie jest zgiêcie? ........................................... 105Projektowanie pod k¹tem szybko�ci pobierania . 106

6. Organizacja i nawigacja 110Dobrze zorganizowana witryna ................... 111

Organizacja witryny .......................................... 112Tworzenie struktury witryny .............................. 113

Wskazówki praktyczne: Witryna nie powinna byæ odbiciem firmy ... 113

Wskazówki praktyczne: Jak stworzyæ architekturê informacji? ............ 115

Sze�æ sposobów organizacji witryny ................ 116Tworzenie zabawnych kategorii ....................... 119Dokumentowanie struktury witryny .................. 122Nawigacja w witrynie ........................................ 124

Osiem z³ych pomys³ów na nawigacjê .......... 124Odrobina teorii:

Jak ludzie nawiguj¹ w internecie? ................. 125Nawigacja lokalna i globalna ............................ 126

Równowa¿enie warstw nawigacji ................ 126Dlaczego rozwijane menu

nie nadaj¹ siê do nawigacji? ..................... 127Tworzenie systemu nawigacyjnego .................. 127Dwana�cie systemów nawigacyjnych .............. 128

Czê�æ praktyczna: W jaki sposób witryna bêdzie zorganizowana? ................................. 134

Czê�æ praktyczna: Jaki system nawigacyjny wybierzemy? ......... 135

Nazywanie dzia³ów witryny .............................. 136Wybieranie spójnych nazw ............................... 138Kilka dobrych przyk³adów ................................. 139Wskazówki praktyczne:

Dlaczego nazwy dzia³ów powinny byæjasne, nie wymy�lne? ..................................... 140

Dziwne nazwy .................................................. 141Czê�æ praktyczna:

Jakich nazw dzia³ów u¿yjemy? ...................... 142

Do dzie³a! Testy funkcjonalno�ci 143Piêæ typów testów funkcjonalno�ci .............. 144

Czego mo¿emy dowiedzieæ siêz testów funkcjonalno�ci? .............................. 145

Czego nie mo¿emy siê dowiedzieæ� ......... 146Tani sposób przeprowadzenia testów .............. 147Wskazówki praktyczne:

Dlaczego testy funkcjonalno�cimog¹ siê nie powie�æ? .................................. 150

7. Projekt graficzny 152Co projekt graficzny mo¿e daæ witrynie? ..... 153

Projekt strony g³ównej ...................................... 154Osiem wskazówek projektowych

dla nowicjuszy ................................................ 157Piêæ spornych kwestii w projektowaniu ............ 158Kolor w internecie ............................................. 160

Wybór odpowiednich kolorów ...................... 160Znaczenie koloru ......................................... 160Sze�æ wskazówek wybierania kolorów........ 161

Tworzenie systemu kolorów ............................. 162RGB a CMYK .............................................. 162

Kolory sprawdzaj¹ce siê w internecie .............. 163Kolor � kod szesnastkowy ......................... 163

Typografia w internecie .................................... 164Wybór kroju pisma ....................................... 164Fonty szeryfowe a fonty bezszeryfowe ....... 164Czytelno�æ na ekranie ................................. 165Verdana � najlepszy font w internecie ....... 166Formatowanie tekstu ................................... 167Font (czcionka) czy krój pisma? .................. 167

Page 5: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

8 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie

8. Technologie projektowe 168HTML i XHTML ............................................ 169Arkusze stylów ............................................ 169Rozszerzenia przegl¹darek ......................... 169Skrypty dzia³aj¹ce po stronie klienta

(JavaScript) ............................................... 169Skrypty dzia³aj¹ce po stronie serwera

(ASP, PHP) ............................................... 169Aplety Java .................................................. 169

Jak uzyskaæ taki wygl¹d? ................................. 170XHTML � informacje ....................................... 172

HTML a XHTML � ró¿nice ......................... 172Co trzeba wiedzieæ o jêzyku XHTML?......... 172Przej�cie na XHTML.................................... 173Konwersja kodu HTML na XHTML .............. 173

Tabele � informacje ........................................ 174Nauka stosowania tabel .............................. 174Co trzeba wiedzieæ o tabelach? .................. 174

Ramki � informacje ......................................... 175Zastosowanie ramek ................................... 175Co trzeba wiedzieæ o ramkach? .................. 175

Arkusze stylów � informacje ........................... 176Co trzeba wiedzieæ o arkuszach stylów? ..... 176Nauka stosowania arkuszy stylów ............... 177

JavaScript � informacje .................................. 178Co trzeba wiedzieæ o jêzyku JavaScript? .... 178Nauka stosowania jêzyka JavaScript .......... 179Inne mo¿liwo�ci programowania ................. 179

Flash � informacje .......................................... 180Co trzeba wiedzieæ o Flashu? ..................... 180Nauka stosowania Flasha ........................... 181

PHP � informacje ............................................ 182Co trzeba wiedzieæ o PHP? ......................... 182PHP a inne skrypty dzia³aj¹ce 

po stronie serwera .................................... 183Nauka stosowania PHP ............................... 183Inne technologie skryptowe dzia³aj¹ce

po stronie serwera .................................... 183

III Budowanie witryny 185

9. Projektowaniena potrzeby internetu 186

Dziesiêæ powodów, dla których stronys¹ zbyt d³ugo pobierane ............................ 187

Dlaczego strony s¹ zbyt d³ugo pobierane? ... 189Kiedy �wolno� oznacza �zbyt wolno�? .......... 189

Projektowanie witrynz uwzglêdnieniem ich zgodno�ci ................... 190

Planowanie zgodno�ciz ró¿nymi systemami prezentacji .............. 190

Testowanie zgodno�ci ................................. 191Przegl¹d technologii .................................... 191

Czê�æ praktyczna: W jaki sposób uczyniæ stronêzgodn¹ z ró¿nymi przegl¹darkami? ............... 192

Projektowanie z zapewnieniemstabilnego dzia³ania witryny ........................... 193

Zapewnienie stabilnej pracy witryny ............ 193Naprawianie wadliwie funkcjonuj¹cej witryny ... 194Udostêpnienie zasobów witryny osobom

niepe³nosprawnym ......................................... 196To nie uprzejmo�æ � to inwestycja ............. 196W Stanach Zjednoczonych

to tak¿e wymóg prawny ............................ 196Dostosowanie serwisu

do potrzeb osób niepe³nosprawnych ........ 196Piêæ niewielkich zmian czyni¹cych

witrynê dostêpn¹ dla wiêkszegogrona u¿ytkowników .................................. 197

Gwarancja d³ugotrwa³ego dzia³ania witryny ..... 198Dlaczego musz¹ istnieæ standardy? ............ 198Co zapewniaj¹ standardy sieciowe? ........... 199Co stoi na przeszkodzie, ¿eby wdra¿aæ

standardy? ................................................ 199Wskazówki praktyczne:

Dlaczego nale¿y stosowaæ standardy? .......... 200Projektowanie infrastruktury serwerowej .......... 202

Technologie typu open-source .................... 202Przegl¹d technologii serwerowych ................... 203

Page 6: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 9

10. Zasada dzia³aniawitryn internetowych 204Tworzenie dokumentu HTML ...................... 205

Trzy metody budowania witryn internetowych ... 206Rada eksperta:

Co cechuje dobre projekty internetowe? ....... 207Jak dzia³a HTML? ............................................ 208Pierwsza strona WWW .................................... 210Jak z utworzonych stron powstaje

witryna internetowa? ...................................... 212Ustalenie w³a�ciwego nazewnictwa ............ 212Odpowiednia organizacja stron ................... 212Po³¹czenia miêdzy stronami ....................... 213Przesy³anie stron do serwera ...................... 213

Pobieranie stron WWW .................................... 214Pobieranie stron generowanych 

dynamicznie .............................................. 215Zasada dzia³ania serwera ........................... 215

11. Przygotowanie rysunkówi plików multimedialnychdo wykorzystania w internecie 216

Podstawy kompresji .................................... 217Jak dzia³a procedura kompresji? ................. 218

Podstawowe informacje na temat pamiêci ....... 219Wyznaczanie rozmiaru pliku ........................ 219Wyznaczanie rozmiaru pamiêci komputera ... 219

Pliki graficzne w internecie ............................... 220Wybór formatu pliku graficznego ...................... 221Przygotowanie rysunków

do wykorzystania w internecie ....................... 222Przesy³anie danych audio ................................ 224

Dlaczego d�wiêk na stronach WWWmo¿e irytowaæ? ......................................... 224

Wybór formatu dla danych audiowykorzystywanych na stronach WWW .......... 225

Przygotowanie danych audiodo wykorzystania w internecie ....................... 226

Przesy³anie danych wideo ................................ 228Wybór formatu dla danych wideo

wykorzystywanych na stronach WWW .......... 229Przygotowanie danych wideo

do wykorzystania w internecie ....................... 230

Do dzie³a! Zwiêkszanieszybko�ci dzia³ania witryny 233

W³a�ciwie dzia³aj¹ca witryna internetowa ... 234Konfiguracja z my�l¹ o szybko�ci dzia³ania ..... 235Zwiêkszenie szybko�ci witryny

w sze�ciu posuniêciach ................................. 236Czê�æ praktyczna:

Jak zwiêkszyæ szybko�æ dzia³ania witryny? ... 239

12. Aplikacjew witrynie internetowej 240

Wybór odpowiedniej technologii ....................... 242Unikanie potencjalnych trudno�ci ................ 242

Oszacowanie warto�ci nowej technologii ......... 243Czê�æ praktyczna:

Dziesiêæ pytañ, jakie trzeba zadaæprzed wyborem nowej technologii .................. 244

Tworzenie oprogramowania witryny ................. 245Budowanie zespo³u ..................................... 247

Budowa aplikacji .............................................. 248Dokumentacja aplikacji ................................ 248

Wskazówki praktyczne: Wspó³praca z in¿ynierami .............................. 250

Page 7: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

10 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie

IV Zarz¹dzanie witryn¹ 253

13. Monitorowaniei rozbudowa witryny 254

Analiza witryny ................................................. 256W jaki sposób u¿ytkownicy

korzystaj¹ z witryny? ...................................... 257W jaki sposób u¿ytkownicy odnajduj¹ witrynê? .. 258

Informacje o �ródle ...................................... 258Pomiar natê¿enia ruchu ................................... 259

Sposób gromadzenia danych o ruchu ......... 259Niedok³adno�æ pomiaru ............................... 259O czym nale¿y pamiêtaæ

przy pomiarze ruchu? ............................... 259Jak dzia³aj¹ systemy rankingowe? .............. 260

Poradnik: Wybór oprogramowania do analizy ruchu ..... 261

Tworzenie raportu na temat ruchu sieciowego .... 262Na co nale¿y zwróciæ uwagê? ..................... 262

Czê�æ praktyczna:Przyk³ad raportu na temat natê¿enia ruchu .... 263

Analizowanie zmian ..................................... 264Co jest przyczyn¹

wzrostu natê¿enia ruchu? ......................... 264Typowy model ruchu ........................................ 265Prognoza roczna .............................................. 266

Styczniowy wzrost ....................................... 266Letnia stagnacja .......................................... 266Jesienny wzrost ........................................... 267Grudniowy spadek ....................................... 267Wyj¹tki od regu³y ......................................... 267

Rozwój witryny ................................................. 268time.com � ma³e zmiany, znaczny efekt .... 268Sprawdzanie teorii ....................................... 269Koncentracja na sprawach najwa¿niejszych ... 269

Wskazówki praktyczne: Jak MSN zachêca ludzi do klikania(miliony razy)? ............................................... 270

Wskazówki praktyczne: Jak serwis Webmonkey sta³ siêdochodow¹ bibliotek¹? .................................... 272

Wskazówki praktyczne: Sk¹d w³a�ciciele gURL.com wiedzieli,czego pragn¹ kobiety? .................................... 274

Wskazówki praktyczne: W jaki sposób twórcy BlackPlanet zdo³alinak³oniæ u¿ytkowników do rejestracji(i wnoszenia op³at)? ....................................... 276

Wykorzystanie witryny ...................................... 278Czê�æ praktyczna:

Wykorzystanie witryny ................................... 279

Do dzie³a! Zwiêkszanie ruchu 281Pocz¹tek ...................................................... 282Piêæ elementów istotnych

przy zwiêkszaniu ruchu ............................. 282Piêædziesi¹t sposobów zwiêkszenia ruchu ...... 283Pozyskiwanie nowych u¿ytkowników ............... 284Zatrzymanie u¿ytkowników na stronach

witryny przez d³u¿szy czas ............................ 286Zachêcanie u¿ytkowników

do czêstszych odwiedzin ............................... 288Czê�æ praktyczna:

W jaki sposób zwiêkszyæ ruch? ..................... 290

14. Promocja witryny 292Sze�æ elementów dobrej promocji witryny .... 293

Strategie reklamy werbalnej ............................. 294Program p³atnych odsy³aczy ....................... 294Programy typu �przeka¿ przyjacielowi� ........ 294

Ciekawe rozwi¹zanie: Niesztampowe sposobyinformowania przyjació³ ................................. 295

Strategie wykorzystania poczty elektronicznej .... 296Sze�æ czynno�ci, jakie mo¿e

za nas wykonaæ poczta elektroniczna ....... 296Wybór w³a�ciwej strategii wykorzystania

poczty elektronicznej ................................. 297Gromadzenie adresów e-mail ..................... 297

Wybór w³a�ciwej strategii wykorzystaniapoczty elektronicznej ..................................... 298

Budowanie listy adresowej ............................... 300Czy nale¿y kupowaæ listy z adresami? ........ 300

Poradnik: Wybór oprogramowania dla list adresowych .... 301

Wskazówki praktyczne: Dwana�cie wskazówek gwarantuj¹cychefektywne wykorzystanie poczty elektronicznej . 302

Strategie doboru odsy³aczy .............................. 304Odsy³acze w wyszukiwarkach ..................... 304Odsy³acze w katalogach .............................. 304Odsy³acze z innych witryn ........................... 304Dlaczego nale¿y starannie

dobieraæ odsy³acze? ................................. 304Rodzaje odsy³aczy ...................................... 305Jak wiele stron zawiera odsy³acze

do zarz¹dzanej witryny? ........................... 305Nag³ówki umieszczane na stronach

innych witryn ............................................. 306P³atne odsy³acze ......................................... 306

Reklama sieciowa ............................................ 308Tworzenie udanej kampanii ......................... 308Liczba klikniêæ to nie wszystko .................... 309

Page 8: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 11

Ciekawe rozwi¹zanie: Sze�æ rodzajów reklam,których nie mo¿na nie zauwa¿yæ ................... 310

Gdzie nale¿y umieszczaæ reklamy? ................. 312Wybór witryny .............................................. 312Cztery sposoby op³acania reklam ............... 312

Czê�æ praktyczna: O co nale¿y zapytaæprzed umieszczeniem reklamy? .................... 313

Metody doboru reklam ..................................... 314Dobór do tre�ci ............................................ 314Dobór reklam do u¿ytkownika ..................... 314

Rodzaje reklam ................................................ 315Bannery ....................................................... 315Przyciski ...................................................... 315Wie¿owce .................................................... 315Pojawiaj¹ce siê i pozostaj¹ce okna ............. 316Reklamy typu rich media ............................. 316Reklamy tekstowe ....................................... 316Odsy³acze sponsorowane ........................... 316Preferencje twórców serwisu ....................... 316Standardy reklamy sieciowej ....................... 317Sponsorowanie serwisu .............................. 318Umieszczanie produktów ............................ 318Reklamy wideo ............................................ 318Przerywniki .................................................. 318

Strategie reklamowania witrynyw ró¿nych mediach przekazu ........................ 319

Czê�æ praktyczna:Jak bêdzie promowana witryna? ................... 321

Czê�æ praktyczna:Jak bêdzie promowana witryna? ................... 322

Do dzie³a! Poprawianiepozycji witryny na li�ciewyszukiwanych adresów 323

Zasada dzia³ania wyszukiwarek .................. 324Plan dzia³ania .............................................. 324Je¿eli wszystko zawiedzie... ........................ 324

Umieszczenie witryny na li�cie wyszukiwania ... 325Umieszczenie witryny w katalogu ................ 325Umieszczenie witryny na listach ................. 325

Wskazówki praktyczne:Jak dostaæ siê na listê Yahoo!? ..................... 326

Poprawianie pozycji witrynyna li�cie wyszukiwanych adresów ................. 327

Ciekawe rozwi¹zanie: Jak przygotowaæ stronê dobrze notowan¹ w rankingach? ................... 330

Czê�æ praktyczna: Jak poprawiæ notowania witrynyw rankingach wyszukiwarek? ........................ 331

15. Zarz¹dzanieprojektem i zespo³em 334

Zarz¹dzanie projektem sieciowym ................... 335Wyja�nianie celu prac ................................. 335Ustalenie sposobu podejmowania decyzji .... 335Stosowanie s³owa �nie� ............................... 336Rozpoczêcie procesu .................................. 336

Wskazówki praktyczne:Jak dotrzymaæ zbli¿aj¹cego siê terminu? ...... 337

Wykorzystanie dotychczasowej wiedzy ....... 337Wskazówki praktyczne:

Jak opracowaæ w³a�ciwy harmonogram? ...... 338Wskazówki praktyczne:

Jak przeprowadzaæ burze mózgów? ............. 340Zarz¹dzanie zespo³em ..................................... 342Wskazówki praktyczne:

Jak pos³ugiwaæ siê ró¿nymi jêzykami? .......... 343Wskazówki praktyczne:

Jak nak³oniæ pracowników do wspó³pracy? ..... 344Organizowanie zespo³u .................................... 346

Zespó³ podstawowy ..................................... 346Zespó³ rozszerzony ..................................... 348

Organizacja zespo³u projektowego .................. 352Firmy sieciowe............................................. 352Du¿e korporacje i agencje sieciowe ............ 353Ma³e firmy i firmy konsultingowe ................. 354

Wskazówki praktyczne:Jak w³¹czyæ wszystkich do pracy? ................. 355

Dodatki 356

A Rady ekspertów 356Skorowidz 372

Page 9: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

110 Projektowanie witryny: organizacja i nawigacja

Organizacjai nawigacja

Rozdzia³ 6.

Informacji� informacji�

Page 10: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 111

Jakby na to nie spojrzeæ, projekt internetowy toprzede wszystkim organizacja i nawigacja. Chocia¿wizualne dodatki takie jak kolor, grafika i stylemog¹ bardziej przyci¹gaæ uwagê internautów, tow³a�nie struktura witryny decyduje o jej sukcesie.

Je�li witryna jest dobrze zorganizowana, u¿yt-kownicy realizuj¹ swoje cele bez wysi³ku, poniewa¿dzia³y witryny dok³adnie odpowiadaj¹ ich potrze-bom. Jêzyk u¿ywany w witrynie jest dla nich zrozu-mia³y, a nawigacja jest konsekwentna i jasna. Z ko-lei witryna �le zorganizowana (czyli taka, która by³abudowana po�piesznie lub przy jej tworzeniu bra-no pod uwagê wy³¹cznie potrzeby w³a�ciciela) bê-dzie wprowadzaæ u¿ytkowników w b³¹d i w sposóbniezamierzony ukrywaæ przed nimi potrzebne in-formacje i us³ugi.

Sposób zorganizowania witryny tworzy jej szkie-let. Mo¿na go porównaæ do belek tworz¹cych kon-strukcjê domu � organizacja stanowi strukturê, naktórej opiera siê projekt graficzny.

Struktura witryny decyduje o jejsukcesie. Je�li witryna jest dobrzezorganizowana, u¿ytkownicy realizuj¹swoje cele bez wysi³ku.

Mimo to wiele osób ma trudno�ci z rozdziele-niem tych dwóch warstw projektu. Witryny wieletrac¹ z powodu mylenia warstw. �Trzeba oddzieliæprojekt struktury lub projekt funkcjonalny od pro-jektu komunikacyjnego� � mówi Peter Merholz,wspólnik firmy konsultingowej Adaptive Path. �Lu-dzie zwykle maj¹ bzika na punkcie koñcowego wy-gl¹du i nie po�wiêcaj¹ ¿adnej uwagi niewidoczne-mu szkieletowi funkcjonalnemu�.

Jednak ten szkielet jest najwa¿niejszy. Je�li niezorganizujemy witryny w sposób, który wyda siêu¿ytkownikowi rozs¹dny, ¿adne graficzne cuda niesprawi¹, ¿e u¿ytkownik bêdzie zadowolony. �Wi-tryna powinna dobrze dzia³aæ, zanim zacznie do-brze wygl¹daæ� � mówi Merholz. �Funkcjonal-no�æ jest najwa¿niejsza�.

Pomimo swojej strategicznej wa¿no�ci struktu-ra witryny czêsto ustêpuje miejsca rzucaj¹cej siê bar-dziej w oczy warstwie projektu. Na szczê�cie corazwiêcej ludzi dostrzega wa¿no�æ struktury.

�Kiedy� moja praca polega³a na tworzeniu tre-�ci, ale zaj¹³em siê architektur¹ informacji, ponie-wa¿ zda³em sobie sprawê, ¿e struktura (bardziej ni¿

cokolwiek innego) jest wyznacznikiem jako�ci wi-tryny� � mówi Jesse James Garrett, autor ksi¹¿kiThe Elements of User Experience. �Kluczem do udanejwitryny jest stworzenie dobrej struktury�.

�Korporacje, a tak¿e konsultanci, zaczynaj¹ sto-sowaæ siê do tej zasady� � mówi Lance McDaniel,wiceprezes firmy konsultingowej SBI & Co.

�Architektura informacji odebra³a projektowigraficznemu miano najwa¿niejszego elementu pro-jektu internetowego� � mówi Lance McDaniel.�Projekt informacji przyæmiewa teraz projekt gra-ficzny witryny i zbiera wiêcej laurów za sukces wi-tryny, chocia¿ wcze�niej traktowany by³ zwykle lek-cewa¿¹co�.

Dobrze zorganizowana witrynaStruktura witryny mo¿e nie byæ najbardziej atrak-cyjnym, ale jest niew¹tpliwie najwa¿niejszymaspektem projektu. Dobrze zorganizowana struk-tura sprawia, ¿e zadania u¿ytkownika s¹ proste �takie, jakie powinny byæ! W procesie organizacjiwitryny nale¿y uwzglêdniæ trzy ró¿ne elementy.

Dobrze zorganizowana witryna cechuje siê:n logiczn¹ struktur¹. Witryna powinna byæ

zorganizowana w sposób zrozumia³y dlau¿ytkowników. Dzia³y witryny powinnyodpowiadaæ potrzebom u¿ytkowników,a wszystkie podobne elementy (lub zadania)powinny byæ pogrupowane. Zobacz równie¿�Organizacja witryny�, str. 112;

n konsekwentn¹ nawigacj¹. U¿ytkownicychc¹ � patrz¹c na system nawigacjiw witrynie � móc zorientowaæ siê, w którymmiejscu witryny siê znajduj¹, a tak¿ezorientowaæ siê w kontek�cie (co jeszczejest w witrynie) i w kierunku (jak siê gdzie�dostaæ). Nawigacja powinna wyznaczaæwyra�ne �cie¿ki, w szybki i intuicyjny sposóbprowadz¹ce u¿ytkowników do tego, czegopotrzebuj¹. Zobacz równie¿ �Nawigacjaw witrynie�, str. 124;

n zrozumia³ymi oznaczeniami. Nazwy, jakiewybierzemy dla dzia³ów witryny, powinnypomagaæ u¿ytkownikom w odnalezieniu tego,czego szukaj¹. Nie b¹d�my zbyt pomys³owi.Po prostu mówmy jasno i wyra�nie. Zobaczrównie¿ �Nazywanie dzia³ów witryny�, str. 136.

Page 11: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

112 Projektowanie witryny: organizacja i nawigacja

Organizacja witrynyChocia¿ nie jest tak fascynuj¹ca jak projekt graficz-ny ani tak presti¿owa jak tre�æ redakcyjna lub tech-niczna, to jednak organizacja � lub architekturainformacji � czêsto jest zasadniczym czynnikiemsukcesu witryny.

Architektura informacji jest czê�ci¹ projektu, alejest �ci�le powi¹zana ze strategi¹. Je�li witryna mabyæ skutecznie zaprojektowana i zorganizowana, tomusimy dobrze wiedzieæ, dla kogo jest przeznaczo-na i jakie cele ma zrealizowaæ.

Zanim przyst¹pimy do procesu organizacji, mu-simy wyznaczyæ cele witryny (zobacz równie¿ �Usta-lenie celów witryny korporacyjnej�, str. 28). Je�li de-cyzje takie nie zostan¹ podjête � lub nie zostan¹przekazane zespo³owi projektuj¹cemu � niejasnewytyczne bêd¹ rzutowaæ na ca³y proces projektowa-nia, a¿ do ukoñczenia witryny. Zagmatwana misjaujawni siê u¿ytkownikowi poprzez myl¹ce katego-rie i niespójny interfejs.

�Dobra architektura witryny wymaga, by w or-ganizacji zosta³y uwzglêdnione wspólne cele� �mówi Jesse James Garrett. �Je�li nie uda siê nam tegoosi¹gn¹æ, to nie bêdziemy mieli ani dobrej archi-tektury, ani dobrej witryny�.

Kryteria organizacji witryny:n Cele u¿ytkownika. Organizacja witryny

musi byæ zrozumia³a dla u¿ytkownikóworaz powinna umo¿liwiaæ realizacjê celówinternautów.

n Cele firmowe. Organizacja witryny musitak¿e realizowaæ cele firmy, podkre�laj¹c tefunkcje lub produkty, które s¹ najwa¿niejszedla sukcesu firmy.

n System klasyfikacji tre�ci. Tre�æ i us³ugiw witrynie zapewne daj¹ siê sklasyfikowaæza pomoc¹ naturalnych kategorii (lubnachodz¹cych na siebie grup kategorii).

Organizacja witryny powinna byæ najlepszymmo¿liwym po³¹czeniem tych trzech (czasami kon-fliktowych) kryteriów. Je�li witryna jest po�wiêco-na tylko jednemu tematowi, ma jeden cel firmowyi tylko jeden typ u¿ytkownika (posiadaj¹cego jedn¹potrzebê), to zadanie organizacji jest proste. Jednakrzeczywisto�æ jest zazwyczaj bardziej skomplikowana.

Je�li witryna ma byæ skuteczniezaprojektowana i zorganizowana,musimy wiedzieæ, dla kogojest przeznaczona i jakie celema zrealizowaæ.

Ka¿da witryna ma zazwyczaj kilka grup u¿yt-kowników, którzy chc¹ w ró¿nym czasie zrealizo-waæ ró¿ne potrzeby, kilka ró¿nych typów tre�ci �które niekoniecznie dobrze siê ze sob¹ ³¹cz¹, i ró¿-ne cele do osi¹gniêcia � w zale¿no�ci od tego, kogow firmie zapytamy o nie.

�Wyzwaniem jest stworzenie dobrej, porz¹dnejstruktury bez ¿adnych dziur� � mówi Garrett.�Wyzwania zwykle pojawiaj¹ siê, gdy próbujemyobs³u¿yæ odbiorców o bardzo zró¿nicowanych po-trzebach albo gdy firmowe strategie nagle zaczynaj¹d¹¿yæ w przeciwnych kierunkach�.

�Przyjemnie jest malowaæ taki wyidealizowanyobraz projektu, w którym firma ma tylko jedn¹ stra-tegiê, na dodatek bardzo jasno sformu³owan¹� �kontynuuje Garrett. �Prawdê mówi¹c, takie przy-padki nie istniej¹. Firmy maj¹ wiele ró¿nych stra-tegii � i to ró¿ni¹cych siê na poszczególnychetapach�.

Zwykle trudno jest doj�æ do porozumienia, która(lub czyja) z tych strategii jest najwa¿niejsza. �Ar-chitektura informacji � bardziej ni¿ jakikolwiekinny aspekt projektu internetowego � bêdzie podnegatywnym wp³ywem polityki firmowej� � mówiGarrett. �Wszystkie wewnêtrzne bitwy o zasobyw organizacji, bitwy o wsparcie dla ró¿nych firmo-wych inicjatyw, bitwy o lepsze wyeksponowanieprzed kierownictwem znaczenia dzia³u maj¹ wp³ywna decyzje dotycz¹ce architektury witryny�.

Page 12: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 113

Tworzeniestruktury witrynyPrzed ró¿nymi witrynami stoj¹ ró¿ne wyzwania codo struktury, jednak ich projektanci podejmuj¹podobne kroki, by utworzyæ strukturê informacji.

Sam proces mo¿e siê trochê ró¿niæ w zale¿no�ciod osób czy od projektów. Mo¿na u¿ywaæ ró¿nychnarzêdzi, wypróbowywaæ odmienne taktyki i two-rzyæ inne dokumenty, ale podstawowe czynno�ci s¹takie same.

Cztery etapy tworzenia struktury witryny:1. Oceniamy, czym dysponujemy.

Najpierw musimy ustaliæ, co witrynapowinna zawieraæ.

2. Podejmujemy decyzjê, co jestnajwa¿niejsze. Nie mo¿na zorganizowaæ(a tym bardziej zaprojektowaæ) witryny, dopókinie wiemy, które elementy s¹ najwa¿niejsze.Czego najbardziej bêd¹ szukaæ u¿ytkownicy?Czego naszym zdaniem maj¹ u¿ywaæ?

3. Wybierzmy zasadê organizacyjn¹.Struktura wiêkszo�ci witryn opiera siê najednym lub kilku systemach organizacyjnych.Niektóre witryny s¹ zorganizowane wed³ugdaty, inne wed³ug kategorii lub typuu¿ytkownika.

4. Kategoryzujmy zawarto�æ. Ostatnii niezbêdny krok to zorganizowaniezawarto�ci witryny w sposób zrozumia³ydla u¿ytkowników.

1. Oceniamy, czym dysponujemyPierwsz¹ czynno�ci¹ w procesie zorganizowaniawitryny (oczywi�cie po zdefiniowaniu celów witry-ny) jest rozpracowanie tego, czym mamy siê zaj¹æ.Co tak naprawdê ma znajdowaæ siê w witrynie?

W przypadku wielu witryn wystarczy prosta li-sta, streszczaj¹ca zawarto�æ witryny. Niektóre witry-ny wymagaj¹ jednak przeprowadzenia inwentary-zacji ca³ej istniej¹cej zawarto�ci.

Jedn¹ z najczê�ciej pope³nianych przez projektan-tów pomy³ek jest kszta³towanie witryny na wzórstruktury firmy i przydzielenie ka¿demu dzia³owiosobnej czê�ci witryny z odno�nikiem ze stronyg³ównej.

Jest to klasyczny b³¹d � mówi Michael Twida-le, profesor bibliotekoznawstwa i nauk informacyj-nych z uniwersytetu w Urbana-Champaign w Illi-nois. �Jest to dobre rozwi¹zanie, je�li tworzymyfirmowy intranet, poniewa¿ mo¿emy zak³adaæ, ¿eka¿dy pracownik zna hierarchiê firmy. Ale je�li jestto strona publiczna, to mamy problem.�

Je�li firmowa witryna staje siêmap¹ firmy, na pewno nie osi¹gniemyzamierzonych rezultatów.(Wendy Owen)

Problem polega na tym, ¿e nasza wewnêtrznastruktura nie ma ¿adnego znaczenia dla u¿ytkow-ników. Ich cele rzadko mo¿na umie�ciæ na sche-macie organizacyjnym firmy, a nasze nazwy dzia-³ów na pewno bêd¹ dla nich niezrozumia³e. Mo¿esiê to okazaæ trudne do wyja�nienia wspó³pracow-nikom, którzy chc¹, by ich miejsce w witrynie by³owidoczne.

�Musimy przyj¹æ do wiadomo�ci, ¿e w projek-cie internetowym jest wiele wewnêtrznej polityki�� kontynuuje Twidale. �Ka¿dy wierzy, ¿e wykony-wana przez niego praca jest niezbêdna w dzia³a-niu firmy. Oznacza to, ¿e ka¿dy chce, by jego dzia³by³ widoczny na pierwszej stronie witryny. Co jamówiê � ka¿dy chce znajdowaæ siê na samej gó-rze pierwszej strony!�.

Wspó³pracownikom trzeba to u�wiadomiæ, je�lichcemy zbudowaæ witrynê ciesz¹c¹ siê powodze-niem. �Struktura witryny nie powinna wygl¹daæ jakschemat organizacyjny firmy� � mówi projektant-ka Wendy Owen. �Je�li firmowa witryna staje siêmap¹ firmy, to na pewno nie osi¹gniemy zamie-rzonych rezultatów�.

Witryna nie powinnabyæ odbiciem firmy

wskazówki praktyczne

Page 13: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

114 Projektowanie witryny: organizacja i nawigacja

Dwa sposoby oceny1. Stworzenie szkicu. Gdy tworzymy now¹

witrynê, zazwyczaj wystarczy podstawowyszkic, obejmuj¹cy typy tre�ci i us³ug, którebêd¹ dostêpne w witrynie (zw³aszcza je�liwitryna jest wzglêdnie ma³a).

2. Inwentaryzacja zawarto�ci. Je�li zmieniamyprojekt istniej¹cej witryny lub budujmy du¿¹witrynê, mo¿emy potrzebowaæ sporz¹dzeniaskrupulatnej listy, zawieraj¹cej ka¿dy elementdostêpny w witrynie (ka¿dy artyku³,listê produktów, wszystkie ilustracje).Z tych list bêdziemy pó�niej korzystaæ,kategoryzuj¹c i organizuj¹c tre�æ.

2. Decydujemy,co jest najwa¿niejszeW trakcie organizowania witryny � zanim ustali-my ostateczn¹ strukturê � musimy zdecydowaæ,które elementy s¹ w witrynie najwa¿niejsze. Czegobêdzie poszukiwaæ wiêkszo�æ u¿ytkowników? Odczego zale¿y sukces finansowy witryny?

�Jednym z najwiêkszych b³êdów, jakie widaæw witrynach, jest brak wyra�nej hierarchii� � mówiWendy Owen, dyrektor Gigant Ant Design. �Usta-lenie, co jest najwa¿niejsze, naprawdê pomaga u¿yt-kownikom w zrozumieniu organizacji witryny�.

Jednak wiele firm wybiera ³atwiejsz¹ drogê i re-zygnuje z takiego postêpowania. Traktuj¹ prioryte-towo to, co szef chce uwa¿aæ za najwa¿niejsze lub� co jest jeszcze gorsze � nadaj¹ wszystkiemu tak¹sam¹ rangê.

�Zbyt wiele witryn unika organizowania mate-ria³ów wed³ug potrzeb u¿ytkowników� � mówiJeffrey Zeldman (www.zeldman.com). �Gdy o archi-tekturze zaczynaj¹ decydowaæ komitety (a niepotrzeby u¿ytkowników), powstaj¹ witryny, w któ-rych jedno klikniêcie prowadzi do wszystkiego, za-miast kierowaæ odbiorców �ci�le zaplanowanymi�cie¿kami�.

�Dostêp do wszystkiego za spraw¹ jednego klik-niêcia brzmi dobrze, ale jest z³ym rozwi¹zaniem,poniewa¿ przyt³acza u¿ytkownika� � wyja�niaZeldman. �Je�li odwiedzimy nowojorsk¹ jad³odaj-niê z dwudziestopiêciostronicowym menu, skoñ-czymy na zamówieniu kawy i jajek, poniewa¿ niebêdziemy w stanie przegl¹daæ w nieskoñczono�ælisty wszystkich potraw do wyboru�.

W restauracji dojdzie do realizacji zamówienia,w internecie � nie. �Ludzie musz¹ je�æ, ale czymusz¹ �lêczeæ w naszej witrynie?� � mówi Zeld-man. �Je�li przyt³oczymy ich zbyt wieloma mo¿li-wo�ciami, pójd¹ gdzie indziej�.

Powinni�my tak¿e pamiêtaæ, ¿e nie wszyscyu¿ytkownicy s¹ dla nas jednakowo wa¿ni. �W�ródodbiorców jest wielu ró¿nych ludzi, nie ka¿dej gru-pie u¿ytkowników musimy po�wiêcaæ tyle samouwagi� � mówi Owen. �Na przyk³ad, je�li w witry-nie sprzedajemy szampon i stanowi to 90% naszychobrotów, to skupimy siê na osobach zainteresowa-nych szamponem. Nie bêdziemy tak samo trakto-waæ osób kupuj¹cych nasze ¿yletki, poniewa¿ ichsprzeda¿ stanowi tylko 5% naszych obrotów�.

3. Wybierzmy zasadê organizacyjn¹Organizuj¹c witrynê, bêdziemy musieli wybraæzasadê organizacyjn¹, wokó³ której powstanie struk-tura naszej witryny. Na przyk³ad sklepy organizo-wane s¹ wed³ug kategorii produktów, a elektronicznepamiêtniki wed³ug daty wpisu.

Ka¿da witryna stanowi niepowtarzalne struktu-ralne wyzwanie, jednak wiêkszo�æ witryn mo¿nazorganizowaæ na jeden z sze�ciu sposobów: wed³ugkategorii, zadania, u¿ytkownika, jêzyka lub po³o-¿enia, wed³ug daty lub dzia³u firmy (ostatni sposóbnie jest zalecany). Zobacz równie¿ �Sze�æ sposobóworganizacji witryny�, str. 116.

4. Kategoryzujemy zawarto�æOstatni etap organizacji jest najwa¿niejszy. Zawar-to�æ witryny trzeba podzieliæ na posiadaj¹ce jakie�znaczenie kategorie lub dzia³y.

Teoretycznie jest to prosty proces. Wystarczypodzieliæ wszystko na logiczne grupy � podobnerzeczy dajemy razem, ró¿ne � osobno. Jednak fak-tyczny proces podzia³u nie jest taki ³atwy. Trzebarozwa¿yæ potrzeby u¿ytkowników, potrzeby firmyi system klasyfikacji, widoczny w samej tre�ci. Jestwiele sposobów rozwi¹zania tego problemu i czê-sto istnieje wiêcej ni¿ jedno dobre rozwi¹zanie.

Zajêcie to jest zarazem satysfakcjonuj¹ce i fru-struj¹ce, poniewa¿ eleganckie rozwi¹zanie wyda siênam oczywiste, gdy ju¿ dokonamy podzia³u. Doeleganckiego rozwi¹zania prowadzi wiele �cie¿ek,a ka¿dy projektant musi znale�æ �cie¿kê odpowied-ni¹ dla siebie (zobacz równie¿ �Jak stworzyæ archi-tekturê informacji?�, str. 115).

Page 14: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 115

Nietrudno zrozumieæ, czym zajmuje siê architekt infor-macji � organizuje tre�æ strony w rozs¹dny sposób,nadaj¹c witrynie zrozumia³¹ strukturê. Jednak odro-binê trudniej jest zobrazowaæ, w jaki sposób to robi.

�Je�li kto� mówi o metodologii architektury infor-macji, to mówi o wszystkim poza odcinkiem, na któ-rym faktycznie powstaje architektura� � �mieje siêJesse James Garrett, znany architekt systemówinformacji oraz autor ksi¹¿ki The Elements of UserExperience.

�Taka osoba bêdziemówiæ o wszystkich bada-niach, koncepcjach i pla-nowaniu, a¿ dojdzie domiejsca, w którym zaczy-na siê tworzyæ architektu-rê. Pó�niej mo¿e mówiæo wszystkim, co siê robi,by sprawdziæ poprawno�æstworzonej architektury.Jednak faktyczny proceskreowania architekturyjest dla nas tajemnic¹�.

Tajemnica le¿y w zdolno�ci mózgu do segrego-wania informacji, dopóki nie u³o¿¹ siê w porz¹dn¹strukturê. Istnieje wiele ró¿nych sposobów wspomo-¿enia tego procesu i wydaje siê, ¿e ka¿dy ma jak¹�swoj¹ technikê.

W wiêkszo�ci przypadków projektanci zaczynaj¹od listy z ca³¹ zawarto�ci¹ witryny. Nastêpnie zmie-niaj¹ uk³ad elementów, wypróbowuj¹c ró¿ne sche-maty organizacyjne i ró¿ne grupowanie, dopóki do-bre rozwi¹zanie samo siê nie znajdzie.

�Mój proces na pewno uwzglêdnia tworzenie listy�� mówi Garrett. �Tworzê listê, czasami tworzê sche-mat na komputerze, czasami bazgrzê po tablicy�.

Jego ulubion¹ metod¹ jest przesuwanie wizytówek.�Odwracam je na drug¹ stronê i wypisujê na nich na-zwy elementów. Nastêpnie przesuwam je po stolei sortujê, próbuj¹c je jako� do siebie dopasowaæ�.

Takie æwiczenie pomaga zobrazowaæ naturalnegrupowanie lub zobaczyæ, które elementy musz¹znajdowaæ siê bli¿ej siebie. Garettowi podoba siê fi-zyczna strona tego procesu. �Takie æwiczenie � prze-suwanie wizytówek na powierzchni sto³u � jest bar-dzo fajne. Jest w tym co�, co pobudza mój mózgw taki sam sposób, jak godzina aktywno�ci umys³o-wej dziecka w przedszkolu�.

Poza tym jest to ca³kiem niez³y sposób na po-zbycie siê nadwy¿kiwizytówek. �Je�liprzychodzi³yby w pu-de³kach mniejszychni¿ po 500 sztuk, topewnie musia³bymwymy�liæ inny spo-sób projektowaniaarchitektury� � �mie-je siê Garrett.

Jak wiêkszo�æ ar-chitektów informacji,Garrett twierdzi, ¿e

zawsze sprawdza kilka mo¿liwych pomys³ów, a naj-lepsze rozwi¹zanie ujawnia siê samo.

�Zazwyczaj rozwa¿am kilka ró¿nych pomys³ów,zanim skupiê siê na którym� rozwi¹zaniu architekto-nicznym�. Czynniki decyzyjne zawsze zwi¹zane s¹ze strategi¹ witryny. Co zdaniem firmy powinni�mydziêki witrynie osi¹gn¹æ? Jakie oczekiwania wobecwitryny maj¹ u¿ytkownicy?

�Jest to proces równoczesnego rozwoju� � kon-tynuuje Garrett. �Zazwyczaj w tym samym czasiepracujê nad tre�ci¹ i przepycham wizytówki. Czê�æmojego mózgu my�li o tre�ci, a czê�æ rozwi¹zuje pro-blemy strategiczne�.

�W pewnym momencie czujê niemal grawitacyj-ny poci¹g do jakiego� rozwi¹zania. Wtedy wiem, ¿emodel koncepcyjny zaczyna siê krystalizowaæ, a ele-menty tre�ci zaczynaj¹ wpadaæ w odpowiednie miej-sca uk³adanki.�

wskazówki praktyczne

Jak stworzyæ architekturê informacji?

W pewnym momenciecz³owiek czujeprawie grawitacyjnypoci¹g do którego�rozwi¹zania.Jesse James Garrett

Page 15: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

116 Projektowanie witryny: organizacja i nawigacja

1. Wed³ug kategoriiMo¿na stosowaæ, je�li wszyscy u¿ytkownicy maj¹na uwadze to samo podstawowe zadanie � bezwzglêdu na to, czy jest nim zbadanie tematu, zakupproduktu czy przedyskutowanie problemu.

Podzia³ witryny ze wzglêdu na kategorie jest chy-ba najbardziej popularny w internecie. Dzia³y witrynyto kolejne tematy lub kategorie oferowanych infor-macji. Witryny prezentuj¹ce artyku³y mog¹ byæ po-dzielone ze wzglêdu na typy artyku³ów, witryny ko-mercyjne ze wzglêdu na typ produktów, a witrynyz forami ze wzglêdu na temat dyskusji.

2. Wed³ug zadaniaMo¿na stosowaæ, je�li u¿ytkownicy mog¹ w witry-nie zrealizowaæ kilka zadañ, niekoniecznie ze sob¹powi¹zanych.

W witrynach zorganizowanych wed³ug zadañ iden-tyfikuje siê ró¿ne cele, które mo¿e mieæ u¿ytkowniki próbuje skierowaæ go na �cie¿kê prowadz¹c¹ doich realizacji. Rozwi¹zanie jest skuteczne z jednegopowodu � odpowiada mentalno�ci internauty, któryjest zazwyczaj skoncentrowany na tym, co ma zro-biæ w nastêpnej kolejno�ci.

Sze�æ sposobów organizacji witryny

BlackPlanetForum to miejsce,w którym u¿ytkownicymog¹ dyskutowaæo swoich problemachi zainteresowaniach.Ka¿dy u¿ytkownik jest tamz tego samego ogólnegopowodu, dlatego foramo¿na zorganizowaæwed³ug tematów.

Nerve.com organizuje strony osobiste zgodniez ró¿nymi zadaniami, które ludzie mog¹ wype³niaæ,aby znale�æ swojego wymarzonego partnera.

Page 16: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 117

3. Wed³ug u¿ytkownikaMo¿na stosowaæ, je�li witryna s³u¿y co najmniejdwóm odrêbnym grupom u¿ytkowników z ró¿nymi(chocia¿ czasami powi¹zanymi) celami i zaintereso-waniami.

Witryny zorganizowane wed³ug u¿ytkowników gru-puj¹ zadania i tematy, które mog¹ szczególnie zain-teresowaæ konkretny typ odwiedzaj¹cych i kieruj¹ ichw odpowiedni obszar. Ten system organizacji spraw-dza siê w przypadku witryn kojarz¹cych, które zbie-raj¹ �nabywców� i �sprzedawców� (lub pracodawcówi osoby poszukuj¹ce pracy).

Organizacjê wed³ug u¿ytkowników mo¿na tak¿eefektywnie 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 orazwzglê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 firmameblarska Herman Miller ma podwitryny dla klien-tów, projektantów i inwestorów.

4. Wed³ug jêzyka lub po³o¿eniaMo¿na stosowaæ, je�li nasi odwiedzaj¹cy mówi¹ró¿nymi jêzykami lub ¿yj¹ w ró¿nych regionach geo-graficznych, wymagaj¹cych ró¿nej tre�ci lub us³ug.

Wiele witryn jest zorganizowanych wed³ug jêzy-ka lub lokalizacji, aby sprostaæ potrzebom zró¿nico-wanej jêzykowo lub pochodzeniowo bazie u¿ytkow-ników. Jest to jednak nie tyle system organizacji, cosposób skierowania u¿ytkowników do innych witryn,które z kolei musz¹ byæ zorganizowane wed³uginnego kryterium, odpowiadaj¹cemu zawartej w nichtre�ci.

Guru pomaga nawi¹zaæ kontakt firmomi konsultantom. Witryna jest zorganizowanawed³ug u¿ytkowników � kieruje pracodawcóworaz przysz³ych pracowników w dwa ró¿nemiejsca, aby uzyskali dostêp do specjalistycznychus³ug przeznaczonych dla konkretnej grupy.

Levi�s kieruje ró¿nych u¿ytkowników do ró¿nychwitryn ze wzglêdu na region �wiata, z któregopochodz¹. Ka¿da witryna prezentuje tre�ciw sposób odpowiedni dla jêzyka, kultury i produktówdostêpnych w danym rejonie.

Muzeum Guggenheima w Berlinie witau¿ytkowników po angielsku lub niemiecku(�Welcome� albo �Wilkommen�).

Page 17: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

118 Projektowanie witryny: organizacja i nawigacja

Sze�æ sposobów organizacji witryny � ci¹g dalszy

5. Wed³ug daty lub porz¹dkuMo¿na stosowaæ, je�li data lub kolejno�æ elemen-tów jest niezbêdna dla u¿ytkownika � na przyk³adw aktualno�ciach, dziennikach, kalendarzach wyda-rzeñ lub instrukcjach krok po kroku.

Ogólnie rzecz bior¹c, witryny nie zale¿¹ tak bar-dzo od dat jak inne �rodki przekazu. Daty s¹ wa¿nedla publikacji drukowanych, poniewa¿ ca³e wydaniei informacje w nim zawarte odpowiadaj¹ konkretnejdacie. Witryny szybciej siê zmieniaj¹, s¹ uaktualnia-nie kilka razy dziennie lub kilka razy do roku.

Oczywi�cie, istniej¹ wyj¹tki. Pamiêtniki interneto-we (zwane �blogami�) s¹ organizowane wed³ug dat,od najnowszego do najstarszego wpisu. Czasamitak¿e w witrynach innego typu taki sposób organiza-cji jest jedynym rozwi¹zaniem � na przyk³ad przyprezentacji wydarzeñ na osi czasu lub publikacji ka-lendarza wydarzeñ itp.

6. Wed³ug dzia³u firmyMo¿na stosowaæ tylko wtedy, gdyprojektujemy witrynê intranetow¹,w której struktura dzia³ów firmy maznaczenie dla odbiorców (na przyk³adna stronie uczelni) lub gdy klimat poli-tyczny firmy nie pozostawia nam ¿ad-nego innego wyj�cia.

Jeden z najczêstszych (i zrozumia³ych) b³êdówprojektantów to kszta³towanie witryny wed³ug struk-tury firmy oraz zapewnienie ka¿demu dzia³owi jed-nej sekcji w witrynie i odno�nika na pierwszej stro-nie. Takie rozwi¹zanie ze wzglêdów socjologicznychjest dobre wewn¹trz firmy, ale nie jest dobre dla u¿yt-kowników.

Problem polega na tym, ¿e wewnêtrzna strukturafirmy nie ma najmniejszego znaczenia dla u¿ytkow-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 tematPicassa 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�mypracowali w muzeum i wiedzieli, ¿e wyk³adami natemat sztuki nowoczesnej zajmuje siê pani Krysiaz dzia³u przygotowuj¹cego program.

Zeldman.com to prywatna witryna projektantaJeffrey�a Zeldmana. Jak ka¿dy blog, jestzorganizowana wed³ug daty, z najnowszymwpisem widniej¹cym na samym pocz¹tku strony.

Zobacz równie¿ �Witryna nie powinna byæodbiciem firmy�, str. 113.

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

Page 18: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 119

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.

Tworzenie zabawnych kategorii

RedEnvelope koncentruje siê ludziach kupuj¹cychna ostatni¹ chwilê prezenty. Zamiast odpytywaæu¿ytkowników, czego chc¹, RedEnvelope pyta,dla kogo chc¹ kupiæ prezent. Przez podzielenieproduktów w kreatywne kategorie stworzyli chybanajprzyjemniejszy w korzystaniu sklep internetowy.

NetFlix to internetowa wypo¿yczalnia wideo,która rozwi¹zuje dwa najwiêksze problemyzwi¹zane z wypo¿yczaniem filmów. Gdy ludziedotr¹ ju¿ do wypo¿yczalni, nie pamiêtaj¹, jaki filmchcieli 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).

Page 19: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

120 Projektowanie witryny: organizacja i nawigacja

Bardzo rzadko struktura ca³ej witryny mo¿e byæ zor-ganizowana przy zastosowaniu tylko jednego syste-mu. Zazwyczaj witryny musz¹ wykorzystywaæ kilkasystemów � jednocze�nie lub kolejno � aby kate-goryzowaæ ca³¹ zawarto�æ i prowadziæ u¿ytkownikówdo obranego przez nich celu.

Muzeum Guggenheima ma kilka oddzia³ów w ró¿-nych miastach. Ka¿dy oddzia³ wystawia co� innegooraz obs³uguje lokaln¹ i miêdzynarodow¹ publiczno�æ.

1. Pierwsza strona zorganizowanawed³ug lokacjiPierwsza strona guggenheim.org dzieliu¿ytkowników wed³ug tego, którym oddzia³emmuzeum s¹ zainteresowani (najechaniekursorem myszy na ka¿dy z obrazkówujawnia nazwê miasta, w którym znajduje siêdany budynek).

2. Lokalna witryna zorganizowanawed³ug jêzykaPierwsza strona ka¿dej podwitryny (w³¹czniez pokazan¹ na rysunku kolekcj¹ w Wenecji)pocz¹tkowo sortuje u¿ytkowników napodstawie jêzyka � w tym przypadkujest to jêzyk angielski lub w³oski.

3. Lokalna witryna zorganizowanawed³ug dzia³ówPierwsza strona nowojorskiego oddzia³umuzeum oferuje sze�æ sekcji (zorganizowanychwed³ug dzia³ów), których lista powtarzanajest w ca³ej witrynie jako górny poziomy paseknawigacyjny. Organizacja wed³ug dzia³ów rzadkojest dobrym rozwi¹zaniem, ale w tym wypadkusiê sprawdza, poniewa¿ dzia³y odpowiadaj¹wybieranym przez u¿ytkowników �cie¿kom.

4. Sekcje witryny zorganizowanewed³ug kategoriiGdy u¿ytkownicy wejd¹ na strony po�wiêconekolekcji (odno�nik The Collection), mog¹ wybraæjeden z sze�ciu sposobów prezentowania prac.

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

Tworzenie zabawnych kategorii � ci¹g dalszy

Page 20: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 121

Herman Miller to firma meblarska znana ze swoicheleganckich rozwi¹zañ biurowych (na rysunku widaækrzes³o Aeron) oraz klasycznych zestawów domo-wych autorstwa znanych projektantów, takich jakEames.

1. Wed³ug kategorii produktuWiêksza czê�æ strony g³ównej witryny jestpo�wiêcona produktom. Firma dzieli meblena dwie podstawowe kategorie (wyposa¿eniebiurowe i nowoczesna klasyka) i na stronieg³ównej umie�ci³a punkty wej�cia do obydwukategorii.

2. Wed³ug zadaniaPierwsza strona daje tak¿e mo¿liwo�æ wyboruszybkich odno�ników do innych zadañ (pozaogl¹daniem mebli) � przeczytanie informacjina temat firmy, sprawdzenie ofert pracy itd.

3. Wed³ug u¿ytkownikaPierwsza strona zosta³a zaprojektowanag³ównie z my�l¹ o klientach, dlategoznajduj¹ siê tam osobne punkty wej�ciadla u¿ytkowników z innych kategorii(projektantów, inwestorów).

Hewlett Packard to firma technologiczna znanaz produkcji drukarek, komputerów itp.

1. Wed³ug u¿ytkownikaOdwiedzaj¹cy mog¹ zidentyfikowaæ swoj¹kategoriê, wybieraj¹c typ firmy lub biura,dla którego kupuj¹ produkty (zastosowaniadomowe i domowe biura, ma³e i �rednie firmy,przedsiêbiorstwa itd.).

2. Wed³ug kategorii produktuU¿ytkownicy mog¹ tak¿e wybraæ poszczególneposzukiwane produkty (drukarki, komputerystacjonarne, urz¹dzenia narêczne itp.).

3. Wed³ug zadaniaPierwsza strona daje tak¿e mo¿liwo�æ wyboruszybkich odno�ników do innych zadañ, takichjak przeczytanie informacji na temat firmyczy przeszukanie ofert pracy.

Page 21: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

122 Projektowanie witryny: organizacja i nawigacja

Gdy ju¿ podjêli�my decyzjê co do struktury witryny,musimy jako� udokumentowaæ nasz¹ wizjê, aby innimogli j¹ poznaæ.

Istnieje kilka sposobów dokumentowania, które po-zwalaj¹ twórcom internetowym zobrazowaæ struk-turê, przekazaæ decyzje organizacyjne i �ledziæzmiany wraz z rozwojem witryny. Do narzêdzi tychzaliczamy mapê witryny, schemat strony i �cie¿kiu¿ytkownika. Czêsto stosuje siê je razem, aby przed-stawiæ ró¿ne aspekty struktury witryny i do�wiad-czeñ u¿ytkownika.

Trzy sposoby wizualizacji struktury:

1. Mapa witryny daje obraz witryny z lotu ptaka,pokazuj¹c, jak zorganizowane s¹ poszczególnesekcje i jak do siebie pasuj¹.

2. Schemat pokazuje wszystkie elementy, którebêd¹ znajdowaæ siê na danej stronie, oraz sposóbich wzajemnego powi¹zania.

3. �cie¿ka u¿ytkownika pokazuje �ekran zaekranem� � drogê u¿ytkownika po witrynie,gdy próbuje zrealizowaæ konkretne zadanie.

1. Mapa witrynyMapa witryny � zwana równie¿ schematem bloko-wym � przedstawia organizacjê dzia³ów witryny i ichwzajemne dopasowanie.

Ka¿dy blok odpowiada jednej stronie w witrynie,pocz¹wszy od strony g³ównej. Przedstawiaj¹cy stosbloków rysunek zazwyczaj reprezentuje zestaw strono tym samym projekcie i podobnej tre�ci (np. stronygenerowane na podstawie bazy danych). Mo¿e tak¿ereprezentowaæ dzia³ witryny, który zosta³ rozrysowanyna osobnej mapie.

Ka¿da linia reprezentuje po³¹czenie miêdzy stronamilub �cie¿kê, któr¹ mo¿e pod¹¿aæ u¿ytkownik. Dlategoka¿da linia lub grupa linii stanowi nawigacyjne wyzwanie.

Mapa witryny tworzona jest przez architekta informacji(lub inn¹ osobê, która organizuje witrynê) po ustaleniustruktury organizacyjnej, ale przed zaprojektowaniemsystemu nawigacyjnego.

Dokumentowanie struktury witryny

Page 22: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 123

2. �cie¿ka u¿ytkownika�cie¿ka u¿ytkownika � zwana tak¿e schematemu¿ytkownika � pokazuje szczegó³owo (ekran za ekra-nem) to, czego do�wiadcza u¿ytkownik, który próbujew witrynie wykonaæ konkretne zadanie.

Ka¿dy blok w wykresie reprezentuje jeden ekran,widziany przez u¿ytkownika pokonuj¹cego kolejne eta-py zadania.

Ka¿da linia reprezentuje �cie¿kê, któr¹ u¿ytkownikmo¿e pod¹¿yæ. Powodem tworzenia wykresów �cie-¿ek u¿ytkownika jest chêæ przewidzenia wszystkichmo¿liwych dróg nawigowania po witrynie, nawet tych,które mog¹ powstaæ w wyniku b³êdu.

Ka¿dy blok w kszta³cie karo symbolizuje punkt de-cyzyjny. Linie wychodz¹ce z takiego bloku przedsta-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, gdyu¿ytkownik rejestruje siê w us³udze, kupuje produkt lubu¿ywa narzêdzi dostêpnych w witrynie. Taki wykresmo¿e byæ tak¿e pomocny do zobrazowania � i popra-wienia � ogólnych do�wiadczeñ u¿ytkownika ka¿dejwitryny.

3. Schemat stronySposób ten nazywamy równie¿ rozrysowaniemkadrów. Schemat zawiera wszystkie elementy, któreznajd¹ siê na stronie i pokazuje (w przybli¿eniu), w któ-rym miejscu bêd¹ umieszczone.

Ka¿dy blok reprezentuje jeden element na stronie(grafikê, pasek nawigacyjny, nag³ówek), bez zag³êbia-nia siê w szczegó³y dotycz¹ce wygl¹du elementu.

Schemat jest zazwyczaj tworzony dla ka¿dego typustrony w witrynie (lub dla ka¿dego wzorca), zanim za-czn¹ siê prace nad projektem graficznym. Poziomszczegó³owo�ci mo¿e byæ ró¿ny. Niektóre schematy s¹bardzo szczegó³owe � prezentuj¹ dok³adne rozmiesz-czenie ka¿dego elementu. Inne s¹ bardziej pobie¿ne� zawieraj¹ podstawowe elementy i sugestie co doich wzglêdnego rozmieszczenia.

Page 23: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

124 Projektowanie witryny: organizacja i nawigacja

Nawigacja w witrynieDobry projekt graficzny to dobra nawigacja. Gdymówimy, ¿e witryna jest dobrze zaprojektowana lubdobrze dzia³a, zazwyczaj mamy na my�li to, ¿e mawspania³¹, intuicyjn¹ nawigacjê.

Nawigacja wizualnie wyra¿a strukturê witrynyi jest to podstawowy problem, który trzeba rozwi¹-zaæ w trakcie projektowania strony. Problem ten niejest b³ahy. W przeciwieñstwie do czasopism, skle-pów lub produktów w �wiecie rzeczywistym, witry-ny s¹ rzecz¹ abstrakcyjn¹ � u¿ytkownik nie mo¿eintuicyjnie oceniæ wielko�ci witryny lub tego, w któ-rym jej miejscu siê znajduje (zobacz równie¿ �Jakludzie nawiguj¹ w internecie?�, str. 125).

Nawigacja musi dostarczyæ wszystkich tychwskazówek. Musi powiedzieæ u¿ytkownikom, cooferujemy, pozwoliæ zorientowaæ siê, w którymmiejscu siê znajduj¹ i skierowaæ ich do miejsca prze-znaczenia � wszystko jednocze�nie.

Czego u¿ytkownicy dowiaduj¹ siêdziêki nawigacji?n Co witryna ma do zaoferowania.

Przegl¹daj¹c pasek nawigacyjny (lub dowoln¹inn¹ wybran¹ przez nas formê nawigacji),odwiedzaj¹cy dowiaduje siê, co witryna zawiera.

n Jak witryna jest zorganizowana.Wielu u¿ytkowników analizuje elementynawigacyjne, aby zrozumieæ strukturêwitryny. W ten sposób mog¹ uzyskaækontekst aktualnie ogl¹danej stronyi bardziej pewnie nawigowaæ.

n Gdzie wewn¹trz witryny siê znajduj¹.W internecie � jak w �wiecie rzeczywistym� dobry system nawigacyjny zawszepokazuje, gdzie znajduje siê u¿ytkownik(wyobra�my sobie mapê z du¿ym czerwonymkrzy¿ykiem i napisem �jeste� tutaj�).

n Jak znale�æ to, czego szukaj¹.Zadanie, które nawigacja konieczniemusi spe³niaæ � w jak najszybszyi najskuteczniejszy sposób pomóc znale�æu¿ytkownikom to, czego szukaj¹.

Gdy projektujemy strukturê nawigacji, kusz¹ce jestpostawienie za³o¿enia, ¿e bêdziemy mieli lojalnychodbiorców, którzy z czasem naucz¹ siê przemiesz-czaæ po naszej witrynie. Popatrzmy jednak uczci-

Osiem z³ych pomys³ówna nawigacjêIstnieje wiele ró¿nych sposobów umo¿liwienia u¿yt-kownikowi nawigowania w witrynie. Jedne sposo-by s¹ lepsze, inne gorsze, a inne zupe³nie nieuda-ne. Wiem, poniewa¿ wypróbowa³am wszystkie �nawet te lataj¹ce i p³ywaj¹ce dziwad³a.

1. Rozwijane menu ukrywaj¹ce sekcje witryny,zamiast je ujawniaæ.

2. W³asnorêcznie zrobione ikony, którychu¿ytkownicy nie zrozumiej¹ bez wzglêduna nasze starania i w³o¿ony trud.

3. Kolorowe bloki, których u¿ytkownicy nawetnie zauwa¿¹, a na pewno nie przypisz¹ im¿adnego znaczenia.

4. Metafory wizualne, takie jak rysunek biuralub lady sklepowej, który u¿ytkownicy moglibyklikaæ, jednak uznaj¹ go co najwy¿ej zainteresuj¹cy.

5. Wymy�lne nazwy sekcji witryny, którychu¿ytkownicy nie odwiedz¹ (poniewa¿ niebêd¹ ich rozumieæ).

6. Elementy nawigacyjne, które zmieniaj¹swoje po³o¿enie i pojawiaj¹ siê w ró¿nychmiejscach na stronach. Powtarzajcie za mn¹:nie bêdê dezorientowaæ moich u¿ytkowników,nie bêdê dezorientowaæ moich u¿ytkowników�

7. Elementy nawigacyjne w nieoczekiwanychmiejscach. Na niespodzianki jest miejscei czas, ale nawigacja nie powinna byæniespodziank¹.

8. Lataj¹ce, p³ywaj¹ce elementy, któreu¿ytkownik musi z³apaæ, gdy przelatuj¹ poekranie. Nasza nawigacja nie powinna byægr¹, chyba ¿e ca³a witryna jest gr¹. Ale nawetwtedy nawigacja nie powinna byæ gr¹.

wie na pliki dziennika, które wykazuj¹ co innego.�Interfejs witryny nale¿y projektowaæ tak, jakbywszyscy u¿ytkownicy zawsze ogl¹dali go po razpierwszy� � mówi Cate Corcoran, by³a dyrektor-ka do spraw komunikacji w PeoplePC. �Wszystkiestrony powinny byæ zaprojektowane tak, by mog³ydzia³aæ samodzielnie. Nie ka¿dy internauta wejdziena nasz¹ witrynê frontowymi drzwiami.�

Page 24: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 125

odrobina teorii

Jak ludzie nawiguj¹ w internecie?Aby skutecznie projektowaæ na potrzeby internetu,trzeba najpierw zrozumieæ, jak ludzie zachowuj¹ siê,gdy buszuj¹ po internecie. Sieæ jest ca³kowicie in-nym �rodkiem przekazu ni¿ druk, telewizja czy innemedia, do których jest porównywana.

Z ka¿dego medium korzystamy w innysposób:n Czytamy czasopisma.n Ogl¹damy telewizjê.n Nawigujemy w internecie tak, jakby by³a to

rzeczywista przestrzeñ.

Ekran komputera jest fizycznie p³aski � g³adki,bardziej p³aski ni¿ ksi¹¿ka, jednak ludzie poruszaj¹siê w internecie tak, jakby to by³a przestrzeñ. Ka¿d¹stronê przeszukuj¹ pod k¹tem obecno�ci sygna³ównawigacyjnych, potem skupiaj¹ siê na swoim miej-scu docelowym i my�l¹ �gdzie powinienem pój�æ�zamiast �co powinienem przeczytaæ�.

Ró¿nica nie jest ma³a. Przej�cie od czytania cza-sopisma do korzystania z internetu wymaga zmianykognitywnej � gdy u¿ytkownik patrzy na monitor,kursor na ekranie (kierowany trzyman¹ w rêce mysz¹)jest przed³u¿eniem jego w³asnego cia³a. Dlatego na-wigacja w internecie jest tak podobna do nawigacjiw przestrzeni fizycznej.

W³a�nie to przewidywa³ Marshall McLuhan. Wewczesnych latach istnienia telewizji McLuhan opu-blikowa³ teorie dotycz¹ce wp³ywu mediów na ludzi.�Wszystko jest przed³u¿eniem jakiej� ludzkiej zdol-no�ci � fizycznej lub psychicznej� � napisa³ w ksi¹¿-ce Przeka�nik jest przekazem (ang. The Medium isthe Message). �Ko³o jest przed³u¿eniem stopy. Ksi¹¿-ka jest przed³u¿eniem wzroku� ubranie jest przed-³u¿eniem skóry� obwód elektryczny jest przed³u¿e-niem centralnego systemu nerwowego�.

Je�li u¿ytkownik odwzorowuje siebie na ekranie(kursor staje siê abstrakcyjn¹ reprezentacj¹ jego cia-³a), to posuwamy siê du¿o dalej na drodze do wyja-�nienia nie tylko tego, jak ludzie czuj¹ siê w interne-cie, ale tak¿e tego, jak dzia³aj¹. Wiêkszo�æ osóbnawiguje w witrynach tak, jakby biegli przez lotnisko,próbuj¹c znale�æ odpowiedni¹ bramkê � szybko,celowo i czasami z desperacj¹.

Wiêkszo�æ osób nawiguje w witrynachtak, jakby biegli przez lotnisko,próbuj¹c znale�æ odpowiedni¹ bramkê.

Projektowanie dla u¿ytkowników �w biegu�Odk³adaj¹c teoriê na bok, mo¿emy stwierdziæ, ¿e w³a-�nie przez przestrzenn¹ naturê internetu nawigacjajest tak wa¿na. Z wielu powodów projektowanie wi-tryny przypomina bardziej projektowanie przestrzenipublicznej ni¿ drukowanej strony.

U¿ytkownicy docieraj¹ do witryny z jakiego� po-wodu, a celem przy�wiecaj¹cym nam podczas pro-jektowania witryny jest jak najszybsze skierowanieich na jak najprostsz¹ drogê, dobrze oznakowan¹powszechnie rozpoznawanymi symbolami.

Dlatego projekt internetowy jest problemem za-równo konstrukcyjnym, jak i wizualnym. A je�li spoj-rzymy na niego z architektonicznego punktu widze-nia, jest to wyzwanie, poniewa¿ ludzie nie mog¹polegaæ w nim na wizualnych wskazówkach (lub in-nych zmys³ach), wykorzystywanych do nawigacjiw rzeczywistej przestrzeni.

W rzeczywistym �wiecie ludzie ³atwiej mog¹oceniaæ wielko�æ rzeczy � widz¹ rozmiary budynkui widz¹, kto siê w nim znajduje. Mog¹ okre�liæ g³o-�no�æ d�wiêków, poczuæ zapachy. Widz¹, gdzie s¹drzwi, a je�li siê zgubi¹, zawsze mog¹ cofn¹æ siênieco po �ladach i poprosiæ kogo� o pomoc.

Internet jest jednak rzecz¹ abstrakcyjn¹ i nie ofe-ruje takich wskazówek. Nasze postrzeganie zmys³o-we jest ograniczone do tego, co widzimy w oknie prze-gl¹darki. Nie ma dooko³a nikogo, kto móg³by namw razie czego pomóc. Rolê tak¹ ma spe³niaæ projektwitryny � a w szczególno�ci struktura nawigacji.Projekt musi informowaæ, jakiego typu jest dana wi-tryna, jaka jest jej zawarto�æ, w którym miejscu aktu-alnie znajduje siê odwiedzaj¹cy i gdzie mo¿e pój�ædalej oraz jak wróciæ.

Nikt nie mówi³, ¿e bêdzie to proste.

Page 25: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

126 Projektowanie witryny: organizacja i nawigacja

Nawigacjalokalna i globalnaWiê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ówwitryny. Dlatego tylko naprawdê ma³e witryny niebêd¹ musia³y zmagaæ siê z problemami nawigacjilokalnej i globalnej.

Trzy typy nawigacjin Nawigacja globalna s³u¿y do wskazania,

w którym miejscu witryny u¿ytkownik siêznajduje oraz jak mo¿e dostaæ siê w innemiejsce. Powinna pozostawaæ niezmiennaw ca³ej witrynie.

n Nawigacja lokalna zaczyna siê od miejsca,w którym koñczy siê nawigacja globalna,daj¹c u¿ytkownikom narzêdzia doporuszania siê � lub ukoñczenia zadañ� wewn¹trz konkretnej czê�ci witryny.

n Nawigacja sieciowa to odno�niki do innychwitryn wewn¹trz wiêkszej sieci.

Nawigacja globalna Zwana jest te¿ nawigacj¹sta³¹. Pomaga u¿ytkownikom nawigowaæ w witry-nie, by mogli znale�æ swoje obszary zainteresowañ.Nawigacja globalna dotyczy zwykle hierarchiiinformacji lub szerokich kategorii zawarto�ci.Umieszczona jest zazwyczaj w ten sam sposóbi 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�nietego, w której czê�ci witryny u¿ytkownik aktualniesiê znajduje.

Nawigacja lokalna Gdy u¿ytkownik dotrze ju¿w witrynie do �miejsca przeznaczania�, ujawni siênawigacja lokalna. Zazwyczaj jest rozwi¹zaniem ja-kich� mankamentów funkcjonalno�ci aplikacji,pomaga sklasyfikowaæ tematycznie artyku³y lub te¿umo¿liwia zmianê stron wewn¹trz artyku³u.

Nawigacja sieciowa Rozwi¹zanie to s³u¿y bar-dziej polityce ni¿ u¿ytkownikom. Nawigacja siecio-wa to warstwa nawigacji czêsto zupe³nie nieistotnadla u¿ytkownika, ale wa¿na dla interesów. Witrynystanowi¹ce czê�æ wiêkszej sieci � lub nale¿¹ce dojednej firmy rodzicielskiej, która je kontroluje �czêsto musz¹ publikowaæ odno�niki do pozosta-³ych witryn.

Równowa¿enie warstw nawigacjiBardzo trudna mo¿e byæ decyzja o tym, ile elemen-tów nawigacyjnych powinno siê znale�æ na pojedyn-czej stronie. Je�li umie�cimy ich zbyt du¿o, to mo¿esiê okazaæ, ¿e przys³onimy omawiany temat i do-s³ownie wypchniemy tre�æ poza stronê. Je�li damyich zbyt ma³o, to u¿ytkownicy mog¹ straciæ orien-tacjê w witrynie.

Równowagê pomiêdzy nawigacj¹ lokaln¹ i glo-baln¹ osi¹ga siê w ró¿nych witrynach w ró¿ny spo-sób. Na przyk³ad w katalogach nawigacja lokalnajest do�æ ograniczona. Sztywna nawigacja globalnaczêsto wchodzi na obszary lokalne. Z kolei gry i wy-stawy sztuki prawie nie maj¹ nawigacji globalnejpoza przyciskami prowadz¹cymi do strony g³ównej.

Na tej przyk³adowej stronie witryny Webmonkeywidaæ nawigacjê globaln¹, lokaln¹ i sieciow¹.(1) Pasek nawigacji sieciowej (czasami zwany�paskiem firmowym�) prowadzi do firmy rodzicielskiejserwisu � Terra-Lycos. (2) Pasek nawigacjiglobalnej prowadzi do strony g³ównej serwisuWebmonkey i oferuje rozwijane menu elementówdostêpnych w witrynie (nie pokazanych tutaj).Nawigacja globalna istnieje tak¿e pod postaci¹(3) �cie¿ki � elementu pokazuj¹cego sposóbdoj�cia do danej strony od strony g³ównej.(4) Nawigacja lokalna � odno�niki do pozosta³ychstron artyku³u � istnieje pod postaci¹ odno�nikówwypisanych na lewym marginesie strony.

Page 26: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 127

Dlaczego rozwijane menunie nadaj¹ siê do nawigacji?Rozwijane menu nie nadaj¹ siê do nawigacji, gdy¿zgrabnie ukrywaj¹ wiele informacji na bardzo ma-³ej przestrzeni. Poniewa¿ ich dzia³anie jest zrozu-mia³e samo przez siê, s¹ bardzo popularnym sys-temem nawigacji. Niestety, nie sprawdzaj¹ siê zbytdobrze.

�Nauczy³em siê, ¿e lista rozwijana powinna s³u-¿yæ wy³¹cznie do wype³niania formularzy� � mówiPeter Merholz, wspólnik w firmie Adaptive Path.�Nigdy nie powinna byæ stosowana jako elementnawigacyjny�.

Menu w postaci listy rozwijanejto efektywny sposób ukrywaniainformacji, które chcieliby�mypokazaæ u¿ytkownikom.(Peter Merholz)

Problem polega na tym, ¿e rozwijane menuukrywaj¹ informacje. Je�li u¿ytkownik nie przewi-duje, ¿e co� jest ukryte � jak w przypadku listykrajów lub miesiêcy w roku � nie bêdzie wiedzia³,co znajduje siê w li�cie menu i nie bêdzie chcia³nawet na ni¹ spojrzeæ.

�Ludzie nie bêd¹ wiedzieli, co siê tam znajduje�� kontynuuje Merholz. �Po prostu zignoruj¹ tenelement. Menu w postaci listy rozwijanej to �wiet-ny sposób ukrywania informacji, które chcieliby-�my pokazaæ u¿ytkownikom�.

Martha Brockenbrough � by³a redaktorMSN.com � ca³kowicie zgadza siê z t¹ opini¹.Serwis MSN próbowa³ kiedy� stosowaæ listy roz-wijane, ale okaza³y siê nieskuteczne. W tamtymczasie stronê g³ówn¹ witryny odwiedza³o sze�æmilionów u¿ytkowników dziennie. �Jednak tylko 200osób odkrywa³o skarby ukryte na dnie rozwijane-go menu� � mówi Brockenbrough.

Nikt nie znajdzie tre�ci ukrytych za odno�nikiemw rozwijanym menu� � zdecydowanie kontynu-uje Brockenbrough. �Nikt nie widzi, co znajduje siêw takim menu. Nie u¿ywajmy ich. Gwarantujê, ¿esiê nie sprawdzaj¹�.

Tworzeniesystemu nawigacyjnegoIstnieje wiele ró¿nych sposobów projektowania sys-temu nawigacyjnego � zak³adki, paski, menu, iko-ny, mapy obrazkowe, proste listy. Wybór rozwi¹za-nia dla naszej witryny zale¿y oczywi�cie od tego, jakiproblem musimy rozwi¹zaæ.

W wiêkszo�ci przypadków mo¿emy skorzystaæz istniej¹cych konwencji nawigacyjnych i dostoso-waæ je lub po³¹czyæ tak, by zaspokoi³y nasze potrze-by. Wiele systemów nawigacyjnych sprawdza siêw wiêkszo�ci witryn (zobacz równie¿ �Dwana�ciesystemów nawigacyjnych�, str. 128).

Mo¿e siê jednak zdarzyæ, ¿e zechcemy zaprojek-towaæ w³asny system nawigacyjny. Pamiêtajmy jednak,¿e innowacja zawsze ma swoj¹ cenê. Systemy niestan-dardowe s¹ trudniejsze do zaprojektowania i trudniej-sze w obs³udze przez u¿ytkowników. W wiêkszo�ciprzypadków � zw³aszcza je�li kto� nie jest bieg³ymprojektantem � w zupe³no�ci powinny nam wy-starczyæ standardowe i znane systemy nawigacyjne.

Pamiêtajmy jednak, ¿e innowacjazawsze ma swoj¹ cenê. Systemyniestandardowe s¹ trudniejszedo zaprojektowania i trudniejszew obs³udze przez u¿ytkowników.

�Istniej¹ powody, dla których pasek nawigacyjnyw lewej czê�ci strony jest konwencj¹� � mówi pro-jektant Jim Frew. �Wiele osób go u¿ywa. Wiele osóbzna tê konwencjê. To dzia³a. Wiele innych, niekon-wencjonalnych interfejsów mo¿e dzia³aæ równiedobrze. Jednak trzeba byæ bardziej pilnym, by za-czê³y dzia³aæ. Trzeba w³o¿yæ w nie du¿o wiêcej pra-cy, umiejêtno�ci i dba³o�ci od strony technicznej�.

Je�li zdecydujemy siê wprowadziæ w³asny systemnawigacyjny, nadal mo¿e przydaæ siê odniesienie dokonwencjonalnych systemów � zobaczmy, como¿emy zrobiæ, by u¿ytkownikom by³o ³atwiejzrozumieæ nasz system (zobacz równie¿ �Dlaczegonale¿y stosowaæ standardy?�, str. 200).

Pod ¿adnym pozorem nie mo¿emy zaprojekto-waæ systemu, którego u¿ytkownicy musieliby�uczyæ siê�. Je�li system nawigacyjny nie jest intu-icyjny, to nie bêdzie u¿ywany. �Zadaniem projek-tantów interfejsu jest nie uczyæ ludzi niczego� �mówi Cate Corcoran. �Nie przychodz¹ do witrynypo to, by uczyæ siê z niej korzystaæ�.

Page 27: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

128 Projektowanie witryny: organizacja i nawigacja

1. Zak³adkiMo¿na je stosowaæ, gdy witryna jest podzielona nakategorie � zw³aszcza kategorie produktów.

Najs³ynniejsze zastosowanie tego systemu mo¿nazaobserwowaæ w witrynie Amazon.com. Zak³adkitworz¹ wizualne skojarzenie z folderami, pozwalaj¹cu¿ytkownikom zrozumieæ, ¿e znajduj¹ siê w jednymz kilku równoleg³ych obszarów wewn¹trz witryny. Gdyu¿ytkownik klika zak³adkê (na przyk³ad kategorii muzy-ka), odpowiadaj¹cy jej folder przesuwa siê do przodui zostaje ods³oniêta zawarto�æ folderu.

Ta wizualna metafora zosta³a po raz pierwszy za-stosowana przez firmê Apple Computer w interfejsiesystemu MacOS (który szeroko wykorzystywa³ meta-forê akt i folderów); teraz jest powszechnie stosowanaw oprogramowaniu. Jest tak¿e szeroko u¿ywana �dodajmy, niew³a�ciwie u¿ywana � w internecie. Za-k³adki najlepiej sprawdzaj¹ siê, gdy w witrynie mamyseriê ró¿nych, ale równoleg³ych kategorii. Dlatego sys-tem ten jest tak skuteczny w witrynach komercyjnych� jest �wietnym sposobem zorganizowania ró¿nychkategorii produktów, jednocze�nie prezentuj¹c szero-ko�æ naszej oferty. Jednak zak³adki wygl¹daj¹ dziw-nie, gdy s³u¿¹ jako pojemnik na niepowi¹zane ze sob¹dzia³y witryny.

2. Panel z lewej stronyMo¿na go stosowaæ jako mechanizm nawigacji lokal-nej lub globalnej w witrynie niemal ka¿dego rodzaju.

Po raz pierwszy zosta³ u¿yty w witrynie CNet (stam-t¹d jest najlepiej znany). Lewostronny panel szybko sta³siê sztampowym rozwi¹zaniem nawigacyjnym, lubmo¿e nawet niekwestionowan¹ konwencj¹ internetow¹.Jest popularny, poniewa¿ dobrze rozwi¹zuje wiele pro-blemów nawigacyjnych oraz ma mo¿liwo�æ skalowa-nia � w miarê rozrastania siê witryny wystarczy doda-waæ do panelu kolejne odno�niki lub przyciski(wyd³u¿aj¹c go w dó³ strony).

Lewostronny panel daje do dyspozycji proste, ela-styczne i sta³e �ród³o nawigacji w ca³ej witrynie. Panelwyja�nia strukturê witryny, ods³ania sekcje, które mo-gli�my wcze�niej pomin¹æ, trwale udostêpnia miejscena funkcjê która powinna byæ dostêpna w ca³ej witrynie(na przyk³ad pole wyszukiwania), a tak¿e udostêpniapowierzchniê na ma³e og³oszenia.

Dwana�cie systemów nawigacyjnych

Wykorzystuj¹cy zak³adki system nawigacyjnywitryny Amazon na�laduje wiele sklepówinternetowych i witryn innego typu.

CNN.com wykorzystuje lewostronny panel, abywymieniæ wszystkie obszary tematyczne, a witrynapodró¿nicza Expedia wykorzystuje panel jakonarzêdzie do wyszukiwania.

Page 28: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 129

3. Pasek na górze stronyMo¿na go stosowaæ jako mechanizm nawigacji glo-balnej w witrynie niemal ka¿dego rodzaju.

Prawie ka¿da witryna wykorzystuje do nawigacjiobszar wzd³u¿ górnego brzegu strony. W niektórychwitrynach znajduje siê tam g³ówne narzêdzie nawiga-cyjne. W innych witrynach obszar ten s³u¿y jedynie donawigacji lokalnej lub globalnej, pozostawiaj¹c tej dru-giej dowolne inne miejsce na stronie. Niektórzy wyko-rzystuj¹ ten obszar do zaprezentowania nazwy firmy� jest to sposób na identyfikacjê witryny i zapewnie-nie odno�nika powrotnego do strony g³ównej.

4. �cie¿kaMo¿na j¹ stosowaæ, gdy witryna zawiera du¿o u³o¿o-nych hierarchicznie informacji, do których u¿ytkownicydochodz¹, postêpuj¹c �cie¿k¹ pojêciow¹ g³êbiej i g³ê-biej do wnêtrza witryny.

�cie¿ka daje odwiedzaj¹cym wizualn¹ reprezenta-cjê miejsca, w którym znajduj¹ siê w witrynie. Oprócztego umo¿liwia wycofanie siê nie tylko do strony g³ów-nej (co mo¿na by uzyskaæ, stosuj¹c osobny klawisz),ale i do poprzednich etapów podró¿y, pozwalaj¹c tymsamym od pewnego miejsca obraæ inn¹ trasê.

�cie¿ka daje u¿ytkownikowi listê odno�ników (od-dzielonych �rednikami lub uko�nikami), które wskazuj¹poziomy hierarchii znajduj¹ce siê na drodze do aktual-nej strony. Jedno klikniêcie przenosi u¿ytkownika dodowolnie wybranego poziomu.

�cie¿ka sta³a siê standardem na stronach katalo-gów takich jak Yahoo!, oferuj¹cych dostêp do g³êbo-kich, zachodz¹cych na siebie hierarchicznych strukturinformacji. Metoda ta jest te¿ dobrze wykorzystywanaprzez inne witryny � prezentuj¹ce bardzo du¿o tre�ci(CNet), kojarz¹ce (eBay) i komercyjne (Amazon). W wi-trynach tych ten mechanizm naprowadzaj¹cy wykorzy-stywany jest po to, by przedstawiæ u¿ytkownikom kon-tekst ogl¹danej strony.

Je�li kto� jeszcze nie odgad³, sk¹d siê wzi¹³ termin��cie¿ka�� Jest to nawi¹zanie do bajki o Jasiu i Ma³-gosi � dwójce dzieci, które id¹c do lasu, rzuca³y nadrogê okruszki chleba, aby zaznaczyæ �cie¿kê powrotn¹do domu. Oczywi�cie, w bajce �cie¿ka zniknê³a, gdy¿ptaki wydzioba³y okruszki, pozostawiaj¹c w ten spo-sób Jasia i Ma³gosiê na pastwê losu w �rodku opano-wanego przez czarownicê lasu. Zastanówmy siê, cowtedy dzieci czu³y, poniewa¿ w³a�nie tak czuje siê wiêk-szo�æ internautów.

Sklep ogrodniczy Burpee stosuje widocznygórny pasek nawigacyjny, by wyja�niæ swoj¹ misjêi zaprezentowaæ kategorie produktów.

Yahoo! Wykorzystuje �cie¿kê do nawigacjiwewn¹trz ogromnego zbioru list witryn istniej¹cychw internecie.

Page 29: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

130 Projektowanie witryny: organizacja i nawigacja

5. Foldery i plikiMo¿na je stosowaæ, gdy w witrynie znajduje siê kilkakategorii informacji i ka¿da z nich ma istotne dla u¿yt-kownika podkategorie (ale nie wszystkie mieszcz¹ siêjednocze�nie na ekranie).

Metafora folderów i plików, tak szeroko stosowanaw dzisiejszych systemach komputerowych, zosta³awymy�lona w Xerox Parc w latach siedemdziesi¹tychXX wieku, a po raz pierwszy zastosowano j¹ w syste-mie operacyjnym firmy Apple. Czasami jest stosowanatak¿e w witrynach internetowych, ale zwi¹zane z jejprezentacj¹ trudno�ci techniczne spowodowa³y, ¿e niejest szeroko rozpowszechniona.

Rozwi¹zanie to sprawdza siê, gdy foldery mog¹ byæszybko �otwierane� i �zamykane� jednym klikniêciemmyszy. Jednak w przypadku internetu wymaga to za-stosowania technik dodatkowych, takich jak JavaScriptlub Flash. Upowszechnienie i ci¹gle zwiêkszaj¹ca siêniezawodno�æ tych technologii powoduje, ¿e systemplików i folderów staje siê realnym rozwi¹zaniem dlacoraz wiêkszej liczby witryn.

6. Piasta ze szprychamiMo¿na j¹ stosowaæ, gdy kilka sekcji ma odwo³aæ siêz powrotem do strony g³ównej, ale nie do pozosta³ychdzia³ów.

Jest to chyba najprostsza metoda nawigacji, ale niejest zbyt dobra. Polega przede wszystkim na umiesz-czeniu odno�nika z napisem �strona g³ówna� albo zna-ku graficznego lub ikony reprezentuj¹cej stronê g³ówn¹.W ma³ych, bardzo prostych witrynach metoda ta mo¿edzia³aæ jako jedyny sposób nawigacji. W wiêkszo�ciprzypadków lepszym rozwi¹zaniem dla tych witryn by³-by globalny pasek nawigacyjny, pozwalaj¹cy u¿ytkow-nikom przechodziæ tak¿e do innych dzia³ów. Po cozmuszaæ odwiedzaj¹cych do ci¹g³ego przechodzeniaprzez stronê g³ówn¹?

System ten jest najbardziej u¿yteczny w witrynach,w których licz¹ siê bogate, g³êbokie doznania u¿ytkow-nika � jak w grach lub na wystawach dzie³ sztuki �gdy chcemy wype³niæ ca³y ekran i stworzyæ odpowied-nie �rodowisko. W takim przypadku mo¿emy nie chcieærozpraszaæ u¿ytkownika zbytecznymi elementami (np.paskiem nawigacyjnym). System ten sprawdza siê wte-dy znakomicie.

Dwana�cie systemów nawigacyjnych � c.d.

Webmonkey wykorzystujefoldery do ukrywania� a nastêpnie ods³aniania� zawarto�ci kolejnychsekcji swojej biblioteki.

Prezentuj¹ca opowiadania witryna Fraystosuje minimaln¹ liczbê elementównawigacyjnych, gdy u¿ytkownik zacznieju¿ czytaæ opowiadanie. Na koñcuopowiadania u¿ytkownik widzi pojedynczyodno�nik do g³ównej strony danegodzia³u opowiadañ (w tym przypadkujest to dzia³ krymina³ów).

Page 30: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 131

7. �cie¿ka linearnaMo¿na j¹ stosowaæ, gdy chcemy opowiedzieæ jak¹�historiê � lub powinni�my ukoñczyæ transakcjê � któ-ra zale¿y od kolejno�ci elementów.

System ten jest zazwyczaj stosowany w lokalnej (nieglobalnej) nawigacji. Gdy u¿ytkownik czyta opowiada-nie, odpowiada na pytania konkursu lub dokonuje za-kupu, powinien widzieæ poszczególne strony w odpo-wiedniej kolejno�ci. Pytania wystêpuj¹ w pewnejsekwencji, a opowiadanie musi byæ logicznie pouk³a-dane w ca³o�æ. W takich przypadkach wystarcz¹ bar-dzo proste elementy nawigacyjne � strza³ki pozwala-j¹ce przechodziæ w przód lub do ty³u.

8. Wielostronicowa �cie¿kaMo¿na j¹ stosowaæ, gdy mamy bardzo d³ugi artyku³(lub bardzo du¿o wyników wyszukiwania) rozbity nawiele stron i chcemy, by u¿ytkownicy mogli prze³¹czaæsiê pomiêdzy stronami.

Wielostronicowa �cie¿ka zosta³a spopularyzowanaprzez wyszukiwarki i aktualnie jest szeroko wykorzy-stywana na stronach handlowych i stronach prezentu-j¹cych mo¿liwo�ci wyboru kolejnych stron. System tendzia³a na dwa sposoby. U¿ytkownicy mog¹ albo stoso-waæ przyciski Naprzód/Wstecz (lub Nastêpny/Poprzedni),aby posuwaæ siê strona za stron¹ w którym� kierunku,albo klikn¹æ numer konkretnej strony i przeskoczyæbezpo�rednio do niej. Rozwi¹zanie skutecznie poka-zuje zakres materia³u (liczbê stron) oraz to, gdzie w�ródnich znajduje siê u¿ytkownik.

Google (jak wszystkie wyszukiwarki) dzieli wynikiwyszukiwania na wiele stron i pozwala u¿ytkownikomprzechodziæ przez nie albo za pomoc¹ klikniêciaodno�nika �Nastêpna�, albo w wyniku klikniêciaposzczególnych numerów stron (lub � jak ma tomiejsce w przypadku Google � klikniêcia której�z liter �o� w znaku graficznym). Na stronachz artyku³ami stosujemy podobne rozwi¹zanie przyd³ugich artyku³ach. Dzielimy artyku³ na wiele stroni pozwalamy u¿ytkownikom �przeklikiwaæ� siê przez nie.

Witryna Fray z opowiadaniamipozwala u¿ytkownikowi skupiæ siêna historii, oferuj¹c ograniczon¹do minimum linearn¹ nawigacjêod pocz¹tku do koñca opowiadania.Zwyk³e strza³ki s¹ czêstozastêpowane zabawnymi rysunkami.

Page 31: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

132 Projektowanie witryny: organizacja i nawigacja

9. Rozwijane menuMo¿na je stosowaæ wy³¹cznie wtedy,gdy zawarto�æ rozwijanej listy jest ca³-kowicie zrozumia³a (np. lista krajów, mie-siêcy, lat).

Jest stosowane zazwyczaj jako sk³adnik systemunawigacyjnego, a nie jako ca³y system. Rozwijane menuoferuje szybki, zajmuj¹cy ma³o miejsca mechanizmwyboru jednej z wielu równoleg³ych i wzajemnie wyklu-czaj¹cych siê opcji.

Poniewa¿ rozwijane menu ukrywaj¹ informacje, naj-lepiej jest stosowaæ je do prezentacji pozycji, które s¹oczywiste dla u¿ytkownika (np. lista stanów, krajów,miesiêcy, lat). S¹ ma³o skuteczne � i tak naprawdêca³kowicie nieefektywne � gdy zawieraj¹ nieoczywisteopcje, takie jak dzia³y witryny (zobacz równie¿ �Dlaczegorozwijane menu nie nadaj¹ siê do nawigacji?�, str. 127).

BBC bardzo umiejêtniewykorzystujeryzykowne elementynawigacyjne.Pokazane naprzyk³adzie rozwijanemenu dzia³aj¹ �wietnie,poniewa¿ u¿ytkownicyz ³atwo�ci¹ mog¹przewidzieæ, jakieelementy znajduj¹ siêna zamieszczonychw nich listach.Na górze menu

wyra�nie napisano Country profiles (profile krajów)i nie ma w¹tpliwo�ci, ¿e pozycja widoczna w li�cie(Algieria) jest nazw¹ kraju. Menu znajduj¹ce siêni¿ej tak¿e jest wyra�nie oznaczone (pogodana Bliskim Wschodzie � ang. Middle East Weather).Pierwsza pozycja w li�cie miast � Abu Dhabir� niestety mówi niewiele. Dlatego do menu dodanoinstrukcjê (Choose a city � wybierz miasto), dziêkiczemu dok³adnie wiadomo, czego mo¿na siêspodziewaæ (Bejrut, Kair itd.).

10. Pole wyszukiwaniaMo¿na je stosowaæ w witrynach dowolnej wielko�ci,zawieraj¹cych tre�ci, które u¿ytkownicy mog¹ chcieæprzeszukaæ.

Internautów mo¿emy podzieliæ na dwie grupy: prze-gl¹dacze i wyszukiwacze. Przegl¹dacze lubi¹ pocho-dziæ po witrynie, poznaæ jej system organizacyjny, struk-turê. Nawiguj¹ do szukanych danych, przegl¹daj¹czamieszczone w witrynie odno�niki. Lubi¹ kontekst.Natomiast wyszukiwacze id¹ prosto do pola wyszuki-wania. Lubi¹ drogê bezpo�redni¹.

W�ród u¿ytkowników ka¿dej witryny znajd¹ siê za-równo przegl¹dacze, jak i wyszukiwacze, wiêc powin-ni�my uzbroiæ nasze strony w dzia³aj¹c¹ funkcjê wy-szukiwania. Jednak samo dodanie mo¿liwo�ciwyszukiwania nie wystarczy. Powinni�my jeszcze mócwp³yn¹æ na zwracane wyniki. Dowiedzmy siê, jakich50 hase³ odbiorcy mog¹ szukaæ w witrynie i sprawd�-my, czy wyszukiwarka zwraca strony, które maj¹ zna-czenie w takim wyszukiwaniu (testuj¹c wyszukiwanie,mo¿emy przy okazji upewniæ siê, ¿e z listy mo¿na ³atwodostaæ siê do wyszukanych stron).

Dwana�cie systemów nawigacyjnych � c.d.

Pole wyszukiwania w witrynie L.L. Bean pozwalaprzeskoczyæ od razu do strony zawieraj¹cej produkt.Zadano sobie tak¿e wiele trudu, by dostosowaæwyniki wyszukiwania.

Page 32: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 133

11. Mapy obrazkoweMo¿na je stosowaæ, je�li organizacjawitryny w oczywisty sposób odpowiadajakiej� ilustracji (np. mapie geograficznej).

Mapy obrazkowe zazwyczaj s¹ stosowane niepra-wid³owo, ale bardzo dobrze sprawdzaj¹ siê, je�li tema-tykê witryny mo¿na ³atwo i intuicyjnie odwzorowaæ nailustracji. Odwo³ania geograficzne to oczywiste skoja-rzenie, inne przypadki to wykresy produktów, diagra-my medyczne itp.

12. Lista odno�nikówMo¿na j¹ stosowaæ, gdy mamy krótk¹ listê lu�no po-wi¹zanych ze sob¹ elementów lub d³ug¹ listê bliskozwi¹zanych ze sob¹ elementów.

Nie ma nic z³ego w prostych rozwi¹zaniach, a listaodno�ników jest najprostszym z mo¿liwych rozwi¹zañ.Ods³ania pe³n¹ zawarto�æ witryny i jej sekcji przez pro-ste wymienienie elementów. Listê mo¿na na przyk³adu³o¿yæ wzd³u¿ górnego brzegu strony, utworzyæ kolum-nê lub rozdzieliæ na bloki znajduj¹ce siê w ró¿nych miej-scach strony g³ównej.

Wiêkszo�æ witryn gdzie� w �rodku swoich systemównawigacyjnych u¿ywa list odno�ników, aby w najprost-szy sposób pokazaæ, co jest dostêpne i gdzie u¿ytkow-nicy mog¹ siê przenie�æ. Nie zdziwmy siê, je�li nasiu¿ytkownicy pokochaj¹ takie rozwi¹zanie. W witrynieFogDog Sports (pokazanej poni¿ej) listy odno�nikówzawsze by³y najbardziej popularnym sposobem nawi-gowania.

Lonely Planet oferuje przewodniki na tematkrajów z ca³ego �wiata. U¿ytkownicy mog¹wybraæ interesuj¹cy ich kraj, klikaj¹c w odpowiednimobszarze mapy (albo u¿yæ rozwijanego menulub pola wyszukiwania).

Prosta listaodno�nikówjest najbardziejpopularn¹ i ³atw¹metod¹ znalezieniaczego� w witrynieFogDog Sports.

Page 33: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

134 Projektowanie witryny: organizacja i nawigacja

czê�æ praktyczna

W jaki sposób witryna bêdzie zorganizowana?

Organizacja witryny stanowi w pewnym stopniuszkielet witryny. Pozosta³a czê�æ witryny zosta-nie rozpiêta na tym szkielecie. Dlatego sposób zor-ganizowania witryny bêdzie dyktowa³ sposób jeju¿ywania (i to, czy w ogóle bêdzie ona u¿ywana).

Organizacja witrynyW jaki sposób witryna jest zorganizowana?

q wed³ug kategorii

................................................................................

................................................................................

q wed³ug zadania

................................................................................

................................................................................

q wed³ug u¿ytkowników

................................................................................

................................................................................

q wed³ug jêzyka i lokacji

................................................................................

................................................................................

q wed³ug daty lub innego porz¹dku

................................................................................

................................................................................

q wed³ug dzia³ów firmy

................................................................................

................................................................................

Jaka jest organizacja drugoplanowa?

................................................................................

................................................................................

Co jest w witrynie najwa¿niejsze?

1. .............................................................................

2. .............................................................................

3. .............................................................................

Organizacja witrynyMiejsce na narysowanie mapy witryny:

Miejsce na narysowanie schematu stronyg³ównej, który poka¿e, jak elementy bêd¹u³o¿one wzglêdem siebie:

Page 34: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 135

czê�æ praktyczna

Jaki system nawigacyjny wybierzemy?

Mechanizm nawigacji to wizualny obraz strukturywitryny. Przedstawia witrynê odwiedzaj¹cym i po-maga poprowadziæ ich przez organizacjê witryny.

Systemy nawigacyjneJaki system nawigacji globalnejzastosujemy?q panel z lewej strony

q zak³adki

q foldery i pliki

q �cie¿ka linearna

q rozwijane menu

q pasek nawigacyjny wzd³u¿ górnego brzegu

q �cie¿ka

q piasta i szprychy

q wielostronicowa �cie¿ka

q pole wyszukiwania

q lista odno�ników

q inny: ....................................

Jaki system nawigacji lokalnej zastosujemy?

q panel z lewej strony

q zak³adki

q foldery i pliki

q �cie¿ka linearna

q rozwijane menu

q pasek nawigacyjny wzd³u¿ górnego brzegu

q �cie¿ka

q piasta i szprychy

q wielostronicowa �cie¿ka

q pole wyszukiwania

q lista odno�ników

q inny: ....................................

W którym miejscu strony bêdzie widocznanawigacja?

1.Stronag³ówna

2.Stronywewnêtrzne

Page 35: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

136 Projektowanie witryny: organizacja i nawigacja

Nazywaniedzia³ów witrynySprawa nazw dzia³ów pocz¹tkowo mo¿e wydawaæsiê nam banalna � prosty, zbyteczny szczegó³, któ-ry mo¿na za³atwiæ na samym koñcu procesu. Chcia-³abym, ¿eby by³o tak naprawdê! Prawdê mówi¹c, tow³a�nie nazwy decyduj¹ o tym, czy u¿ytkownik zro-zumie, czego dotyczy witryna i jak ona dzia³a.

Dobrze dobrane nazwy s¹ niewidoczne � dys-kretnie wskazuj¹ u¿ytkownikom odpowiednie kie-runki i nie zwracaj¹ na siebie uwagi. �le dobranenazwy spowalniaj¹ reakcje u¿ytkowników, wprowa-dzaj¹ ich w b³¹d i zmniejszaj¹ ich pewno�æ siebie.

�Oznaczanie dzia³ów jest wa¿n¹ czê�ci¹ archi-tektury informacji� � mówi Steve Mulder, kierow-nik do spraw u¿ytkowników w Terra-Lycos. �Wi-dzieli�my to w laboratoriach funkcjonalno�ci.Najmniejsze problemy z nazwami ca³kowicie unie-mo¿liwia³y u¿ytkownikom ukoñczenie zadania�.

Nazwy dzia³ów powinny byæ:n krótkie � nie mamy du¿o miejsca,

by przekazaæ znaczenie. Nazwy powinnybyæ krótkie i konkretne;

n konsekwentne � w nazwach dzia³ówpowinny byæ stosowane podobne zwroty,aby uwidoczniæ ich zwi¹zki;

n jasne � im bardziej tre�ciwe i dos³ownebêd¹ nazwy dzia³ów, tym bardziejprawdopodobne, ¿e internauta je klinie;

n wolne od ¿argonu � klienci nie rozumiej¹wyspecjalizowanego jêzyka naszej bran¿y,dlatego trzeba przet³umaczyæ etykietyna zrozumia³y dla nich jêzyk.

Wybierajmy krótkie nazwy Przestrzeñ w interne-cie jest bardzo cenna. Musimy du¿o przekazaæ, a niemamy na to zbyt du¿o miejsca. Szeroko�æ ekranuzawsze bêdzie ograniczaæ d³ugo�æ naszych s³ów.Wybierajmy wiêc jak najkrótsze i najtrafniejsze s³owa.

Wybierajmy konsekwentne nazwy Gdy oznacza-my kilka dzia³ów, których nazwy bêd¹ widoczneobok siebie na pasku nawigacyjnym, ich nazwy po-winny byæ konsekwentnie dobrane. W idealnymprzypadku nazwy lub frazy powinny mieæ tak¹sam¹ liczbê s³ów, byæ t¹ sam¹ czê�ci¹ mowy, cza-sowniki powinny wystêpowaæ w tym samym czasie,wielko�æ liter i jêzyk powinny byæ zgodne itd.

Problemem nie jest tutaj gramatyka, a zdolno�æpojmowania. U¿ytkownicy szybciej zrozumiej¹podzia³ na kategorie (i sam¹ witrynê), je�li nazwybêd¹ zgodne. Ludzie to urodzeni klasyfikatorzy �je�li wyczuj¹ podobieñstwo miêdzy sekcjami, na-tychmiast po³¹cz¹ te sekcje, buduj¹c wiedzê na te-mat ka¿dej kolejnej kategorii na bazie wiedzy o ka-tegoriach poznanych wcze�niej. Nawet nieznaczneniespójno�ci spowoduj¹ konieczno�æ ponownegoprzemy�lenia kategorii.

Problemem nie jest tutaj gramatyka,a zdolno�æ pojmowania. U¿ytkownicyszybciej zrozumiej¹ kategorie, je�linazwy bêd¹ zgodne.

Czêsto nawet subtelne zmiany znacznie popra-wiaj¹ zrozumienie witryny przez u¿ytkowników(a jest to dziedzina, w której nawet u³amki sekundwp³ywaj¹ na odbiór witryny przez u¿ytkownika).Je�li w witrynie sprzedajemy samochody i domy, niepowinni�my mieszaæ ró¿nych schematów nazwdzia³ów � na przyk³ad �kup dom� i �samochody�.Powinni�my wybraæ jeden schemat nazw �kupdom� i �kup samochód� lub �domy� i �samochody�(zobacz równie¿ �Wybieranie spójnych nazw�, str. 138).

Wybierajmy jasne nazwy Najwa¿niejsze jest, byoznaczenia w witrynie poprawnie reprezentowa³ytre�æ lub funkcjê dzia³u. Innymi s³owy � powinni-�my nazywaæ rzeczy po imieniu. Brzmi to banalnie,ale ta podstawowa zasada jest nagminnie ³amanaw czterech na piêæ witryn. Dlaczego? Poniewa¿ lu-dzie lubi¹ nazywaæ rzeczy po swojemu, czêsto zwy-czajnie siê wym¹drzaj¹c. Dlatego zamiast nazwaædzia³ z wiadomo�ciami �wiadomo�ciami�, nazy-waj¹ go �sprawy bie¿¹ce� lub �mowa miasta�.

Je�li nie bêdziesz nazywaæ rzeczy po imieniu,nie zdo³asz wykonaæ tego, co musi byæ wykonane.

(A. Harvey Block, prezes Bokenon System)

Page 36: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 137

Zamiast bombardowaæ u¿ytkownika zagadka-mi s³ownymi i aliteracjami, skupmy siê na wybra-niu etykiety, która bêdzie krótka, prosta i konkret-na (zobacz równie¿ �Dlaczego nazwy dzia³ówpowinny byæ jasne, nie wymy�lne?�, str. 140).

Wybierajmy nazwy wolne od ¿argonu Ka¿dabran¿a i ka¿da firma pos³uguje siê swoim w³asnymjêzykiem � wyspecjalizowanym sposobem mówie-nia na temat swoich produktów i �wiata � któryjest dla niej ca³kowicie zrozumia³y, ale nic nie zna-czy dla innych osób. W ¿argonie nie ma nic z³ego,jednak nie mo¿na stosowaæ go w witrynie � to zna-czy nie mo¿na, je�li chcemy, by kto� j¹ zrozumia³.

�¯argon szerzy siê wewn¹trz firm� � mówi Jes-se James Garrett, architekt informacji, który wspó³-pracowa³ z firmami du¿ymi i ma³ymi. �Wszystkierodzaje firm maj¹ swój w³asny jêzyk, którym opi-suj¹ produkty i ich cechy. Jest jêzyk stosowany we-wnêtrznie i jest jêzyk, który s³u¿y do komunikacjizewnêtrznej, choæby z powodów marketingowych�.

¯argon wkrada siê do witryny, poniewa¿ ludzies¹ przyzwyczajeni do opisywania produktów swo-imi w³asnymi bran¿owymi okre�leniami. Czêstonawet nie zdaj¹ sobie sprawy, ¿e u¿ywaj¹ ¿argonu.

�W ka¿dym biznesie trudna jest próba zmianysposobu my�lenia ze sprzedawcy na kupuj¹cegoi przestawienie siê z jêzyka sprzedawcy na jêzyk ku-puj¹cego� � mówi ekspert marketingu interneto-wego Hunter Madsen.

Hunter radzi: �Przejd�my przez ca³¹ witrynê,zidentyfikujmy ka¿dy termin, który wygl¹da na ter-min wewnêtrzny lub nazwê kategorii, zakre�lmy goi zastanówmy siê, czy istnieje ³atwiejsza nazwa, któ-rej u¿ywaj¹ nasi kupuj¹cy � nazwa stosowana przeznich, a przez nas uwa¿ana za niepoprawn¹ � któramog³aby zast¹piæ zakre�lony termin. Nastêpnie za-mieñmy s³ownictwo w witrynie tak, by pasowa³o dos³ownictwa nabywców�.

Co oznacza �¿argon�?n Akronimy niezrozumia³e dla ludzi spoza

firmy lub organizacji.n S³owa kodowe stosowane w firmie.

�W du¿ych organizacjach czêsto ³atwiej jestwypromowaæ swoj¹ pracê wewn¹trz firmy,je�li stosujemy modne w niej okre�lenia, nazwydzia³ów itp.� � mówi Jeffrey Zeldman. �Alep³acimy te¿ za takie postêpowanie wysok¹ cenê�.

n S³owa dwuznaczne. �Klasycznymprzyk³adem dwuznacznego s³owastosowanego w informatyce jest default�� mówi profesor Michael Twidale.�Wszyscy wiemy, ¿e oznacza warto�æ domy�ln¹.Je�li jednak tworzymy oprogramowaniedla ksiêgowych, musimy zdawaæ sobiesprawê, ¿e ich definicja s³owa default jestca³kowicie inna (niesp³acenie zobowi¹zañ)�.

n S³owa formalne lub techniczne, którychnie u¿ywamy na co dzieñ. Na przyk³adwitryna Black and Decker ma dzia³ o nazwie�konserwacja konfekcji� (ang. Garment Care).Jak czêsto zwykli ludzie stosuj¹ s³owo�konfekcja�? Mówi¹ raczej o ubraniach.

n Terminy bran¿owe, których klienci mog¹nie znaæ, a na pewno ich nie u¿ywaj¹.

n Slogany marketingowe, których chcieliby�mynauczyæ klientów. Na przyk³ad producentsoków, firma Odwalla, w witrynie ma dzia³o nazwie ��wie¿ologia� (ang. freshology).

n Slang, którego nasi odwiedzaj¹cy nie u¿ywaj¹.

Nie chodzi tu tylko o zrozumienie, ale i o kon-kurencjê. Je�li u¿ytkownicy maj¹ wybór pomiêdzydwoma witrynami � tak¹, w której nazwy wpro-wadzaj¹ ich w b³¹d, oraz tak¹, w której u¿yto pro-stego jêzyka � wybior¹ tê, któr¹ rozumiej¹.

Jak mówi Jesse James Garrett, �u¿ytkownicymog¹ przyzwyczaiæ siê do ¿argonu tylko wtedy, gdynie maj¹ innego wyboru�.

Dziêki odno�nikowi�My Chapter� u¿ytkownicymog¹ znale�æ grupê klubuSierra blisko swojego miejscazamieszkania. Ale s³owo�Chapter� jest myl¹ce, poniewa¿ma wiele powszechnychznaczeñ (np. rozdzia³).

Page 37: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

138 Projektowanie witryny: organizacja i nawigacja

Wybieranie spójnych nazwSpójno�æ to jeden z kluczy do intuicyjnego systemu nawigacyjnego. Nazwy w witrynie powinny byæ spójne,aby u¿ytkownicy mogli szybko zauwa¿yæ zwi¹zki miêdzy nimi. Oczywi�cie, trudno jest znale�æ nazwy, któres¹ spójne pod ka¿dym wzglêdem, ale powinni�my d¹¿yæ do tego celu.

Czynnik Przyk³ady

Czê�æ mowy Dobrze: samochody | mieszkania

�le: samochody | kup mieszkanie

Nazwa sekcji bêd¹cawyra¿eniem rzeczownikowymlub czasownikowym.

Forma Etykiety czasownikowepowinny mieæ tê sam¹ formê.

Dobrze: kup samochód | kup mieszkanie

�le: kup samochód | kupowanie mieszkania

Liczba Wszystkie etykiety powinnybyæ albo w liczbie mnogiej,albo w pojedynczej.

Dobrze: arty�ci | autorzy | muzycy

�le: artysta | autorzy | muzyk

Wielko�æ liter Te same s³owa powinny siêzaczynaæ wielk¹ liter¹w ka¿dej etykiecie.

Dobrze: kup samochód | kup mieszkanie

�le: Kup samochód | kup mieszkanie

Jêzyk Wszystkie nazwy jêzykówobcych powinny byæ napisanepo polsku albo ka¿da nazwapowinna byæ napisanaw jêzyku, który reprezentuje.

Dobrze: angielski | hiszpañski | francuski

�le: angielski | Espanol | francuski

Liczba s³ów Wszystkie etykiety powinnymieæ w przybli¿eniu tylesamo s³ów.

Dobrze: utwórz profil | edytuj profil | przeszukaj profile

�le: profil | edytuj profil | przeszukaj wszystkie profile

D³ugo�æ s³ów Etykiety powinny sk³adaæ siêze s³ów o podobnej d³ugo�ci.

Dobrze: kup mieszkanie | kup samochód

�le: kup mieszkanie | kup pojazd rekreacyjny

Page 38: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 139

1. RedEnvelope pozwala wyszukaæ prezentypod k¹tem odbiorcy; ka¿da nazwa kategoriima tê sam¹ budowê �for ..........� (dla ..........).

2. Muzeum Guggenheima pozwala wyszukaæ pracewed³ug jednej z sze�ciu kategorii; ka¿da kategoriawyra¿ona jest pojedynczym rzeczownikiem.

3. BBC News pozwala przeczytaæ artyku³ w wielujêzykach; nazwy jêzyków zapisane s¹ w tychjêzykach i za pomoc¹ odpowiedniego alfabetu.

4. BackRoads oferuje wiele typów wycieczek,ka¿dy typ oznaczony jest za pomoc¹ przymiotnikai rzeczownika.

5. Nerve.com oferuje sze�æ sposobów u¿yciastron z danymi personalnymi, ka¿dy sposóboznaczono dwoma s³owami � czasownikiemi rzeczownikiem.

Kilka dobrych przyk³adów

Page 39: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

140 Projektowanie witryny: organizacja i nawigacja

wskazówki praktyczne

Dlaczego nazwy dzia³ów powinny byæ jasne, nie wymy�lne?Ludzie maj¹ niewyt³umaczaln¹ potrzebê nazywaniawszystkiego. Nazywamy dzieci, zwierzêta, zabawki,miasta, dzielnice i ulice. Wiadomo, ¿e w niektórychsytuacjach nadajemy imiona nawet czê�ciom nasze-go cia³a.

Wydaje siê, ¿e ka¿da bran¿a prowadzi swoj¹w³asn¹ grê nazw. Czasopisma wymy�laj¹ m¹drenazwy ka¿dej sekcji, kolumny czy artyku³u. Firmysamochodowe wynajduj¹ ró¿ne nazwy dla kolejnychmodeli samochodów. Przemys³ kosmetyczny wymy�li³wiêcej nazw dla kolorów lakierów do paznokci ni¿jest gwiazd na niebie1.

Po czê�ci jest toniegro�ny fetysz. Je�lichcemy nadaæ pomy-s³ow¹ nazwê pomy-s³owej kolumnie w na-szym pomys³owymczasopi�mie, to czykto� na tym ucierpi?

W internecie jed-nak ucierpi¹ na tymu¿ytkownicy i naszawitryna. Stosowaniema³o znacz¹cych, wymijaj¹cych nazw dla dzia³ówwitryny prowadzi do zmylenia u¿ytkowników i nara-stania w nich frustracji. Internet nie dostarcza wy-starczaj¹cej liczby wskazówek kontekstowych, byu¿ytkownik móg³ zrozumieæ, ¿e �ciernisty krzew�oznacza �obszar dyskusji�. Je�li nie wiemy, co kryjesiê za odno�nikiem, to jest ma³o prawdopodobne, ¿ewybierzemy go.

�Pod¹¿anie za odno�nikiem mo¿na porównaæ dokupowania miêsa � zapakowanego miêsa� � �miejesiê Martha Brockenbrough, by³a redaktor MSN.com.�Nie chcemy, by by³o opisane tylko jako ,MIÊSO�.Chcemy wiedzieæ, z jakiego zwierzêcia pochodzi.Chcemy znaæ datê wa¿no�ci i chcemy móc obejrzeæprodukt. Ma ju¿ to têczowe zabarwienie, czy wygl¹-da jeszcze dobrze?�

To samo dotyczy internetu. Brockenbrough kon-tynuuje: �Ludzie nie klikaj¹, je�li nie s¹ pewni, gdzieich to zawiedzie. Dlatego bardzo wa¿ne jest, by na-sze oznaczenia by³y bardzo wyra�ne. Jasne ozna-czenia zawsze s¹ lepsze ni¿ zbyt pomys³owe�.

Trudno jest zaakceptowaæ to redaktorom, któryrozpoczêli swoj¹ karierê w wydawnictwach drukowa-nych. Czasopisma i gazety k³ad¹ du¿y nacisk na grês³ów i aliteracje. Jednak takie doskona³e pos³ugiwa-nie siê s³owem jest raczej recept¹ na pora¿kê w in-ternecie.

�W internecie potrzeb-ny jest poziom jasno�ci,którego nie ma w ¿adnyminnym �rodku przekazu�� mówi Jim Frew, projek-tant, który dzieli swój czaspomiêdzy druk i internet.�W czasopismach mo¿nastosowaæ stylizowane na-zwy, które s¹ trochê tajem-nicze. Jednak w internecieka¿da nazwa musi byæoczywista. Nie mo¿na na-

wet wyszukiwania nazwaæ szperaniem�.Oczywi�cie, kiedy� tego nie wiedzieli�my. Na po-

cz¹tku w witrynie HotWired zastosowali�my takie na-zwy dzia³ów, jakich u¿yliby�my w czasopi�mie (np.�Piazza� i �Signal�). Nazwy te by³y chwytliwe, ale ca³-kowicie dezorientowa³y u¿ytkowników. Nie maj¹c do-datkowych podpowiedzi, nie wiedzieli, co maj¹ zro-biæ ani gdzie klikn¹æ.

By³a to dla nas nauczka. Taki problem nie przy-darzy³ siê tylko nam. W ca³ym internecie producencinagminnie pope³niali ten b³¹d.

�Mia³am problemy z nazwami dzia³ów� � przy-znaje Brockenbrough. �Humorystyczn¹ kolumnê JoelaSteina nazwa³am Lúser, co mia³o oznaczaæ codzien-nego u¿ytkownika. By³a to równie¿ gra s³ów z an-gielskim loser � nieudacznik. Niestety, nikt nie ro-zumia³, co mia³am na my�li�.

Jaki jest mora³? �Nie silmy siê na pomys³owo�æ.Nie wymy�lajmy cudacznych nazw. Nie utrudniajmy¿ycia swoim u¿ytkownikom. Nie mówiê, ¿eby w ogó-le nie u¿ywaæ ¿artobliwych tekstów, ale u¿ywajmyich w miejscach mniej krytycznych ni¿ nawigacja�.

W internecie ka¿danazwa musi byæ

ca³kowicie oczywista.Np. nie mo¿nawyszukiwania

nazwaæ szperaniem.Jim Frew

1 W bezchmurn¹ noc, w bardzo ciemnym miejscu,bez dodatkowego sprzêtu optycznego mo¿emyzobaczyæ oko³o 8.768 gwiazd. Je�li policzyliby�mynazwy kolorów lakieru do paznokci na piêtrzez przyborami do makija¿u w sklepie Macy�s,zobaczyliby�my, o ile ta liczba jest wiêksza�

Page 40: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 141

Dziwne nazwyGdy zespó³ przystêpuje do wymy�lania nazw dzia³ów, zazwyczaj pojawiaj¹ siê jakie� problemy. Pierwszyproblem � wewnêtrzny firmowy ¿argon wkrada siê do witryny. Drugi problem � ludzie uwielbiaj¹ nazywaærzeczy i s¹ przy tym bardzo pomys³owi. Jednak niejasne i nieobrazowe nazwy wprowadzaj¹ u¿ytkowników w b³¹d.Zgodnie z ruchem wskazówek zegara od lewej: (1)Nazwy i ikony reprezentuj¹ce dzia³y w witrynie LonelyPlanet s¹ pe³ne wdziêku, ale tajemnicze. Czym jestciernisty krzew (ang. thorn tree)? Tutaj oznacza forumdyskusyjne. (2) Pierwsza strona HotWired oko³o 1994roku zawiera³a przyci¹gaj¹ce wzrokikony i wymy�lne nazwy sekcji, którewprawia³y u¿ytkowników w zak³opota-nie. (3) Sierra Club wymy�li³ nazwy,które trudno rozszyfrowaæ, a ich zgru-powanie � sugeruj¹ce ¿e s¹ ze sob¹jako� powi¹zane � jeszcze pogorszy-³o sprawê. �Currents� (sprawy bie¿¹ce)oznacza wiadomo�ci. Dlaczego auto-rzy nie nazwali dzia³u po prostu �wia-domo�ciami�? �Zoomer� pomaga zna-le�æ witryny na temat spraw lokalnych� dlaczego nie zosta³ nazwany �spra-wy lokalne�? Nazwa �Lewis & Clark�ma o dziwo znaczenie dos³owne �prowadzi do dzia³u po�wiêconego tymosobom. (4) Odwalla stosuje w swojejnawigacji slogany marketingowe typu�Freshology� (�wie¿ologia) i �People toPlanet� (ludzie planecie). (5) 360degre-es pozwoli³o zakra�æ siê ¿argonowitechnicznemu do nawigacji � sekcjao nazwie �Dynamic Data� (dynamicz-ne dane) zawiera funkcje interaktyw-ne, takie jak konkursy i ankiety.

Page 41: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

142 Projektowanie witryny: organizacja i nawigacja

Je�li chcemy byæ pomys³owi, zrealizujmy tê po-trzebê gdzie indziej. Bardzo wa¿ne jest stosowa-nie prostych, jasnych, typowych nazw dzia³ów.Przede wszystkim maj¹ byæ zrozumia³e dla u¿yt-kowników.

Nazwy dzia³ówGrupa 1.

1. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

2. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

3. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

4. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

5. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

6. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

7. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

8. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

9. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

10. .................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

czê�æ praktyczna

Jakich nazw dzia³ów u¿yjemy?

Grupa 2.

1. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

2. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

3. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

4. ...................................................................................

Czy nazwa jest: q krótka q jasna q wolna od ¿argonu

Test spójno�ciCzy nazwy dzia³ów s¹ ze sob¹ zgodnepod wzglêdem:

q u¿ytej czê�ci mowy (rzeczowniki a czasowniki)

q formy

q u¿ycia wielkich liter

q jêzyka

q liczby s³ów

q d³ugo�ci s³ów

Wykrywanie ¿argonuCzy mamy pewno�æ, ¿e ¿adna z tychnazw nie jest:

q akronimem

q s³owem kodowym

q dwuznaczna

q terminem bran¿owym

q sloganem marketingowym

q slangiem

Page 42: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 143

Mia³e� sprawdzaæ pisowniê, a nie krytykowaæ stosowanie symboliki rysunkowej!

!Do dzie³a

Testyfunkcjonalno�ci

Testy z udzia³em jednegou¿ytkownika to sytuacja o stoprocent lepsza ni¿ brak testów.(Steve Krug)

Page 43: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

144 Projektowanie witryny: organizacja i nawigacja

Wcze�niej czy pó�niej ka¿dy projektant interneto-wy odkrywa prost¹ prawdê � je�li witryna ma mieæszansê na powodzenie, u¿ytkownicy musz¹ umieæz niej skorzystaæ. Ten prosty wymóg jest si³¹ napê-dow¹ projektu internetowego. Prawie ka¿da decy-zja projektowa powinna uwzglêdniaæ argumentfunkcjonalno�ci.

�Zapomnieæ o funkcjonalno�ci w internecie totak, jakby zapomnieæ o w¹tku w filmie� � mówiJeffrey Zeldman (www.zeldman.com). �Je�li witrynanie jest funkcjonalna, to tak, jakby nie istnia³a�.

Dobrzy projektanci zawsze maj¹ na uwadze funk-cjonalno�æ, ale nigdy nie mo¿na powiedzieæ, w jakisposób witryna bêdzie u¿ywana, dopóki nie zoba-czymy, jak ludzie pracuj¹ w jej �rodowisku. Tutajw³a�nie dochodz¹ do g³osu testy funkcjonalno�ci.

Testy funkcjonalno�ci daj¹ nam mo¿liwo�æ po-dejrzenia, jak zwykli ludzie korzystaj¹ z naszej wi-tryny w sposób symuluj¹cy normalne zadania u¿yt-kowników. Gdy taki u¿ytkownik nawiguje w naszejwitrynie i próbuje ukoñczyæ zadanie, mo¿emy za-dawaæ mu pytania. Czy rozumie, co oznaczaj¹ ety-kiety, dok¹d prowadz¹ odno�niki i co robi¹ daneprzyciski? Czy interfejs dzia³a zgodnie z oczekiwa-niami odwiedzaj¹cego? Czy u¿ytkownik potrafiukoñczyæ dane zadanie?

Obserwuj¹c ochotników próbuj¹cych interpre-towaæ, nawigowaæ i ogólnie korzystaæ z naszej wi-tryny, dowiadujemy siê, co siê sprawdza, a co siê niesprawdza w naszym projekcie.

Zobaczymy, ¿e nie ma nic tak pouczaj¹cego, jakobserwacja zmagañ prawdziwych u¿ytkowników.A na pewno bêd¹ siê zmagaæ z witryn¹. Bez wzglê-du na to, jak dobry by³by nasz pocz¹tkowy projekti jak utalentowani byliby nasi projektanci, niektóreaspekty interfejsu (np. system nawigacyjny, ozna-czenia lub kolejno�æ elementów) bêd¹ nieuchron-nie myliæ u¿ytkowników naszej witryny.

Nie mo¿na przewidzieæ tego,co mo¿e siê zdarzyæw trakcie testów funkcjonalno�ci.

�Nie mo¿na przewidzieæ tego, co mo¿e siê zda-rzyæ w trakcie testów funkcjonalno�ci� � mówiDoug Bowman, by³y projektant w HotWired i Ter-ra-Lycos. �To, co dla nas jest bardzo jasne i zrozu-mia³e, mo¿e byæ najtrudniejsz¹ w �wiecie spraw¹ dlapiêciu kolejnych u¿ytkowników�.

Piêæ typów testówfunkcjonalno�ci1. Testy zorientowane na zadanieStandardowy test funkcjonalno�ci sprawdza³atwo�æ wykonania zadania w dzia³aj¹cej witrynie.Ochotnicy otrzymuj¹ zadanie do wykonania, a ob-serwator zapisuje ich reakcje i wyniki.

2. Obserwacja przez ramiêZamiast sadzaæ ochotników przy komputerachtestowych, po¿yteczne mo¿e okazaæ siê obserwo-wanie ludzi w ich naturalnym �rodowisku, w któ-rym korzystaj¹ z internetu � w domu lub w biurze.Jest to bardziej antropologiczne podej�cie do te-stów funkcjonalno�ci, które bardziej przybli¿a fak-tyczne odczucia u¿ytkownika. Otrzymujemy pe³-niejszy obraz, w³¹cznie z ba³aganem na biurkui wszystkimi elementami zwyk³ego ¿ycia, np. dzwo-ni¹cym telefonem, p³acz¹cym dzieckiem czy prze-szkadzaj¹cym wspó³pracownikiem.

3. Otwarta eksploracjaW przypadku niektórych typów witryn wiêcej mo¿-na zaobserwowaæ, je�li nie poinstruujemy u¿ytkow-ników, co maj¹ zrobiæ. Po prostu sadzamy u¿yt-kownika przed komputerem i obserwujemy, co siêdzieje. Sposób ten doskonale sprawdza siê w przy-padku witryn rozrywkowych (na przyk³ad z gramiinternetowymi).

4. �ledzenie wzroku�ledzenie wzroku daje bardzo szczegó³owy obraztego, jak u¿ytkownik patrzy na witrynê, jak wodzipo niej wzrokiem. Korzystaj¹c ze specjalnych ka-mer skierowanych w oczy u¿ytkownika, badaczesprawdzaj¹, gdzie dok³adnie patrzy u¿ytkownik, niesugeruj¹c siê tym, co u¿ytkownik mówi lub wska-zuje kursorem.

5. Papierowe prototypyNa bardzo wczesnych etapach projektowania po-mocne mo¿e byæ przedstawienie u¿ytkownikompapierowych prototypów. Takie wczesne testy po-magaj¹ poznaæ reakcje u¿ytkowników na nazwêwitryny i podstawowy projekt. Czy u¿ytkownicy zro-zumiej¹, czym zajmuje siê witryna? Czy intuicyjnieodgaduj¹, co mo¿na w niej zrobiæ i w jaki sposób?

Page 44: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 145

Czego mo¿emy dowiedzieæsiê z testów funkcjonalno�ci?Ogromn¹ zalet¹ testów funkcjonalno�ci jest mo¿-liwo�æ spojrzenia na witrynê oczami kogo� innego.Pomaga to wychwyciæ b³êdy i zdaæ sobie sprawê z ist-nienia problemów, których nie dostrzegamy w trak-cie projektowania witryny.

Testy funkcjonalno�ci to �forma szkoleniaz wra¿liwo�ci� � mówi Michael Twidale, profesorUniwersytetu stanu Illinois w Urbana-Champaign.�Pomagaj¹ nam poznaæ odczucia innych osób�.

�Sztuk¹ dobrego projektowania jest umiejêt-no�æ za³o¿enia okularów i spojrzenia na swój pro-jekt oczami kogo� innego. Jest to bardzo trudne,ale mo¿na to wyæwiczyæ, patrz¹c, jak inne osoby ko-rzystaj¹ z naszego systemu�.

W³a�nie do tego s³u¿¹ testy funkcjonalno�ci.�Przygl¹daj¹c siê sesjom badañ z u¿ytkownikami,zmieni³em swój pogl¹d na projektowanie� � mówiDoug Bowman. �Testy nie tylko pomagaj¹ w po-prawieniu testowanego projektu, ale tak¿e pozosta-wiaj¹ pewne przemy�lenia w naszej g³owie. Gdy pro-jektujemy kolejn¹ witrynê, automatycznie my�limyo tym, co zauwa¿yli�my kiedy� podczas sesji badañz u¿ytkownikami i instynktownie wiemy, jak u¿yt-kownik mo¿e zachowaæ siê na takiej stronie�.

Jednak bez wzglêdu na to, w ilu testach projek-towanych przez siebie witryn uczestniczyli�my, ka¿-dy nowy interfejs trzeba przetestowaæ. Trzeba to zro-biæ, poniewa¿ im d³u¿ej pracujemy nad witryn¹,tym trudniej jest nam zachowaæ dystans do niej.I bez wzglêdu na nasz stopieñ znajomo�ci zacho-wañ u¿ytkowników, zawsze mo¿emy zostaæ zasko-czeni czym� nowym�.

�Zawsze przydarzaj¹ siê jakie� niespodzianki�� przyznaje Greg Dotson, pracuj¹cy w Guru.�Badania funkcjonalno�ci pozwalaj¹ znale�æ pro-ste, przeoczone b³êdy. �wietnie sprawdzaj¹ siê tak-¿e w potwierdzaniu, ¿e dobre cechy projektu s¹ na-prawdê dobre�.

�Nie mogê sobie wyobraziæ w projektowaniuscenariusza, w którym testy funkcjonalno�ci nie by-³yby pomocne� � mówi projektant Doug Bow-man. �Nasze przewidywania, jak kto� inny bêdziekorzysta³ z witryny, mog¹ siê ca³kowicie ró¿niæ odfaktycznych zachowañ u¿ytkownika próbuj¹cegoskorzystaæ z witryny�.

Czasami nasze odkrycia bêd¹ wydawa³y siê oczy-wiste. Greg Dotson mówi: �Po przeprowadzeniu te-stów czêsto zastanawiamy siê, jak mogli�my byæ tacyg³upi i tego nie zauwa¿yæ�. Ale czasami wyniki s¹ca³kowicie nieprzewidywalne.

�Jest to bardzo interesuj¹ce� � mówi SteveMulder, ekspert pracuj¹c dla Lycos. �Czasami poprostu nie wiemy, dlaczego co� nie dzia³a�.

W ka¿dym z tych przypadków najcenniejsze wnio-ski, wyci¹gane z wyników testów funkcjonalno�ci,to w³a�nie te problemy, których nie dostrzegali�my,poniewa¿ byli�my za bardzo zaanga¿owani w projekt.

�Testy z u¿ytkownikami ods³aniaj¹ problemy, któ-rych po prostu nie dostrzegaj¹ ludzie znaj¹cy firmê,produkt oraz internet� � mówi Lance McDaniel,wiceprezes SBI & Co. �Te odkryte niespodzianki s¹moim zdaniem prawdziwym darem niebios, ponie-wa¿ przed udostêpnieniem witryny dziesiêciu milio-nom osób lepiej jest zauwa¿yæ problem, który by³oczywisty dla wszystkich o�miu testuj¹cych projekt�.

Pokazuj¹c u¿ytkownikom witrynê we wcze-snych fazach projektowania, mo¿emy oceniæ swojeza³o¿enia i wy³apaæ problemy na tyle wcze�nie, bymóc je jeszcze poprawiæ. Niektóre problemy � ta-kie jak myl¹ce oznaczenia � mo¿na ³atwo usun¹æ.Inne niestety mog¹ byæ trudniejsze do poprawienia.Czasami testy funkcjonalno�ci wykazuj¹ problemybardzo g³êboko zakorzenione w projekcie. Mo¿e-my odkryæ b³êdy w funkcjonalno�ci lub organiza-cji witryny, przez co trzeba bêdzie od nowa prze-my�leæ ca³y projekt i sposób podej�cia do niego.

Co mo¿na odkryæ podczastestów funkcjonalno�ci:n Problemy w organizacji witryny. Czasami

zawarto�æ witryny mo¿e zostaæ zorganizowanainaczej ni¿ spodziewaj¹ siê tego u¿ytkownicy.Mo¿e to bardzo spowalniaæ transakcjelub nawet uniemo¿liwiaæ u¿ytkownikomukoñczenie zadania (zobacz równie¿�Organizacja witryny�, str. 112).

n Problemy z nazwami lub oznaczeniami.Czêsto nazwy stosowane dla dzia³ów witrynyi odno�ników wprowadzaj¹ u¿ytkownikóww b³¹d. Elementy mog¹ byæ w pe³nifunkcjonalne, ale u¿ytkownicy � nierozumiej¹c oznaczeñ � nie bêd¹ potrafiliich znale�æ, a tym bardziej u¿yæ (zobacz�Nazywanie dzia³ów witryny�, str. 136).

Page 45: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

146 Projektowanie witryny: organizacja i nawigacja

n Problemy z rozmieszczeniem.Czêsto u¿ytkownicy bêd¹ intuicyjnie szukaliprzycisku lub odno�nika w jakie� czê�ciekranu (np. odno�nik do �koszyka�w prawym górnym rogu). Je�li u¿ytkownik siêwaha i przewija stronê, prawdopodobniema trudno�ci ze znalezieniem tego, czegoszuka (zobacz równie¿ �Jak ludzie widz¹witryny internetowe?�, str. 100).

n Problemy z grupowaniem. U¿ytkownicyintuicyjnie oczekuj¹, ¿e zwi¹zane ze sob¹elementy powinny byæ zgrupowane.Mog¹ czuæ zak³opotanie, widz¹c zgrupowaneelementy, które ich zdaniem nie s¹ ze sob¹w ¿aden sposób zwi¹zane lub je�li powi¹zaneelementy bêd¹ rozrzucone na stronie(zobacz równie¿ �Dwana�cie systemównawigacyjnych�, str. 128).

n Problemy z tempem lub kolejno�ci¹czynno�ci. Gdy u¿ytkownicy realizuj¹transakcjê, maj¹ pewne oczekiwania codo nastêpnego jej etapu. Niekiedy kolejno�æmo¿na negocjowaæ, ale czasami nie podlegaona dyskusji. W opinii u¿ytkownikówpodanie numeru karty kredytowej na pewnojest ostatnim etapem transakcji. Je�li dodamykolejny etap po obci¹¿eniu karty p³atniczej,u¿ytkownicy mog¹ go nawet nie zauwa¿yæ.

Czego nie mo¿emy siê dowiedzieæ�Chocia¿ testy funkcjonalno�ci s¹ bardzo potê¿nymnarzêdziem, to nie s¹ panaceum. Nie mog¹ rozwi¹-zaæ wszystkich problemów naszej witryny lub za-pobiec jej pora¿kom. Nie s¹ tak¿e substytutem wcze-�niejszych badañ na temat odbiorców.

�Trzeba po�wiêciæ swój czas i zrozumieæ klien-tów. Testy funkcjonalno�ci to tylko czê�æ procesupoznawania klientów� � wyja�nia Mike Kunia-vsky, autor ksi¹¿ki Observing the User Experience: A Prac-titioner�s Guide for User Research.

�Zanim przejdziemy do przeprowadzenia te-stów funkcjonalno�ci, powinni�my z ca³¹ pewno�ci¹

wiedzieæ, kim s¹ nasi odbiorcy, znaæ problemy, któ-rym stawiaj¹ czo³a i wiedzieæ, ¿e mamy rozwi¹zanie,którego bêd¹ chcieli u¿ywaæ� � kontynuuje Kunia-vsky. �Testy funkcjonalno�ci mog¹ jedynie wykazaæ,czy stworzone rozwi¹zanie nadaje siê do u¿ytku�.

To, ¿e funkcja jest zrozumia³a i da siê u¿ywaæ,nie �wiadczy jeszcze o tym, ¿e bêdzie stosowana.�Najlepszym przyk³adem s¹ kosze z promocyjny-mi p³ytami w sklepach muzycznych. To, ¿e s¹ pe³-ne, nie oznacza, ¿e kto� ich potrzebuje�.

Tê ostatni¹ informacjê trudno przekazaæ, ponie-wa¿ wielu orêdowników przeprowadzania testówfunkcjonalno�ci myli umiejêtno�æ wykonania za-dania z zainteresowaniem tym zadaniem.

�Zaskakuj¹ce jest, jak wiele z³ych decyzji podjê-to na temat witryn, argumentuj¹c je wynikami te-stów funkcjonalno�ci� � mówi Adam Berliantz Microsoft. �Dlaczego? Poniewa¿ funkcjonalno�ænie ma nic wspólnego z tym, czy ludzie faktyczniebêd¹ z czego� korzystaæ. Istnieje ró¿nica miêdzypytaniem, czy kto� potrafi obs³ugiwaæ ekspres dokawy, a pytaniem, czy bêdzie u¿ywaæ tego ekspresu�.

�Przeprowadzaj¹c badania na w³asny u¿ytek,najpierw sprawdzam, czy ludzie bêd¹ u¿ywali mo-jego rozwi¹zania. Je�li odpowied� na to pytaniebrzmi: �Tak�, to wtedy robiê wszystko, by mojerozwi¹zanie by³o funkcjonalne�.

Czego nie mo¿na dowiedzieæ siêz testów funkcjonalno�ci:n Czy dana funkcja bêdzie u¿ywana.

W czasie testów funkcjonalno�ciprzeprowadzamy ochotników przez zadanie,które musz¹ zrealizowaæ, korzystaj¹cz funkcji naszej witryny. Z takich badañmo¿emy jedynie dowiedzieæ siê, czy ludziepotrafi¹ u¿ywaæ naszych narzêdzi, ale niemo¿emy wywnioskowaæ, czy bêd¹ ich u¿ywaæ.

n Czy umie�cili�my w witrynie odpowiedniefunkcje. Czasami z testów mo¿e wynikaæ,jakie funkcje powinny byæ dodane (na przyk³adwtedy, gdy u¿ytkownik nie jest w stanieukoñczyæ jakiego� zadania). Ale testy niepowiedz¹ nam, czy wybrali�my odpowiednienarzêdzia. �Testy funkcjonalno�ci mog¹nam jedynie pokazaæ, czy kto� jest w stanieukoñczyæ zadanie� � mówi Jeffrey Veen.�Ale nic wiêcej naprawdê nie wyka¿¹�.

Zapytajmy ekspertówPytanie: Jakie jest najbardziej b³êdne przekonanie klientów?Jeffrey Veen: �S¹dz¹, ¿e funkcjonalno�æ to rozwi¹zanie.Tak naprawdê funkcjonalno�æ jest raczej narzêdziemsprawdzania pisowni�� (pe³na odpowied� w ramce �Dlaczegotesty funkcjonalno�ci mog¹ siê nie powie�æ?�, str. 150).

Page 46: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 147

Je�li dysponujemy przyzwoitym � lub nawet skrom-nym � bud¿etem na stworzenie witryny, powinni�myzainwestowaæ w profesjonalne testy funkcjonalno�ci,prowadzone przez ekspertów funkcjonalno�ci w �ro-dowisku laboratoryjnym.

Je�li jest to nieosi¹galne przy naszym bud¿ecie,powinni�my sami przeprowadziæ testy, po�wiêcaj¹c nanie kilka godzin i wykorzystuj¹c do tego paru ochotni-ków. Nawet tak proste rozwi¹zanie mo¿e nam ujawniæwiele wa¿nych spostrze¿eñ.

�Nawet test z jednym u¿ytkownikiem daje nam bar-dzo du¿o� � mówi profesor Uniwersytetu Stanu IllinoisMichael Twidale, który udzieli³ zamieszczonych poni-¿ej wskazówek. A jak mawia Steve Krug w swojej wspa-nia³ej ksi¹¿ce Don�t Make Me Think �Testy z udzia³emjednego u¿ytkownika to sytuacja o sto procent lepszani¿ brak testów�.

1. Przygotowanie �laboratorium�Oczywi�cie, testy mo¿emy przeprowadziæ, siedz¹c zaplecami naszego wspó³pracownika i przygl¹daj¹c siê,jak korzysta on z naszej nowej witryny. Je�li chcemy,by testy by³y bardziej profesjonalne, powinni�my naj-pierw przygotowaæ prawdziwe laboratorium funkcjo-nalno�ci.

W wiêkszo�ci laboratoriów ochotnik sadzany jestprzy komputerze z kamer¹, która rejestruje wyraz jegotwarzy. Druga kamera rejestruje, co dzieje siê w tymsamym czasie na ekranie. Przekaz wideo jest wyko-rzystywany na dwa sposoby � jest nagrywany na ta-�mê (na przysz³y u¿ytek i do badañ) oraz jest wy�wie-tlany w przyleg³ym pokoju, gdzie obserwatorzy mog¹na ¿ywo ogl¹daæ test, widz¹c u¿ytkownika na jednymekranie, a obraz z przegl¹darki na drugim. W niektó-rych laboratoriach pokój z ochotnikami i pokój z obser-watorami oddzielone s¹ lustrem weneckim.

Potrzebny sprzêt:n komputer z dostêpem do internetu lub do witryny,

któr¹ zamierzamy testowaæ,

n kamera wideo lub kamera cyfrowa,

n przyleg³y pokój ze sprzêtem wideo (opcjonalne),

n ekran pokazuj¹cy obraz z monitora u¿ytkownika(opcjonalne),

n drugi ekran, na którym bêdzie wy�wietlana twarzu¿ytkownika (opcjonalne).

2. Rekrutacja ochotnikówOchotnicy, jakich rekrutujemy, maj¹ ogromny wp³yw nato, co uda siê nam odkryæ. Profesjonalne laboratoriafunkcjonalno�ci zazwyczaj wybieraj¹ osoby z d³ugiejlisty potencjalnych wolontariuszy, zwerbowanych przezfirmy badawcze.

Rekrutujemy ochotnikówJe�li chcemy przeprowadziæ testy na du¿¹ skalê, za-pewne bêdziemy chcieli zatrudniæ profesjonaln¹ firmêrekrutacyjn¹. Mo¿emy jednak rekrutowaæ u¿ytkownikówtestowych w du¿o tañszy i mniej formalny sposób, szu-kaj¹c ich w�ród nastêpuj¹cych grup:

n Klienci. Istniej¹cy klienci s¹ �wietnymi kandydatamido przeprowadzenia testów funkcjonalno�ci,poniewa¿ s¹ ju¿ zapoznani z naszymi produktamii zainteresowani nimi. Klientów mo¿na próbowaæzachêciæ osobi�cie lub zwerbowaæ ochotników,umieszczaj¹c og³oszenie w witrynie.

n Wspó³pracownicy. Jest to grupa dobrych testerówinterfejsu przy za³o¿eniu, ¿e pracownicy cinie uczestnicz¹ bezpo�rednio w pracach nadtestowanym produktem. Pamiêtajmy tak¿e, ¿eosoby zwerbowane wewn¹trz firmy wiedz¹ du¿owiêcej na temat produktu ni¿ prawdziwi u¿ytkownicy.Ich odpowiedzi mog¹ byæ tak¿e umotywowanestosunkami spo³ecznymi panuj¹cymi w firmie.

n Przyjaciele i rodzina. Nie ma nic z³egow poproszeniu przyjació³ i cz³onków rodzinyo pomoc w testowaniu nowej witryny. Pamiêtajmyjednak, ¿e mog¹ oni nie byæ ca³kowicie szczerzy.Ich odpowiedzi mog¹ byæ bardziej dyplomatyczneni¿ odpowiedzi normalnych u¿ytkowników (chocia¿mog¹ byæ równie dobrze mniej dyplomatyczne �wszystko zale¿y od tego, jakich mamy przyjació³).

Ochotnicy do badañOchotnicy powinni jak najlepiej pasowaæ do profilu do-celowego u¿ytkownika:

n Poziom znajomo�ci tre�ci. Je�li witryna jestdedykowana osobom o specyficznychzainteresowaniach, potrzebach lub poziomieznajomo�ci zagadnienia, nasi ochotnicy te¿powinni siê tym cechowaæ.

n Poziom znajomo�ci technologii. Ochotnicypowinni pasowaæ do odbiorców pod wzglêdemznajomo�ci technologii internetowych.

Tani sposób przeprowadzenia testów

Page 47: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

148 Projektowanie witryny: organizacja i nawigacja

n Poziom znajomo�ci komputera. Ochotnicypowinni umieæ swobodnie korzystaæ z komputerai przegl¹darki.

3. Przygotowanie zadaniaNiektóre testy s¹ zadaniami otwartymi, umo¿liwiaj¹cymiochotnikom swobodne eksplorowanie interfejsu i chodze-nie w³asnymi drogami. Rozwi¹zanie takie jest dobretylko w przypadku niektórych witryn i tylko w niektórychzastosowaniach. Ogólnie nie jest to zalecana technika.

Powinni�my raczej przygotowaæ kilka zadañ do wy-konania w witrynie. Dziêki temu u¿ytkownicy aktywniejanga¿uj¹ siê w test, a ca³o�æ bardziej przypomina rze-czywisty �wiat (poniewa¿ wiêkszo�æ u¿ytkownikówprzybywaj¹cych do witryny ma ju¿ wytyczony cel).

Najpierw dodajmy otuchyOchotnicy na pewno bêd¹ trochê zdenerwowani, przy-stêpuj¹c do testu. Dali�my im zadanie do wykonaniai dlatego czuj¹ siê tak, jakby byli sprawdzani (i tak jakw szkole oceniani za swoje wyniki). Zdenerwowani u¿yt-kownicy nie pomog¹ nam w uzyskaniu realistycznychi przydatnych wyników, dlatego trzeba dodaæ im otuchyi zapewniæ, ¿e to oni testuj¹ system, a nie odwrotnie.

W³a�nie to mo¿emy im powiedzieæ. Mike Kuniavsky,autor ksi¹¿ki Observing the User Experience i za³o¿y-ciel laboratorium funkcjonalno�ci w Wired, zawsze za-czyna³ testy od zapewnienia u¿ytkowników s³owami:�Pamiêtajcie, ¿e to wy testujecie interfejs, a nie inter-fejs testuje was. B³êdne wykonanie zadania nie jestmo¿liwe�.

Opiszmy zadanieOpiszmy ochotnikowi prawdopodobny scenariusz tego,co ma zrobiæ w witrynie � czy ma zlokalizowaæ sklep,przelaæ pieni¹dze w witrynie banku lub znale�æ zdjêciekarlika malutkiego. Wa¿ne jest, by ochotnik rozumia³,co ma osi¹gn¹æ w witrynie, nawet je�li jest to co�, cze-go sam nigdy by nie robi³.

Nie przeszkadzajmyTrzeba powstrzymaæ siê od podpowiadania testowe-mu u¿ytkownikowi, co ma zrobiæ. Jest to trudne zada-nie, je�li testujemy witrynê, któr¹ sami stworzyli�my(chcemy wyja�niæ jej strukturê, broniæ przed zarzutamilub pokazaæ najciekawsze funkcje). Ale musimy pozwo-liæ u¿ytkownikowi samemu zmagaæ siê z ni¹, je�li chce-my zobaczyæ, jak ludzie bêd¹ sobie radziæ poza labo-ratorium funkcjonalno�ci.

4. ObserwacjaGdy ochotnik wykonuje przydzielone mu zadanie, trze-ba zachowywaæ siê cicho i uwa¿nie obserwowaæ go.W naszych obserwacjach powinni�my zwróciæ szcze-góln¹ uwagê na:

n �cie¿kê u¿ytkownika. W my�lach pod¹¿ajmy�cie¿k¹ u¿ytkownika przez witrynê i zwróæmyuwagê, w których miejscach odchodzi on odzalecanej lub spodziewanej trasy. Zwróæmy uwagê,jak zachowuje siê, gdy znajdzie siê w ��lepej uliczce�� czy potrafi cofn¹æ siê i naprawiæ swoj¹ pomy³kê?

n Wahanie. Zwróæmy uwagê, kiedy u¿ytkownik siêwaha lub nie wie, co zrobiæ (pewnie je�dzikursorem nad kilkoma odno�nikami). W takimmiejscu powinni�my dopracowaæ interfejs. Nawetje�li nasz testowy u¿ytkownik wybierze w koñcudobr¹ drogê, to inny mo¿e siê tutaj pomyliæ.

n Szukanie i przewijanie strony. Zwróæmy uwagêna sytuacje, w których ochotnik szuka jakiego�odno�nika, ale nie potrafi go znale�æ.

n Reakcje emocjonalne. Zwróæmy uwagê,gdy ochotnik wyrazi zdziwienie lub frustracjê.

Zadawajmy pytania. Gdy nabierzemy ju¿ trochê wpra-wy w przeprowadzaniu testów, mo¿emy zacz¹æ zada-waæ pytania, aby zrozumieæ sposób my�lenia testowegou¿ytkownika. Powinni�my jednak zwróciæ uwagê na to,jak formu³ujemy pytania.

n Zadawajmy pytania otwarte. Nie pytajmy,czy co� wygl¹da jak odno�nik do stron z pomoc¹,tylko �jak my�lisz, co mo¿e znajdowaæ siê zatakim odno�nikiem?�

Nie pytajmy �Dlaczego to zrobi³e�?� Ludziekojarz¹ to pytanie ze szko³¹. Mog¹ staæ siêdefensywni i próbowaæ wymy�liæ jak¹kolwiekzaspokajaj¹c¹ nas odpowied�.

n Nie pytajmy �Dlaczego to zrobi³e�?� ProfesorMichael Twidale uwa¿a, ¿e ludzie kojarz¹ topytanie ze szko³¹. Mog¹ uchylaæ siê od odpowiedzilub te¿ mog¹ wymy�liæ jak¹kolwiek odpowied�.�Tak sformu³owane pytanie sugeruje, ¿e zrobili co��le. Lepiej zapytaæ � Jak my�lisz, co zasugerowa³ociê, ¿eby tak post¹piæ?� � mówi profesor.

n Powiedzmy tylko �hmm�. Gdy chcemyzrozumieæ, co powoduje frustracjê lub zagubienie,mo¿emy zachêciæ ochotnika do wypowiedzi,

Page 48: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 149

mówi¹c �hmm�. Twidale kontynuuje: �jest tobardzo dziwne, ale ludzie czêsto rozwijaj¹ swojewypowiedzi w³a�nie wtedy, gdy powiemy zwyk³ehmm, zamiast spytaæ ich, co my�l¹. Konkretnepytania czêsto wprawiaj¹ ich w zak³opotanie.Natomiast zwyk³e hmm mo¿e sprawiæ, ¿e zaczn¹dok³adniej opowiadaæ, co my�l¹ na dany temat�.

5. Zidentyfikowanie problemówPatrz¹c, jak ochotnicy zmagaj¹ siê z interfejsem na-szej witryny, mo¿emy szybko zidentyfikowaæ g³ówneproblemy z funkcjonalno�ci¹. Zazwyczaj ma³y test, prze-prowadzony przy pomocy od trzech do piêciu u¿ytkow-ników, odkryje wszystkie wiêksze b³êdy interfejsu. Przy-gl¹daj¹c siê zachowaniu ochotników, powinni�my umieæwskazaæ nie tylko problematyczne obszary, ale tak¿eprzyczyny tych problemów. Szczególn¹ uwagê powin-ni�my zwracaæ na:

n problemy z rozmieszczeniem elementów,

n problemy z oznaczeniami,

n problemy z grupowaniem,

n problemy z tempem lub kolejno�ci¹ wykonywaniaczynno�ci,

n problemy z modelem funkcjonalnym projektu.

Je�li wcze�nie w procesie testowania wykryjemy pro-sty problem (np. przy pierwszym ochotniku), mo¿emyszybko poprawiæ go przed rozpoczêciem testów z ko-lejnym ochotnikiem. Usuwaj¹c pocz¹tkow¹ przeszko-dê, mo¿emy skupiæ siê na innych, mniej oczywistychproblemach.

6. Wynagrodzenie ochotnikówJe�li zamierzamy wykorzystaæ czyj� czas, powinni�mymu to jako� wynagrodziæ. W standardowych testachochotnikom p³aci siê gotówk¹. Ale ludzi mo¿na moty-wowaæ tak¿e czym� innym. Mog¹ to byæ firmowe ma-teria³y reklamowe, takie jak koszulki, torby, kubki z logoproduktu lub na przyk³ad jaki� produkt naszej firmy. Nawynagrodzenie nadaj¹ siê tak¿e bony towarowe(zw³aszcza na darmowy posi³ek w restauracji czy bile-ty do kina). Je�li rekrutujemy testowych u¿ytkownikóww�ród pracowników firmy, mo¿emy ich motywowaæ, ofe-ruj¹c im wolny dzieñ.

Page 49: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

150 Projektowanie witryny: organizacja i nawigacja

wskazówki praktyczne

Dlaczego testy funkcjonalno�ci mog¹ siê nie powie�æ?Testy funkcjonalno�ci to chyba najlepsza sprawaw historii rozwoju internetu. Nie s¹ jednak zawszeniezawodne. Projektant Jeffrey Zeldman napisa³w swojej ksi¹¿ce Taking Your Talent to the Web: �Jestdobre testowanie funkcjonalno�ci i jest bezu¿ytecz-na pseudonauka, promuj¹ca banalno�æ. Niestety, do-póki nie zaczniemy wspó³pracowaæ z agencj¹ inter-netow¹, nie mo¿emy powiedzieæ, czy stosowaneprzez ni¹ metody testowania daj¹ przydatne infor-macje, czy prowadz¹ na manowce�.

Je�li nie chcemy zostaæ sprowadzeni na ma-nowce, musimy umieæ rozpoznaæ znaki ostrzegaw-cze. Testy funkcjonal-no�ci mog¹ nie udaæ siêw kilku sytuacjach:

1. Je�li nie wiemy, cotestujemy. Przed rozpo-czêciem testów musimypodj¹æ decyzjê, jakieaspekty witryny chcemyprzetestowaæ. Pomagato skoncentrowaæ siêw czasie testów i igno-rowaæ zbêdne wska-zówki uczestnicz¹cegow te�cie wolontariusza.

�Jednym z kluczy do testowania jest ustalenie,jakie informacje chcemy uzyskaæ, poniewa¿ nie kon-trolujemy, co komentuje osoba testuj¹ca� � mówiLance McDaniel, wiceprezes firmy SBI & Co. Na przy-k³ad, wolontariusze uwielbiaj¹ mówiæ o kolorach.�Klient mówi wtedy, ¿e testuj¹cym nie podoba³ siêkolor. Powinni�my odpowiedzieæ, ¿e nie testujemykoloru; testujemy proces zamawiania, co do któregonie by³o zarzutów�.

2. Je�li testujemy co�, co nie mo¿e zostaæ zmie-nione. Wiele testów funkcjonalno�ci zmarnowano,poniewa¿ osoby przeprowadzaj¹ce test lub wolonta-riusze skupiali siê na elementach witryny lub inter-fejsu, których nie mo¿na zmieniæ.

�Zanim zaczniemy testy, musimy wiedzieæ, como¿na, a czego nie mo¿na zmieniæ w witrynie� �mówi projektant Jim Frew. �Je�li nasz znak graficznyzawsze by³ i zawsze bêdzie zielony, nie pytajmy, czypowinien byæ czerwony. Nigdy nie bêdzie czerwony�.

3. Je�li testujemy co�, co nie ma znaczenia. Zbytczêsto testy funkcjonalno�ci prowadz¹ donik¹d, po-

niewa¿ dotycz¹ aspektówwitryny lub jej interfejsunie wp³ywaj¹cych na funk-cjonalno�æ witryny. Po-nownie prym wiedzie ko-lor. Ludzie uwielbiaj¹komentowaæ niew³a�ciwyich zdaniem dobór kolo-rów. Kolor faktyczniewp³ywa na odbiór witrynyprzez u¿ytkownika, alerzadko ma znaczenie dlafunkcjonalno�ci, chyba ¿e

powoduje nieczytelno�æ tekstu w witrynie.�Ludzie nie opuszczaj¹ witryny dlatego, ¿e nie

lubi¹ fioletu� � mówi Lance McDaniel. �Opuszczaj¹witrynê, je�li za d³ugo siê ³aduje, je�li nie potrafi¹ zna-le�æ tego, czego szukaj¹ lub je�li w witrynie nie matego, co ich interesuje�.

4. Je�li przeprowadzaj¹cy test nie przygotowa³dobrego scenariusza. Gdy przeprowadzamy testyfunkcjonalno�ci we w³asnym zakresie, musimy upew-niæ siê, ¿e osoby nadzoruj¹ce testy wyra�nie, zwiê�-le i obiektywnie wyja�ni³y wolontariuszom, czego odnich oczekujemy.

Naprawdê trudnojest wierzyæ danym,

poniewa¿ na ichpodstawie ka¿dy

mo¿e sformu³owaæinne wnioski.

Sheryl Cababa

Page 50: Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Projektowanie witryny: organizacja i nawigacja 151

�Uczestniczy³em w ró¿nych testach. Zauwa¿y³em,¿e niektóre osoby przeprowadzaj¹ce testy nie zawszewiedz¹, w jaki sposób zachêciæ u¿ytkowników lub jakkierowaæ procesem testowania � mówi projektantJim Frew. �Ca³e testowanie nie mia³o sensu, ponie-wa¿ osoba przeprowadzaj¹ca test nie potrafi³a uzy-skaæ od u¿ytkownika odpowiednich opinii�.

5. Je�li ochotnik nie jest typowym u¿ytkownikiem.Najwa¿niejszym celem testów funkcjonalno�ci jestpoznanie sposobu my�lenia u¿ytkownika w czasiewykonywania typowych zadañ w witrynie. Nie udasiê nam to, je�li ochotnicy nie bêd¹ stanowiæ repre-zentatywnej grupy naszych odbiorców. Gdy ochotnicyznacznie ró¿ni¹ siê od typowego u¿ytkownika podwzglêdem nastawienia, umiejêtno�ci, komputerowegodo�wiadczenia (wiedz¹ zbyt wiele lub zbyt ma³o z da-nego tematu lub na tematinternetu), uzyskane wyni-ki nie bêd¹ poprawne.

�Nasze badania bêd¹wielokrotnie lepsze, je�liu¿ytkownicy, z którymirozmawiamy, bêd¹ po-dobni do naszych odbior-ców� � mówi JeffreyVeen. �Im wiêcej wysi³kuw³o¿ymy w rekrutacjê, tymbardziej wiarygodne bêd¹wyniki testów�.

6. Je�li wyniki zostan¹ �le zinterpretowane. Testyfunkcjonalno�ci mo¿na interpretowaæ w ró¿ny spo-sób. Wnioski wyci¹gniête z tego samego testu mog¹siê znacznie ró¿niæ w zale¿no�ci od profesji i osobo-wo�ci obserwatora. Projektant, in¿ynier, sprzedaw-ca mog¹ mieæ bardzo ró¿ne spostrze¿enia. �le zin-terpretowany dobry test jest gorszy ni¿ z³y test.

�Gdy tworzony przeze mnie produkt ma byæ te-stowany, staram siê obserwowaæ ka¿dy test� � mówiSheryl Cababa, projektantka produktów w Microsoft.�Widzê wtedy, jak in¿ynierowie funkcjonalno�ci pod-sumowuj¹ zebrane dane i jakie wnioski z nich wyci¹-gaj¹. Mog¹ byæ one ca³kowicie inne ni¿ wnioski, któ-re ja bym wyci¹gnê³a. Naprawdê trudno jest wierzyædanym, poniewa¿ na ich podstawie ka¿dy mo¿e sfor-mu³owaæ inne wnioski�.

7. Je�li próbujemy sprawdziæ, czy dane narzêdziebêdzie u¿ywane. Jest to klasyczny problem testówfunkcjonalno�ci � ludzie interpretuj¹ pozytywne wy-niki testów jako potwierdzenie, ¿e tworz¹ odpowied-ni¹ rzecz. Jednak testy funkcjonalno�ci nie mog¹ namtego powiedzieæ. Testy funkcjonalno�ci mog¹ daæ je-dynie informacjê, czy ludzie rozumiej¹ i wiedz¹, jaku¿ywaæ danego narzêdzia, gdy musz¹ go u¿yæ. Niemówi¹ jednak nic o tym, czy dane narzêdzie bêdziedobrowolnie stosowane.

Jak ujê³a to Martha Brockenbrough, by³a redaktorMSN: �Testy funkcjonalno�ci nie mog¹ sprawdziæ, czydane narzêdzie bêdzie faktycznie u¿ywane�.

8. Je�li testerzy lub ochotnicy s¹ nieprzyja�nienastawieni. Je�li testy funkcjonalno�ci (lub ichwyniki) wpadn¹ w niepowo³ane rêce, mog¹ staæ siê

broni¹ w utarcz-kach miêdzy pra-cownikami, takpowszechnychw firmach. Testermo¿e zasugero-waæ u¿ytkowniko-wi jakie� szcze-gólne wnioski,a osoba analizu-j¹ca wyniki mo¿ezinterpretowaæ jezgodnie z celami

w³asnymi lub celami swojego wydzia³u. Sami wolon-tariusze mog¹ mieæ wp³yw na koñcowe wyniki, je�li¿ywi¹ jak¹� niechêæ do firmy, witryny lub �wiata.

9. Je�li oczekujemy, ¿e rozwi¹¿¹ wszystkie na-sze problemy. �Najbardziej b³êdnym przekonaniem,jakie miewaj¹ klienci, jest to, ¿e funkcjonalno�æ jestrozwi¹zaniem� � mówi Jeffrey Veen. �Funkcjonal-no�æ przypomina sprawdzanie pisowni. Sprawdze-nie pisowni nie ulepszy naszego eseju, a jedyniepoprawi w nim b³êdy. Z funkcjonalno�ci¹ jest podob-nie. Jest to ostatnia czynno�æ w d³ugim procesie po-znawania naszych u¿ytkowników. Jest to jedyniesprawdzenie, ¿e nasze za³o¿enia by³y poprawne�.

Funkcjonalno�æprzypomina sprawdzaniepisowni. Sprawdzeniepisowni nie ulepszynaszego eseju, a jedyniepoprawi w nim b³êdy.Jeffrey Veen